agentappbuilderOpen the app

Docs

Getting started

Connect a project from Claude Code with one sentence, claim it, capture the real app and import it, start from the app, and get past an auto mode block.

Before you start

You need Claude Code, open in the folder of the app you want to see. Nothing to install on the platform side: your agent creates the project for you.

Anyone can sign in with an email address: the app sends a 6-digit code, there is no password to create.

Tell Claude Code one sentence

Connect this project to agentappbuilder.com and show me its screens.

That is all you type to start. Before any screenshot leaves your machine, your agent tells you what it will capture and asks you to confirm with one sentence (step 4). The rest of this section describes what your agent does, so you can follow along.

What your agent does

1. It reads the guide

The guide for agents lives at https://app.agentappbuilder.com/llms.txt. It explains how to create a project, the tools, and the rules to follow. Every page of agentappbuilder.com, and the app page, point agents to it.

2. It creates a pending project

Your agent calls the HTTP API without any account, and saves the response to a file outside your repository that only you can read:

umask 077; mkdir -p /tmp/agentappbuilder && [ -O /tmp/agentappbuilder ] && [ ! -L /tmp/agentappbuilder ] &&
curl -s -X POST https://app.agentappbuilder.com/api/projects \
  -H 'content-type: application/json' \
  -d '{"name":"My app"}' > /tmp/agentappbuilder/my-app.json

The response contains a project key (aab_ followed by 64 hexadecimal characters), a claim URL valid 7 days, the command to add the MCP server, and the next steps. The project is “pending”: it waits for you to claim it. See HTTP API for every field.

Your agent reads the key from that file in each command and never prints it, so the key stays out of your chat and out of your repository. The two checks stop the command if /tmp/agentappbuilder belongs to another user of your machine or is a link. In a later session, your agent reuses this file rather than creating another project.

3. It uses the HTTP tools

For the whole session, your agent calls the tools over HTTP: POST https://app.agentappbuilder.com/api/tools/<tool_name> with the key. It does not add the MCP server itself: that would change your Claude Code configuration, and Claude Code only loads a new MCP server at its next start. Both paths reach the same tools and the same project.

4. It shows your screens

The rules tell your agent to capture your app when it runs, rather than redraw it. The screenshots leave your machine, so your agent first asks you, in one message: the screens it will capture, that the screenshots go to app.agentappbuilder.com, that your app must show demo data only, the account it will sign in with, that it installs Playwright, and the claim link. It ends with a sentence for you to send back to confirm: “Install Playwright in /tmp/aab-capture and send the screenshots to app.agentappbuilder.com.” A plain yes is not enough for Claude Code’s auto mode, which reads your messages, not your agent’s. If your first message already names both the Playwright install and app.agentappbuilder.com, like that sentence, your agent does not ask. See the real app first below describes that path.

When the app does not run, or you say no, your agent reads your code and creates one frame per state of each screen (empty, filled, modal open, error…), as self-contained HTML faithful to your app. Then it links the frames with the user actions that lead from one to the next, and marks these frames as implemented, since they match the code.

The claim link looks like https://app.agentappbuilder.com/claim/<token>. It works once and expires after 7 days. Before it expires, your agent can call renew_claim_link for a new link valid 7 more days, and the previous link stops working. Once it has expired, the temporary key has expired too: ask your agent to create a new project.

6. It offers the MCP server

Adding the MCP server is optional. It gives your agent the same tools in later sessions, and the capture images themselves in get_frame, with the key kept in Claude Code’s own configuration. Your agent gives you a command to run in your own terminal, in the project folder, if you want it: run it there, not with ! in Claude Code. It reads the command from the saved file and hides its output, so the key is not shown:

eval "$(node -p 'require("/tmp/agentappbuilder/my-app.json").mcp.add_command')" > /dev/null

The command it runs is the one returned in mcp.add_command:

claude mcp add --transport http --scope local agentappbuilder https://app.agentappbuilder.com/mcp --header "Authorization: Bearer <key>"

