MCP Quickstart

Prerequisites

A Flowstep account (app.flowstep.ai)

Using Claude on claude.ai or Claude Desktop? Flowstep is a listed connector in Claude’s directory — add it in one click from claude.ai/directory/flowstep. See claude.ai.

Cursor
Claude Code

Requires Cursor v0.43+

Step 1 — Add the server

Click Add Flowstep to Cursor to install it in one click, or create or edit ~/.cursor/mcp.json (global) or .cursor/mcp.json in your project root:

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

Restart Cursor after saving.

Step 2 — Authenticate

Open the Cursor MCP panel (Settings → MCP) and click Connect next to Flowstep. Cursor opens your browser to the Flowstep sign-in page. Sign in with your Flowstep credentials (email/password or Google), then click Allow on the consent screen. The browser redirects back and Cursor stores the token automatically.

You need a Flowstep account before authenticating. If you don’t have one, sign up at app.flowstep.ai first.

Step 3 — Run a tool call

In a Cursor chat, ask:

“List my Flowstep files”

Cursor calls list-files and returns your file list. If the response is empty, create a file first:

“Create a new Flowstep file called ‘Dashboard‘“

Step 4 — Generate a screen

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

Cursor calls ai-design-screens (which creates a new file and generates the screens in one step), then get-screen-image. You’ll see the rendered design inline in the chat.

Requires Claude Code CLI

Step 1 — Add the server

Run this in your project:

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

To share the server with your team, add it to .mcp.json in your project root instead:

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

The "type": "http" field is required for Claude Code HTTP servers. Cursor does not need it.

Step 2 — Authenticate

Run any Flowstep tool from a Claude Code chat. On first use, Claude Code opens your browser to the Flowstep sign-in page. Sign in with your Flowstep credentials (email/password or Google), then click Allow on the consent screen. The browser redirects back and the token is stored automatically. Type /mcp in Claude Code to check that Flowstep is connected.

You need a Flowstep account before authenticating. If you don’t have one, sign up at app.flowstep.ai first.

Step 3 — Run a tool call

In a Claude Code chat, ask:

“List my Flowstep files”

Claude Code calls list-files and returns your file list. If the response is empty, create a file first:

“Create a new Flowstep file called ‘Dashboard‘“

Step 4 — Generate a screen

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

Claude Code calls ai-design-screens (which creates a new file and generates the screens in one step), then get-screen-image. You’ll see the rendered design inline in the chat.

ai-design-screens and the other AI design tools draw on your Flowstep message allowance. Listing, reading, and rendering screens is free. See Usage limits.

Next steps

Tools reference — full input/output docs for all 22 tools
Examples — multi-step workflows
Other clients — Windsurf, Codex, Claude Desktop, claude.ai

Get Started

Using Flowstep

Teams & Organizations

Exporting & Integrations

MCP Server

Billing & Plans

Security & Privacy

Prerequisites

Step 1 — Add the server

Step 2 — Authenticate

Step 3 — Run a tool call

Step 4 — Generate a screen

Step 1 — Add the server

Step 2 — Authenticate

Step 3 — Run a tool call

Step 4 — Generate a screen

Next steps

​Prerequisites

​Step 1 — Add the server

​Step 2 — Authenticate

​Step 3 — Run a tool call

​Step 4 — Generate a screen

​Step 1 — Add the server

​Step 2 — Authenticate

​Step 3 — Run a tool call

​Step 4 — Generate a screen

​Next steps

Prerequisites

Step 1 — Add the server

Step 2 — Authenticate

Step 3 — Run a tool call

Step 4 — Generate a screen

Step 1 — Add the server

Step 2 — Authenticate

Step 3 — Run a tool call

Step 4 — Generate a screen

Next steps