vzero

Your own v0. Describe a UI, watch it stream into a live preview, refine it by chat, fork any version, theme it with your design tokens, and export the result straight into a real repo.

Runs on a Claude Code subscription (no API key), an Anthropic API key, or any Anthropic-compatible local model — your choice, one env var.

---

What it looks like

A pricing page, generated and themed with the bundled midnight tokens:

A monitoring dashboard in the terminal theme — gauges, an inline-SVG chart, and a log feed, all from one prompt:

A React kanban board rendered live through the built-in babel harness:

Flutter output is code-first — a complete widget file ready to export:

Features

• Chat-driven refinement — follow-ups evolve the current code ("make the header sticky"), they don't regenerate from scratch. The model returns surgical edits; the diff view proves it.
• Version history with real forks — every generation is a version chip. Select an old version and prompt: that's a fork. Generation context is rebuilt from the version's parent chain, so parallel branches never bleed into each other.
• Design-token themes — pick a theme at chat creation and its tokens are injected into the system prompt and land as CSS custom properties in the output. Ships with four sample themes; point VZERO_THEMES at your own library to generate on-brand by default.
• Three targets — single-file HTML (instant sandboxed preview), React + Tailwind (live preview via a fully vendored React 18 + Babel + Tailwind harness — no CDN), and Flutter (code-first).
• Export into a project — one click writes the file into a repo under your export root, with a preflight that warns about existing files and dirty git state first. It never commits.
• Crash-proof previews — a React component that throws shows a real error overlay with the actual message, never a silent blank pane.

Quickstart

git clone https://github.com/DSmereski/vzero
cd vzero
npm install

Pick a backend (full annotated list in env.example):

Lane	Setup	Cost
Claude Code subscription	have the claude CLI logged in, then scripts\dev-claude.cmd (or VZERO_BACKEND=claude-cli npm run dev)	your existing Claude plan
Anthropic API	ANTHROPIC_API_KEY in .env.local — or better, a 1Password op:// reference + scripts\dev-paid.cmd	API credits
Local model	any Anthropic-compatible endpoint (e.g. an ollama proxy): ANTHROPIC_BASE_URL + ANTHROPIC_AUTH_TOKEN	$0

Then open http://localhost:2970 and describe a UI.

Security posture

• No secrets on disk. .env.local is gitignored; the recommended API-lane setup stores only a 1Password reference (op://…) — the real key exists solely inside the server process, injected by op run at launch.
• The subscription lane never touches your key material. It spawns the claude CLI headlessly and strips all ANTHROPIC_* variables from the child environment so nothing can hijack or leak its auth.
• Sandboxed previews. Generated code runs in sandbox="allow-scripts" iframes with an opaque origin — no same-origin access, no top-level navigation, and the preview runtime is vendored locally (zero CDN calls).
• Traversal-proof export. Export paths are validated against .., absolute paths, drive letters, and root escapes, and confined to VZERO_EXPORT_ROOT (default: a sandboxed ./exports). Export never runs git commands that mutate state.
• Strict input validation on every API route, with a hard prompt-size cap.
• Deterministic mock mode (MOCK_MODEL=1) lets the entire test suite run with no credentials at all.

How it works

prompt ─▶ /api/generate ─▶ backend (claude-cli │ Anthropic SDK │ mock)
              │                     │ streams NDJSON deltas
              ▼                     ▼
        SQLite (chats,        code extracted from the reply,
        messages, versions)   stored as a new version
              │
              ▼
   context for the NEXT turn = walk the active version's parent chain
   (each version stores its prompt) ⇒ selecting an old version + prompting
   is a fork with branch-accurate context

The preview pane renders HTML directly via srcdoc; React code is compiled in-iframe by a vendored babel-standalone and rendered inside an error boundary (the sandbox's opaque origin mutes window.onerror to "Script error." — the boundary sees the real exception).

Testing

npm test        # 79 unit tests (db, extraction, chain/forks, diff, themes,
                # export sanitization, route validation) — no key needed
npm run e2e     # 10 Playwright tests against a live server in mock mode
node scripts/live-smoke.mjs   # browser-drives a REAL model end-to-end

Notes

• Inspired by Vercel's v0. Not affiliated with Vercel or Anthropic.
• public/vendor/ contains unmodified MIT-licensed runtimes served to the preview iframe: React 18, ReactDOM 18, @babel/standalone, and the Tailwind CSS browser build.
• Built with AI assistance (Claude); every feature is covered by the test suite above.

License

MIT