Início rápido do MCP

Pré-requisitos

Uma conta no Flowstep (app.flowstep.ai)

Usa o Claude no claude.ai ou no Claude Desktop? O Flowstep é um conector listado no diretório do Claude. Adicione-o com um clique em claude.ai/directory/flowstep. Veja claude.ai.

Cursor
Claude Code

Requer o Cursor v0.43+

Etapa 1: adicionar o servidor

Clique em Add Flowstep to Cursor para instalar com um clique, ou 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 depois de salvar.

Etapa 2: autenticar

Abra o painel de MCP do Cursor (Settings → MCP) e clique em Connect ao lado do Flowstep. O Cursor abre o seu navegador na página de login do Flowstep. Faça login com as suas credenciais do Flowstep (e-mail e senha ou Google) e clique em Allow na tela de consentimento. O navegador redireciona de volta e o Cursor armazena o token automaticamente.

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

Etapa 3: fazer uma chamada de ferramenta

Em um chat do Cursor, pergunte:

“List my Flowstep files”

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

“Create a new Flowstep file called ‘Dashboard‘“

Etapa 4: gerar uma tela

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

O Cursor chama ai-design-screens (que cria um novo arquivo e gera as telas em uma única etapa) e depois get-screen-image. Você verá o design renderizado na conversa.

Requer a CLI do Claude Code

Etapa 1: adicionar o servidor

Execute isto no seu projeto:

claude mcp add --transport http flowstep https://api.flowstep.ai/mcp

Para compartilhar o servidor com a sua equipe, adicione-o ao .mcp.json na raiz do projeto:

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

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

Etapa 2: autenticar

Execute qualquer ferramenta do Flowstep em um chat do Claude Code. Na primeira vez, o Claude Code abre o seu navegador na página de login do Flowstep. Faça login com as suas credenciais do Flowstep (e-mail e senha ou Google) e clique em Allow na tela de consentimento. O navegador redireciona de volta e o token é armazenado automaticamente. Digite /mcp no Claude Code para confirmar que o Flowstep está conectado.

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

Etapa 3: fazer uma chamada de ferramenta

Em um chat do Claude Code, pergunte:

“List my Flowstep files”

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

“Create a new Flowstep file called ‘Dashboard‘“

Etapa 4: gerar uma tela

Generate a mobile login screen in Flowstep 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 ai-design-screens (que cria um novo arquivo e gera as telas em uma única etapa) e depois get-screen-image. Você verá o design renderizado na conversa.

ai-design-screens e as outras ferramentas de design com IA usam a sua cota de mensagens do Flowstep. Listar, ler e renderizar telas é gratuito. Veja Limites de uso.

Próximos passos

Referência de ferramentas: documentação completa de entrada e saída das 22 ferramentas
Exemplos: fluxos com várias etapas
Outros clientes: Windsurf, Codex, 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

Início rápido do MCP

Pré-requisitos

Etapa 1: adicionar o servidor

Etapa 2: autenticar

Etapa 3: fazer uma chamada de ferramenta

Etapa 4: gerar uma tela

Etapa 1: adicionar o servidor

Etapa 2: autenticar

Etapa 3: fazer uma chamada de ferramenta

Etapa 4: gerar uma tela

Próximos passos

​Pré-requisitos

​Etapa 1: adicionar o servidor

​Etapa 2: autenticar

​Etapa 3: fazer uma chamada de ferramenta

​Etapa 4: gerar uma tela

​Etapa 1: adicionar o servidor

​Etapa 2: autenticar

​Etapa 3: fazer uma chamada de ferramenta

​Etapa 4: gerar uma tela

​Próximos passos

Pré-requisitos

Etapa 1: adicionar o servidor

Etapa 2: autenticar

Etapa 3: fazer uma chamada de ferramenta

Etapa 4: gerar uma tela

Etapa 1: adicionar o servidor

Etapa 2: autenticar

Etapa 3: fazer uma chamada de ferramenta

Etapa 4: gerar uma tela

Próximos passos