Flowstep MCP for Windsurf | Design UI From Cascade

Flowstep MCP for Windsurf

Flowstep's MCP server gives Windsurf's Cascade agent a design tool. Add one block to mcp_config.json, refresh your servers, and sign in with your Flowstep account. Cascade can then generate real UI screens, look at the renders, and edit them as part of the work it is already doing.

Create a free account Read the MCP docs

Windsurf ~/.codeium/windsurf/mcp_config.json

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

Merge this into the mcpServers object if you already have servers configured, then refresh servers in Windsurf settings.

Signs in with your Flowstep account. No API keys.

Why connect Flowstep to Windsurf

Design inside the flow Cascade is already running

Cascade works across your project in long, multi-step runs. Adding Flowstep means a run can produce the screen and the implementation together, instead of stopping to wait on a design.

One config block, every project

mcp_config.json is global to Windsurf, so Flowstep is available in every workspace you open. Nothing to repeat per repo.

Pin the output to your design system

update-design-guidelines stores your colours, type and component rules on the Flowstep file. Every screen Cascade generates against that file follows them, without you restating the system in each prompt.

How to connect Flowstep to Windsurf

Setup takes about two minutes and there is no API key at any point. Windsurf authenticates against your Flowstep account over OAuth.

Edit mcp_config.json
Open ~/.codeium/windsurf/mcp_config.json and add the flowstep entry. If the file already has an mcpServers object, add the key rather than replacing it.
Refresh servers
In Windsurf settings, refresh the MCP server list. Flowstep appears with its tools once the connection is made.
Sign in with Flowstep
The first Flowstep tool call sends you to the browser to sign in. There is no API key to generate and nothing to paste back into the config file.
Ask Cascade for a screen
Cascade generates it in Flowstep and brings the render back into the conversation, then carries on with the code.

A Windsurf session, start to finish

How it reads in Cascade once the server is refreshed:

Sarah
Karolis
Rasmus
Windsurf

You

“Read design-system.md, save it as the design guidelines on our Flowstep file, then design the notification settings screen.”

Windsurf

Called update-design-guidelines with the file's contents, then create-new-design. The screen comes back on-brand first time.

You

“Make a dark theme version.”

Windsurf

Called expand-design with a platform variant and returned the render.

You

“Ship both. Build the components and wire them to the settings route.”

What Windsurf can do once connected

The server exposes 21 tools. Windsurf 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.

Windsurf FAQs

Setup, billing and the things people hit on the way in

Where is Windsurf's MCP config file?

~/.codeium/windsurf/mcp_config.json on macOS and Linux. On Windows it sits under your user directory in the same .codeium/windsurf path.

I already have MCP servers configured. Will this overwrite them?

Only if you paste over the whole file. Add the flowstep key inside your existing mcpServers object and the rest keeps working.

Windsurf shows no tools after I saved the file

Refresh the server list in Windsurf settings. If it still shows nothing, check the JSON is valid, since a trailing comma is the usual cause, and that the key is serverUrl, which is the shape Windsurf expects for a remote server.

Does Cascade use my Flowstep plan?

Yes. Generation over MCP counts against the same allowance as the Flowstep app. Ask Cascade to call get-plan-details to check remaining quota.

Can Cascade edit designs my team made in the browser?

Yes. It is one account and one canvas. list-files and list-screens surface everything, and edit-design changes screens in place.

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 CodeTerminal
One command, then design from the terminal you already live in.
CursorIDE
One-click install, then Agent designs and codes in the same repo.
Claude
Add a custom connector and design without opening an editor.

See the full Flowstep MCP overview for the server URL, authentication details and the complete tool list.