MCPツールリファレンス

成功時は、get-screen-image を除くすべてのツールが結果を2回返します。1つ目は structuredContent です（ツールの公開された出力スキーマに対して検証されます）。2つ目は、同じオブジェクトをテキストブロック { type: "text", text: "<json-string>" } としてシリアライズしたものです。これは、構造化コンテンツを読み取らないクライアント向けです。get-screen-image は、MCP の画像ブロック { type: "image", data: "<base64>", mimeType: "image/png" } のみを返します。失敗時は isError: true が設定され、テキストブロックに短いエラーメッセージが含まれます。対処可能なエラー（削除時の名前の不一致、無効なFigmaリンク、無効なデザインガイドライン、添付ファイルの問題、生成のタイムアウトなど）では、修正方法が説明されます。それ以外の失敗では、Failed to list files などの汎用的なメッセージが返されます。

料金： AIデザインツール（ai-design-screens、ai-generate-screen-variant、ai-edit-screen-variant）の3つは、Flowstepアプリと同じメッセージの利用枠を消費します。それ以外のツールはすべて無料です。利用上限を参照してください。

各ツールは、クライアントが動作を把握できるように MCP アノテーションも公開しています。delete-file、delete-screen、delete-design-guidelines、replace-screen-jsx、ai-design-screens、ai-edit-screen-variant は、既存のコンテンツを削除または上書きするため、破壊的な操作としてマークされています。

ファイルツール

`list-files`

Flowstepのファイルのメタデータを一覧表示します。関連するファイルがすでに存在するかどうかを確認するには、最初にこのツールを呼び出してください。画面の内容は返されません。その場合は get-screen-image または get-screen-jsx を使用してください。入力

パラメーター	型	デフォルト	説明
`orderByCreation`	`boolean`	`true`	`created_at` の新しい順（`true`）、または `updated_at` の新しい順（`false`）で並べ替えます。最近編集されたファイルを探すには `false` を使用します
`limit`	`integer`（1〜100）	`20`	返されるファイルの最大数。ページがいっぱいの場合、さらにファイルが存在する可能性があります
`offset`	`integer`（0以上）	`0`	スキップするファイル数。次のページは `offset + limit` です

出力 — { files }。

{
  "files": [
    {
      "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",
      "organisation_id": "0b7f3c9e-2d4a-4f1b-9a5e-6c8d7e1f2a3b",
      "shared_with_me": false,
      "owner": true,
      "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
    }
  ]
}

owner — 自分が作成したファイルの場合は true です。
shared_with_me — 組織を経由せず、直接共有されたファイルの場合は true です。
url — Flowstepエディターでファイルを開きます。

`get-file`

単一のファイルのメタデータを取得します。ファイルの内容は意図的に省略されています。画面を確認するには get-screen-image または get-screen-jsx を、添付されたガイドラインを取得するには get-design-guidelines を使用してください。ファイルへの保留中の招待がある場合、get-file を呼び出すと招待が承諾されます。入力

パラメーター	型	説明
`id`	`uuid`	ファイルID

出力 — { file, user_access_level }。

{
  "file": {
    "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",
    "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
    "access_level": "private",
    "visibility": "private",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  },
  "user_access_level": "write"
}

access_level — private、read、または write です。
visibility — private、member、または public です。
user_access_level — ファイルに対するあなたのアクセス権です。read または write です。

`create-file`

画面のない空のFlowstepファイルを作成します。ファイルの作成と画面の生成を1つの手順で行うには、代わりに fileId を指定せずに ai-design-screens を呼び出してください。コードファーストのワークフローでは、create-file を使用したあとに add-screen-jsx を使います。入力

パラメーター	型	説明
`name`	`string`（最小1文字）	新しいファイルの表示名

出力 — get-file と同じ形式の { file, user_access_level }。owner は常に true、user_access_level は常に write です。返された file.id を、後続のツール呼び出しで fileId として使用します。

`update-file`

ファイル名を変更します。入力

パラメーター	型	説明
`id`	`uuid`	ファイルID
`name`	`string`（最小1文字）	新しい表示名

出力 — get-file と同じ形式の { file, user_access_level }。

`delete-file`

ファイルを完全に削除します。削除前に、渡された name がファイルの現在の表示名と照合されます。一致しない場合、削除は中止されます。これにより、誤って別のファイルを削除することを防げます。エージェントは、削除する前に必ずあなたに確認するよう指示されています。入力

