> ## 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 MCP do Flowstep.

## 1. Gerar e pré-visualizar um ecrã

O fluxo de trabalho mais comum: gere um ecrã (criando o ficheiro no mesmo passo) e veja o resultado.

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

2. ai-generate-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 omitir `fileId`, é criado automaticamente um novo ficheiro. Passe um `fileId` existente para adicionar ecrãs a esse ficheiro.

**Prompt para o seu assistente de IA:**

> Gere um design no Flowstep: um ecrã de início de sessão móvel para uma ferramenta para programadores, com campos de email/palavra-passe, um botão de Google SSO e tema escuro. Depois, mostre-me a imagem.

***

## 2. Visualizar um componente React

Carregue um ficheiro `.jsx` ou `.tsx` como anexo e peça ao Flowstep para gerar um design correspondente. O Flowstep lê o código-fonte e produz um ecrã, sem ser preciso executar a aplicação.

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

2. ai-generate-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 ficheiros de código com mais de 64.000 caracteres, use `upload-attachment` com `mimeType` e `fileName` em vez disso, e execute o `uploadCommand` devolvido. Consulte [`upload-attachment`](/pt/mcp/tools#upload-attachment).

**Prompt para o seu assistente de IA:**

> Leia `src/components/settings/ApiKeys.tsx`, carregue-o como anexo e gere um ecrã do Flowstep que corresponda ao layout do componente. Mostre-me a imagem renderizada.

***

## 3. Iterar sobre um ecrã

Altere um ecrã existente no lugar, com instruções de texto livre.

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

2. ai-edit-screens   { "fileId": "FILE_ID",
                       "message": "Change the color scheme to dark mode and
                                   add a 'Remember me' checkbox below the password field.",
                       "elementIds": ["SCREEN_ID"] }
                     → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"], ... }

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

Para alterar apenas parte de um ecrã, chame primeiro `get-screen-jsx` com `"includeIds": true` e passe o `data-id` do elemento que quer alterar em `elementIds`.

Para aplicar uma predefinição com um clique a um ecrã inteiro, chame `ai-edit-screen-variant` em vez disso, por exemplo com `"operationVariant": "light_theme"` ou `"different_layout"`.

**Prompt para o seu assistente de IA:**

> No seu ficheiro "Login flow" do Flowstep, mude o ecrã de início de sessão para tema escuro e adicione uma caixa de seleção "Remember me" abaixo do campo da palavra-passe. Mostre-me o resultado.

***

## 4. Expandir um ecrã para um fluxo completo

Adicione ecrãs seguintes 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 o passo 2 com `operationVariant: "error_state"` ou `"empty_state"` para adicionar ecrãs de casos limite, ou com `"web_version"` / `"tablet_version"` para outras plataformas.

<Note>
  `operationVariant` é obrigatório em `ai-generate-screen-variant`, e a ferramenta aceita exatamente um `screenId`. Para adicionar um ecrã que não seja uma variante de um existente, use `ai-generate-screens` com um `fileId`.
</Note>

***

## 5. Entregar um ecrã à sua base de código e depois devolver as alterações

Leia um ecrã como JSX, construa a partir dele e envie o JSX editado de volta para a tela, 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, chame `add-screen-jsx` com `screenType` e `jsx` em vez de `replace-screen-jsx`.

***

## 6. Verifique a sua quota antes de um trabalho em 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 a quota é reposta.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.