Flowstep MCP for Claude | Design UI in Claude Desktop
Flowstep MCP for Claude
Flowstep's MCP server plugs into Claude as a custom connector. Paste one URL into Claude's connector settings, sign in with your Flowstep account, and you can generate real, editable UI screens straight from a chat, on claude.ai or in Claude Desktop, with no editor and no API key.
Create a free account Read the MCP docs
ClaudeServer URLCopy
https://api.flowstep.ai/mcp
In Claude, go to Settings → Connectors → Add custom connector and paste this in. Works on claude.ai and Claude Desktop.
Signs in with your Flowstep account. No API keys.
Why connect Flowstep to Claude
Think out loud, then see it
Most product decisions start as a conversation, not a canvas. Work the problem through with Claude the way you already do, and when the shape is clear, ask for the screens. The thinking and the artefact live in the same thread.
No editor required
This is the path for people who do not open a terminal. Product managers, founders and marketers get the same generation, editing and Figma export as an engineer running Claude Code, all through a chat window.
Attach the doc you were going to send anyway
Drop a PRD, a brand guide or a screenshot into the conversation and ask Claude to design against it. Attachments upload straight into Flowstep storage rather than being described back second-hand.
How to connect Flowstep to Claude
Setup takes about two minutes and there is no API key at any point. Claude authenticates against your Flowstep account over OAuth.
- 1
Add the connector
Open Settings → Connectors in Claude and choose Add custom connector. Paste the Flowstep server URL. If you do not see the option, check which connector features your Claude plan includes.
- 2
Sign in with Flowstep
Claude walks you through authorising the connector in the browser. Sign in with your Flowstep account. Connectors are attached to your Claude account, so the same setup follows you between claude.ai and Claude Desktop.
- 3
Enable Flowstep in a chat
Start a conversation and make sure the Flowstep connector is switched on for it. Claude can then call the tools when the conversation calls for a design.
- 4
Describe the product, not the layout
"I'm building a habit tracker for shift workers. Design the onboarding." Claude generates the screens in Flowstep and shows you the renders in the thread.
A Claude session, start to finish
What the conversation looks like once the connector is switched on:
You
"Here's our brand guide. I need an onboarding flow for a habit tracker aimed at nurses on rotating shifts."
Claude is working
Claude
Uploaded the brand guide as an attachment, saved it to the file's design guidelines, then generated a four-screen onboarding flow and showed each render.
You
"Screen two asks for too much at once. Split it."
Claude
Called edit-design on screen two and expand-design to add the follow-up step. Both are now on your Flowstep canvas.
You
"Send the link to my designer. They can pick it up in Flowstep and copy it into Figma."
What Claude can do once connected
The server exposes 21 tools. Claude picks the ones it needs. You describe the outcome, not the tool call.
Generate and edit designs
The four operations that produce or change screens.
| Tool | What it does |
|---|---|
create-new-design |
Generate brand-new screens from a description. Starts a new file, or adds screens to one you already have. |
edit-design |
Change one or more existing screens in place: theming, copy, or layout. |
expand-design |
Derive a new screen from an existing one: the next step in a flow, an error or empty state, or another platform. |
regenerate-design |
Redo a single existing screen with a different layout, a different style, or from scratch. |
Read and manage screens
How the agent sees and labels screens on the canvas.
| Tool | What it does |
|---|---|
list-screens |
List every screen in a file with its prompt, fidelity and creation date. |
get-screen |
Return a screen's component tree, dimensions and fidelity as structured data. |
get-screen-image |
Render a screen to a PNG and return it inline, so your agent can look at the design it just made. |
rename-screen |
Rename a screen. The label shown on the canvas and in list-screens. |
get-chat-history |
Read the Flowstep chat history attached to a file. |
Manage files
Project housekeeping without switching to the browser.
| Tool | What it does |
|---|---|
list-files |
List the files in your account. |
get-file |
Fetch a single file by ID. |
create-file |
Create a new Flowstep file. |
update-file |
Rename an existing file. |
delete-file |
Delete a file. |
Keep output on-brand
Design guidelines are free-form text stored on a file and injected into every generation made against it.
| Tool | What it does |
|---|---|
update-design-guidelines |
Set the colours, type, spacing and component rules a file should follow. Point it at the design system doc already in your repo. |
get-design-guidelines |
Read the guidelines currently attached to a file. |
delete-design-guidelines |
Remove a file's guidelines. |
Bring in your own material
Reference images, PRDs, existing Figma frames and raw JSX.
| Tool | What it does |
|---|---|
upload-attachment |
Attach a reference image or document. Bytes upload straight to Flowstep storage rather than through your agent's context. |
import-figma |
Import a Figma frame into a Flowstep file as editable elements. Re-importing the same frame updates it in place. |
add-screen |
Add a screen from a raw JSX string. This is the code-first path for turning components you already have into canvas screens. |
get-plan-details |
Check your plan, usage and remaining quota before a long run. |
Claude FAQs
Does this work on claude.ai as well as Claude Desktop?
Yes. Custom connectors are configured against your Claude account, so adding Flowstep once makes it available in both the web app and the desktop app.
Do I need a paid Claude plan?
Custom connectors are a Claude feature, not a Flowstep one, and availability depends on your Claude plan. Check Settings → Connectors in your account. If Add custom connector is there, you can add Flowstep.
Do I need a Flowstep subscription?
You need a Flowstep account, and the free plan works. Generation over MCP draws on the same message allowance as the Flowstep app, so heavier use means a paid plan.
Can I see the designs inside the chat?
Yes. Claude calls get-screen-image, which renders the screen to a PNG and returns it inline in the conversation.
What happens to the screens after the chat ends?
They stay in your Flowstep account on the canvas, exactly like screens made in the app. Open them in the browser, keep editing, invite your team, or copy them into Figma.
Can I revoke access later?
Yes. Remove the connector in Claude's settings, or revoke the session from Flowstep. The connector holds no long-lived API key of its own.
Using a different client?
Flowstep's MCP server is a standard remote HTTP server, so it works with any MCP client. These are the ones with step-by-step setup written up.
- Claude CodeTerminalClaude CodeOne command, then design from the terminal you already live in.
- CursorIDECursorOne-click install, then Agent designs and codes in the same repo.
- WindsurfIDEWindsurfDrop one block into mcp_config.json and Cascade can design.
See the full Flowstep MCP overview for the server URL, authentication details and the complete tool list.
Design from Claude
Free to start. Connect the server, generate your first screen, keep the file.