パラメーター	型	説明
`id`	`uuid`	ファイルID
`name`	`string`	ファイルの現在の表示名。一致しない場合、削除は中止されます

出力 — { "deleted": true }

この操作は元に戻せません。ファイル内のすべての画面が削除されます。

画面ツール

`list-screens`

ファイル内の画面を、キャンバスの順序で一覧表示します。list-files を呼び出したあとにこのツールを使うと、ファイルに何が含まれているかを確認できます。返された screenId の値は、他の画面ツールやAIデザインツールで使用できます。入力

パラメーター	型	説明
`fileId`	`uuid`	ファイルID

出力 — { screens }。

{
  "screens": [
    {
      "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
      "name": "Mobile login screen",
      "prompt": "Generate a simple mobile login screen with email and password fields and a sign in button",
      "fidelity": "ui"
    }
  ]
}

prompt — 画面の最後の生成プロンプトです。一度も生成されていない場合（たとえば add-screen-jsx で追加された画面など）は、空の文字列です。
fidelity — lofi、hifi、または ui です。

`get-screen-image`

画面をPNGにレンダリングし、インライン画像として返します。画像コンテンツブロックに対応したクライアントが必要です。AIデザインツール、add-screen-jsx、replace-screen-jsx、または import-figma によって返された screenId ごとに、1回ずつ呼び出してください。入力

パラメーター	型	説明
`fileId`	`uuid`	ファイルID
`screenId`	`uuid`	`list-screens` の `screenId`、またはデザインツールが返した `screenIds` 配列の値

出力 — MCP の画像コンテンツブロック（image/png）。data は、データURIではなく、PNGのバイト列の標準Base64です。このツールには structuredContent はありません。

`get-screen-jsx`

画面をJSXとそのメタデータとして取得します。コードベースでそれをもとに実装したり、編集して replace-screen-jsx で書き戻したりできます。視覚的なプレビューが必要な場合は、代わりに get-screen-image を使用してください。入力

パラメーター	型	デフォルト	説明
`fileId`	`uuid`	—	ファイルID
`screenId`	`uuid`	—	`list-screens` の `screenId`、またはデザインツールが返した `screenIds` 配列の値
`includeIds`	`boolean`	`false`	`jsx` 内の要素に `data-id` 属性を含めます。要素IDを `ai-design-screens` の `elementIds` に渡して、その場で編集したり視覚的な参照として使ったりする場合に使用します

出力 — { fileId, screenId, name, prompt, fidelity, screenType, colorTheme, jsx, fragments }。

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0",
  "name": "World clock",
  "prompt": "A world clock screen with a city search and alert button",
  "fidelity": "ui",
  "screenType": "iphone-x-vertical",
  "colorTheme": "blue",
  "jsx": "<div className=\"bg-white text-zinc-950 w-full h-fit\">\n  <div className=\"flex p-6 flex-col gap-6\">\n    …\n  </div>\n</div>",
  "fragments": []
}

jsx — マークアップのみです。data-id 属性は、includeIds が true の場合にのみ含まれます。
prompt — 最後の生成プロンプトです。一度も生成されていない画面の場合は、空の文字列です。
fragments — ナビゲーションバー、ヘッダー、ロゴなど、画面に保存された共通のクロームです。{ purpose, markup } オブジェクトとして表されます。存在しない場合は空です。保持または更新するには、replace-screen-jsx に戻して渡します。

fidelity、screenType、colorTheme の値については、画面フィールドの値を参照してください。

`add-screen-jsx`

作成したJSXから、ファイルに新しい画面を追加します。これはコードファーストの方法で、無料です。Flowstepの AI に画面をデザインさせたい場合は、ai-design-screens を使用してください。add-screen-jsx は常に新しい画面を作成します。既存の画面を上書きするには、replace-screen-jsx を使用してください。アップロードした画像を表示するには、JSX内の画像を参照してください。新しい画面が既存の画面に基づく場合は、get-screen-jsx（includeIds なし）から name、fidelity、screenType、colorTheme、jsx を取得し、異なる部分を変更してください。入力

