The Flowstep MCP server
Flowstep's MCP server gives an AI coding agent a design tool. Connect it to Claude Code, Cursor, Claude, Windsurf or Codex, and the agent can generate real UI screens, look at the renders, and edit them, on the same canvas your team already works in. One URL, 23 tools, no API keys.
MCP setup for every client
Pick Claude Code, Cursor, Claude, Windsurf or Codex for the exact command or config, and open the full guide for what changes about the workflow and the questions people actually hit during setup.
$ claude mcp add --transport http flowstep https://api.flowstep.ai/mcp
One command, then design from the terminal you already live in.
Add --scope user to make Flowstep available in every project instead of just this one.
What is MCP, and why does a design tool have one?
The Model Context Protocol is an open standard for connecting AI assistants to external tools and data. A client (an editor, a terminal agent, a chat app) connects to an MCP server, discovers the tools it offers, and calls them on your behalf.
Coding agents are good at writing components and bad at deciding what a screen should look like, because they cannot see one. Flowstep's server fixes both halves: it generates the screen, and it hands the render back as an image the model can actually look at before it writes any code.
That matters most at the point where design and code usually part company. Instead of a ticket, a screenshot and a week of back-and-forth, the same session produces the screen, the states around it, and the implementation.
And nothing is trapped in the agent's context. Every screen lands in a Flowstep file on the infinite canvas, editable by hand, shareable with your team, exportable to code, and copyable straight into Figma.
The 23 MCP tools Flowstep exposes
Your client discovers these automatically once the server is connected. You describe the outcome. The agent picks the tools.
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. |
MCP FAQs
The server, the auth model, and what it costs
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 where you work
Connect the server, generate your first screen, keep the file. Free to start.
No credit card required