The canvas · agentappbuilder

The web app lives at https://app.agentappbuilder.com. It is designed for desktop screens.

You sign in with your email: the app sends a 6-digit code, valid for one hour. The first time, the app asks you to create an organization, then your first project.

Your organization’s page lists its projects with their number of screens and when they last changed. Owners and admins create projects with New project. The menu at the top of the left column switches between your organizations and creates a new one.

The workspace

A project opens in its workspace, at https://app.agentappbuilder.com/p/<project>, where <project> is a short identifier of 8 letters and digits:

the left panel, against the left edge;
the canvas, which takes the rest of the width;
the right panel, only while a state is selected or edited. Press Esc or click the empty canvas to deselect and close it.

Left panel

The left panel opens with the project menu: the project and organization names. Select it to reach Settings, the projects of the organization, and your account (Sign out). Below it:

Apps: the apps of the project. Select one to open its canvas. Each app has its own canvases. A line separates them from the screens, which scroll on their own.
Screens: the screens of the open app on the current canvas, with their number of states. Under each screen, its states, with the number of their active version (v1, v2…) on the prototype. Select a state to select it on the canvas and center the view on it.

On the Live app canvas, Import all sits next to the project name. See Import into the prototype.

Prototype and Live app

A switch floats at the bottom center of the canvas: Prototype and Live app.

Prototype shows the frames your agent writes, and the captures you imported, with their versions.
Live app shows the captures of your running app, as your agent sent them.

Switching keeps the selected state when it also exists on the other canvas. The Live app canvas has its own address: ?canvas=live is added to the project URL.

Canvas

Each screen is a group on the canvas: its name, then its states side by side, each as a live thumbnail of its active version at the device size of the app. A capture version shows as its image.

Links: an arrow goes from a state to the state that follows, labelled with its trigger (“Tap Save”). Hover a label to read it in full.
Select: click a state. Press Space on a focused state to select it.
Edit: on the prototype, double-click a state, or press Enter, to edit its elements in place. See Edit a frame.
Open: select Open in the frame menu or the right panel to see a state at full size. On Live app, double-clicking a state or pressing Enter opens it too.
Menu: right-click a state to open its menu. See Frame menu.
Copy as PNG: press ⇧⌘C (Ctrl+Shift+C on Windows and Linux) to copy the selected state as an image.
Duplicate: press ⌘D (Ctrl+D on Windows and Linux) to duplicate the selected state of the prototype. See Duplicate.
Variants: a state waiting for you to choose between variants shows one card per variant. See Variants.
Move: drag a screen to place it. The position is saved for everyone in the project. Screens your agent adds later go around it.
Live updates: while your agent works, each new state appears with a short blue scan, and a new version flashes the state it changes. If you have not touched the canvas for a few seconds, the view widens to show a screen that arrives out of sight.
Pan and zoom: see Navigate the canvas.
A small blue dot next to a state label means its active version differs from its implemented version. Hover it to see both numbers.

Navigate the canvas

The trackpad pans, the mouse wheel zooms.

To	Mac	Windows and Linux
Pan	Scroll with two fingers on the trackpad	Scroll with two fingers on the touchpad
Zoom	Pinch on the trackpad	Pinch on the touchpad
Zoom with a mouse	Scroll the wheel, or Ctrl + scroll	Scroll the wheel, or Ctrl + scroll
Pan left and right with a mouse	Shift + scroll	Shift + scroll
Pan up and down with a mouse	⌥ Option + scroll	Alt + scroll
Pan by dragging	Drag the empty canvas	Drag the empty canvas

Zoom stays under the pointer, from 10% to 800%. The buttons at the bottom left zoom in, zoom out and fit all screens in view. With the pointer over the canvas, the page itself never scrolls or zooms. Over the panels, menus and dialogs, scrolling works as usual.

The app tells a trackpad from a mouse by the events your browser sends. A Magic Mouse and some high-resolution wheels send the same events as a trackpad: they pan, and Ctrl + scroll zooms. With Chrome on Linux, the wheel pans too. An older Windows touchpad that acts as a wheel zooms: hold Shift or Alt to pan.

Right panel

With a state selected, the right panel shows the following. While you edit a frame, it shows Design instead (see Edit a frame).

