agentappbuilderOpen the app

Docs

Introduction

What agentappbuilder is, who it is for, how your agent, the platform and your repository fit together, and what works today.

agentappbuilder is a visual workspace for coding agents. Your agent prototypes your app as linked screens, you point at what to change, and it builds the version you chose.

It is made for people who build apps with Claude Code and want to see and judge every screen before any code changes. You review screens, not diffs.

How it works in one minute

  1. You tell Claude Code: Connect this project to agentappbuilder.com and show me its screens.
  2. Your agent reads the guide at https://app.agentappbuilder.com/llms.txt and creates a project. If your app runs, locally or deployed, and you agreed to send screenshots, it captures one screenshot per state of each screen. Otherwise it draws one frame per state as HTML. The states are linked by the actions that lead from one to the next.
  3. It gives you a claim link. You sign in, claim the project into your organization, and see the canvas. Captures appear on the Live app canvas: you import the ones you want into the prototype.
  4. You copy the URL of a frame into your chat with what to change. Your agent adds a new version; older versions stay listed in the right panel and can be compared side by side. The newest version is active, and you can switch back to an older one at any time.
  5. When you say “apply”, your agent codes the active versions in your real app, runs its checks and reports what it implemented.

Getting started walks through each step.

Three parts

Part Where it runs What it does
Your agent Your machine Claude Code, with your subscription, your repository and your credentials. It writes the prototypes and, when you ask, the code.
The platform app.agentappbuilder.com Stores the prototypes and the captures of your app, and shows them on a canvas. The agent reaches it over MCP or HTTP with a project key.
Your repository Wherever it is today Your code. Only your agent changes it, with your own access.

The platform stores your organizations and members, project keys as hashes, and prototype data: apps, screens, states, versions, links between states, notices and a journal of what happened in the project. When your agent captures your app, it also stores the screenshots, in a private storage bucket. Members of the project read them through signed links, and your agent gets them from get_frame. The platform never receives your Git or database credentials and it never writes to your repository or your database. Security and data lists exactly what is stored.

Available today

  • A prototype canvas with versions, side-by-side compare and live updates.
  • Editing on the canvas: double-click a screen, select an element and change its fill, stroke, corner radius, padding, auto layout or text. Your edits become a version signed by you, which your agent implements. See Edit a frame.
  • Variants: your agent proposes 2 to 4 versions of a state side by side and you choose one. You can also duplicate a state or a whole screen. See Variants.
  • A Live app canvas: your agent captures your running app (local or deployed) with a script on your machine, one screenshot per state, and you import the captures into the prototype to change them.
  • Connection from Claude Code over MCP (protocol revision 2026-07-28, older clients supported) and over plain HTTP.
  • Projects created by your agent without an account, then claimed with a link.
  • Active and implemented versions. When you make another version active on a frame that is already implemented, your agent is told and asks you before production follows.

Coming next

These are not available yet:

  • More of Figma on the canvas: layers, adding, removing and moving elements, editing text in place.
  • An image library for each project, so screens can show real photos.
  • A read-only GitHub connection for pull requests and CI status.
  • The plan your agent keeps in plan.md, shown in the app.
  • Live frames that load a deployed staging of your app in the canvas, next to the captures.
  • The quality harness (specs, tests, CI) your agent installs in your repository.

Architecture explains the approach behind them.

Where to go next