Quickstart: your first prototype in 5 minutes

Prototyper is a workspace where an AI agent writes real React code and runs it live, right next to your chat. This quickstart takes you from a new account to a running app with a link you can share. It takes about five minutes, and there is nothing to install.

1. Create your account

1. Go to Sign up.

2. Enter your Email Address and a Password (twice), then select Sign up with Email. Or select Sign in with Google.

3. If we email you a confirmation link, open it to verify your address.

2. Answer the setup questions

The first time you sign in, Set up Prototyper asks a few short questions: your name and role, whether you work solo or in a team, and what you want to build. Select Continue on each step, or Skip for now to go straight to your workspaces.

Two of the steps matter for this quickstart:

• Connect your editor. offers to connect a coding agent you already use. You can skip it now and do it later (step 4).
• Let's build something. takes your first app idea and opens a workspace with it. If you use it, go on to step 5.

3. Describe your app

If you skipped the setup, you start from your workspaces:

1. Under What should we build?, describe the app in a sentence or two. For example: "A sign-up page for a habit tracker called Loop, with email and password fields." A starter such as Build a landing page fills the box in for you.

2. Optional: select Enhance to have the prompt rewritten in more detail before you send it.

3. Press Enter or select the send button. Prototyper creates a new workspace and the agent starts building.

Inside the workspace, you keep talking to the agent in the composer. Ask it to change a color, add a page or fix an error. It shows its plan and each step as it works.

On the Free plan you can send the built-in agent 5 messages a week, and the composer shows how many you have left. Connecting your own agent (step 4) is how you keep building after that.

4. Or connect your own agent

If you already pay for Claude Code, Codex or Cursor, that agent can do the building instead:

1. In the workspace header, select MCP.

2. Select Copy setup prompt and paste it into your agent. It follows Prototyper's setup guide and asks you to approve access in the browser. To run the one-line install command yourself, select Install manually.

3. Once your agent is connected, the same MCP button offers Copy workspace prompt. Paste it into your agent so it works in this workspace.

For the details, including the Free plan's limits and how to revoke access, see Connect your own agent.

5. See your app running

What the agent builds is a real React app, compiled and running in the workspace, not a picture of one. It opens as an app window with the code, the live preview and the console.

• Use Go back, Go forward and Refresh preview in the preview's bar, as you would in a browser.
• The Workspace layout switch in the header sets the view. Focussed (the default) shows one app at a time. Canvas puts every window on an infinite canvas, where each window can be sized to Desktop, Tablet or Phone.

6. Share it

1. Select Share in the workspace header.

2. Turn on Share to web.

3. Under What viewers see, choose Canvas only or Canvas + chat. Then select Copy next to the public link.

Anyone with the link gets a read-only view of the workspace. Signed-in visitors can select Fork to my account to get their own copy. Turn Share to web off to stop sharing.

Next steps