RepoPilot

abi / screenshot-to-code

Search abi/screenshot-to-code

GitHub

Get started

Taken from the repository's own files on 23 Oct 2026. RepoPilot has not run these commands.

Prerequisites

Commands

package.json
TaskRunWhat it runs
testpnpm run testpnpm run test:frontend && pnpm run test:backend

Install and use

README.md

Choose the path that fits what you want to do:

  • Run locally: best if you want to customize, self-host, or contribute.
  • Use the hosted app: the fastest way to try Screenshot to Code with no local setup. Open the hosted app →

Running locally requires API keys and a backend/frontend setup. The app has a React/Vite frontend and a FastAPI backend.

API keys

You need at least one model provider key (OpenAI, Anthropic, or Gemini). Gemini and Replicate are strongly recommended for the best quality of screenshot-to-code accuracy — Gemini powers asset extraction (reusing the real logos/images from your screenshot) and Replicate powers image generation, background removal, and image editing. Adding all four keys gives the best results and lets you compare multiple models per generation.

| Key | Required? | What it unlocks | |-----|-----------|-----------------| | OPENAI_API_KEY | One of these three | GPT code-gen variants (GPT-5.5, GPT-5.4 Mini) | | ANTHROPIC_API_KEY | One of these three | Claude code-gen variants (Opus 5, Opus 4.8, Fable 5, Sonnet 4.6) | | GEMINI_API_KEY | One of these three — strongly recommended | Gemini code-gen variants (3 Flash, 3.1 Pro); extracts real assets from the screenshot; required for video mode | | REPLICATE_API_KEY | Strongly recommended | Image editing, background removal, and Replicate-backed image generation — without it, edit_images and remove_backgrounds are unavailable |

With more keys, the app automatically picks a stronger mix of models per variant; with a single key it uses that provider's models only.

If you'd like to run the app with Ollama open-source models (not recommended due to poor-quality results), follow this comment.

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

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
echo "ANTHROPIC_API_KEY=your-key" >> .env
echo "GEMINI_API_KEY=your-key" >> .env
echo "REPLICATE_API_KEY=r8_your-key" >> .env
poetry install
# Install the Chromium browser used by the screenshot preview tool.
# On Linux, use `poetry run playwright install --with-deps chromium` to also
# install the required system libraries (needs sudo/apt).
poetry run playwright install chromium
poetry env activate
# run the printed command, e.g. source /path/to/venv/bin/activate
poetry run uvicorn main:app --reload --port 7001

Read the rest of README.md