---
title: "Quickstart: your first prototype in 5 minutes"
description: "Sign up, describe an app, and watch the agent build it as real running code. Then connect Claude Code or Codex over MCP and share a public link."
date: "2026-10-06"
canonical: "https://www.prototyper.co/docs/getting-started/quickstart"
---

# 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

<Steps>
<Step>
Go to [Sign up](/auth/sign-up).
</Step>
<Step>
Enter your **Email Address** and a **Password** (twice), then select
**Sign up with Email**. Or select **Sign in with Google**.
</Step>
<Step>
If we email you a confirmation link, open it to verify your address.
</Step>
</Steps>

## 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:

<Steps>
<Step>
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.
</Step>
<Step>
Optional: select **Enhance** to have the prompt rewritten in more detail
before you send it.
</Step>
<Step>
Press **Enter** or select the send button. Prototyper creates a new workspace
and the agent starts building.
</Step>
</Steps>

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.

<LiveSpecimen
  id="chat-composer"
  height={220}
  caption="The workspace composer: the shipped component, on sample data."
/>

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:

<Steps>
<Step>
In the workspace header, select **MCP**.
</Step>
<Step>
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**.
</Step>
<Step>
Once your agent is connected, the same **MCP** button offers **Copy workspace
prompt**. Paste it into your agent so it works in this workspace.
</Step>
</Steps>

For the details, including the Free plan's limits and how to revoke access,
see [Connect your own agent](/docs/getting-started/connect-your-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.

<LiveSpecimen
  id="canvas-window"
  height={420}
  caption="An app window with code, live preview and console: the shipped components, on sample data."
/>

- 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

<Steps>
<Step>
Select **Share** in the workspace header.
</Step>
<Step>
Turn on **Share to web**.
</Step>
<Step>
Under **What viewers see**, choose **Canvas only** or **Canvas + chat**. Then
select **Copy** next to the public link.
</Step>
</Steps>

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

<Cards>
  <Card title="Connect your own agent" href="/docs/getting-started/connect-your-agent">
    Drive Prototyper from Claude Code, Codex or any MCP client.
  </Card>
  <Card title="Be clear and direct" href="/docs/guides/be-clear-and-direct">
    Write prompts that get the result you want the first time.
  </Card>
</Cards>