> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Exemplos de MCP

> Fluxos de trabalho completos para tarefas comuns do Flowstep 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.

<Note>
  `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.
</Note>

***

## 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.