> ## 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.

# Servidor Flowstep MCP

> Utiliza o Flowstep como um servidor MCP para gerar, inspecionar e gerir designs de UI diretamente do Cursor, Claude Code ou de qualquer cliente compatível com MCP.

O Flowstep expõe as suas ferramentas de design através do [Model Context Protocol](https://modelcontextprotocol.io/), permitindo que o teu assistente de IA crie e itere ecrãs de UI sem sair do editor.

O servidor está alojado em `https://api.flowstep.ai/mcp` (transporte HTTP Streamable). Sem processo local para executar.

## O que podes fazer

O servidor expõe 20 ferramentas em sete categorias:

| Categoria      | Ferramentas                                                                                   |
| -------------- | --------------------------------------------------------------------------------------------- |
| **Ficheiros**  | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **Ecrãs**      | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **Geração IA** | `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`                                                                                |
| **Faturação**  | `get-plan-details`                                                                            |

## Casos de uso comuns

**Gera ecrãs a partir de um prompt** — chama `create-new-design` com uma descrição. O Flowstep cria o ficheiro e ecrãs numa única etapa. Chama `get-screen-image` com os `screenIds` devolvidos para veres o resultado em linha.

**Visualiza um componente React** — carrega o teu ficheiro `.jsx` ou `.tsx` através de `upload-attachment` (utiliza `mimeType: text/javascript`), depois passa o anexo devolvido para `create-new-design` com uma mensagem descrevendo o componente. O Flowstep lê a origem e gera um ecrã de design correspondente.

**Itera num design** — chama `edit-design` com um `screenId` alvo e instruções para o modificar, ou `regenerate-design` para refazer um ecrã do zero.

**Mantém diretrizes de design** — chama `get-design-guidelines` para obter as tuas regras de estilo atuais (cores, tipografia, espaçamento, tom), depois utiliza `update-design-guidelines` para as manteres sincronizadas conforme o teu design evolui. Passar diretrizes consistentes para `create-new-design` ou `edit-design` garante que cada ecrã gerado mantém a marca. Utiliza `delete-design-guidelines` para repor completamente.

**Importa a partir do Figma** — chama `import-figma` com uma ligação de frame do Figma e um `fileId` para trazer o frame para um ficheiro Flowstep como elementos editáveis. A organização do ficheiro tem de ter o Figma ligado primeiro.

**Audita quota** — chama `get-plan-details` para ver a utilização diária e mensal restante antes de iniciares um lote de gerações.

## Ponto final

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

Transporte: HTTP Streamable. Modelo de sessão: sem estado (cada pedido é independente, sem ID de sessão).

## Próximos passos

<CardGroup cols={2}>
  <Card title="Início rápido" icon="bolt" href="/pt/mcp/quickstart">
    Primeira chamada de ferramenta em menos de 5 minutos com Cursor.
  </Card>

  <Card title="Autenticação" icon="lock" href="/pt/mcp/authentication">
    Como OAuth 2.1 PKCE funciona e como os tokens são emitidos.
  </Card>

  <Card title="Ferramentas" icon="wrench" href="/pt/mcp/tools">
    Referência completa de entrada/saída para as 20 ferramentas.
  </Card>

  <Card title="Exemplos" icon="code" href="/pt/mcp/examples">
    Fluxos de trabalho de ponta a ponta para tarefas comuns.
  </Card>
</CardGroup>