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

# Guia de Início Rápido do MCP

> Conecte o Flowstep ao seu editor de IA e execute sua primeira chamada de ferramenta.

## Pré-requisitos

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

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

    ## Etapa 1 — Adicione o servidor

    Crie ou edite `~/.cursor/mcp.json` (global) ou `.cursor/mcp.json` na raiz do seu projeto:

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

    Reinicie o Cursor após salvar.

    ## Etapa 2 — Autentique-se

    Abra o painel MCP do Cursor (Configurações → MCP) e clique em **Connect** ao lado de Flowstep. O Cursor abre seu navegador no login OAuth do Flowstep. Faça login com suas credenciais do Flowstep (email/senha ou Google). O navegador redireciona de volta e o Cursor armazena o token automaticamente.

    <Note>
      Você precisa de uma conta Flowstep antes de autenticar-se. Se você não tiver uma, inscreva-se em [app.flowstep.ai](https://app.flowstep.ai) primeiro.
    </Note>

    ## Etapa 3 — Execute uma chamada de ferramenta

    Em um chat do Cursor, pergunte:

    > "List my Flowstep files"

    O Cursor chama `list-files` e retorna sua lista de arquivos. Se a resposta estiver vazia, crie um arquivo primeiro:

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

    ## Etapa 4 — Gere uma tela

    ```
    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 arquivo e gera as telas em uma etapa), depois `get-screen-image`. Você verá o design renderizado em linha no chat.
  </Tab>

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

    ## Etapa 1 — Adicione o servidor

    Crie `.mcp.json` na raiz do seu projeto (escopo de projeto) 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 precisa disso.
    </Note>

    ## Etapa 2 — Autentique-se

    Execute qualquer ferramenta do Flowstep em um chat do Claude Code. No primeiro uso, o Claude Code abre seu navegador no login OAuth do Flowstep. Faça login com suas credenciais do Flowstep (email/senha ou Google). O navegador redireciona de volta e o token é armazenado automaticamente.

    <Note>
      Você precisa de uma conta Flowstep antes de autenticar-se. Se você não tiver uma, inscreva-se em [app.flowstep.ai](https://app.flowstep.ai) primeiro.
    </Note>

    ## Etapa 3 — Execute uma chamada de ferramenta

    Em um chat do Claude Code, pergunte:

    > "List my Flowstep files"

    O Claude Code chama `list-files` e retorna sua lista de arquivos. Se a resposta estiver vazia, crie um arquivo primeiro:

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

    ## Etapa 4 — Gere uma tela

    ```
    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 arquivo e gera as telas em uma etapa), depois `get-screen-image`. Você verá o design renderizado em linha no chat.
  </Tab>
</Tabs>

## Próximos passos

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