its title (“Screen · state”) and route, with an Open button;
Frame URL, with a copy button. Paste it in Claude Code with what you want changed;
Versions: one button per version, “v5 · B” for a variant. A capture version has a camera icon; hover it to read “Capture of the real app”. Select one to make it active; this also settles variants waiting for your choice. While variants wait, the section starts with “3 variants to choose from”. With more than one version, Compare opens two versions side by side. Below: “Implemented: vN”, or “Not implemented yet”. When a question is waiting for your agent, the panel says “Claude Code will ask you at its next request whether production should follow vN”;
Description and Change note of the active version, as your agent wrote them. For a capture version, the panel says “Capture of the real app” and that Claude Code recreates the screen in HTML before applying your change;
Links: the states this one leads to, with their trigger. Select one to go to it.

Right-click a state, on either canvas, to select it and open its menu. On a focused state, Shift+F10 or the Menu key opens it too.

Copy as PNG (⇧⌘C, or Ctrl+Shift+C on Windows and Linux): copies the image of the state as the canvas shows it, at the device size of the app: 390 × 844 for a phone, 834 × 1112 for a tablet, 1440 × 900 for a desktop. Paste it in a chat, a ticket or a document. A message confirms the copy, or says why it failed.
Copy link: copies the frame URL, like the copy button of the right panel.
Open: shows the state at full size. On Live app, Enter opens it too; on the prototype, Enter edits the state.
Compare versions, on the prototype, when the state has more than one version.
Import to prototype, or Import again, on Live app. See Import into the prototype.
Choose this variant, first, on the card of a variant. See Variants.
Duplicate (⌘D, or Ctrl+D on Windows and Linux) and Duplicate screen, on the prototype. See Duplicate.

⇧⌘C works anywhere on the canvas page: it copies the selected state, or the state shown by Open. It does nothing while you type in a field, while Compare is open, or when no state is selected.

An HTML version is drawn as an image in your browser, without loading anything from the network, like its thumbnail: an image, a font or a video that your agent linked from the web does not show.

Edit a frame

You can change the elements of a prototype frame yourself, on the canvas, as in Figma. Your edits become a new version signed by you, which your agent reads and implements.

Enter: double-click a state of the prototype, or press Enter on the selected state. The frame keeps its place and its size on the canvas. Every member of the project can edit.
The page body is selected when you enter. Hover an element to outline it. Click to select it: a solid outline, corner handles and its name.
Esc selects the parent of the selected element. From the page body, Esc leaves the editing.
Enter selects the first child of the selected element, Tab the next element at the same level and Shift+Tab the previous one, while the focus is on the frame. In the right panel, these keys act on its fields and buttons.
⌘Z undoes and ⇧⌘Z redoes (Ctrl+Z, Ctrl+Shift+Z or Ctrl+Y on Windows and Linux) while you edit.
Cut (⌘X, or Ctrl+X) copies the selected element and deletes it: select where it goes, in this frame or another, and paste it. That is how you move an element.
Copy (⌘C, or Ctrl+C) copies the selected element, with its look: its styles are written into it, so it looks the same wherever you paste it. The copy stays available when you leave and edit another state or another variant.
Paste (⌘V, or Ctrl+V) places the copied element right after the selected element, or at the end of the page when the page body is selected. Paste several times to place several copies, one after the other.
Delete (Delete or Backspace) removes the selected element and what it contains; the selection moves to its parent. The page body cannot be deleted.
Copy, Paste and Delete are also buttons at the top of Design. An element you pasted cannot be selected on its own until you have saved: undo the paste to place it again. The pasted HTML keeps no script, no external image or link and no id.
The mouse wheel, the trackpad and dragging the empty canvas still pan and zoom. ⇧⌘C and ⌘D do nothing while you edit, and the frame menu turns off Copy as PNG, Duplicate and Duplicate screen for that frame until your edits are saved.
Leave: select Done in the right panel, click outside the frame, or press Esc from the page body. If you changed something, your edits are saved as a new version, and a message says “Saved as v5”. Otherwise nothing is saved. Leaving the canvas (the Back button of your browser, a link) saves your edits first, and stays on the canvas if they could not be saved. Closing the page with unsaved edits, or while they are being saved, asks you first. To edit another state, leave first: pressing Enter on it or double-clicking it saves your edits, then do it again to enter.

