A simple tool to convert screenshots, mockups and Figma designs into clean, functional code using AI.

Supported stacks:

• HTML + Tailwind
• React + Tailwind
• Vue + Tailwind
• Bootstrap
• Ionic + Tailwind
• SVG

Supported AI models:

• GPT-4 Vision
• Claude 3 Sonnet (faster, and on par or better than GPT-4 vision for many inputs)
• DALL-E 3 for image generation

See the Examples section below for more demos.

We also just added experimental support for taking a video/screen recording of a website in action and turning that into a functional prototype.

google in app quick 3

Learn more about video here.

Follow me on Twitter for updates.

🆕 Try it live on the hosted version (bring your own OpenAI key - your key must have access to GPT-4 Vision. See FAQ section below for details). Or see Getting Started below for local install instructions.

The app has a React/Vite frontend and a FastAPI backend. You will need an OpenAI API key with access to the GPT-4 Vision API or an Anthropic key if you want to use Claude Sonnet, or for experimental video support.

Run the backend (I use Poetry for package management - pip install poetry if you don't have it):

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001

If you want to use Anthropic, add the ANTHROPIC_API_KEY to backend/.env with your API key from Anthropic.

Run the frontend:

cd frontend
yarn
yarn dev

Open http://localhost:5173 to use the app.

If you prefer to run the backend on a different port, update VITE_WS_BACKEND_URL in frontend/.env.local

For debugging purposes, if you don't want to waste GPT4-Vision credits, you can run the backend in mock mode (which streams a pre-recorded response):

MOCK=true poetry run uvicorn main:app --reload --port 7001

If you have Docker installed on your system, in the root directory, run:

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

The app will be up and running at http://localhost:5173. Note that you can't develop the application with this setup as the file changes won't trigger a rebuild.

• I'm running into an error when setting up the backend. How can I fix it? Try this. If that still doesn't work, open an issue.
• How do I get an OpenAI API key? See https://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md
• How can I configure an OpenAI proxy? - you can configure the OpenAI base URL if you need to use a proxy: Set OPENAI_BASE_URL in the backend/.env or directly in the UI in the settings dialog
• How can I update the backend host that my front-end connects to? - Configure VITE_HTTP_BACKEND_URL and VITE_WS_BACKEND_URL in front/.env.local For example, set VITE_HTTP_BACKEND_URL=http://124.10.20.1:7001
• Seeing UTF-8 errors when running the backend? - On windows, open the .env file with notepad++, then go to Encoding and select UTF-8.
• How can I provide feedback? For feedback, feature requests and bug reports, open an issue or ping me on Twitter.

NYTimes

Instagram page (with not Taylor Swift pics)

Hacker News but it gets the colors wrong at first so we nudge it

🆕 Try it here (bring your own OpenAI key - your key must have access to GPT-4 Vision. See FAQ section for details). Or see Getting Started for local install instructions.

"Buy Me A Coffee"