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

# MCP 示例

> Flowstep MCP 常见任务的端到端工作流。

## 1. 生成并预览屏幕

最常见的工作流：生成屏幕（在同一步中创建文件），然后查看结果。

```
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]
```

省略 `fileId` 会自动创建新文件。传入现有的 `fileId` 则会将屏幕添加到该文件中。

**发送给 AI 助手的提示词：**

> 生成一个 Flowstep 设计：一个面向开发者工具的移动端登录屏幕，采用深色主题，包含邮箱/密码字段和 Google SSO 按钮，然后将图片显示给我。

***

## 2. 可视化 React 组件

将 `.jsx` 或 `.tsx` 文件作为附件上传，并让 Flowstep 生成匹配的设计。Flowstep 会读取源代码并生成屏幕，无需运行应用。

```
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]
```

对于超过 64,000 个字符的源文件，请改用带有 `mimeType` 和 `fileName` 的 `upload-attachment`，并运行返回的 `uploadCommand`。请参阅 [`upload-attachment`](/zh/mcp/tools#upload-attachment)。

**发送给 AI 助手的提示词：**

> 读取 `src/components/settings/ApiKeys.tsx`，将其作为附件上传，并生成一个与该组件布局匹配的 Flowstep 屏幕。将渲染图片显示给我。

***

## 3. 迭代修改屏幕

使用自由格式的指令，原地修改现有屏幕。

```
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]
```

如果只想修改屏幕的一部分，请先调用带有 `"includeIds": true` 的 `get-screen-jsx`，然后在 `elementIds` 中传入您想修改的元素的 `data-id`。

如需对整个屏幕应用一键预设，请改为调用 `ai-edit-screen-variant`，例如使用 `"operationVariant": "light_theme"` 或 `"different_layout"`。

**发送给 AI 助手的提示词：**

> 在我的 "Login flow" Flowstep 文件中，将登录屏幕切换为深色模式，并在密码字段下方添加一个 "Remember me" 复选框。将结果显示给我。

***

## 4. 将屏幕扩展为完整流程

向现有设计添加后续屏幕。

```
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]
```

重复第 2 步，并将 `operationVariant` 设为 `"error_state"` 或 `"empty_state"`，即可添加边界情况的屏幕；设为 `"web_version"` 或 `"tablet_version"` 则可添加其他平台的版本。

<Note>
  `ai-generate-screen-variant` 必须指定 `operationVariant`，且该工具只接受一个 `screenId`。如需添加一个并非现有屏幕变体的屏幕，请使用带 `fileId` 的 `ai-generate-screens`。
</Note>

***

## 5. 将屏幕交给代码库，然后写回更改

以 JSX 读取屏幕，据此进行构建，并将编辑后的 JSX 推送回画布——全程无需消耗消息。

```
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]
```

省略的字段（`name`、`fidelity`、`screenType`、`colorTheme`、`fragments`）将保留其当前值。如需保留原始屏幕并在旁边添加您的版本，请使用带有 `screenType` 和 `jsx` 的 `add-screen-jsx`，而不是 `replace-screen-jsx`。

***

## 6. 批处理前检查您的配额

在启动多次生成之前，先检查剩余额度。调用 `get-plan-details` 是免费的。

```
get-plan-details {}
→ { "plan": { ... }, "subscription": { ... }, "limits": { ... }, "usage": { ... },
    "remaining": { "messages": { "daily": ..., "monthly": ... } } }
```

如果 `remaining.messages.daily` 较低，请将批处理安排在 00:00 UTC 重置之后进行。


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