Flowstep MCP for Codex
Flowstep's MCP server gives OpenAI Codex a design tool. Add it with one CLI command, sign in with your Flowstep account through the browser, and Codex can generate real UI screens, look at the renders, and edit them from the same session that is writing your code.
$ codex mcp add flowstep --url https://api.flowstep.ai/mcp
Prefer config files? Add an [mcp_servers.flowstep] block with this url to ~/.codex/config.toml — Codex picks the Streamable HTTP transport automatically when a url is set.
Signs in with your Flowstep account. No API keys.
Why connect Flowstep to Codex
Design in the session that builds
Codex runs long, multi-step tasks in your repo. With Flowstep connected, the same run can design the screen, look at the render, and implement it — no handoff between tools.
OAuth sign-in, no API keys
Authentication is a one-time browser sign-in with your Flowstep account. Nothing to generate, paste into config files, or rotate later.
Pin the output to your design system
update-design-guidelines stores your colours, type and component rules on the Flowstep file. Every screen Codex generates against that file follows them, without restating the system in each prompt.
How to connect Flowstep to Codex
Setup takes about two minutes and there is no API key at any point. Codex authenticates against your Flowstep account over OAuth.
Add the server
Run the command above, or add the [mcp_servers.flowstep] block to ~/.codex/config.toml to enable Flowstep everywhere. A project-level .codex/config.toml keeps it scoped to trusted projects.
Sign in once
Run codex mcp login flowstep. Codex opens your browser to sign in with your Flowstep account using email, password or Google. Codex captures the callback and stores the token — there is no API key to create or rotate.
Verify the connection
codex mcp list shows the server with its OAuth status, and /mcp inside a session lists connected servers. Ask Codex to list your Flowstep files; if the tool call succeeds, you are connected.
Ask Codex for a screen
Codex generates it in Flowstep and brings the rendered image back into the session, then carries on with the code.
What Codex can do once connected
The server exposes 23 tools. Codex picks the ones it needs. You describe the outcome, not the tool call.
Generate and edit designs
AI tools that generate and edit screens, plus your messages left.
| Tool | What it does |
|---|---|
ai-generate-screens | Generate brand-new screens from a description. |
ai-edit-screens | Edit one or more existing screens from a description. |
ai-generate-screen-variant | Add a next-step, error or empty state, or platform variant of one existing screen. |
ai-edit-screen-variant | Apply an edit or redesign preset to one existing screen. |
get-plan-details | Get plan, usage, and remaining quota. |
Read and manage screens
How the agent sees and manages screens on the canvas.
| Tool | What it does |
|---|---|
list-screens | List the screens in a file. |
get-screen-image | Get a PNG of a screen in a file. |
get-screen-jsx | Get a screen's JSX and metadata from a file. |
add-screen-jsx | Add a screen's JSX and metadata to a file. |
replace-screen-jsx | Replace an existing screen's JSX and metadata in a file. |
rename-screen | Rename a screen in a file. |
delete-screen | Delete a screen from a file. |
get-chat-history | Get the chat history for 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 | Get a file in your account. |
create-file | Create a file in your account. |
update-file | Rename a file in your account. |
delete-file | Delete a file from your account. |
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 |
|---|---|
get-design-guidelines | Get the design guidelines for a file. |
update-design-guidelines | Set or replace the design guidelines for a file. |
delete-design-guidelines | Delete the design guidelines from a file. |
Bring in your own material
Reference images, PRDs, and existing Figma frames.
| Tool | What it does |
|---|---|
upload-attachment | Upload a reference image or document. |
import-figma | Import a Figma frame into a file. |
Codex 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.
Claude Code
One command, then design from the terminal you already live in.
Set up Claude Code →Cursor
One-click install, then Agent designs and codes in the same repo.
Set up Cursor →Claude
One click in the connector directory, then design without opening an editor.
Set up Claude →Windsurf
Drop one block into mcp_config.json and Cascade can design.
Set up Windsurf →
See the full Flowstep MCP overview for the server URL, authentication details and the complete tool list.
MCP guides for design teams
How Flowstep compares to the Figma MCP server, the best MCP servers for design work, and what the Model Context Protocol actually is.
Flowstep MCP vs Figma MCP →
Two design-tool MCP servers, two different jobs — and why running both works.
The best MCP servers for design work →
The servers worth connecting when your agent's job involves an interface.
What is MCP? A designer's guide →
The protocol behind agent tooling, explained without the plumbing.
Design from Codex
Free to start. Connect the server, generate your first screen, keep the file.
No credit card required