Referência de Ferramentas MCP

Todas as ferramentas retornam um array content de blocos de conteúdo MCP. Ferramentas de texto retornam { type: "text", text: "<json-string>" }. Ferramentas de imagem retornam { type: "image", data: "<base64>", mimeType: "image/png" }. Em caso de falha, isError: true é definido e o bloco de texto contém a mensagem de erro.

Ferramentas de arquivo

`list-files`

Liste arquivos Flowstep do usuário atual. Entrada

Parâmetro	Tipo	Padrão	Descrição
`orderByCreation`	`boolean`	`true`	Ordenar por data de criação
`limit`	`integer` (1–100)	`20`	Número de arquivos a retornar
`offset`	`integer` (≥0)	`0`	Offset de paginação

Saída — array JSON de objetos de arquivo.

[
  {
    "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
    "name": "Dashboard redesign",
    "created_at": "2026-04-30T15:02:13.120152+00:00",
    "updated_at": "2026-04-30T15:02:13.120152+00:00",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  }
]

`get-file`

Obtenha um único arquivo por ID. O conteúdo do arquivo é intencionalmente omitido — use get-screen ou get-screen-image para inspecionar telas e get-design-guidelines para recuperar diretrizes anexadas. Entrada

Parâmetro	Tipo	Descrição
`id`	`uuid`	ID do arquivo

Saída — objeto JSON de arquivo.

{
  "file": {
    "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
    "name": "Dashboard redesign",
    "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
    "created_at": "2026-04-30T15:02:13.120152+00:00",
    "updated_at": "2026-04-30T15:02:13.120152+00:00",
    "access_level": "private",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  },
  "user_access_level": "write"
}

`create-file`

Crie um novo arquivo Flowstep. Entrada

Parâmetro	Tipo	Descrição
`title`	`string` (min 1)	Nome do arquivo

Saída — objeto JSON de arquivo com o id do novo arquivo.

{
  "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "name": "Dashboard redesign",
  "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
  "created_at": "2026-04-30T15:02:13.120152+00:00",
  "updated_at": "2026-04-30T15:02:13.120152+00:00",
  "access_level": "private",
  "user_access_level": "write",
  "owner": true,
  "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
}

Use o id retornado como fileId em chamadas de ferramentas subsequentes.

`update-file`

Renomeie um arquivo. Entrada

Parâmetro	Tipo	Descrição
`id`	`uuid`	ID do arquivo
`name`	`string` (min 1)	Novo nome

Saída — objeto de arquivo atualizado na mesma forma que get-file.

{
  "file": {
    "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
    "name": "Dashboard redesign (v2)",
    "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
    "created_at": "2026-04-30T15:02:13.120152+00:00",
    "updated_at": "2026-04-30T15:02:13.120152+00:00",
    "access_level": "private",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  },
  "user_access_level": "write"
}

`delete-file`

Exclua permanentemente um arquivo. O name que você passa é verificado contra o nome real do arquivo antes da exclusão — se não corresponder, a exclusão é abortada. Isso evita excluir acidentalmente o arquivo errado. Entrada

Parâmetro	Tipo	Descrição
`id`	`uuid`	ID do arquivo
`name`	`string`	Nome atual do arquivo — deve corresponder exatamente ou a exclusão será abortada

Saída — "File deleted successfully"

Isso é irreversível. Todas as telas no arquivo são excluídas.

Ferramentas de tela

`list-screens`

Liste todas as telas geradas para um arquivo. Use os valores screenId retornados para referenciar telas em get-screen, get-screen-image e como targets em edit-design, regenerate-design ou expand-design. Entrada

Parâmetro	Tipo	Descrição
`fileId`	`uuid`	ID do arquivo

Saída — array JSON de resumos de tela.

[
  {
    "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
    "name": "Mobile login screen",
    "fidelity": "ui",
    "prompt": "Generate a simple mobile login screen with email and password fields and a sign in button",
    "createdAt": "2026-04-30T15:02:37.444139+00:00"
  }
]

name é o nome de tela atribuído pelo usuário ou null se sem nome.

`get-screen`

Obtenha o código JSX para uma tela permitindo que você edite ou use o código fora do Flowstep. Use get-screen-image para uma visualização visual. Entrada

