Flowstep MCP for Cursor
Flowstep's MCP server gives Cursor Agent a design tool. Install it with one click, sign in with your Flowstep account, and Cursor can generate real UI screens, preview them in the chat panel, and edit them, then write the components in the repo it already has open.
{
"mcpServers": {
"flowstep": {
"url": "https://api.flowstep.ai/mcp"
}
}
}Use the install link for a pre-filled setup, or paste this into ~/.cursor/mcp.json for every project, or .cursor/mcp.json for just this one.
Signs in with your Flowstep account. No API keys.
Why connect Flowstep to Cursor
Design where the components already are
Cursor knows your codebase. Ask it to design a screen that matches the components you already ship, then have it wire the result up against those same files. The design and the implementation never drift apart, because they came from the same conversation.
Skip the wireframe round trip
You do not need a designer free, a Figma file open or a blank canvas to start. Describe the screen, look at the render, adjust it in the chat, and move on. The whole loop happens in Agent mode.
Import the Figma frame you already have
If the design exists in Figma, ask Cursor to import the frame with import-figma. It lands on the Flowstep canvas as editable elements you can expand into the states the original never covered.
How to connect Flowstep to Cursor
Setup takes about two minutes and there is no API key at any point. Cursor authenticates against your Flowstep account over OAuth.
Install the server
Paste the JSON above into ~/.cursor/mcp.json, or into .cursor/mcp.json to keep it scoped to one project. Cursor picks the server up straight from the config.
Sign in with Flowstep
Cursor prompts you to authenticate the first time it uses a Flowstep tool. Sign in with your Flowstep account in the browser window it opens. Nothing to paste back.
Confirm the tools are live
Open Cursor's MCP settings. Flowstep should be enabled with its tools listed. If the list is empty, refresh the server there.
Design from the chat panel
Switch to Agent mode and ask for a screen. The generated design comes back as an image in the chat, next to the code you are about to write.
What Cursor can do once connected
The server exposes 23 tools. Cursor 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. |
Cursor 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 →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 Cursor
Free to start. Connect the server, generate your first screen, keep the file.
No credit card required