パラメーター	型	デフォルト	説明
`fileId`	`uuid`	—	ファイルID
`name`	`string`（1〜100文字）	—	任意の表示名。省略すると、画面は `Screen N` と自動的に名前が付けられます
`fidelity`	`string`	`"ui"`	画面の忠実度
`screenType`	`string`	—	必須 — 画面が設計されているデバイスまたはビューポート
`colorTheme`	`string`	`"default"`	カラーテーマ
`jsx`	`string`	—	JSXマークアップのみ。`data-id` 属性は無視され、新しい画面には新しい要素IDが付与されます

出力 — { fileId, screenId }。結果を表示するには、screenId を指定して get-screen-image を呼び出します。

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

`replace-screen-jsx`

作成したJSXで既存の画面を上書きします。画面は screenId とキャンバス上の位置を保持し、入れ子になった要素には新しいIDが付与されます。これはコードファーストの方法で、無料です。AIによる変更には ai-design-screens または ai-edit-screen-variant を使用してください。代わりに新しい画面を作成するには、add-screen-jsx を使用します。 get-screen-jsx（includeIds なし）から開始し、異なる部分を変更してください。アップロードした画像を表示するには、JSX内の画像を参照してください。入力

パラメーター	型	説明
`fileId`	`uuid`	ファイルID
`screenId`	`uuid`	上書きする画面
`jsx`	`string`	JSXマークアップのみ。`data-id` 属性は無視されます
`name`	`string`（1〜100文字）	任意。省略すると現在の名前を保持します
`fidelity`	`string`	任意。省略すると現在の忠実度を保持します
`screenType`	`string`	任意。省略すると現在の画面タイプを保持します
`colorTheme`	`string`	任意。省略すると現在のカラーテーマを保持します
`fragments`	`{ purpose, markup }[]`	任意。`get-screen-jsx` から取得した共通のクローム。省略すると現在のフラグメントを保持します。`[]` を渡すと削除されます

出力 — { fileId, screenId }。結果を表示するには、screenId を指定して get-screen-image を呼び出します。

この操作により、画面の内容がその場で置き換えられます。

`rename-screen`

画面のキャンバスラベル（list-screens とエディターに表示される名前）を変更します。変更されるのはラベルだけで、画面のレイアウト、サイズ、内容は変わりません。それらを変更するには ai-design-screens を使用してください。入力

パラメーター	型	説明
`fileId`	`uuid`	ファイルID
`screenId`	`uuid`	`list-screens` が返した `screenId`
`name`	`string`（1〜100文字）	新しい画面名。先頭と末尾の空白は削除されます

出力 — { screenId, name }。

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

`delete-screen`

ファイルから画面を完全に削除します。渡された name は、画面の現在の表示名と照合されます。一致しない場合、削除は中止されます。エージェントは、削除する前に必ずあなたに確認するよう指示されています。入力

パラメーター	型	説明
`fileId`	`uuid`	ファイルID
`screenId`	`uuid`	削除する画面
`name`	`string`	画面の現在の表示名。一致しない場合、削除は中止されます

出力 — { "deleted": true }

JSX内の画像

add-screen-jsx と replace-screen-jsx は、img の src に画像を指定することも、className 内で bg-[url(...)] を使って背景として指定することも受け付けます。alt テキストを記述し、用途に合わせて各画像のサイズを指定してください。独自の画像を配置するには、次の手順に従います。

upload-attachment のモードA（mimeType + fileName）で画像をアップロードし、返された uploadCommand を実行します。
レスポンスの type が "image" の場合、返された assetUrl をそのまま img src または bg-[url(assetUrl)] に貼り付けます。

それ以外の画像URLは、get-screen-jsx が返したとおりに残してください。path、signedUrl、または uploadCommand を src に記述しないでください。

<img src="ASSET_URL" alt="Team photo" className="w-full h-48 object-cover rounded-lg" />

画面フィールドの値

get-screen-jsx が返し、add-screen-jsx と replace-screen-jsx が受け付ける値は次のとおりです。

フィールド	値
`fidelity`	`lofi`、`hifi`、`ui`
`screenType`	`web`、`desktop`、`desktop-large`、`desktop-medium`、`desktop-small`、`tablet`、`ipad-tablet-horizontal`、`ipad-tablet-vertical`、`android-tablet-horizontal`、`android-tablet-vertical`、`mobile_ios`、`mobile_android`、`iphone-vertical`、`iphone-horizontal`、`iphone-x-vertical`、`iphone-x-horizontal`、`android-vertical`、`android-horizontal`、`android-small-vertical`、`android-small-horizontal`
`colorTheme`	`default`、`defaultDark`、`blue`、`blueDark`、`ice`、`iceDark`、`grayscale`、`grayscaleDark`、`green`、`greenDark`、`orange`、`orangeDark`、`red`、`redDark`、`rose`、`roseDark`、`violet`、`violetDark`、`yellow`、`yellowDark`

