Exemplos de MCP

1. Gerar e visualizar uma tela

O fluxo de trabalho mais comum: gerar uma tela (criando o arquivo na mesma etapa) e visualizar o resultado.

1. create-new-design { "message": "Mobile sign-in screen for a developer tool.
                                  Email/password fields, Google SSO button, dark theme." }
                     → { "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"] }

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

Omitir fileId cria um novo arquivo automaticamente. Passe um fileId existente para adicionar telas a esse arquivo em vez disso. Prompt para seu assistente de IA:

Gere um design do Flowstep: uma tela de login móvel para uma ferramenta de desenvolvedor com campos de email/senha e um botão SSO do Google em tema escuro. Em seguida, me mostre a imagem.

2. Visualizar um componente React

Carregue 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 — não é necessário executar o aplicativo.

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

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

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

Prompt para seu assistente de IA:

Leia src/components/settings/ApiKeys.tsx, faça upload como anexo e gere uma tela do Flowstep que corresponda ao layout do componente. Me mostre a imagem renderizada.

3. Iterar em uma tela gerada por MCP

edit-design e regenerate-design exigem contexto de design que só está presente em telas geradas com um array designs. Para telas geradas sem um, a solução alternativa é renderizar a tela como um anexo e chamar create-new-design com a imagem.

1. upload-attachment  { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → { "id": "ATT_ID", "path": "...", "type": "image", "mimeType": "image/jpeg" }

2. create-new-design  { "fileId": "FILE_ID",
                        "message": "Change the color scheme to dark mode and
                                    add a 'Remember me' checkbox below the password field.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "image" }] }
                      → { "fileId": "FILE_ID", "screenIds": ["NEW_SCREEN_ID"] }

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

Para telas que têm contexto de design, chame edit-design diretamente com a alteração em message e a tela em targets.

4. Expandir uma tela para um fluxo completo

Adicione telas subsequentes a um design existente.

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

2. expand-design  { "fileId": "FILE_ID",
                    "message": "Add the next screen in the user flow",
                    "operationVariant": "next_screen",
                    "targets": ["BASE_SCREEN_ID"] }
                  → { "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.

operationVariant é um parâmetro obrigatório para expand-design. A tela base também deve ter sido gerada com um array designs (contexto de design) — para telas sem um, use a solução alternativa de anexo do Exemplo 3.

5. Auditar cota antes de um trabalho em lote

Verifique a capacidade restante antes de iniciar várias gerações.

get-plan-details {}
→ {
    "remaining": {
      "messages": { "daily": 38, "monthly": 413 }
    }
  }

Se daily for baixo, agende o lote para depois de 00:00 UTC quando ele é redefinido.

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 em uma tela gerada por MCP

4. Expandir uma tela para um fluxo completo

5. Auditar cota antes de um trabalho em lote

​1. Gerar e visualizar uma tela

​2. Visualizar um componente React

​3. Iterar em uma tela gerada por MCP

​4. Expandir uma tela para um fluxo completo

​5. Auditar cota antes de um trabalho em lote

1. Gerar e visualizar uma tela

2. Visualizar um componente React

3. Iterar em uma tela gerada por MCP

4. Expandir uma tela para um fluxo completo

5. Auditar cota antes de um trabalho em lote