> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Flowstep MCP Server

> Use Flowstep as an MCP server to generate, inspect, and manage UI designs directly from Cursor, Claude Code, or any MCP-compatible client.

Flowstep exposes its design tools over the [Model Context Protocol](https://modelcontextprotocol.io/), letting your AI assistant create and iterate on UI screens without leaving your editor.

The server is hosted at `https://api.flowstep.ai/mcp` (Streamable HTTP transport). No local process to run.

## What you can do

The server exposes 20 tools across seven categories:

| Category          | Tools                                                                                         |
| ----------------- | --------------------------------------------------------------------------------------------- |
| **Files**         | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **Screens**       | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **AI generation** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` |
| **Chat**          | `get-chat-history`                                                                            |
| **Design**        | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines`               |
| **Figma**         | `import-figma`                                                                                |
| **Billing**       | `get-plan-details`                                                                            |

## Common use cases

**Generate screens from a prompt** — call `create-new-design` with a description. Flowstep creates the file and screens in one step. Call `get-screen-image` with the returned `screenIds` to see the result inline.

**Visualise a React component** — upload your `.jsx` or `.tsx` file via `upload-attachment` (use `mimeType: text/javascript`), then pass the returned attachment into `create-new-design` with a message describing the component. Flowstep reads the source and generates a matching design screen.

**Iterate on a design** — call `edit-design` with a target `screenId` and instructions to modify it, or `regenerate-design` to redo a screen from scratch.

**Maintain design guidelines** — call `get-design-guidelines` to retrieve your current style rules (colours, typography, spacing, tone), then use `update-design-guidelines` to keep them in sync as your design evolves. Passing consistent guidelines into `create-new-design` or `edit-design` ensures every generated screen stays on-brand. Use `delete-design-guidelines` to reset them entirely.

**Import from Figma** — call `import-figma` with a Figma frame link and a `fileId` to bring the frame into a Flowstep file as editable elements. The file's organization must have Figma connected first.

**Audit quota** — call `get-plan-details` to see remaining daily and monthly usage before kicking off a batch of generations.

## Endpoint

```
https://api.flowstep.ai/mcp
```

Transport: Streamable HTTP. Session model: stateless (each request is independent, no session ID).

## Next steps

<CardGroup cols={2}>
  <Card title="Quickstart" icon="bolt" href="/mcp/quickstart">
    First tool call in under 5 minutes with Cursor.
  </Card>

  <Card title="Authentication" icon="lock" href="/mcp/authentication">
    How OAuth 2.1 PKCE works and how tokens are issued.
  </Card>

  <Card title="Tools" icon="wrench" href="/mcp/tools">
    Full input/output reference for all 20 tools.
  </Card>

  <Card title="Examples" icon="code" href="/mcp/examples">
    End-to-end workflows for common tasks.
  </Card>
</CardGroup>