MCPの例

1. 画面を生成してプレビューする

最も一般的なワークフローです。画面を生成し（同じ手順でファイルも作成されます）、その結果を表示します。

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]

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": "...", "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]

ソースファイルが 64,000 文字を超える場合は、代わりに mimeType と fileName を指定して upload-attachment を使用し、返された uploadCommand を実行してください。詳しくは 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-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 には、この呼び出しで構築または変更されたすべての画面が含まれるため、それぞれに対して get-screen-image を1回ずつ呼び出します。既存の画面だけを編集する場合は、メッセージの最後の文を省いてください。画面の一部だけを変更するには、まず "includeIds": true を指定して get-screen-jsx を呼び出し、変更したい要素の data-id を elementIds に渡します。画面全体にワンクリックのプリセットを適用するには、代わりに 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" を使います。

ai-generate-screen-variant では operationVariant が必須で、ツールは screenId を1つだけ受け取ります。既存の画面のバリエーションではない画面を追加するには、fileId を指定して ai-design-screens を使用してください。

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）は現在の値を維持します。元の画面を残して自分のバージョンを並べて追加するには、replace-screen-jsx の代わりに screenType と jsx を指定して add-screen-jsx を呼び出します。画面内に独自の画像を表示するには、upload-attachment でアップロードし、返された assetUrl をJSX内の img src に指定します。詳しくは JSX内の画像を参照してください。

6. バッチ処理の前に利用枠を確認する

複数の生成を開始する前に、残りの利用量を確認します。get-plan-details は無料で呼び出せます。

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

remaining.messages.daily が少ない場合は、リセットされるUTC 00:00以降にバッチをスケジュールしてください。

はじめに

Flowstep の使い方

チームと組織

エクスポートと連携

MCP サーバー

請求とプラン

セキュリティとプライバシー

1. 画面を生成してプレビューする

2. Reactコンポーネントを可視化する

3. 画面を反復的に改善する

4. 画面を一連のフローに広げる

5. 画面をコードベースに渡し、変更を書き戻す

6. バッチ処理の前に利用枠を確認する

​1. 画面を生成してプレビューする

​2. Reactコンポーネントを可視化する

​3. 画面を反復的に改善する

​4. 画面を一連のフローに広げる

​5. 画面をコードベースに渡し、変更を書き戻す

​6. バッチ処理の前に利用枠を確認する

1. 画面を生成してプレビューする

2. Reactコンポーネントを可視化する

3. 画面を反復的に改善する

4. 画面を一連のフローに広げる

5. 画面をコードベースに渡し、変更を書き戻す

6. バッチ処理の前に利用枠を確認する