While you edit, the right panel shows Design: the path of the selected element (for example body › main › div.card › button), then its properties, with the names Figma uses:

Layer: the opacity of the element, its content included.
Fill: the background color, solid, and the opacity of that color. An element without a background shows None; choosing a color gives it an opaque background.
Stroke: color, weight and style (solid, dashed, dotted or none), on the four sides. Choosing a color for an element without a border adds a solid 1 px border.
Corner radius: one value, or one per corner.
Padding: horizontal and vertical, or each side.
Auto layout, for an element laid out with flexbox: direction, gap between items, Auto spacing (the items spread to both ends, as Figma’s Auto spacing), alignment on a 3 x 3 grid, and wrap.
Resizing, for an element inside an auto layout: Hug (keeps the size of its content) or Fill (takes the free space) along the direction of the container, its margins before and after, Push to end (an auto margin before it) and Remove margins. A block stuck to the bottom of a sidebar is usually held there by a Fill above it, Auto spacing on the container, or a pushed margin: set Hug, turn Auto off, or remove the margins to bring it back next to the others.
Text, for an element that contains text: color, size, weight, line height and alignment.

↑ and ↓ change the number in a field by 1, and by 10 with Shift, at once. The fields show the values the browser computes for the element. An empty field shows Mixed when the sides or corners differ, Auto for a normal line height, or the value itself when it is not in pixels (for example 50%). Each change applies at once, written as an inline style on the element, which wins over the stylesheets of the frame. When a rule of the frame marked !important still wins, the field is outlined in red. Transitions of the frame are off while you edit, so the fields show the new value at once.

Your edits are saved as a new version of the state: the same HTML, where only the style attribute of the elements you changed is rewritten. It becomes active, with a change note that lists your edits, for example Button "Save": background #0011FF → #1E1E1E; radius 8px → 12px. If the state was already implemented, your agent will ask you whether to implement it, as for any change of the active version. See Working with your agent.

Some frames cannot be edited:

a capture version: ask your agent to recreate it in HTML first;
a state whose variants wait for your choice: choose one first;
a live frame: import it into the prototype first;
a frame whose HTML the browser reads differently from the server, such as a shadow root or a select with custom content: ask your agent to simplify it.

If the frame changes while you edit it (your agent or another member makes another version active, or variants arrive), the right panel says that your edits cannot be saved: select Leave, then edit the new version.

Open and compare

Open shows the active version at the size of the device, scaled down to fit your window; opened from the card of a variant, it shows that variant. Compare shows two versions of the same state side by side: by default the active version and the one before it (or the newest one, when v1 is active), or the first two variants while variants wait for your choice. Choose any two versions in the menus above them. Compare works between a capture version and an HTML version, for example the app today next to the change your agent proposes.

Variants

When you ask your agent for several directions, it proposes 2 to 4 variants of one state, and gives you the link of the state: it opens the canvas zoomed on the variants. Until you choose, the state shows one card per variant, side by side, titled with its label and version (“A · v5”), with a Choose button below each. The title of the active variant ends with “Active” (“A · v5 · Active”). Selecting the state outlines all its cards. For a state that already had a version, that version stays active until you choose; for a new state, the first variant is.

Mix variants: in one variant, select an element and copy it; edit another variant, select where it goes and paste it; delete what you replace. Then choose the variant: your agent reads the pasted elements, and where they come from, in that version.
Edit a variant: double-click its card, or press Enter on it, and edit it as any frame (see Edit a frame). When you leave, your edits become a new version that takes the place of that variant, with the same label: “Table · v4” replaces “Table · v2”, in the same position. The variants still wait for your choice. Edit as many as you like, then choose.
Choose under a card, or Choose this variant in its menu, makes that variant the active version, with your edits. You do not need to describe them to your agent: it reads them in that version. The other variants stay in the list of versions.
Choosing another version in the right panel settles the variants too.
Links belong to the state, not to a version: they do not move when you choose.
Your agent reads the active version and does not implement the state while its variants wait. If the state was already implemented, choosing a variant opens a notice, as any change of the active version does.

Duplicate

