Flowstep MCP — Claude Code

Configuration

Add the server with the Claude Code CLI:

claude mcp add --transport http flowstep https://api.flowstep.ai/mcp

To share the server with everyone working in a repository, add it to .mcp.json in the project root instead and commit the file:

{
  "mcpServers": {
    "flowstep": {
      "type": "http",
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}

The "type": "http" field is required for Claude Code HTTP servers.

Authentication

Claude Code handles the OAuth 2.1 PKCE flow automatically the first time it calls a Flowstep tool. Your browser opens to the Flowstep sign-in page. Sign in with your Flowstep credentials (email/password or Google), click Allow on the consent screen, and the CLI captures the callback. There’s no API key to create or rotate.

You need a Flowstep account before authenticating. Create one at app.flowstep.ai.

Usage example

Generate a desktop settings screen in Flowstep for a developer tool, with sections
for API keys, notifications, and team members. Show me the rendered image when done.

Claude Code calls ai-design-screens → get-screen-image and shows the render inline. Because Claude Code already has your repo open, you can follow up with “Now build this screen in our app” — it can read the design with get-screen-jsx and implement it against your components.

Get Started

Using Flowstep

Teams & Organizations

Exporting & Integrations

MCP Server

Billing & Plans

Security & Privacy

Flowstep MCP — Claude Code

Configuration

Authentication

Verify the connection

Usage example

​Configuration

​Authentication

​Verify the connection

​Usage example

Configuration

Authentication

Verify the connection

Usage example