The Editor

Documentation Index

Fetch the complete documentation index at: https://docs.buildbetter.ai/llms.txt

Use this file to discover all available pages before exploring further.

The editor (/prototype/:id) is where the redesign happens. Canvas on the left, chat with the agent on the right.

​

Canvas (Left)

The canvas renders the captured webpage (or blank canvas) in a same-origin iframe. The iframe is locked to the prototype — link clicks and form submissions are intercepted so you can’t navigate away by accident.

​

Toolbar

The toolbar at the top of the canvas has four control groups.

​

Select Element

The Select element button (mouse cursor icon) toggles a click-to-select mode. When active:

• The button shows “Click an element…” with a primary accent
• Hover over any element in the canvas to see a 2px purple outline
• Click to select. The system generates a CSS selector (prefers #id, then tag.class.class, then ancestor walk with :nth-of-type())
• The next message you send is prefixed with [Selected element: <selector>] so the agent scopes its edits to exactly that element

Click the button again or click anywhere outside an element to exit select mode.

​

Viewport

Four buttons control the canvas width: Your choice persists in localStorage — the editor remembers it across reloads.

​

Sidebar Toggle

The panel-icon button collapses the right chat sidebar to give the canvas full width. Useful when you want a closer look. State persists across reloads.

​

Iframe Behavior

• The captured HTML loads via srcdoc with inlined stylesheets
• On every version change, the iframe remounts at the base, then replays the patch log to reconstruct state
• Links are intercepted by a capture-phase click listener — e.preventDefault() prevents navigation
• Forms are similarly blocked from submitting
• Thumbnails (480×300, JPEG quality 0.7) capture client-side after each edit using html-to-image

​

Chat Sidebar (Right)

The chat sidebar holds the conversation with the agent.

​

Header

• All prototypes — back link to /prototypes
• Prototype name — click to rename inline (max 200 chars)
• Origin URL — source domain shown below the name (or blank for blank-canvas prototypes)
• Share menu — copy as prompt or copy a link
• Delete — trash icon (red on hover)

​

Conversation

The chat history shows user messages and agent responses in order. Agent responses combine three things:

• Narration — short prose (“I updated the hero background and increased the headline size”)
• Tool calls — cards showing the agent’s tool name, parameters, and output summary
• Summary lines — e.g., “Modified .card (styles)” or “Removed 3 elements matching .footer-cta”

Empty state: “Describe a change. Try: ‘make the hero headline red and bigger’ or ‘remove the footer’.” While the agent is working, you’ll see a “Working…” spinner. Errors surface in a banner with a retry option.

​

Composer

The text input at the bottom of the sidebar accepts your prompts.

• Placeholder: “Tell the agent how to redesign this page…”
• Submit on Enter
• Disabled when viewing an older version (the placeholder changes to “Return to the latest version to keep editing” — see Versions & Forking)

​

Quick Prompts

The Quick prompts dropdown (wand icon) below the composer holds a menu of pre-written prompts. Clicking one inserts the full text into the composer for review — it doesn’t auto-submit. See AI Editing for the full list.

​

Iterations Strip

When more than one version exists, the Iterations strip appears at the bottom of the canvas.

• Header shows total version count and a “Viewing older” badge if you’re not on the latest
• Scrollable strip of 136×84 thumbnails labeled v0, v1, etc.
• Click a thumbnail to switch to that version (read-only; composer disables)
• Hover for two actions:
  • Fork (git-fork icon) — see Versions & Forking
  • Share link (link icon) — copies a ?version=<id> URL scoped to that version
• Back to latest → button at the end when viewing an older version
• Tooltip shows full timestamp on hover

​

Auto-Save

Every completed turn (user message + agent response) saves a new version. There’s no manual save button. If a save is in flight and a new turn completes, the latest snapshot queues and saves once the in-flight request finishes.