Duplicate (⌘D, or Ctrl+D on Windows and Linux, on the selected state) adds a copy of the state right after it, labelled with the state label and “copy” (“Default copy”, then “Default copy 2”). Its v1 is a copy of the active version, HTML or capture. No link is copied.
Duplicate screen adds a copy of the screen, named with the screen name and “copy” (“Home copy”, then “Home copy 2”), placed below everything in the column of the original, with a copy of each of its prototype states (active version only) and the links between them.

The copies are signed by you: your agent starts from them and asks you before replacing them. Every member of the project can duplicate, once the project is claimed. A message confirms the copy and selects it.

Live app canvas

The Live app canvas has the same layout as the prototype: one group per screen, its states side by side, and arrows for the links between captured states.

Each state shows its capture, an image at the device size of the app, aligned to the top. Above it: the state label and “Captured 5 min ago” (hover it for the full date).
A state without an image shows “No capture yet”. If the image cannot be loaded, it shows “Capture unavailable”: ask your agent to capture that state again.
Double-click a state, or select Open, to see the capture at full size.

With a live state selected, the right panel shows:

its title and route, with an Open button;
Capture: when it was captured, and the address captured (“From”);
Frame URL, with a copy button. Paste it in Claude Code to talk about this screen;
Prototype: the import button, and the version of the prototype frame of the same state, for example “In the prototype: v2 (HTML)”;
Links: the live states this one leads to.

Images load through signed links valid one hour, which the app renews while the canvas is open. Only members of the project can get them.

Empty Live app canvas

When nothing is captured yet, the Live app canvas shows “See your real app here” and a prompt to copy into Claude Code. The app sends nothing to your agent: you paste the prompt yourself.

An app that has captures but no prototype yet opens on Live app. If you switch to Prototype, the canvas says how many captured states are waiting on Live app, with a View Live app button.

Import into the prototype

Import to prototype, in the right panel of a live state or in its menu, imports that state. Once its current capture is imported, the button reads Import again.
Import all, at the top of the left panel, imports every captured state of the open app. A confirmation shows how many states will be imported.

Every member of the project can import. Each imported state becomes a new capture version of the prototype frame of the same screen and state, created if needed. It is active and marked as implemented at once, so no question is sent to your agent. Links between imported states are copied into the prototype. A message confirms the import, with a View button that opens the prototype frame.

Live updates

The canvas updates while your agent works: new screens, states, versions, captures and links appear without reloading. When your agent creates a state, adds a version, proposes variants or sends a capture, a message appears at the bottom of the window, for example “Claude Code added v3 to Sign in · error”, “Claude Code proposed 3 variants for Home · default” or “Claude Code captured Interventions · list”, with a View button that takes you to it, on the right canvas. When another member saves edits, the message reads “A member edited Home · default (v5)”.

Empty canvas

A project without any frame shows one of two cards.

Claude Code already has a key: a key of the project has already been used, usually the one of the agent that created it, which became permanent at the claim. The card shows its prefix, when it was last used, and the prompt to send to Claude Code in your app’s folder, ideally in the conversation that created the project. Owners and admins also see Create another key, for when Claude Code cannot find its key or you work on another computer.
Connect Claude Code: no key has been used yet. Owners and admins select Create key; the app then shows the command to run in your project’s terminal and the first prompt to give your agent. The key is shown once. Members of the organization see a message asking an owner or admin to connect Claude Code.

Settings and keys

Settings, in the project menu, has two sections. Canvas, above its title or in the project menu, brings you back.

Project: the project name. Owners and admins rename it.
Keys: every key of the project, with its prefix, name, kind (temporary or permanent), when it was last used and when it was created. New key creates a permanent key and shows its command once. Revoke stops a key at once, after a confirmation; it cannot be undone.

Frame links

A frame URL (https://app.agentappbuilder.com/f/<token>) opens the project’s canvas with that frame selected and centered, on the Prototype or Live app canvas where the frame lives. The address bar then shows https://app.agentappbuilder.com/p/<project>?frame=<token>, with the same token: you can paste either address to your agent. If you are not signed in, the app asks you to sign in first, then opens the frame. If you are not a member of the project’s organization, or the project is not claimed yet, it says “Frame not found”, without telling whether the frame exists.

Sign-in and organizations