# The Flowstep MCP server Flowstep's MCP server gives an AI coding agent a design tool. Connect it to Claude Code, Cursor, Claude or Windsurf, and the agent can generate real UI screens, look at the renders, and edit them, on the same canvas your team already works in. One URL, 21 tools, no API keys. Server URL ``` https://api.flowstep.ai/mcp ``` TransportStreamable HTTP AuthOAuth 2.0 + PKCE Tools21 ## Pick your client Each guide has the exact command or config for that client, what changes about the workflow, and the questions people actually hit during setup. - [Claude Code](/content/mcp/claude-code/index.html): One command, then design from the terminal you already live in. - [Cursor](/content/mcp/cursor/index.html): One-click install, then Agent designs and codes in the same repo. - [Claude](/content/mcp/claude/index.html): Add a custom connector and design without opening an editor. - [Windsurf](/content/mcp/windsurf/index.html): Drop one block into mcp_config.json and Cascade can design. ## What is MCP, and why does a design tool have one? The Model Context Protocol is an open standard for connecting AI assistants to external tools and data. A client (an editor, a terminal agent, a chat app) connects to an MCP server, discovers the tools it offers, and calls them on your behalf. Coding agents are good at writing components and bad at deciding what a screen should look like, because they cannot see one. Flowstep's server fixes both halves: it generates the screen, and it hands the render back as an image the model can actually look at before it writes any code. That matters most at the point where design and code usually part company. Instead of a ticket, a screenshot and a week of back-and-forth, the same session produces the screen, the states around it, and the implementation. And nothing is trapped in the agent's context. Every screen lands in a Flowstep file on the infinite canvas, editable by hand, shareable with your team, exportable to code, and copyable straight into Figma. ## 21 tools, one connection Your client discovers these automatically once the server is connected. You describe the outcome. The agent picks the tools. ### 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. | ## How authentication works No API keys, because there are none to leak. ### Sign in, don't paste a key The server implements OAuth 2.0 with PKCE. Your client opens a browser, you sign in with your Flowstep account using email, password or Google, and the client stores the token. Nothing to copy back into a config file. ### Your account, your files The token is scoped to you. An agent sees exactly the files your account can see, no more, and every action it takes is an action you could take yourself in the app. ## MCP FAQs The server, the auth model, and what it costs ### What is the Flowstep MCP server? The Flowstep MCP server is a remote Model Context Protocol server at https://api.flowstep.ai/mcp. It exposes 21 Flowstep tools for generating screens, editing them, rendering them as images, and managing files and design guidelines. Any MCP client can call them, so an AI agent can produce real, editable UI instead of describing one. ### Which MCP clients does Flowstep work with? Any client that supports remote HTTP MCP servers. Flowstep publishes step-by-step setup for Claude Code, Cursor, Claude and Windsurf. Other clients work with the same URL and OAuth flow. ### Do I need an API key? No. The server uses OAuth 2.0 with PKCE. The first time your client calls a Flowstep tool it opens a browser, you sign in with your Flowstep account, and the client stores the token itself. There is no key to generate, paste or rotate. ### Is it free? The server is included with every Flowstep account, including the free plan. Generating and editing screens over MCP draws on the same message allowance as the Flowstep app, so heavier use means a paid plan. ### Can an agent see the designs it makes? Yes. get-screen-image renders any screen to a PNG and returns it inline to your agent if configured, so your agent sees the actual output rather than its own description of it. ### Do screens made over MCP appear in the Flowstep app? Immediately. There is one account and one canvas. A screen an agent generates from your terminal is the same object your teammate opens in the browser, edits, and copies into Figma. ### What is the difference between this and the Figma MCP server? Both can create designs, so this is not a read-versus-write split. The difference is where the output lives. Flowstep puts screens on the Flowstep canvas, where they stay editable, export as React, TypeScript and Tailwind, or copy straight into Figma. If a design already exists in Figma, import-figma brings that frame onto the canvas as editable elements so you can generate the states around it. Running both servers together is fine. ### Can I revoke access? Yes. Remove the server in your client's config, or revoke the session on the Flowstep side, which signs out every connected client at once. No long-lived key is left behind. ## Design where you work Connect the server, generate your first screen, keep the file. Free to start.