Vibe Widget

Click an element, say what to change. An AI edits the repo, opens & merges a PR, and the site redeploys.

Why

Product reviewers give spec feedback; today a dev hand-relays it into an AI.
Reviewers collaborate directly on the live page, eliminating handoff delays and accelerating iteration cycles.
Spin up many mini spec sites and iterate fast, near-zero overhead.

Mockups lo-fi

Generated by docs/mockups/generate-mockups.sh (run once a fresh OpenAI key is in place).

FAB collapsed — FAB anchored in a corner

Sidebar chat — Chat sidebar with session history

Element selected — Selected element + send-to-chat icon

Context attached — Selection attached as composer context

Reload badge — Deploy done → reload for latest

Setup wizard — npx setup wizard

Widget (v0)

FAB — corner tl|tr|bl|br + x/y offsets; toggles the sidebar.
Sidebar — anchor left|right; chat history kept per session and sent each turn.
Element selection — capture-phase click resolves the nearest selector match; outline + send-to-chat icon; non-interactive areas only.
Reload pill — polls /status; appears when a newer deploy is live.
Renders in a Shadow DOM — no host CSS collisions.

Worker (v0)

POST /chat — pluggable CodeAgent edits files → branch → PR → merge to main.
GET /status — latest Cloudflare Pages deployment + isNewer.
LLM-agnostic (anthropic|openai); secrets via wrangler.
CORS locked to a per-repo origin allow-list.

Setup

npx @vibe-widget/setup — collect repo + tokens, print secrets + REPOS block, verify Pages, print embed snippet.
Cloudflare Pages git auto-deploy is assumed wired; the wizard verifies it.

Open questions

Code-agent LLM: Anthropic or OpenAI?
Auto-merge to main, or stop at "PR opened" for approval?
Single repo or multi-tenant from day one?