Parâmetro	Tipo	Descrição
`fileId`	`uuid`	ID do arquivo
`screenId`	`uuid`	O `screenId` retornado por `list-screens` ou do array `screenIds` retornado por uma ferramenta de design

Saída — a tela como código (JSX). Observe o comentário da primeira linha que é necessário ao usar a ferramenta add-screen.

<!-- screenType: "iphone-x-vertical" width: "375" height: "812" name: "Change to a light theme" colorTheme: "blue" screenId: "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0" -->
<div className="bg-white text-zinc-950 w-full h-fit">
  <div className="flex p-6 flex-col gap-6">
    <div className="flex pt-4 justify-between items-center">
      <ArrowLeft className="size-5 text-[#71717b]" />
      <span className="font-semibold text-zinc-950 text-lg leading-7">
        World Clock
      </span>
      <Plus className="size-5 text-[#2b7fff]" />
    </div>
    <div className="rounded-xl bg-zinc-100 flex p-2 items-center gap-2">
      <Search className="size-4 text-[#71717b] ml-2" />
      <span className="text-[#71717b] text-sm leading-5">Search cities...</span>
    </div>
...
    <div className="flex pt-2 pb-4 justify-center items-center gap-4">
      <Button variant="outline" className="rounded-full px-6 gap-2">
        <Clock className="size-4" />
        <span>Compare</span>
      </Button>
      <Button className="rounded-full bg-[#2b7fff] text-blue-50 px-6 gap-2">
        <Bell className="size-4" />
        <span>Set Alert</span>
      </Button>
    </div>
  </div>
</div>;

`add-screen`

Adicione uma nova tela a um arquivo Flowstep a partir de uma string JSX bruta. Entrada

Parâmetro	Tipo	Descrição
`fileId`	`uuid`	ID do arquivo
`jsxContent`	`string`	JSX para adicionar ao arquivo como uma tela
`screenType`	`string`	Necessário se o tipo de tela não for definido como um comentário no início do JSX

Nota - Um comentário similar ao abaixo DEVE estar presente como a primeira linha do JSX pois é usado para adicionar a tela corretamente. screenType, name e screenId são todos opcionais — screenId é usado (internamente) se presente (por exemplo, ao passar JSX copiado da saída get-screen) mas não é obrigatório. O nome da tela é obtido do campo name do comentário (exibido como “Copy of <name>”) ou “Untitled” se ausente.  Saída — o novo ID de tela adicionado.

