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.
https://api.flowstep.ai/mcpIn 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.
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.
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.
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.
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:
“Here's our brand guide. I need an onboarding flow for a habit tracker aimed at nurses on rotating shifts.”
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.
“Screen two asks for too much at once. Split it.”
Called edit-design on screen two and expand-design to add the follow-up step. Both are now on your Flowstep canvas.
“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 20 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 screen from scratch, optionally in a different style. |
Read what already exists
How the agent sees your canvas before it changes anything.
| 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. |
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
Setup, billing and the things people hit on the way in
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.
- TerminalClaude CodeOne command, then design from the terminal you already live in.
- IDECursorOne-click install, then Agent designs and codes in the same repo.
- IDEWindsurfDrop 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.
No credit card required