Guia de Início Rápido do MCP

Pré-requisitos

Uma conta Flowstep (app.flowstep.ai)

Cursor
Claude Code

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:

{
  "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.

Você precisa de uma conta Flowstep antes de autenticar-se. Se você não tiver uma, inscreva-se em app.flowstep.ai primeiro.

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.

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):

{
  "mcpServers": {
    "flowstep": {
      "type": "http",
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}

O campo "type": "http" é obrigatório para servidores HTTP do Claude Code. O Cursor não precisa disso.

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.

Você precisa de uma conta Flowstep antes de autenticar-se. Se você não tiver uma, inscreva-se em app.flowstep.ai primeiro.

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.

Próximos passos

Referência de ferramentas — documentação completa de entrada/saída para todas as 20 ferramentas
Exemplos — fluxos de trabalho de múltiplas etapas
Outros clientes — Windsurf, Claude Desktop, claude.ai

Primeiros passos

Usando o Flowstep

Equipes e organizações

Exportação e integrações

Servidor MCP

Cobrança e planos

Segurança e privacidade

Guia de Início Rápido do MCP

Pré-requisitos

Etapa 1 — Adicione o servidor

Etapa 2 — Autentique-se

Etapa 3 — Execute uma chamada de ferramenta

Etapa 4 — Gere uma tela

Etapa 1 — Adicione o servidor

Etapa 2 — Autentique-se

Etapa 3 — Execute uma chamada de ferramenta

Etapa 4 — Gere uma tela

Próximos passos

​Pré-requisitos

​Etapa 1 — Adicione o servidor

​Etapa 2 — Autentique-se

​Etapa 3 — Execute uma chamada de ferramenta

​Etapa 4 — Gere uma tela

​Etapa 1 — Adicione o servidor

​Etapa 2 — Autentique-se

​Etapa 3 — Execute uma chamada de ferramenta

​Etapa 4 — Gere uma tela

​Próximos passos

Pré-requisitos

Etapa 1 — Adicione o servidor

Etapa 2 — Autentique-se

Etapa 3 — Execute uma chamada de ferramenta

Etapa 4 — Gere uma tela

Etapa 1 — Adicione o servidor

Etapa 2 — Autentique-se

Etapa 3 — Execute uma chamada de ferramenta

Etapa 4 — Gere uma tela

Próximos passos