> ## 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 アシスタントへのプロンプト:**

> Flowstep デザインを生成してください: メール/パスワードフィールドと Google SSO ボタン、ダークテーマ付きの開発者向けツール用モバイルサインイン画面。その後、イメージを見せてください。

***

## 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 アシスタントへのプロンプト:**

> `src/components/settings/ApiKeys.tsx` を読み込み、添付ファイルとしてアップロードし、コンポーネントレイアウトに一致する Flowstep 画面を生成してください。レンダリングされたイメージを見せてください。

***

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

デザインコンテキストを持つ画面については、`message` の変更と `targets` の画面で `edit-design` を直接呼び出してください。

***

## 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（リセット時刻）以降にバッチをスケジュールしてください。