デザインガイドラインツール

デザインガイドラインは、ファイルに保存される DESIGN.md テキストです。設定されると、そのファイルに対するすべてのAI生成に組み込まれます。デザインガイドラインを参照してください。

`get-design-guidelines`

ファイルに添付されているデザインガイドラインを取得します。入力

パラメーター	型	説明
`fileId`	`uuid`	ファイルID

出力 — { guidelines }。

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

ガイドラインが設定されていない場合、guidelines は null です。

`update-design-guidelines`

ファイルのデザインガイドラインを設定または置き換えます。ガイドラインは、Google の DESIGN.md 形式に従った、プレーンな文字列として渡してください。オブジェクトやJSONではありません。ファイルから読み取る場合は、そのファイルのテキストを渡します。入力

パラメーター	型	説明
`fileId`	`uuid`	ファイルID
`designGuidelines`	`string`（最小1文字）	ガイドラインの生のテキスト。JSONエンコードされていない、プレーンな文字列である必要があります

検証ルール

フロントマターは、正しく開始および終了している必要があります
フロントマターの行は、有効なブロック形式のYAMLである必要があります
Markdown の本文に、重複した ## セクション見出しを含めることはできません

検証に失敗した場合、呼び出しは Invalid design guidelines: で始まるエラーを返します。出力 — { updated, warnings? }。

{ "updated": true, "warnings": ["…"] }

warnings には、受け入れられたものの AI によって無視される可能性がある、ソフトな検証の問題（不明なキー、16進数ではない色）が一覧表示されます。警告がない場合は省略されます。これらの警告は、必ずあなたに伝えてください。

`delete-design-guidelines`

ファイルのデザインガイドラインを削除します。存在しないガイドラインを削除しても、何も起こりません。入力

パラメーター	型	説明
`fileId`	`uuid`	ファイルID

出力 — { "deleted": true }

チャットツール

`get-chat-history`

ファイルに関連付けられたデザインの会話を取得します。これはMCPクライアントの会話ではなく、ファイルのFlowstepチャットです。ファイルでの以前の作業を再開するために使用します。入力

パラメーター	型	説明
`fileId`	`uuid`	ファイルID

出力 — { messages }。ファイルにデザインの会話がない場合、messages は空です。各メッセージには、type（"request" または "response"）、author（"human" または "ai"）、content_type があります。レスポンスのメッセージでは、"text"、"summary"、または "followup" が使用されます。

{
  "messages": [
    {
      "id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "type": "request",
      "status": "success",
      "content": "Generate a simple mobile login screen with email and password fields",
      "author": "human",
      "content_type": "text",
      "sequence": 1,
      "targets": [],
      "attachments": []
    },
    {
      "id": "d860186b-82d5-4bd1-8e8e-8ba5377a14bf",
      "type": "response",
      "status": "success",
      "content": "Generated a mobile login screen with email and password input fields, a sign in button, and a 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" }]
    }
  ]
}

添付ファイルツール

`upload-attachment`

ai-design-screens の添付ファイルとして使用する参照ファイル、または add-screen-jsx や replace-screen-jsx で独自のJSXに配置する画像をアップロードします。ai-generate-screen-variant と ai-edit-screen-variant は添付ファイルを受け付けません。ファイルのバイト列はモデルを経由せず、サーバーがあなたの代わりにURLを取得することもありません。Webページを参照するには、代わりに ai-design-screens の message にそのURLを含めてください。モードは2つあります。どちらか一方のみを使用し、組み合わせないでください。 モードA — ファイルと画像（mimeType + fileName） 画像、PDF、または大きなテキストファイルに必要な、3ステップのフローです。

mimeType と fileName のみを指定して upload-attachment を呼び出します（例：image/png と dog.png）。レスポンスは保存済みのファイルではなく、準備されたアップロードです。

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "assetUrl": "https://…",
  "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": "…"
}

