Skip to main content
Flowstep is the design canvas for agent-built software. The Flowstep MCP server exposes that canvas over the Model Context Protocol, so the agents your team already ships with can design screens, look at the rendered result, and build from it — without leaving the editor or terminal. Screens an agent creates over MCP land in the same Flowstep files your team works in. They stay editable on the canvas, shareable, and ready to export or copy into Figma. The server is hosted at https://api.flowstep.ai/mcp (Streamable HTTP transport). There’s no local process to run and no API key to manage — clients sign in with your Flowstep account over OAuth.

​
What you can do

The server exposes 22 tools across eight categories: The three AI design tools draw on the same message allowance as the Flowstep app. All other tools are free. See Usage limits.

​
Common use cases

Generate screens from a prompt — call ai-design-screens with a description. Omit fileId and Flowstep creates the file and the screens in one step. Call get-screen-image for each returned screenId to see the result inline. Visualize a React component — upload your .jsx or .tsx source with upload-attachment (mimeType: text/javascript), then pass the returned attachment into ai-design-screens with a message describing the screen. Flowstep reads the source and generates a matching design. Iterate on a design — call ai-design-screens with one or more screenIds (or individual element ids) in elementIds and free-form instructions to change them in place. The same call can also add new screens, so one request can edit a screen and build the next one. Use ai-edit-screen-variant to apply a preset, such as a dark theme or a different layout, to one whole screen. Expand a flow — call ai-generate-screen-variant to add the next screen, an error or empty state, or a web, tablet, or mobile version of an existing screen. Work code-first — read any screen as JSX with get-screen-jsx, then write your own JSX back with add-screen-jsx (new screen) or replace-screen-jsx (overwrite an existing one). To use your own images, upload them with upload-attachment and put the returned assetUrl in your JSX. These tools are free. Keep output on-brand — use update-design-guidelines to store your colors, typography, and component rules on a file as DESIGN.md text. AI generations against that file follow them. Read them back with get-design-guidelines, or clear them with delete-design-guidelines. Import from Figma — call import-figma with a Figma frame link and a fileId to bring the frame onto the canvas as editable elements. The file’s organization must have Figma connected first. Check your allowance — call get-plan-details to see your plan, usage, and remaining messages before a batch of generations.

​
Endpoint

Transport: Streamable HTTP. Session model: stateless (each request is independent, no session ID). The server supports MCP protocol version 2026-07-28, which it advertises at https://api.flowstep.ai/.well-known/mcp.json. Clients on the earlier 2025-11-25 protocol connect to the same endpoint.

​
Next steps

Quickstart

Connect a client and run your first tool call.

Authentication

How OAuth 2.1 PKCE sign-in and approval work.

Tools

Full input/output reference for all 22 tools.

Examples

End-to-end workflows for common tasks.