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

省略 `fileId` 會自動建立新檔案。改為傳遞現有 `fileId` 以將畫面新增至該檔案。

**向 AI 助手的提示：**

> Generate a Flowstep design: a mobile sign-in screen for a developer tool with email/password and a Google SSO button in dark theme, then show me the image.

***

## 2. 視覺化 React 元件

上傳 `.jsx` 或 `.tsx` 檔案作為附件並要求 Flowstep 產生相符的設計。Flowstep 讀取原始程式碼並產生畫面 — 無需執行應用程式。

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

**向 AI 助手的提示：**

> Read `src/components/settings/ApiKeys.tsx`, upload it as an attachment, and generate a Flowstep screen that matches the component layout. Show me the rendered image.

***

## 3. 反覆調整 MCP 產生的畫面

`edit-design` 和 `regenerate-design` 需要僅存在於用 `designs` 陣列產生的畫面上的設計內容。對於不含設計內容的產生畫面，因應措施是將畫面呈現為附件並使用影像呼叫 `create-new-design`。

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

對於有設計內容的畫面，直接呼叫 `edit-design`，在 `message` 中帶著變更，在 `targets` 中帶著畫面。

***

## 4. 展開畫面到完整流程

將後續畫面新增至現有設計。

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

重複步驟 2，搭配 `operationVariant: "error_state"` 或 `"empty_state"` 以新增邊界情況畫面。

<Note>
  `operationVariant` 是 `expand-design` 的強制參數。基礎畫面也必須已用 `designs` 陣列（設計內容）產生 — 對於不含它的畫面，使用範例 3 的附件因應措施。
</Note>

***

## 5. 在批次工作前稽核配額

在開始多個產生前檢查剩餘容量。

```
get-plan-details {}
→ {
    "remaining": {
      "messages": { "daily": 38, "monthly": 413 }
    }
  }
```

如果 `daily` 較低，安排批次在 00:00 UTC 後當它重設時執行。