uploadCommand 内の LOCAL_FILE_PATH を、ファイルの絶対パスに置き換え、そのコマンドをシェルでそのまま実行します。終了コードは 0 である必要があります。signedUrl のトークンは、この1回のアップロードのみを許可します。この手順を省略すると、ストレージは空のままになり、デザインツールの事前チェックに失敗します。
ai-design-screens の attachments 配列には、{ id, path, type } のみを渡します。signedUrl、uploadCommand、nextStep は渡さないでください。代わりに自分のJSXに画像を配置する場合は、add-screen-jsx または replace-screen-jsx に渡すJSXの img src または bg-[url(...)] に assetUrl を指定します。JSX内の画像を参照してください。

リモートファイルを添付するには、まず自分でローカルパスにダウンロードし（たとえば curl を使用）、同じ3つの手順に従います。upload-attachment にURLを渡すことはないでください。

パラメーター	型	説明
`mimeType`	enum	ファイルのMIMEタイプ。`image/jpeg`、`image/png`、`image/webp`、`application/pdf`、`text/markdown`、`text/plain`、`text/javascript` のいずれかです。`.jsx`、`.tsx`、`.js`、`.ts` ファイルには `text/javascript` を使用します
`fileName`	`string`（最小1文字）	拡張子を含む元のファイル名（例：`cat.png` または `design.md`）

モードB — 短いテキスト（text + mimeType） すでにコンテキストにあるテキストをアップロードします。シェルコマンドは不要です。レスポンスはそのまま使用できます。

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

パラメーター	型	説明
`text`	`string`（最大64,000文字）	生のテキストコンテンツ。テキストファイルのみです。画像やPDFには使用しないでください。64,000文字を超える場合は、代わりにモードAを使用してください
`mimeType`	enum	`text/markdown`、`text/plain`、`text/javascript` のいずれかです

結果の { id, path, type } を、ai-design-screens の attachments 配列に渡します。両方のモードで、最大ファイルサイズは 3 MB です。また、PDFは100ページに制限されています。出力 — { id, path, assetUrl, type, mimeType, signedUrl?, uploadCommand?, nextStep? }。

type — 画像ファイルの場合は "image"、PDFとテキストファイルの場合は "document" です。
assetUrl — アップロードされたファイルのURLです。両方のモードで返されます。type が "image" の場合にのみ、モードAの uploadCommand を実行したあとで、add-screen-jsx または replace-screen-jsx のJSXで使用します。
signedUrl、uploadCommand、nextStep — モードAでのみ設定されます。デザインツールには渡さないでください。

Figmaツール

`import-figma`

Figmaのフレームを、キャンバス上の編集可能な要素としてFlowstepファイルに取り込みます。取り込みのたびに新しい画面が追加されます。同じフレームを2回取り込むと、2つの画面が作成されます。置き換えるつもりだった場合は、古い画面を delete-screen で削除してください。ファイルの組織では、Flowstepの設定でFigmaが接続されている必要があります。入力

パラメーター	型	説明
`fileId`	`uuid`	フレームを取り込む先のFlowstepファイル。`figmaUrl` 内のFigmaファイルキーではありません
`figmaUrl`	`string`	`node-id` を含む、特定のFigmaフレームへのリンク。Figmaでフレームを右クリックし、Copy/Paste as → Copy link to selection を選択します。ページへのリンクを指定すると、そのページのすべてのトップレベルフレームが取り込まれます（MCP経由では20フレームに制限されます）

出力 — { fileId, screenId, frameCount? }。screenId は取り込まれた画面です。結果を表示するには、これを get-screen-image に渡します。ページのURLで複数のフレームが取り込まれた場合、screenId は null になり、代わりに frameCount が返されます。その場合は、list-screens を呼び出したあと、新しい画面ごとに get-screen-image を呼び出してください。

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

プランと請求ツール

`get-plan-details`

組織のFlowstepプラン、サブスクリプションの状態、利用状況、残りの利用枠を取得します。入力は不要です。組織はサインインしているユーザーから特定されます。AIデザインツールを呼び出す前に、利用枠を確認するために使用します。出力 — { plan, subscription, limits, usage, remaining }。

フィールド	説明
`plan`	`{ name, code, type }`。`type` は `"free"` または `"paid"` です
`subscription`	`{ isPaid, isTrial, startDate, endDate, trialDaysRemaining }`
`limits`	機能ごとの上限（機能名がキーになります。例：`messages`）。それぞれに、任意の `daily` と `monthly` オブジェクト（`max` と `warn` の値を含む）と、`unlimited` フラグがあります
`usage`	機能ごとのこれまでの利用状況。`{ daily, monthly }` の形式です
`remaining`	機能ごとの残りの利用枠。`{ daily, monthly }` の形式です。無制限の機能では省略されます