{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf" }

`get-screen-image`

Renderize uma tela para PNG e retorne-a como uma imagem inline. Requer um cliente que suporte blocos de conteúdo de imagem. Entrada

Parâmetro	Tipo	Descrição
`fileId`	`uuid`	ID do arquivo
`screenId`	`uuid`	O `screenId` retornado por `list-screens` ou do array `screenIds` retornado por uma ferramenta de design

Saída — bloco de conteúdo de imagem MCP (image/png).

`rename-screen`

Renomeie o rótulo da tela — o nome mostrado por list-screens e no editor. Isso altera apenas o rótulo, não o layout, tamanho ou conteúdo da tela — use edit-design para esses. Entrada

Parâmetro	Tipo	Descrição
`fileId`	`uuid`	ID do arquivo
`screenId`	`uuid`	O `screenId` retornado por `list-screens`
`name`	`string` (1–100 chars)	Novo nome da tela. Espaço em branco no início e fim é aparado

Saída — { screenId, name }.

{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe", "name": "Checkout — empty cart" }

Ferramentas de IA

regenerate-design, expand-design e edit-design exigem contexto de design que está presente apenas em telas originalmente geradas com um array designs. Telas geradas sem contexto de design retornarão um erro.

`create-new-design`

Gere um ou mais designs de tela a partir de um prompt de texto. Omita fileId para criar um novo arquivo automaticamente. Bloqueia até que a geração seja concluída ou expire (180 segundos). Entrada

Parâmetro	Tipo	Padrão	Descrição
`fileId`	`uuid`	—	Arquivo de destino — omita para criar um novo arquivo automaticamente. Necessário quando `targets` está definido
`message`	`string`	—	Prompt descrevendo as telas a gerar
`targets`	`uuid[]`	`[]`	Referências visuais opcionais — `screenId`s de `list-screens` e/ou IDs de subelementos de `get-screen`. As telas referenciadas são usadas apenas como inspiração visual; não são editadas no local
`attachments`	`AttachmentRequestData[]` (max 5)	`[]`	Anexos pré-carregados — imagens, PDFs ou arquivos de código. Sempre carregue via `upload-attachment` primeiro; não coloque conteúdos de arquivo inline na mensagem
`designs`	`DesignRequestData[]`	`[]`	Referências de design

Saída — { fileId, screenIds, designGuidelinesUpdated }. Passe cada screenId para get-screen-image para visualizar resultados. designGuidelinesUpdated informa se as diretrizes de design do arquivo foram alteradas como parte desta geração.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"]
}

`regenerate-design`

Refaça telas existentes do zero ou com uma variação de estilo. Requer pelo menos um screenId em targets. Bloqueia até que a geração seja concluída ou expire (180 segundos). Entrada

Parâmetro	Tipo	Padrão	Descrição
`fileId`	`uuid`	—	Arquivo de destino
`message`	`string`	—	Texto do prompt
`targets`	`uuid[]` (min 1)	—	screenIds de telas a regenerar
`operationVariant`	`"different_layout" \| "different_style" \| "from_scratch"`	—	Necessário — como refazer a tela: `different_layout` (manter estilo e conteúdo, mudar layout), `different_style` (manter layout e conteúdo, mudar cores e tratamento visual), ou `from_scratch` (novo layout, estilo e conteúdo para o mesmo objetivo)
`designs`	`DesignRequestData[]`	`[]`	Referências de design (resolvidas automaticamente)

Saída — { fileId, screenIds, designGuidelinesUpdated }. Passe cada screenId para get-screen-image para visualizar resultados.

`expand-design`

Adicione telas subsequentes a um design existente. Requer pelo menos um screenId em targets e um operationVariant obrigatório. Bloqueia até que a geração seja concluída ou expire (180 segundos). Entrada

Parâmetro	Tipo	Padrão	Descrição
`fileId`	`uuid`	—	Arquivo de destino
`message`	`string`	—	Texto do prompt
`targets`	`uuid[]` (min 1)	—	screenIds de telas para expandir de
`operationVariant`	`"next_screen" \| "error_state" \| "empty_state" \| "web_version" \| "mobile_version" \| "tablet_version" \| "mobile_ios_version" \| "mobile_android_version"`	—	Necessário — tipo de tela subsequente a gerar
`designs`	`DesignRequestData[]`	`[]`	Referências de design (resolvidas automaticamente)

Saída — { fileId, screenIds, designGuidelinesUpdated }. Passe cada screenId para get-screen-image para visualizar resultados.

`edit-design`

Modifique telas existentes via um prompt. Requer pelo menos um screenId em targets. Bloqueia até que a geração seja concluída ou expire (180 segundos). Entrada

Parâmetro	Tipo	Padrão	Descrição
`fileId`	`uuid`	—	Arquivo de destino
`message`	`string`	—	Instruções descrevendo as edições a aplicar
`targets`	`uuid[]` (min 1)	—	screenIds de telas a editar
`operationVariant`	`"dark_theme" \| "light_theme" \| "make_pretty"`	—	Atalho de estilo opcional
`attachments`	`AttachmentRequestData[]` (max 5)	`[]`	Anexos pré-carregados. Sempre carregue via `upload-attachment` primeiro
`designs`	`DesignRequestData[]`	`[]`	Referências de design (resolvidas automaticamente)

Saída — { fileId, screenIds, designGuidelinesUpdated }. Passe cada screenId para get-screen-image para visualizar resultados.

`upload-attachment`

Carregue um arquivo para usar como anexo em create-new-design ou edit-design (não regenerate-design ou expand-design). Os bytes de arquivo nunca passam pelo modelo e o servidor nunca busca URLs em seu nome. Existem dois modos — use exatamente um, e não os combine. Modo A — arquivos e imagens (mimeType + fileName) Um fluxo obrigatório de três etapas para qualquer imagem, PDF ou arquivo de texto maior:

Chame upload-attachment com mimeType e fileName apenas (por exemplo image/png e dog.png). A resposta é um carregamento preparado, não um arquivo armazenado:

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "type": "image",
  "mimeType": "image/png",
  "signedUrl": "https://…",
  "uploadCommand": "curl -sS -f -X PUT '…' -H 'Content-Type: image/png' -H 'x-metadata: …' --data-binary @LOCAL_FILE_PATH",
  "nextStep": "…"
}

