Flowstep MCP for Claude Code
Flowstep's MCP server connects Claude Code to your Flowstep account, so the same agent that writes your components can also design them. Add it with one command, sign in through the browser once, and Claude Code can generate screens, render them back as images, and edit them, all without leaving the terminal.
$ claude mcp add --transport http flowstep https://api.flowstep.ai/mcpAdd --scope user to make Flowstep available in every project instead of just this one.
Signs in with your Flowstep account. No API keys.
Why connect Flowstep to Claude Code
Design and implement in one session
Claude Code already has your repo open. Generate the screen in Flowstep, pull it back with get-screen-image, then write the component against a design it can actually see. No tab switching, no re-describing the layout.
Feed it the context that's already on disk
Point Claude Code at the PRD in docs/ or the design system in your repo and have it push that straight into a file's design guidelines. Every screen generated against that file then follows your colours, type and spacing.
Keep your canvas as the source of truth
Screens generated from the terminal land in the same Flowstep file your team is working in, on the same infinite canvas, where they stay editable, shareable, and ready to copy into Figma.
How to connect Flowstep to Claude Code
Setup takes about two minutes and there is no API key at any point. Claude Code authenticates against your Flowstep account over OAuth.
Add the server
Run the command above in any project. Claude Code registers Flowstep as an HTTP MCP server and stores it in that project's config.
Sign in once
The first time Claude Code calls a Flowstep tool it opens your browser. Sign in with your Flowstep account using email, password or Google. There is no API key to create, copy or rotate.
Check it connected
Type /mcp in Claude Code. Flowstep should be listed as connected, with its tools available to the agent.
Ask for a screen
"Design a settings page for this app and show me the render." Claude Code generates it in Flowstep and returns a PNG inline, so you can react to the design instead of reading a description of it.
A Claude Code session, start to finish
A typical loop once the server is connected. The whole thing happens in one Claude Code session:
“Read docs/billing-prd.md, then design the three screens it describes in Flowstep and show me each render.”
Read the PRD, called create-new-design for the plan picker, payment details and confirmation screens, then get-screen-image on each. Three renders come back inline.
“The plan picker is too dense. Make the cards taller and drop the feature table.”
Called edit-design on that one screen and returned the updated render. Your canvas in Flowstep updates at the same time.
“Good. Now build the plan picker as a React component using our existing Card and Button.”
What Claude Code can do once connected
The server exposes 20 tools. Claude Code 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 Code 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.
- IDECursorOne-click install, then Agent designs and codes in the same repo.
- claude.ai and Claude DesktopClaudeAdd a custom connector and design without opening an editor.
- 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 Code
Free to start. Connect the server, generate your first screen, keep the file.
No credit card required