上限はプランによって異なります。料金と利用上限を参照してください。

AIデザインツール

これら3つのツールは、説明またはプリセットからデザインします。JSXを受け取ったり再利用したりすることはありません。各呼び出しは、Flowstepアプリと同じメッセージの利用枠を消費し、生成が完了するかタイムアウト（180秒）になるまでブロックします。

ツール	用途
`ai-design-screens`	自由形式の説明から、新しい画面を生成したり、既存の画面をその場で変更したり、その両方を行ったりします
`ai-generate-screen-variant`	既存の1つの画面に対して、次のステップ、エラーや空の状態、またはプラットフォーム別のバリエーションを追加します
`ai-edit-screen-variant`	既存の1つの画面全体に、編集またはリデザインのプリセットを適用します

3つすべてが { status, fileId, screenIds, designGuidelinesUpdated } を返します。結果を表示するには、screenId ごとに1回ずつ get-screen-image を呼び出します。

designGuidelinesUpdated — この呼び出しの間にファイルの DESIGN.md ガイドラインが自動的に更新された場合の、変更の簡単な要約です。それ以外の場合は null です。

`ai-design-screens`

テキストの説明から、1つ以上の新しい画面を生成したり、既存の画面をその場で変更したり、その両方を1回の呼び出しで行ったりします。新しいフロー、テーマ設定、コピー、レイアウト、または複数の画面にまたがる連携した変更が対象です。これは、Flowstepエディターのチャットと同じデザインエージェントです。message と elementIds から、何を構築し、何を変更するかを判断します。 fileId を省略すると新しいファイルを開始します。既存のファイルで作業するには、fileId を渡します。リクエストが既存のファイルに適用される可能性がある場合は、エージェントが最初に list-files と list-screens を確認する必要があります。1つの画面の次のステップ、エラーや空の状態、またはプラットフォームのバリエーションを作成するには、ai-generate-screen-variant を使用します。1つの画面にプリセットを適用して編集またはリデザインするには、ai-edit-screen-variant を使用します。すでにJSXがある場合は、代わりに add-screen-jsx または replace-screen-jsx を使用してください。入力

パラメーター	型	デフォルト	説明
`fileId`	`uuid`	—	対象のファイル。省略すると新しいファイルを作成します。`elementIds` を設定する場合は必須です
`message`	`string`	—	生成する画面や行う変更の説明。`elementIds` を渡す場合は、それらを編集するのか、参照として使うのかを記述してください。Flowstep に参照させたいWebページのURLがあれば、ここに含めてください
`elementIds`	`uuid[]`	`[]`	任意。`list-screens` の `screenId` と、`get-screen-jsx`（`includeIds` 指定）の要素の `data-id` です。エディターでの選択のように機能します。その場で編集することも、新しい画面の視覚的な参照として使うこともできます。`screenId` は画面全体を対象にします
`attachments`	`{ id, path, type }[]`（最大5）	`[]`	`upload-attachment` で取得したファイル。画像、PDF、またはコードやテキストのファイルです。メッセージにファイルの内容を直接埋め込まないでください

例 — 1回の呼び出しで、1つの画面を編集して別の画面を追加する：

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "message": "Switch this sign-in screen to dark mode, then add a matching forgot-password screen.",
  "elementIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"]
}

出力 — { status, fileId, screenIds, designGuidelinesUpdated, reply? }。

{
  "status": "generated",
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenIds": [
    "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
    "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0"
  ],
  "designGuidelinesUpdated": null
}

status — 画面が構築または変更された場合は "generated" です。Flowstep が構築せずに返信した場合は "chat" です。その場合、reply にその回答が含まれ、screenIds は空になります。指示が曖昧な場合は、エージェントがあなたに明確化を求め、ツールを再度呼び出す必要があります。
screenIds — 呼び出し中に構築または変更されたすべての画面です。その場で編集された画面も含まれます。一部の画面が構築されたあとに呼び出しがタイムアウトした場合は、エラーではなく、それらの画面が返されます。

編集を指示した画面は、その場で上書きされます。

`ai-generate-screen-variant`

