Flowstep MCP for Claude Code | Design UI From Your Terminal
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.
Create a free account Read the MCP docs
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 21 tools. Claude Code picks the ones it needs. You describe the outcome, not the tool call.
Generate and edit designs
| 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
| 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
| 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
| 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
| 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
Do I need an Anthropic API key to use Flowstep from Claude Code?
No. The Flowstep MCP server authenticates with your Flowstep account over OAuth. Claude Code opens a browser window the first time it calls a Flowstep tool. Whatever you already use to pay for Claude Code is separate and unchanged.
Is Flowstep available in every project or just this one?
By default the server is added to the project you ran the command in. Add --scope user to the claude mcp add command to register it once for every project on your machine.