Substitua LOCAL_FILE_PATH em uploadCommand pelo caminho absoluto para seu arquivo e execute esse comando exato em seu shell — ele deve sair com código 0. O token em signedUrl autoriza apenas este único carregamento. Pular esta etapa deixa o armazenamento vazio e a ferramenta de design falha em sua verificação prévia.
Passe apenas { id, path, type } no array attachments da ferramenta de design — não signedUrl, uploadCommand ou nextStep.

Para anexar um arquivo remoto, baixe-o para um caminho local primeiro (por exemplo com curl) e depois siga os mesmos três passos. Nunca passe uma URL para upload-attachment.

Parâmetro	Tipo	Descrição
`mimeType`	enum	Tipo MIME do arquivo. Um de `image/jpeg`, `image/png`, `image/webp`, `application/pdf`, `text/markdown`, `text/plain`, `text/javascript`. Use `text/javascript` para arquivos `.jsx`, `.tsx`, `.js`, `.ts`
`fileName`	`string` (min 1)	Nome de arquivo original com extensão, por exemplo `cat.png` ou `design.md`

Modo B — texto curto (text + mimeType) Carregue texto que já está em contexto — nenhum comando shell necessário. A resposta está pronta para usar diretamente:

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "type": "document",
  "mimeType": "text/plain"
}

Parâmetro	Tipo	Descrição
`text`	`string` (max 64,000 chars)	Conteúdo de texto bruto. Apenas arquivos de texto — não use para imagens ou PDFs. Mais longo do que 64.000 caracteres? Use Modo A em vez disso
`mimeType`	enum	Um de `text/markdown`, `text/plain`, `text/javascript`

Passe o resultado { id, path, type } no array attachments de create-new-design ou edit-design. O tamanho máximo do arquivo é 3 MB em ambos os modos e PDFs são limitados a 100 páginas. type é "image" para arquivos de imagem e "document" para PDFs e arquivos de texto.

Ferramentas de chat

`get-chat-history`

Obtenha o histórico de mensagens de chat para um arquivo. Entrada

Parâmetro	Tipo	Descrição
`fileId`	`uuid`	ID do arquivo

Saída — objeto JSON com um array messages. Cada mensagem tem um type ("request" ou "response"), author ("human" ou "ai") e content_type ("text", "summary" ou "followup").

{
  "messages": [
    {
      "id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b",
      "type": "request",
      "status": "success",
      "content": "Generate a simple mobile login screen with email and password fields",
      "author": "human",
      "content_type": "text",
      "sequence": 1,
      "request_message_id": null,
      "targets": [],
      "attachments": []
    },
    {
      "id": "d860186b-82d5-4bd1-8e8e-8ba5377a14bf",
      "chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b",
      "type": "response",
      "status": "success",
      "content": "Generated a mobile login screen with email and password input fields, sign in button, remember me checkbox, forgot password link, social login options (Apple/Google), and sign up link.",
      "author": "ai",
      "content_type": "summary",
      "sequence": 7,
      "request_message_id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "targets": [{ "target_id": "3f9e6eb6-5525-4383-9375-67e0bd762dbe" }],
      "attachments": []
    }
  ]
}

Ferramentas de design

`get-design-guidelines`

Obtenha as diretrizes de design armazenadas para um arquivo. Entrada

Parâmetro	Tipo	Padrão	Descrição
`resourceId`	`uuid`	—	ID do arquivo
`linkedTo`	`"file"`	`"file"`	Tipo de recurso

Saída

{
  "guidelines": "## Colors\n\nPrimary: #6366F1\nBackground: #FFFFFF\n\n## Typography\n\nFont: Inter",
  "linkedTo": "file"
}

guidelines é null se nenhuma diretriz tiver sido definida.

`update-design-guidelines`

