Pular para o conteúdo principal
O Flowstep é o canvas de design para software construído por agentes. O servidor MCP do Flowstep expõe esse canvas pelo Model Context Protocol, para que os agentes que a sua equipe já usa possam criar telas, ver o resultado renderizado e construir a partir dele, sem sair do editor ou do terminal. As telas que um agente cria pelo MCP ficam nos mesmos arquivos do Flowstep em que a sua equipe trabalha. Elas continuam editáveis no canvas, compartilháveis e prontas para serem exportadas ou copiadas para o Figma. O servidor está hospedado em https://api.flowstep.ai/mcp (transporte HTTP em streaming). Não há processo local para executar nem chave de API para gerenciar: os clientes fazem login com a sua conta do Flowstep por OAuth.

​
O que você pode fazer

O servidor expõe 22 ferramentas em oito categorias: As três ferramentas de Design com IA usam a mesma cota de mensagens do aplicativo Flowstep. Todas as outras ferramentas são gratuitas. Veja Limites de uso.

​
Casos de uso comuns

Gerar telas a partir de um prompt: chame ai-design-screens com uma descrição. Se você omitir fileId, o Flowstep cria o arquivo e as telas em uma única etapa. Chame get-screen-image para cada screenId retornado para ver o resultado na conversa. Visualizar um componente React: envie o seu código-fonte .jsx ou .tsx com upload-attachment (mimeType: text/javascript) e depois passe o anexo retornado para ai-design-screens, com uma mensagem que descreva a tela. O Flowstep lê o código-fonte e gera um design correspondente. Iterar sobre um design: chame ai-design-screens com um ou mais screenIds (ou ids de elementos individuais) em elementIds e instruções livres para alterá-los no lugar. A mesma chamada também pode adicionar telas novas, então uma única solicitação pode editar uma tela e criar a próxima. Use ai-edit-screen-variant para aplicar uma predefinição, como um tema escuro ou um layout diferente, a uma tela inteira. Expandir um fluxo: chame ai-generate-screen-variant para adicionar a próxima tela, um estado de erro ou vazio, ou uma versão web, tablet ou mobile de uma tela existente. Trabalhar com código primeiro: leia qualquer tela como JSX com get-screen-jsx e depois grave o seu próprio JSX de volta com add-screen-jsx (nova tela) ou replace-screen-jsx (sobrescrever uma existente). Para usar as suas próprias imagens, envie-as com upload-attachment e coloque o assetUrl retornado no seu JSX. Essas ferramentas são gratuitas. Manter a saída alinhada à marca: use update-design-guidelines para armazenar as suas cores, a tipografia e as regras de componentes em um arquivo, como texto DESIGN.md. As gerações de IA feitas com esse arquivo seguem essas regras. Leia-as com get-design-guidelines ou limpe-as com delete-design-guidelines. Importar do Figma: chame import-figma com o link de um quadro do Figma e um fileId para trazer o quadro para o canvas como elementos editáveis. A organização do arquivo precisa ter o Figma conectado antes. Verificar sua cota: chame get-plan-details para ver o seu plano, o uso e as mensagens restantes antes de um lote de gerações.

​
Endpoint

Transporte: HTTP em streaming. Modelo de sessão: sem estado (cada requisição é independente, sem ID de sessão). O servidor oferece suporte à versão 2026-07-28 do protocolo MCP, que anuncia em https://api.flowstep.ai/.well-known/mcp.json. Os clientes que usam o protocolo anterior, 2025-11-25, se conectam ao mesmo endpoint.

​
Próximos passos

Início rápido

Conecte um cliente e faça a sua primeira chamada de ferramenta.

Autenticação

Como funcionam o login OAuth 2.1 PKCE e a aprovação.

Ferramentas

Referência completa de entrada e saída das 22 ferramentas.

Exemplos

Fluxos completos para tarefas comuns.