Connect Flostep to your AI assistant

Flostep speaks MCP (Model Context Protocol) — the open standard for connecting AI assistants to outside tools. It's not tied to one vendor: Claude, Cursor, VS Code, Windsurf and anything else that speaks MCP can all connect to the same endpoint. Once connected, ask for a diagram in plain language and get back a real, steppable Flostep diagram plus a link you can send to anyone. Your assistant can read your existing diagrams too, so "add a retry step to my checkout flow" works on the actual diagram rather than a guess at it.

Step 1 — Create an API key

Go to API Keys in your account.
Give the key a name you'll recognise later — "Cursor on my laptop" — and click Create key.
Copy it straight away. It starts with fls_ and is only shown once.

The key acts on your whole workspace, so treat it like a password. If one leaks, delete it on that page and create a new one — nothing else breaks. On a Team plan that workspace is the shared library: the key can read and change anything your colleagues have made, and diagrams it creates belong to the team, credited to whoever owns the key.

Claude Code

One command, run from any terminal:

claude mcp add --transport http flostep https://flostep.dev/mcp \
  --header "Authorization: Bearer fls_YOUR_KEY"

Run /mcp inside Claude Code to confirm it connected. Add --scope user to the command if you want it available in every project rather than just the current one.

Cursor, VS Code, Windsurf & other MCP clients

Any client that supports remote MCP servers over HTTP can connect. Whatever the config format, you are always giving it the same three things:

Transport:  HTTP  (sometimes listed as "Streamable HTTP")
URL:        https://flostep.dev/mcp
Header:     Authorization: Bearer fls_YOUR_KEY

The JSON differs per client — mostly in what the URL key is called — so copy the row for your tool rather than a generic snippet:

Client	Config entry	Usually in
Cursor	`mcpServers → flostep → url + headers`	`.cursor/mcp.json`
VS Code	`servers → flostep → type: "http" + url + headers`	`.vscode/mcp.json`
Windsurf	`mcpServers → flostep → serverUrl + headers`	`mcp_config.json`

// Cursor — swap `url` for `serverUrl` on Windsurf
{
  "mcpServers": {
    "flostep": {
      "url": "https://flostep.dev/mcp",
      "headers": { "Authorization": "Bearer fls_YOUR_KEY" }
    }
  }
}

Check your tool's own MCP docs for where the file lives — these change often. A client that only offers stdio or local servers can't reach a hosted endpoint directly; bridge it with mcp-remote, which is currently the route for Zed (native Streamable HTTP support there is still in progress).

Claude API

Pass Flostep as an MCP server on the request:

mcp_servers=[{
    "type": "url",
    "url": "https://flostep.dev/mcp",
    "name": "flostep",
    "authorization_token": "fls_YOUR_KEY",
}]

Try it

Once connected, ask for what you want in ordinary language:

“Make a Flostep diagram of how a password reset works here, and give me a share link.”
“In Flostep, draw our checkout flow: cart → payment service → Stripe → webhook → order service.”
“What Flostep diagrams do I have?”
“Add a retry step between the queue and the worker in my Flostep ingestion diagram.”
“Read ARCHITECTURE.md and turn the request lifecycle into a Flostep diagram.”

Saying “Flostep” is worth the extra word if you also have other diagram tools connected — Mermaid, draw.io, and the like all expose similarly named tools, so naming the one you want removes the guesswork. Once you're working on a specific diagram you can drop it; follow-ups like “add a caching step” stay on the diagram already in play.

Your assistant will usually create the diagram and then hand back a share link. Open it and you get the full walkthrough view — step through it, present it, or embed it with the embed guide.

What your assistant can do

Tool	What it does
`list_diagrams`	Find your diagrams, optionally filtered by title.
`get_diagram`	Read one back as text, so edits build on what's really there.
`create_diagram`	Create a new diagram from a described flow.
`update_diagram`	Replace the steps of an existing diagram, or rename it.
`share_diagram`	Turn on sharing and return the public and embed links.

The format underneath

You don't need to know this — your assistant writes it for you — but diagrams are plain text, one step per line, and you can edit the same thing yourself in the Code tab of any diagram:

Frontend -> API: POST /login
API -> Database: check credentials
Database -> API: user record
API -> Frontend: returns JWT
Frontend -> Frontend: redirect to dashboard

Components are created the first time they're named, so reusing a name points at the same box. A diagram can hold up to 40 components and 120 steps — past that, split it into a few smaller diagrams, which read better anyway.

Good to know

An assistant only ever sees your own diagrams — a key can't reach anyone else's.
Diagrams created this way count towards your plan, same as ones you draw by hand.
Nothing is public until you ask for a share link. Sharing stays off by default.
update_diagram replaces every step, so a well-behaved client reads a diagram before changing it.
Turning off sharing on a diagram kills the link it gave you, and any embed using it.

Stuck? Email us at support@flostep.dev.