The Flowstep MCP server
Flowstep's MCP server gives an AI coding agent a design tool. Connect it to Claude Code, Cursor, Claude or Windsurf, 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, 20 tools, no API keys.
Server URL
https://api.flowstep.ai/mcp- Transport
- Streamable HTTP
- Auth
- OAuth 2.0 + PKCE
- Tools
- 20
Pick your client
Each guide has the exact command or config for that client, what changes about the workflow, and the questions people actually hit during setup.
- TerminalClaude CodeOne command, then design from the terminal you already live in.
- 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.
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.
20 tools, one connection
Your client discovers these automatically once the server is connected. You describe the outcome. The agent picks the tools.
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. |
How authentication works
No API keys, because there are none to leak.
Sign in, don't paste a key
The server implements OAuth 2.0 with PKCE. Your client opens a browser, you sign in with your Flowstep account using email, password or Google, and the client stores the token. Nothing to copy back into a config file.
Your account, your files
The token is scoped to you. An agent sees exactly the files your account can see, no more, and every action it takes is an action you could take yourself in the app.
MCP FAQs
The server, the auth model, and what it costs
Design where you work
Connect the server, generate your first screen, keep the file. Free to start.
No credit card required