Skip to main content
O Flowstep expõe suas ferramentas de design sobre o Model Context Protocol, permitindo que seu assistente AI crie e itere sobre telas de UI sem deixar seu editor. O servidor está hospedado em https://api.flowstep.ai/mcp (transporte HTTP Streamable). Nenhum processo local para executar.

O que você pode fazer

O servidor expõe 20 ferramentas em sete categorias:

Casos de uso comuns

Gere telas a partir de um prompt — chame create-new-design com uma descrição. Flowstep cria o arquivo e telas em uma etapa. Chame get-screen-image com os screenIds retornados para ver o resultado em linha. Visualize um componente React — carregue seu arquivo .jsx ou .tsx via upload-attachment (use mimeType: text/javascript), depois passe o attachment retornado para create-new-design com uma mensagem descrevendo o componente. Flowstep lê a fonte e gera uma tela de design correspondente. Itere em um design — chame edit-design com um screenId de destino e instruções para modificá-lo, ou regenerate-design para refazer uma tela do zero. Mantenha diretrizes de design — chame get-design-guidelines para recuperar suas regras de estilo atuais (cores, tipografia, espaçamento, tom), depois use update-design-guidelines para mantê-las sincronizadas conforme seu design evolui. Passar diretrizes consistentes para create-new-design ou edit-design garante que cada tela gerada fique dentro da marca. Use delete-design-guidelines para resetar completamente. Importe do Figma — chame import-figma com um link de frame Figma e um fileId para trazer o frame para um arquivo Flowstep como elementos editáveis. A organização do arquivo deve ter Figma conectado primeiro. Auditar cota — chame get-plan-details para ver o uso diário e mensal restante antes de iniciar um lote de gerações.

Endpoint

Transporte: HTTP Streamable. Modelo de sessão: stateless (cada requisição é independente, sem ID de sessão).

Próximos passos

Início rápido

Primeira chamada de ferramenta em menos de 5 minutos com Cursor.

Autenticação

Como funciona OAuth 2.1 PKCE e como tokens são emitidos.

Ferramentas

Referência completa de entrada/saída para todas as 20 ferramentas.

Exemplos

Fluxos de trabalho completos para tarefas comuns.