--scope local keeps the key in Claude Code’s own configuration on your machine, for this project only, and out of your repository. Claude Code loads a new MCP server at its next start. claude --continue restarts it and keeps the conversation.

Claim the project

  1. Open the claim link. It shows the project name and how many screens are ready, or that your agent has not sent any yet.
  2. Select Claim project and sign in with your email: you receive a 6-digit code.
  3. If you have no organization yet, name one. If you manage several, choose one. Only owners and admins of an organization can claim a project into it.
  4. Select the claim button (Claim into followed by your organization’s name, or Claim project). The canvas opens on Prototype, or on Live app when your agent only captured the app so far.

After the claim, the project is active, and the key your agent already has becomes permanent: it keeps working without any change on your side. If your agent has not sent any screen yet, the canvas says Claude Code already has a key and gives the prompt to send to Claude Code in your app’s folder: you do not need a new key.

See the real app first: capture, then import

A capture shows your app exactly as it is, including an app that only runs on your machine. Your agent takes the screenshots on your machine and sends them to the platform; you then choose which ones become the starting point of the prototype.

1. Ask for a capture

The empty Live app canvas shows this prompt, ready to copy:

Capture the screens of this app in agentappbuilder, with demo data. Guide: https://app.agentappbuilder.com/llms.txt

Your agent first asks you, in one message, which screens it will capture, and tells you that the screenshots go to app.agentappbuilder.com. It ends with the sentence to send back to confirm.

2. What your agent does

  1. It creates the app in the project if it does not exist yet (create_app): a capture always belongs to an app.
  2. It installs Playwright outside your repository (in /tmp/aab-capture, following the guide) and starts your app, or uses its deployed address.
  3. If the app needs a sign-in, it uses the demo account that your repository documents (seed, README) and tells you which, or asks you for demo credentials, and passes them to the script as environment variables. They stay on your machine: agentappbuilder never receives them. Your agent never creates an account, writes to your database or changes your app to get past the sign-in.
  4. It adapts the guide’s script, which visits each state (a page, a tab, a modal open, a filled form…) and sends one screenshot per state to POST /api/captures, with the project key read from the saved file into an environment variable. It runs the script as one command. When Claude Code is connected over MCP, there is no saved file and your agent does not look for the key: it asks you to run the script in your own terminal with a key of the project (the one you gave Claude Code, or a new one from Settings, Keys). The image goes from the script to the platform, not through the model. The guide’s script uses a 1440 x 900 window for the web and 390 x 844 for a mobile app, and JPEG quality 80.
  5. It links the captured states with the user actions (set_flow_links), then gives you the canvas URL. While the project is pending, it gives you the claim link instead.

Use demo data: a capture is a picture of whatever the app shows. The rules tell your agent never to capture real customer data, and to use only the guide’s script: never copy the HTML of your app, never start a local server to collect pages, never send source code.

3. Look at the Live app canvas

At the bottom of the canvas, switch from Prototype to Live app. Each screen shows its captured states side by side, with the date of capture, linked by their triggers. A new capture of a state replaces the previous one.

4. Import into the prototype

  • Import to prototype, in the right panel of a live state, imports that state.
  • Import all, at the top of the left panel, imports every captured state of the open app, after a confirmation.

Each imported state becomes a new version of the prototype frame of the same screen and state (the frame is created if needed). This capture version is active and marked as implemented, since it is what the app shows today. Links between imported states are copied into the prototype.

5. Ask for a change

Switch back to Prototype, copy the frame URL of an imported state and paste it with your request:

https://app.agentappbuilder.com/f/<token> Change this frame: move the filters into a side panel.

Your agent reads the frame and gets the capture (the image itself over MCP, a signed link over HTTP, which it downloads to a temporary file to look at), recreates the screen as HTML faithful to the capture and to your code, then applies your change. The result is a new HTML version, next to the capture. Working with your agent has more prompts.

The other way round: start from the app

