Início rápido do MCP

Pré-requisitos

Uma conta do Flowstep (app.flowstep.ai)

A usar o Claude no claude.ai ou no Claude Desktop? O Flowstep é um conector listado no diretório do Claude. Adicione-o com um clique a partir de claude.ai/directory/flowstep. Consulte claude.ai.

Cursor
Claude Code

Requer Cursor v0.43+

Passo 1: adicionar o servidor

Clique em Add Flowstep to Cursor para o 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 guardar.

Passo 2: autenticar-se

Abra o painel MCP do Cursor (Settings → MCP) e clique em Connect ao lado do Flowstep. O Cursor abre o navegador na página de início de sessão do Flowstep. Inicie sessão com as suas credenciais do Flowstep (email/palavra-passe ou Google) e clique em Allow no ecrã de consentimento. O navegador redireciona de volta e o Cursor guarda o token automaticamente.

Precisa de uma conta do Flowstep antes de se autenticar. Se não tiver uma, registe-se primeiro em app.flowstep.ai.

Passo 3: fazer uma chamada de ferramenta

Num chat do Cursor, pergunte:

“Lista os meus ficheiros do Flowstep”

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

“Cria um novo ficheiro do Flowstep chamado ‘Dashboard‘“

Passo 4: gerar um ecrã

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 ficheiro e gera os ecrãs num só passo) e, depois, get-screen-image. Verá o design renderizado em linha no chat.

Requer a CLI do Claude Code

Passo 1: adicionar o servidor

Execute isto no seu projeto:

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

Para partilhar o servidor com a sua equipa, adicione-o em vez disso ao ficheiro .mcp.json na raiz do projeto:

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

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

Passo 2: autenticar-se

Execute qualquer ferramenta do Flowstep a partir de um chat do Claude Code. Na primeira utilização, o Claude Code abre o navegador na página de início de sessão do Flowstep. Inicie sessão com as suas credenciais do Flowstep (email/palavra-passe ou Google) e clique em Allow no ecrã de consentimento. O navegador redireciona de volta e o token fica guardado automaticamente. Escreva /mcp no Claude Code para confirmar que o Flowstep está ligado.

Precisa de uma conta do Flowstep antes de se autenticar. Se não tiver uma, registe-se primeiro em app.flowstep.ai.

Passo 3: fazer uma chamada de ferramenta

Num chat do Claude Code, pergunte:

“Lista os meus ficheiros do Flowstep”

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

“Cria um novo ficheiro do Flowstep chamado ‘Dashboard‘“

Passo 4: gerar um ecrã

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 ficheiro e gera os ecrãs num só passo) e, depois, get-screen-image. Verá o design renderizado em linha no chat.

ai-design-screens e as restantes ferramentas de design com IA usam a sua quota de mensagens do Flowstep. Listar, ler e renderizar ecrãs é gratuito. Consulte Limites de utilização.

Próximos passos

Referência de ferramentas: documentação completa de entradas e saídas das 22 ferramentas
Exemplos: fluxos de trabalho com vários passos
Outros clientes: Windsurf, Codex, Claude Desktop, claude.ai

Primeiros passos

Utilizar o Flowstep

Equipas e organizações

Exportação e integrações

Servidor MCP

Faturação e planos

Segurança e privacidade

Início rápido do MCP

Pré-requisitos

Passo 1: adicionar o servidor

Passo 2: autenticar-se

Passo 3: fazer uma chamada de ferramenta

Passo 4: gerar um ecrã

Passo 1: adicionar o servidor

Passo 2: autenticar-se

Passo 3: fazer uma chamada de ferramenta

Passo 4: gerar um ecrã

Próximos passos

​Pré-requisitos

​Passo 1: adicionar o servidor

​Passo 2: autenticar-se

​Passo 3: fazer uma chamada de ferramenta

​Passo 4: gerar um ecrã

​Passo 1: adicionar o servidor

​Passo 2: autenticar-se

​Passo 3: fazer uma chamada de ferramenta

​Passo 4: gerar um ecrã

​Próximos passos

Pré-requisitos

Passo 1: adicionar o servidor

Passo 2: autenticar-se

Passo 3: fazer uma chamada de ferramenta

Passo 4: gerar um ecrã

Passo 1: adicionar o servidor

Passo 2: autenticar-se

Passo 3: fazer uma chamada de ferramenta

Passo 4: gerar um ecrã

Próximos passos