Flowstep MCP for Claude
Flowstep is a listed connector in Claude's directory, so there is nothing to configure. Add it with one click, sign in with your Flowstep account, and you can generate real, editable UI screens straight from a chat, on claude.ai or in Claude Desktop, with no editor and no API key.
https://claude.ai/directory/flowstep
Open the directory listing and click to add — nothing to paste. Works on claude.ai and Claude Desktop.
Signs in with your Flowstep account. No API keys.
Why connect Flowstep to Claude
Think out loud, then see it
Most product decisions start as a conversation, not a canvas. Work the problem through with Claude the way you already do, and when the shape is clear, ask for the screens. The thinking and the artefact live in the same thread.
No editor required
This is the path for people who do not open a terminal. Product managers, founders and marketers get the same generation, editing and Figma export as an engineer running Claude Code, all through a chat window.
Attach the doc you were going to send anyway
Drop a PRD, a brand guide or a screenshot into the conversation and ask Claude to design against it. Attachments upload straight into Flowstep storage rather than being described back second-hand.
How to connect Flowstep to Claude
Setup takes about two minutes and there is no API key at any point. Claude authenticates against your Flowstep account over OAuth.
Add the connector
Open Flowstep in Claude's connector directory and click to add it. Flowstep is a listed connector, so there is no custom-connector setup and no URL to paste.
Sign in with Flowstep
Claude walks you through authorising the connector in the browser. Sign in with your Flowstep account. Connectors are attached to your Claude account, so the same setup follows you between claude.ai and Claude Desktop.
Enable Flowstep in a chat
Start a conversation and make sure the Flowstep connector is switched on for it. Claude can then call the tools when the conversation calls for a design.
Describe the product, not the layout
"I'm building a habit tracker for shift workers. Design the onboarding." Claude generates the screens in Flowstep and shows you the renders in the thread.
What Claude can do once connected
The server exposes 23 tools. Claude 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 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.
Claude Code
One command, then design from the terminal you already live in.
Set up Claude Code →Cursor
One-click install, then Agent designs and codes in the same repo.
Set up Cursor →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
Free to start. Connect the server, generate your first screen, keep the file.
No credit card required