既存の1つの画面から派生した新しい画面を追加します。フローの次のステップ、エラーや空の状態、または別のプラットフォーム向けのバージョンです。元の画面は変更されません。既存の画面のバリエーションではない画面（たとえば設定画面など）を追加するには、fileId を指定して ai-design-screens を使用してください。入力

パラメーター	型	説明
`fileId`	`uuid`	対象のファイル
`screenId`	`uuid`	派生元となる既存の画面
`operationVariant`	enum	必須 — 新しい画面が既存の画面とどのように関連するか

`operationVariant`	追加される内容
`next_screen`	ユーザーフローの次の画面
`error_state`	画面のエラー状態
`empty_state`	画面の空の状態
`web_version`	Web版
`mobile_version`	モバイル版
`tablet_version`	タブレット版
`mobile_ios_version`	iOS版
`mobile_android_version`	Android版

出力 — { status, fileId, screenIds, designGuidelinesUpdated }。status は常に "generated" です。

`ai-edit-screen-variant`

プリセットを使って、既存の1つの画面をその場で変更します。テーマを設定したり、洗練させたり、別のレイアウトや視覚スタイルを試したり、ゼロからリデザインしたりできます。新しい画面、自由形式の指示、または個々の要素への正確な編集には、ai-design-screens を使用してください。入力

パラメーター	型	説明
`fileId`	`uuid`	対象のファイル
`screenId`	`uuid`	変更する既存の画面
`operationVariant`	enum	必須 — 適用する編集またはリデザインのプリセット

`operationVariant`	種類	効果
`dark_theme`	編集	画面をダークテーマに切り替えます
`light_theme`	編集	画面をライトテーマに切り替えます
`make_pretty`	編集	画面の視覚デザインを洗練させます
`different_layout`	リデザイン	別のレイアウトを試します
`different_style`	リデザイン	別の視覚スタイルを試します
`from_scratch`	リデザイン	画面をゼロからリデザインします

出力 — { status, fileId, screenIds, designGuidelinesUpdated }。status は常に "generated" です。

この操作により、画面の内容がその場で上書きされます。

名前が変更されたツール

ツール名は2026年9月と10月に変更されました。古い名前を使用するプロンプト、スクリプト、またはエージェントの指示がある場合は、更新してください。

旧名	新名
`get-screen`	`get-screen-jsx`
`add-screen`	`add-screen-jsx`
`replace-screen`	`replace-screen-jsx`
`ai-generate-screens`	`ai-design-screens`
`ai-edit-screens`	`ai-design-screens`
`create-new-design`	`ai-design-screens`
`edit-design`（自由形式の指示）	`ai-design-screens`
`edit-design`（`operationVariant` プリセット付き）	`ai-edit-screen-variant`
`regenerate-design`	`ai-edit-screen-variant`
`expand-design`	`ai-generate-screen-variant`

入力も変更されています。AIデザインツールは、targets の代わりに elementIds（バリエーションツールの場合は単一の screenId）を受け取ります。add-screen-jsx は、メタデータコメント付きの jsxContent の代わりに、jsx と明示的なメタデータフィールドを受け取ります。create-file は、title の代わりに name を受け取ります。デザインガイドラインツールは、resourceId と linkedTo の代わりに fileId を受け取ります。

​ファイルツール

​list-files

​get-file

​create-file

​update-file

​delete-file

​画面ツール

​list-screens

​get-screen-image

​get-screen-jsx

​add-screen-jsx

​replace-screen-jsx

​rename-screen

​delete-screen

​JSX内の画像

​画面フィールドの値

​デザインガイドラインツール

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​チャットツール

​get-chat-history

​添付ファイルツール

​upload-attachment

​Figmaツール

​import-figma

​プランと請求ツール

​get-plan-details

​AIデザインツール

​ai-design-screens

​ai-generate-screen-variant

​ai-edit-screen-variant

​名前が変更されたツール

ファイルツール

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

画面ツール

`list-screens`

`get-screen-image`

`get-screen-jsx`

`add-screen-jsx`

`replace-screen-jsx`

`rename-screen`

`delete-screen`

JSX内の画像

画面フィールドの値

デザインガイドラインツール

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

チャットツール

`get-chat-history`

添付ファイルツール

`upload-attachment`

Figmaツール

`import-figma`

プランと請求ツール

`get-plan-details`

AIデザインツール

`ai-design-screens`

`ai-generate-screen-variant`

`ai-edit-screen-variant`

名前が変更されたツール