Exemplos de MCP

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-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 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": "...", "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 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. 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 e, na mesma chamada, adicione um novo ecrã que lhe corresponda.

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 indica todos os ecrãs que a chamada construiu ou alterou, por isso chame get-screen-image uma vez para cada um. Retire a última frase da mensagem para editar apenas o ecrã existente. 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, adicione uma caixa de seleção “Remember me” abaixo do campo da palavra-passe e adicione um ecrã correspondente de recuperação de palavra-passe. Mostre-me os resultados.

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.

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-design-screens com um fileId.

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. Para mostrar a sua própria imagem no ecrã, carregue-a com upload-attachment e coloque o assetUrl devolvido num img src do seu JSX. Consulte Imagens em 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.

Primeiros passos

Utilizar o Flowstep

Equipas e organizações

Exportação e integrações

Servidor MCP

Faturação e planos

Segurança e privacidade

1. Gerar e pré-visualizar um ecrã

2. Visualizar um componente React

3. Iterar sobre um ecrã

4. Expandir um ecrã para um fluxo completo

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

6. Verifique a sua quota antes de um trabalho em lote

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

​2. Visualizar um componente React

​3. Iterar sobre um ecrã

​4. Expandir um ecrã para um fluxo completo

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

​6. Verifique a sua quota antes de um trabalho em lote

1. Gerar e pré-visualizar um ecrã

2. Visualizar um componente React

3. Iterar sobre um ecrã

4. Expandir um ecrã para um fluxo completo

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

6. Verifique a sua quota antes de um trabalho em lote