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 button for a pre-filled install, 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
The install button opens Cursor with the Flowstep server pre-filled. Approve it. If you would rather do it by hand, paste the JSON above into ~/.cursor/mcp.json.
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.
A Cursor session, start to finish
How the loop reads in Cursor's Agent panel once Flowstep is connected:
“Design a team management screen for this app in Flowstep. Match the density of our existing dashboard.”
Read src/components/Dashboard.tsx, called create-new-design with that context, then returned the render inline.
“Add the empty state and the invite-pending state.”
Called expand-design twice off the same screen. Both variants land on your Flowstep canvas and come back as images.
“Now implement all three using our Table and Dialog components.”
What Cursor can do once connected
The server exposes 20 tools. Cursor picks the ones it needs. You describe the outcome, not the tool call.
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. |
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.
- TerminalClaude CodeOne command, then design from the terminal you already live in.
- 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.
See the full Flowstep MCP overview for the server URL, authentication details and the complete tool list.
Design from Cursor
Free to start. Connect the server, generate your first screen, keep the file.
No credit card required