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

# Início Rápido do MCP

> Liga o Flowstep ao teu editor de IA e executa a tua primeira chamada de ferramenta.

## Pré-requisitos

* Uma conta Flowstep ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **Requer Cursor v0.43+**

    ## Passo 1 — Adiciona o servidor

    Cria ou edita `~/.cursor/mcp.json` (global) ou `.cursor/mcp.json` na raiz do teu projeto:

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    Reinicia o Cursor após guardar.

    ## Passo 2 — Autentica

    Abre o painel MCP do Cursor (Settings → MCP) e clica em **Connect** junto a Flowstep. O Cursor abre o teu navegador para o login OAuth do Flowstep. Faz login com as tuas credenciais do Flowstep (email/password ou Google). O navegador redireciona-te e o Cursor guarda o token automaticamente.

    <Note>
      Precisas de uma conta Flowstep antes de autenticar. Se não tens uma, inscreve-te primeiro em [app.flowstep.ai](https://app.flowstep.ai).
    </Note>

    ## Passo 3 — Executa uma chamada de ferramenta

    Num chat do Cursor, pede:

    > "List my Flowstep files"

    O Cursor chama `list-files` e devolve a tua lista de ficheiros. Se a resposta estiver vazia, cria um ficheiro primeiro:

    > "Create a new Flowstep file called 'Dashboard'"

    ## Passo 4 — Gera um ecrã

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    O Cursor chama `create-new-design` (que cria o ficheiro e gera os ecrãs num passo), depois `get-screen-image`. Verás o design renderizado em linha no chat.
  </Tab>

  <Tab title="Claude Code">
    **Requer CLI do Claude Code**

    ## Passo 1 — Adiciona o servidor

    Cria `.mcp.json` na raiz do teu projeto (project-scoped) ou `~/.claude/mcp.json` (global):

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "type": "http",
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    <Note>
      O campo `"type": "http"` é obrigatório para servidores HTTP do Claude Code. O Cursor não o necessita.
    </Note>

    ## Passo 2 — Autentica

    Executa qualquer ferramenta Flowstep a partir de um chat do Claude Code. Na primeira utilização, o Claude Code abre o teu navegador para o login OAuth do Flowstep. Faz login com as tuas credenciais do Flowstep (email/password ou Google). O navegador redireciona-te e o token é guardado automaticamente.

    <Note>
      Precisas de uma conta Flowstep antes de autenticar. Se não tens uma, inscreve-te primeiro em [app.flowstep.ai](https://app.flowstep.ai).
    </Note>

    ## Passo 3 — Executa uma chamada de ferramenta

    Num chat do Claude Code, pede:

    > "List my Flowstep files"

    O Claude Code chama `list-files` e devolve a tua lista de ficheiros. Se a resposta estiver vazia, cria um ficheiro primeiro:

    > "Create a new Flowstep file called 'Dashboard'"

    ## Passo 4 — Gera um ecrã

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    O Claude Code chama `create-new-design` (que cria o ficheiro e gera os ecrãs num passo), depois `get-screen-image`. Verás o design renderizado em linha no chat.
  </Tab>
</Tabs>

## Próximos passos

* [Referência de ferramentas](/pt/mcp/tools) — documentação completa de entrada/saída para as 20 ferramentas
* [Exemplos](/pt/mcp/examples) — fluxos de trabalho de vários passos
* [Outros clientes](/pt/mcp/clients/claude-code) — Windsurf, Claude Desktop, claude.ai