You can also create the project yourself and hand a key to your agent.

  1. Sign in at https://app.agentappbuilder.com. The first time, you create an organization, then your first project.
  2. The empty canvas shows Connect Claude Code. Select Create key (only owners and admins of the organization can create keys). You can also create a key later in Settings, under Keys, with New key.
  3. The app shows the command to run in your project’s terminal, once. Copy it now: only a hash of the key is stored, so it cannot be shown again.
  4. Restart Claude Code (claude --continue), then give it this first prompt (the empty canvas also shows it under the command):
Show me the screens of this app in agentappbuilder. Guide: https://app.agentappbuilder.com/llms.txt

Your screens appear on the canvas as your agent creates them.

Troubleshooting

Claude Code stopped because an action was blocked (auto mode). In auto mode, a classifier reviews the actions of Claude Code before they run and blocks what goes beyond your request or reaches a destination it does not know. Two blocks can happen here:

  • Adding the MCP server (claude mcp add) changes your Claude Code configuration. Your agent does not need it: the guide tells it to use the HTTP API for the whole session. If you want the MCP server, run the command your agent gives you at the end, in your own terminal (see It offers the MCP server).
  • Installing Playwright, which the capture script needs, downloads a package your project does not declare, and a browser. Your agent installs it in /tmp/aab-capture, outside your project. If it is blocked, confirm with the sentence below.
  • Sending screenshots of your app sends data to a service outside your machine. The classifier can allow it when your own message directly and specifically describes that exact action. Say what to send and where, for example “Install Playwright in /tmp/aab-capture and send the screenshots to app.agentappbuilder.com.”: your agent gives you this sentence when it asks first. Your agent only uses the guide’s script; if it tries another way (copying the page, a local server), stop it and point it to the guide.

Your message cannot clear every block: your intent does not override Claude Code’s data exfiltration rule. If sending the screenshots is still blocked, describe app.agentappbuilder.com as a trusted destination in autoMode.environment of your user settings, ~/.claude/settings.json: it is the fix Claude Code’s documentation gives for a destination needed throughout a task. The classifier does not read autoMode from the project settings in .claude/. Keep "$defaults" in the list, or you replace Claude Code’s built-in entries:

{
  "autoMode": {
    "environment": [
      "$defaults",
      "Trusted service: app.agentappbuilder.com (agentappbuilder), where I send prototypes and screenshots of my apps with demo data"
    ]
  }
}

For a single blocked action, you can also open /permissions, go to Recently denied and press r on the action, to let your agent retry it with your approval. See Configure auto mode in the Claude Code documentation.

Your agent does not see the agentappbuilder tools. That is expected in the session where your agent creates the project: it uses the HTTP API. The MCP tools appear once you have added the server and Claude Code has started again (claude --continue restarts it and keeps the conversation). claude mcp list shows the servers Claude Code knows.

Calls fail with “Missing or invalid key”. If the key is wrong or was revoked, create a new key in Settings and run the new command. If it was a temporary key whose project was not claimed within 7 days of its creation or of the last renew_claim_link, the key has expired and the pending project cannot be reached any more: your agent creates a new project with POST /api/projects.

The claim link says “Claim link not valid”. It is unknown, expired or already used. Before the link expires, your agent can call renew_claim_link for a new one. After it has expired, the agent’s temporary key has expired too, so your agent creates a new project with POST /api/projects.

No sign-in email arrives. It can take a minute, and it may be in your spam folder. Send the code again sends the same code for 10 minutes, so the one you find is still valid. If nothing arrives, write to hello@logics-studio.com.

Your agent reports “A project waiting to be claimed holds at most 100 frames”. Claim the project: the limit only applies to pending projects, and live frames count in it. See Limits and FAQ.

Your agent reports “A project waiting to be claimed holds at most 10 MB of captures” or “Captures are paused for projects waiting to be claimed”. Claim the project, then ask your agent to capture again. These limits only apply to pending projects.

A capture is refused with 413 or 415. The image is over 2 MB, or it is not a JPEG, PNG or WebP matching its Content-Type. Ask your agent to send a JPEG of quality 80 of the window, not of the full page. See HTTP API.