> ## Documentation Index
> Fetch the complete documentation index at: https://docs.polymet.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Design UI in Polymet from Claude Code or Cursor

> Ask your coding agent for a screen, get a working design on a canvas, fix it with one more sentence, and read the code back, with the exact prompts and what they cost.

This guide gets a designed, working screen out of a coding agent without leaving it. You type one request in Claude Code or Cursor, the Polymet Agent builds the screen on a canvas, and your coding agent reads the code back. The example is a settings page for Relay, a made-up team inbox app.

<video autoPlay muted loop playsInline controls poster="/images/docs/tour/tour-polymet-mcp-server-light.jpg" src="https://mintcdn.com/polymet/RmOsXc9g1dyvbvgN/videos/tour-polymet-mcp-server-light.mp4?fit=max&auto=format&n=RmOsXc9g1dyvbvgN&q=85&s=419c29817a0261ba40f0b89be1f90f97" />

The same flow on a small store: add the server, ask for a page, open the canvas link, send a change. The runs are sped up, and the one-time sign-in is skipped.

* **Who it is for:** a developer who works in a coding agent and wants to see a design before writing it into a codebase.
* **What it costs:** the settings page below was built in under four minutes. It ran next to a second example, and the two used 145 credits together. The one fix after it used 7 credits and took under a minute. Every organization gets 500 free credits every 30 days, at most 250 a day.
* **What you need:** a Polymet account, and Claude Code, Claude, Cursor or VS Code. The run below was made from Claude Code.

## 1. Add the Polymet MCP server

In Claude Code, run this once, then sign in to Polymet in the browser window that opens:

```bash theme={null}
claude mcp add --transport http polymet https://polymet.ai/api/mcp
```

For Cursor, Claude and VS Code, the steps are in [Use Polymet from your coding agent](https://docs.polymet.ai/mcp/overview.md).

**You're done with this step when** your coding agent lists tools named `create_project`, `send_prompt` and `get_status`.

## 2. Ask for the screen

Say what you want in your coding agent, and say to use Polymet. Describe the product and the screen, not the code: the Polymet Agent writes the code.

```text theme={null}
Use Polymet to design a settings page for Relay, a team inbox app, as a
prototype with one page.

Layout: a page title "Settings", then three tabs: Profile, Billing,
Notifications. Desktop first, and it should still work at phone width.

1. Profile: an avatar with a "Change photo" button, full name, work email,
   role (a select), time zone (a select), and one "Save changes" button
   that is disabled until something changes.
2. Billing: the current plan as a card ("Team, $24 per seat a month, 6
   seats"), a "Change plan" button, the card on file ending 4242 with
   "Update", and a table of the last four invoices with date, amount,
   status and a download link.
3. Notifications: a list of six switches in two groups, "Email" and
   "Push": new message assigned to me, mention, daily summary, and so on.
   Each switch has a one-line description.

Style: calm and dense like a work tool. White background, a slate ink, one
indigo accent for the main action and the active tab, 8px radius, thin
borders, no shadows. Use made-up people and data, no real names.

Do not add a sidebar, a top navigation or a footer. Do not ask me
questions, just build it. Then send me the canvas link.
```

"Do not ask me questions" matters here. The Polymet Agent may stop to ask **Quick questions**, and a coding agent cannot answer them for you. You would have to open the canvas.

## 3. Watch what your coding agent does

It makes three kinds of call. These are the ones from this run, with the long ids shortened:

```text theme={null}
create_project  name: "Settings page"
  → canvasUrl: https://polymet.ai/canvas/467a2ae3-…

send_prompt     projectId: 467a2ae3-…, prompt: "A settings page for Relay…"
  → status: generating

get_status      projectId: 467a2ae3-…
  → status: generating
get_status      projectId: 467a2ae3-…
  → status: completed
```

`send_prompt` returns at once. Your coding agent then asks `get_status` until it says `completed`. This run was `generating` for under four minutes.

Open the canvas link while it runs. You see the same project a teammate would: the agent's steps in the chat and the screen on the canvas.

## 4. Read what it built

When the generation ends, your coding agent can read the Polymet Agent's summary with `get_conversation` and the files with `get_files`. This run's summary said, in part:

```text theme={null}
Profile: "Save changes" stays disabled until a field actually differs from
what was last saved. It also stays disabled if the name is empty or the
email isn't valid.

Additions you didn't ask for:
- A "Changes saved" message after saving.
- The selected tab is kept in the address (?tab=billing), so a tab can be
  linked to directly.
```

The files it wrote: one page (`src/polymet/pages/settings.tsx`), four components (profile, billing and notification settings, and a shared section), and one data file with every name and number in it.

Read the summary before you trust the screen. It tells you what was added that you did not ask for, and what the agent did not check: this one said it had not looked at the page at phone width.

## 5. Fix what is off, from the same place

Reading the data file showed one thing wrong. The prompt said "no real names", and the names were made up, but the profile photo was loaded from a real person's GitHub account. One more request fixed it:

```text theme={null}
The profile avatar loads a real person's photo from github.com. Replace it
with a placeholder that loads nothing from outside: a circle with the
initials "MO" on a light indigo background. Keep "Change photo" working as
it does now.
```

That generation used 7 credits and finished in under a minute. Your coding agent can then show exactly what changed with `get_changes`. Here, two files: the photo's address became empty in the data file, and the avatar now falls back to initials on an indigo tint.

Check generated sample data for real people before you show a screen to anyone. An instruction not to use real names does not cover a photo.

## 6. Take the design further

* **Keep designing on the canvas.** Open the canvas link, click **Select**, point at an element and say what to change. See [Select and edit with AI](https://docs.polymet.ai/edit/select-and-edit.md).
* **Bring the code into your codebase.** Ask your coding agent to read the page and its components with `get_files` and adapt them to your project. On a paid plan it can download the whole repository instead.
* **Keep the two in step.** Link the project to a GitHub repository, and every change made in Polymet is pushed to it. See [Sync a project with a repository](https://docs.polymet.ai/github/sync.md).

## You're done when

* Your coding agent has given you a canvas link, and the link opens the project with the screen on it.
* The three tabs switch, and **Save changes** is disabled until you edit a field.
* `get_changes` after your fix shows only the files you expected.

## If it goes wrong

* **`get_status` says the generation is waiting for you.** The Polymet Agent asked a question or needs an approval, such as a database change. Open the canvas link and answer there. Your coding agent cannot.
* **`send_prompt` is refused while a generation is running.** One generation runs per branch at a time. Wait for `completed`, then send again.
* **A generation never finishes.** A generation stops after 25 minutes. Ask for a smaller piece.
* **`download_repository` returns an error about a paid plan.** Downloading the whole repository needs one. `get_files` works on every plan.

## Next

* [What your agent can do](https://docs.polymet.ai/mcp/tools.md): every tool the Polymet MCP server offers, and its limits
* [Prototype an app idea with AI](https://docs.polymet.ai/guides/tutorials/prototype-an-app-idea.md): the same loop done on the canvas, ending on a live link
* [Write better prompts](https://docs.polymet.ai/guides/prompting/write-better-prompts.md): what to put in the request so the first result is close
* [How credits work](https://docs.polymet.ai/plans/credits.md): what a generation costs


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.