# 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.

[Create a free account](https://app.flowstep.ai/register)  
[Read the MCP docs](https://docs.flowstep.ai/)

Cursor~/.cursor/mcp.jsonCopy

```
{
  "mcpServers": {
    "flowstep": {
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}
```

[Add Flowstep to Cursor](https://cursor.com/install-mcp?name=flowstep&config=eyJ1cmwiOiJodHRwczovL2FwaS5mbG93c3RlcC5haS9tY3AifQ%3D%3D)

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.

1.  **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.

2.  **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.

3.  **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.

4.  **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:

**You**  
"Design a team management screen for this app in Flowstep. Match the density of our existing dashboard."

**Cursor** is working

**Cursor**  
Read src/components/Dashboard.tsx, called create-new-design with that context, then returned the render inline.

**You**  
"Design a team management screen for this app in Flowstep. Match the density of our existing dashboard."

**Cursor**  
Read src/components/Dashboard.tsx, called create-new-design with that context, then returned the render inline.

**You**  
"Add the empty state and the invite-pending state."

**Cursor**  
Called expand-design twice off the same screen. Both variants land on your Flowstep canvas and come back as images.

**You**  
"Now implement all three using our Table and Dialog components."

## What Cursor can do once connected

The server exposes 21 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 existing screen with a different layout, a different style, or from scratch.                                                       |

### Read and manage screens

How the agent sees and labels screens on the canvas.

| 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.                 |
| `rename-screen` | Rename a screen. The label shown on the canvas and in list-screens.                                             |
| `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

### Where does Cursor store the Flowstep MCP config?

In ~/.cursor/mcp.json when you install it globally, or .cursor/mcp.json inside a project when you want it available in that repo only. Both accept the same JSON shown above.

### Do I need to restart Cursor after installing?

No. Cursor picks the server up from the config. If the tool list looks empty, refresh the server from Cursor's MCP settings rather than restarting the editor.

### How is this different from the Figma MCP server?

Both can generate designs, so it is not a read-versus-write split. Flowstep's output lands on the Flowstep canvas rather than in a Figma file, and from there you can copy it into Figma or export it as code. If the design already exists in Figma, import-figma brings that frame across so you can generate the missing states around it. Running both is fine.

### Does it work in Agent mode and Ask mode?

Flowstep's tools are called by the agent, so use Agent mode. Ask mode does not run tools.

### Can Cursor edit a design I made in the Flowstep app?

Yes. list-files and list-screens show everything in your account, and edit-design changes screens in place. A screen created in the browser and a screen created from Cursor are the same object on the same canvas.

### Is my code sent to Flowstep?

Only what you ask the agent to send. Cursor decides what context to include in a tool call, typically the prompt and any file you explicitly pointed it at. Flowstep never pulls from your repo on its own.

## 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 CodeTerminalClaude CodeOne command, then design from the terminal you already live in.](/content/mcp/claude-code/index.html)
- [Claudeclaude.ai and Claude DesktopClaudeAdd a custom connector and design without opening an editor.](/content/mcp/claude/index.html)
- [WindsurfIDEWindsurfDrop one block into mcp_config.json and Cascade can design.](/content/mcp/windsurf/index.html)

[See the full Flowstep MCP overview](/content/mcp/index.html) 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.  
Start for free  
No credit card required  
See Pricing