Exemplos do MCP

1. Gerar e visualizar uma tela

O fluxo mais comum: gere uma tela (criando o arquivo na mesma etapa) e depois veja o resultado.

1. list-files         {}
                      → { "files": [ ... ] }          // check for an existing file first

2. ai-design-screens  { "message": "Mobile sign-in screen for a developer tool.
                                    Email/password fields, Google SSO button, dark theme." }
                      → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"],
                          "designGuidelinesUpdated": null }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]

Se você omitir fileId, um novo arquivo é criado automaticamente. Passe um fileId existente para adicionar telas a esse arquivo. Prompt para o seu assistente de IA:

Generate a Flowstep design: a mobile sign-in screen for a developer tool with email/password and a Google SSO button in dark theme, then show me the image.

2. Visualizar um componente React

Envie um arquivo .jsx ou .tsx como anexo e peça ao Flowstep para gerar um design correspondente. O Flowstep lê o código-fonte e produz uma tela, sem precisar executar o aplicativo.

1. upload-attachment  { "text": "<UTF-8 contents of ApiKeys.tsx>",
                        "mimeType": "text/javascript" }
                      → { "id": "ATT_ID", "path": "...", "assetUrl": "...", "type": "document",
                          "mimeType": "text/javascript" }

2. ai-design-screens  { "message": "Generate a desktop screen that matches this React component.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "document" }] }
                      → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"], ... }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]

Para arquivos de código com mais de 64.000 caracteres, use upload-attachment com mimeType e fileName e execute o uploadCommand retornado. Veja upload-attachment. Prompt para o seu assistente de IA:

Read src/components/settings/ApiKeys.tsx, upload it as an attachment, and generate a Flowstep screen that matches the component layout. Show me the rendered image.

3. Iterar sobre uma tela

Altere uma tela existente no lugar com instruções livres e, na mesma chamada, adicione uma nova tela que combine com ela.

1. list-screens       { "fileId": "FILE_ID" }
                      → { "screens": [{ "screenId": "SCREEN_ID", "name": "Sign-in", ... }] }

2. ai-design-screens  { "fileId": "FILE_ID",
                        "message": "Edit this sign-in screen: switch it to dark mode and add a
                                    'Remember me' checkbox below the password field. Then add a
                                    matching forgot-password screen.",
                        "elementIds": ["SCREEN_ID"] }
                      → { "status": "generated", "fileId": "FILE_ID",
                          "screenIds": ["SCREEN_ID", "NEW_SCREEN_ID"], ... }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]
   get-screen-image   { "fileId": "FILE_ID", "screenId": "NEW_SCREEN_ID" }
                      → [inline PNG]

screenIds lista todas as telas que a chamada criou ou alterou, então chame get-screen-image uma vez para cada uma. Omita a última frase da mensagem para editar apenas a tela existente. Para alterar apenas parte de uma tela, chame primeiro get-screen-jsx com "includeIds": true e passe o data-id do elemento que você quer alterar em elementIds. Para aplicar uma predefinição com um clique em uma tela inteira, chame ai-edit-screen-variant em vez disso, por exemplo com "operationVariant": "light_theme" ou "different_layout". Prompt para o seu assistente de IA:

In my “Login flow” Flowstep file, switch the sign-in screen to dark mode, add a “Remember me” checkbox below the password field, and add a matching forgot-password screen. Show me the results.

4. Expandir uma tela para um fluxo completo

Adicione telas de continuação a um design existente.

1. list-screens                { "fileId": "FILE_ID" }
                               → { "screens": [{ "screenId": "BASE_SCREEN_ID", "prompt": "Sign-in screen", ... }] }

2. ai-generate-screen-variant  { "fileId": "FILE_ID",
                                 "screenId": "BASE_SCREEN_ID",
                                 "operationVariant": "next_screen" }
                               → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["NEXT_SCREEN_ID"], ... }

3. get-screen-image            { "fileId": "FILE_ID", "screenId": "NEXT_SCREEN_ID" }
                               → [inline PNG]

Repita a etapa 2 com operationVariant: "error_state" ou "empty_state" para adicionar telas de casos extremos, ou com "web_version" ou "tablet_version" para outras plataformas.

operationVariant é obrigatório para ai-generate-screen-variant, e a ferramenta aceita exatamente um screenId. Para adicionar uma tela que não é uma variante de uma existente, use ai-design-screens com um fileId.

5. Entregar uma tela para o seu código e depois gravar as alterações

Leia uma tela como JSX, construa a partir dela e envie o JSX editado de volta para o canvas, tudo sem usar mensagens.

1. get-screen-jsx      { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → { "name": "Settings", "fidelity": "ui", "screenType": "web",
                           "colorTheme": "default", "jsx": "<div ...>...</div>", "fragments": [] }

2. replace-screen-jsx  { "fileId": "FILE_ID", "screenId": "SCREEN_ID",
                         "jsx": "<div ...>...edited...</div>" }
                       → { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }

3. get-screen-image    { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → [inline PNG]

Os campos omitidos (name, fidelity, screenType, colorTheme, fragments) mantêm os valores atuais. Para manter o original e adicionar a sua versão ao lado dele, chame add-screen-jsx com screenType e jsx em vez de replace-screen-jsx. Para mostrar uma imagem sua na tela, envie-a com upload-attachment e coloque o assetUrl retornado em um img src no seu JSX. Veja Imagens em JSX.

6. Verifique sua cota antes de um lote

Verifique a capacidade restante antes de iniciar várias gerações. get-plan-details é gratuito.

get-plan-details {}
→ { "plan": { ... }, "subscription": { ... }, "limits": { ... }, "usage": { ... },
    "remaining": { "messages": { "daily": ..., "monthly": ... } } }

Se remaining.messages.daily estiver baixo, agende o lote para depois das 00:00 UTC, quando ele for reiniciado.

Primeiros passos

Usando o Flowstep

Equipes e organizações

Exportação e integrações

Servidor MCP

Cobrança e planos

Segurança e privacidade

1. Gerar e visualizar uma tela

2. Visualizar um componente React

3. Iterar sobre uma tela

4. Expandir uma tela para um fluxo completo

5. Entregar uma tela para o seu código e depois gravar as alterações

6. Verifique sua cota antes de um lote

​1. Gerar e visualizar uma tela

​2. Visualizar um componente React

​3. Iterar sobre uma tela

​4. Expandir uma tela para um fluxo completo

​5. Entregar uma tela para o seu código e depois gravar as alterações

​6. Verifique sua cota antes de um lote

1. Gerar e visualizar uma tela

2. Visualizar um componente React

3. Iterar sobre uma tela

4. Expandir uma tela para um fluxo completo

5. Entregar uma tela para o seu código e depois gravar as alterações

6. Verifique sua cota antes de um lote