PageAI

PageAI is an AI-powered web design analysis tool that uses Google's Vertex AI to detect and analyze components in web page designs.

Project Overview

PageAI takes a web page mockup image and does two things:

1. Detects UI components (buttons, inputs, cards, headings, etc.) using a multimodal LLM, and draws annotated bounding boxes on the image.
2. Generates a React + shadcn/ui component from those detections, ready to drop into a shadcn/ui project.

The model provider is pluggable via PAGEAI_PROVIDER=gemini|claude, so you can swap between Vertex AI Gemini and the Anthropic API without touching code.

Features

• Mockup image upload
• Vision-model component detection with bounding-box annotation
• React + shadcn/ui JSX codegen (deterministic skeleton + LLM refinement)
• Pluggable provider abstraction (Gemini by default, Claude optional)

See SCOPE.md for the original roadmap. The current build intentionally narrows that scope to the image-to-JSX loop.

Prerequisites

Before you begin, ensure you have met the following requirements:

• Python 3.9+
• A Google Cloud account with Vertex AI API enabled
• A service account key with necessary permissions for Vertex AI

Setup

1. Clone the repository:

   git clone https://github.com/your-username/pageai.git
   cd pageai

2. Create a virtual environment and activate it:

   python -m venv venv
   source venv/bin/activate  # On Windows use `venv\Scripts\activate`

3. Install the required dependencies:

   pip install -r requirements.txt

4. Set up your Google Cloud credentials:

   • Place your service account key JSON file in the project root
   • Create a .env file in the project root with the following content:

     GOOGLE_APPLICATION_CREDENTIALS=./your-service-account-key.json
     VERTEX_PROJECT_ID=your-project-id
     VERTEX_LOCATION=us-central1
     VERTEX_MODEL_NAME=gemini-1.5-flash-001

   Replace your-service-account-key.json and your-project-id with your actual values.

Usage

1. Start the Flask application:

   python app.py

2. Open a web browser and navigate to http://localhost:8000

3. Upload an image of a web page design

4. View the processed image with detected components and their details

Project Structure

• app.py — Flask routes (upload, process, serve image)
• config.py — Configuration loaded from environment
• pageai/ — Core package
  • models.py — DetectedComponent, BoundingBox dataclasses
  • detection.py — Prompt wiring, response parsing, image annotation
  • codegen.py — shadcn/ui JSX generator (skeleton + LLM refinement)
  • providers/ — GeminiProvider, ClaudeProvider, factory
  • prompts/ — Prompt templates (detection.txt, codegen.txt)
• tests/ — Pytest suite (offline, no network required)
• templates/ — HTML templates
• uploads/ — Uploaded and processed images (gitignored)
• example/ — Example processed output
• .github/workflows/ci.yml — GitHub Actions pytest pipeline

Running tests

pip install -r requirements.txt
pytest

Optional: use Claude instead of Gemini

pip install anthropic
export PAGEAI_PROVIDER=claude
export ANTHROPIC_API_KEY=sk-ant-...
# optionally: export ANTHROPIC_MODEL=claude-opus-4-7
python app.py

Contributing

Contributions to PageAI are welcome. Please follow these steps:

1. Fork the repository
2. Create a new branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Commit your changes (git commit -m 'Add some amazing feature')
5. Push to the branch (git push origin feature/amazing-feature)
6. Open a pull request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Ashutosh Pathak - ashutoshpathak[[[at]]]thenumbercrunchdotcom

Project Link: https://github.com/pathak-ashutosh/PageAI

Acknowledgements

• Google Vertex AI
• Flask
• Pillow