Defina ou substitua as diretrizes de design para um arquivo. As diretrizes são passadas como uma string de texto simples no formato design.md do Google — não passe um objeto ou JSON. O servidor realiza validação flexível e pode retornar uma seção Warnings: na resposta listando problemas (chaves desconhecidas, cores não hexadecimais) que foram aceitos mas podem ser ignorados pela IA. Mostre esses ao usuário. Entrada

Parâmetro	Tipo	Padrão	Descrição
`resourceId`	`uuid`	—	ID do arquivo
`designGuidelines`	`string` (min 1)	—	Conteúdo de texto bruto das diretrizes. Deve ser uma string simples — não codificada em JSON
`linkedTo`	`"file"`	`"file"`	Tipo de recurso

Regras de validação

O frontmatter deve ser aberto e fechado corretamente
As linhas do frontmatter devem ser YAML de estilo de bloco válido
O corpo Markdown não deve conter cabeçalhos de seção ## duplicados

Saída — "Design guidelines updated successfully", opcionalmente seguido por uma seção Warnings:.

`delete-design-guidelines`

Limpe as diretrizes de design para um arquivo. Entrada

Parâmetro	Tipo	Padrão	Descrição
`resourceId`	`uuid`	—	ID do arquivo
`linkedTo`	`"file"`	`"file"`	Tipo de recurso

Saída — "Design guidelines deleted successfully"

Ferramentas Figma

`import-figma`

Importe um frame Figma para um arquivo Flowstep como elementos editáveis em sua tela. Re-importar o mesmo frame o atualiza no local. A organização do arquivo deve ter Figma conectado nas configurações do Flowstep. Entrada

Parâmetro	Tipo	Descrição
`figmaUrl`	`string`	Link para um frame Figma específico. No Figma, clique com o botão direito no frame e escolha Copy link to selection. Um link para uma página importa todos os frames de nível superior nessa página (capped at 20 frames over MCP).
`fileId`	`uuid`	O arquivo Flowstep para importar o frame

Saída — { fileId, screenId }. screenId é o id do elemento de tela importado — passe para get-screen-image para visualizar o resultado. Quando um URL de página importa vários frames, screenId é null e frameCount é retornado em vez disso.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe"
}

Ferramentas de cobrança

`get-plan-details`

Obtenha o plano atual do usuário, status de assinatura e cota restante. Não leva entrada. Saída

{
  "plan": {
    "name": "Starter",
    "code": "starter",
    "type": "paid"
  },
  "subscription": {
    "isPaid": true,
    "isTrial": false,
    "startDate": "2025-01-01T00:00:00Z",
    "endDate": null,
    "trialDaysRemaining": null
  },
  "limits": {
    "messages": {
      "daily": { "max": 50, "warn": 40 },
      "monthly": { "max": 500, "warn": 400 },
      "unlimited": false
    }
  },
  "usage": {
    "messages": { "daily": 12, "monthly": 87 }
  },
  "remaining": {
    "messages": { "daily": 38, "monthly": 413 }
  }
}

Os limites variam por plano. Chame esta ferramenta antes de um lote de gerações para verificar a cota disponível.

Primeiros passos

Usando o Flowstep

Equipes e organizações

Exportação e integrações

Servidor MCP

Cobrança e planos

Segurança e privacidade

Referência de Ferramentas MCP

Ferramentas de arquivo

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Ferramentas de tela

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

`rename-screen`

Ferramentas de IA

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Ferramentas de chat

`get-chat-history`

Ferramentas de design

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Ferramentas Figma

`import-figma`

Ferramentas de cobrança

`get-plan-details`

​Ferramentas de arquivo

​list-files

​get-file

​create-file

​update-file

​delete-file

​Ferramentas de tela

​list-screens

​get-screen

​add-screen

​get-screen-image

​rename-screen

​Ferramentas de IA

​create-new-design

​regenerate-design

​expand-design

​edit-design

​upload-attachment

​Ferramentas de chat

​get-chat-history

​Ferramentas de design

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Ferramentas Figma

​import-figma

​Ferramentas de cobrança

​get-plan-details

Ferramentas de arquivo

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Ferramentas de tela

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

`rename-screen`

Ferramentas de IA

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Ferramentas de chat

`get-chat-history`

Ferramentas de design

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Ferramentas Figma

`import-figma`

Ferramentas de cobrança

`get-plan-details`