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/mcp
Add --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.
What Claude Code can do once connected
The server exposes 23 tools. Claude Code picks the ones it needs. You describe the outcome, not the tool call.
Generate and edit designs
AI tools that generate and edit screens, plus your messages left.
| Tool | What it does |
|---|---|
ai-generate-screens | Generate brand-new screens from a description. |
ai-edit-screens | Edit one or more existing screens from a description. |
ai-generate-screen-variant | Add a next-step, error or empty state, or platform variant of one existing screen. |
ai-edit-screen-variant | Apply an edit or redesign preset to one existing screen. |
get-plan-details | Get plan, usage, and remaining quota. |
Read and manage screens
How the agent sees and manages screens on the canvas.
| Tool | What it does |
|---|---|
list-screens | List the screens in a file. |
get-screen-image | Get a PNG of a screen in a file. |
get-screen-jsx | Get a screen's JSX and metadata from a file. |
add-screen-jsx | Add a screen's JSX and metadata to a file. |
replace-screen-jsx | Replace an existing screen's JSX and metadata in a file. |
rename-screen | Rename a screen in a file. |
delete-screen | Delete a screen from a file. |
get-chat-history | Get the chat history for 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 | Get a file in your account. |
create-file | Create a file in your account. |
update-file | Rename a file in your account. |
delete-file | Delete a file from your account. |
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 |
|---|---|
get-design-guidelines | Get the design guidelines for a file. |
update-design-guidelines | Set or replace the design guidelines for a file. |
delete-design-guidelines | Delete the design guidelines from a file. |
Bring in your own material
Reference images, PRDs, and existing Figma frames.
| Tool | What it does |
|---|---|
upload-attachment | Upload a reference image or document. |
import-figma | Import a Figma frame into a file. |
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.
Cursor
One-click install, then Agent designs and codes in the same repo.
Set up Cursor →Claude
One click in the connector directory, then design without opening an editor.
Set up Claude →Windsurf
Drop one block into mcp_config.json and Cascade can design.
Set up Windsurf →Codex
One CLI command, then design from your Codex session.
Set up Codex →
See the full Flowstep MCP overview for the server URL, authentication details and the complete tool list.
MCP guides for design teams
How Flowstep compares to the Figma MCP server, the best MCP servers for design work, and what the Model Context Protocol actually is.
Flowstep MCP vs Figma MCP →
Two design-tool MCP servers, two different jobs — and why running both works.
The best MCP servers for design work →
The servers worth connecting when your agent's job involves an interface.
What is MCP? A designer's guide →
The protocol behind agent tooling, explained without the plumbing.
Design from Claude Code
Free to start. Connect the server, generate your first screen, keep the file.
No credit card required