MCPツールリファレンス

すべてのツールはMCPコンテンツブロックのcontent配列を返します。テキストツールは{ type: "text", text: "<json-string>" }を返します。画像ツールは{ type: "image", data: "<base64>", mimeType: "image/png" }を返します。失敗時はisError: trueが設定され、テキストブロックにエラーメッセージが含まれます。

ファイルツール

`list-files`

現在のユーザーの Flowstep ファイルをリストします。入力

パラメータ	型	デフォルト	説明
`orderByCreation`	`boolean`	`true`	作成日順でソート
`limit`	`integer` (1–100)	`20`	返すファイル数
`offset`	`integer` (≥0)	`0`	ページネーションオフセット

出力 — ファイルオブジェクトのJSON配列。

[
  {
    "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",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  }
]

`get-file`

ファイルID で単一のファイルを取得します。ファイルコンテンツは意図的に省略されています — get-screen または get-screen-image を使用して画面を検査し、get-design-guidelines を使用して添付されたガイドラインを取得します。入力

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

出力 — JSON ファイルオブジェクト。

{
  "file": {
    "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
    "name": "Dashboard redesign",
    "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
    "created_at": "2026-04-30T15:02:13.120152+00:00",
    "updated_at": "2026-04-30T15:02:13.120152+00:00",
    "access_level": "private",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  },
  "user_access_level": "write"
}

`create-file`

新しい Flowstep ファイルを作成します。入力

パラメータ	型	説明
`title`	`string` (min 1)	ファイル名

出力 — 新しいファイルの id を含む JSON ファイルオブジェクト。

{
  "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "name": "Dashboard redesign",
  "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
  "created_at": "2026-04-30T15:02:13.120152+00:00",
  "updated_at": "2026-04-30T15:02:13.120152+00:00",
  "access_level": "private",
  "user_access_level": "write",
  "owner": true,
  "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
}

その後のツール呼び出しで fileId として返された id を使用してください。

`update-file`

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

パラメータ	型	説明
`id`	`uuid`	ファイルID
`name`	`string` (min 1)	新しい名前

出力 — get-file と同じ形状の更新されたファイルオブジェクト。

{
  "file": {
    "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
    "name": "Dashboard redesign (v2)",
    "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
    "created_at": "2026-04-30T15:02:13.120152+00:00",
    "updated_at": "2026-04-30T15:02:13.120152+00:00",
    "access_level": "private",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  },
  "user_access_level": "write"
}

`delete-file`

ファイルを完全に削除します。渡す name はファイルの実際の名前に対して検証されます — 一致しない場合、削除は中止されます。これにより、誤ってファイルを削除することを防ぎます。入力

パラメータ	型	説明
`id`	`uuid`	ファイルID
`name`	`string`	ファイルの現在の名前 — 一致する必要があります。そうでない場合、削除は中止されます

出力 — "File deleted successfully"

これは取り消せません。ファイル内のすべての画面が削除されます。

画面ツール

`list-screens`

ファイルのすべての生成済み画面をリストします。返された screenId 値を使用して get-screen、get-screen-image で画面を参照し、edit-design、regenerate-design、または expand-design の targets として使用します。入力

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

出力 — 画面サマリーの JSON 配列。

[
  {
    "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
    "name": "Mobile login screen",
    "fidelity": "ui",
    "prompt": "Generate a simple mobile login screen with email and password fields and a sign in button",
    "createdAt": "2026-04-30T15:02:37.444139+00:00"
  }
]

name はユーザーが割り当てた画面名、または名前がない場合は null です。

`get-screen`

Flowstep の外で編集または使用できるようにするために、画面の JSX コードを取得します。ビジュアルプレビューには get-screen-image を使用してください。入力

パラメータ	型	説明
`fileId`	`uuid`	ファイルID
`screenId`	`uuid`	`list-screens` で返された `screenId` またはデザインツールで返された `screenIds` 配列から

出力 — 画面をコード (JSX) として。最初の行のコメントに注意してください。これは add-screen ツールを使用する場合に必須です。

<!-- screenType: "iphone-x-vertical" width: "375" height: "812" name: "Change to a light theme" colorTheme: "blue" screenId: "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0" -->
<div className="bg-white text-zinc-950 w-full h-fit">
  <div className="flex p-6 flex-col gap-6">
    <div className="flex pt-4 justify-between items-center">
      <ArrowLeft className="size-5 text-[#71717b]" />
      <span className="font-semibold text-zinc-950 text-lg leading-7">
        World Clock
      </span>
      <Plus className="size-5 text-[#2b7fff]" />
    </div>
    <div className="rounded-xl bg-zinc-100 flex p-2 items-center gap-2">
      <Search className="size-4 text-[#71717b] ml-2" />
      <span className="text-[#71717b] text-sm leading-5">Search cities...</span>
    </div>
...
    <div className="flex pt-2 pb-4 justify-center items-center gap-4">
      <Button variant="outline" className="rounded-full px-6 gap-2">
        <Clock className="size-4" />
        <span>Compare</span>
      </Button>
      <Button className="rounded-full bg-[#2b7fff] text-blue-50 px-6 gap-2">
        <Bell className="size-4" />
        <span>Set Alert</span>
      </Button>
    </div>
  </div>
</div>;

`add-screen`

生の JSX 文字列から Flowstep ファイルに新しい画面を追加します。入力

パラメータ	型	説明
`fileId`	`uuid`	ファイルID
`jsxContent`	`string`	ファイルに画面として追加する JSX
`screenType`	`string`	JSX の開始時点でコメントとして画面タイプが定義されていない場合は必須

注記 — 以下のようなコメントが JSX の最初の行として存在する必要があります。これは画面を正しく追加するために使用されます。screenType、name、screenId はすべてオプションです — screenId が存在する場合は使用されます（例えば、get-screen 出力からコピーされた JSX を渡すとき）が、必須ではありません。画面名はコメントの name フィールドから取得されます（“Copy of <name>” として表示）、またはない場合は “Untitled” です。  出力 — 新しく追加された画面ID。

{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf" }

`get-screen-image`

画面を PNG にレンダリングし、インライン画像として返します。イメージコンテンツブロックをサポートするクライアントが必要です。入力

パラメータ	型	説明
`fileId`	`uuid`	ファイルID
`screenId`	`uuid`	`list-screens` で返された `screenId` またはデザインツールで返された `screenIds` 配列から

出力 — MCP イメージコンテンツブロック (image/png)。

`rename-screen`

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

パラメータ	型	説明
`fileId`	`uuid`	ファイルID
`screenId`	`uuid`	`list-screens`で返された`screenId`
`name`	`string` (1–100 chars)	新しい画面名。先頭と末尾の空白はトリムされます

出力 — { screenId, name }。

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

AI ツール

regenerate-design、expand-design、edit-design は、最初に designs 配列を使用して生成された画面にのみ存在するデザインコンテキストが必要です。デザインコンテキストなしで生成された画面はエラーを返します。

`create-new-design`

テキストプロンプトから1つ以上の画面デザインを生成します。fileId を省略すると、新しいファイルが自動的に作成されます。生成完了またはタイムアウト (180 秒) までブロックします。入力

パラメータ	型	デフォルト	説明
`fileId`	`uuid`	—	ターゲットファイル — 新しいファイルを自動的に作成するには省略します。`targets`が設定されている場合は必須です
`message`	`string`	—	生成する画面を説明するプロンプト
`targets`	`uuid[]`	`[]`	オプショナルビジュアルリファレンス — `list-screens`またはデザインツールから返された`get-screen`のサブ要素IDから返された`screenId`。参照される画面はビジュアル参考としてのみ使用され、その場所では編集されません
`attachments`	`AttachmentRequestData[]` (max 5)	`[]`	プリロード済み添付ファイル — 画像、PDF、またはコードファイル。常に最初に`upload-attachment`でアップロードしてください。ファイルコンテンツをメッセージに直接インラインしないでください
`designs`	`DesignRequestData[]`	`[]`	デザインリファレンス

出力 — { fileId, screenIds, designGuidelinesUpdated }。結果を表示するには、各screenIdをget-screen-imageに渡します。designGuidelinesUpdatedは、このレスポンスの一部としてファイルのデザインガイドラインが変更されたかどうかを報告します。

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"],
  "designGuidelinesUpdated": false
}

`regenerate-design`

既存の画面をスクラッチからまたはスタイルのバリエーション付きで再実行します。targetsに少なくとも1つのscreenIdが必要です。生成完了またはタイムアウト(180秒)までブロックします。入力

パラメータ	型	デフォルト	説明
`fileId`	`uuid`	—	ターゲットファイル
`message`	`string`	—	プロンプトテキスト
`targets`	`uuid[]` (min 1)	—	再生成する画面のscreenIds
`operationVariant`	`"different_layout" \| "different_style" \| "from_scratch"`	—	必須 — 画面を再実行する方法：`different_layout`（スタイルとコンテンツを保持、レイアウトを変更）、`different_style`（レイアウトとコンテンツを保持、色とビジュアル処理を変更）、または`from_scratch`（同じ目的のための新しいレイアウト、スタイル、コンテンツ）
`designs`	`DesignRequestData[]`	`[]`	デザインリファレンス（自動的に解決）

出力 — { fileId, screenIds, designGuidelinesUpdated }。結果を表示するには、各screenIdをget-screen-imageに渡します。

`expand-design`

既存のデザインに後続の画面を追加します。targetsに少なくとも1つのscreenIdが必要で、必須のoperationVariantが必要です。生成完了またはタイムアウト(180秒)までブロックします。入力

パラメータ	型	デフォルト	説明
`fileId`	`uuid`	—	ターゲットファイル
`message`	`string`	—	プロンプトテキスト
`targets`	`uuid[]` (min 1)	—	拡張元の画面のscreenIds
`operationVariant`	`"next_screen" \| "error_state" \| "empty_state" \| "web_version" \| "mobile_version" \| "tablet_version" \| "mobile_ios_version" \| "mobile_android_version"`	—	必須 — 生成する後続の画面のタイプ
`designs`	`DesignRequestData[]`	`[]`	デザインリファレンス（自動的に解決）

出力 — { fileId, screenIds, designGuidelinesUpdated }。結果を表示するには、各screenIdをget-screen-imageに渡します。

`edit-design`

プロンプトを通じて既存の画面を変更します。targetsに少なくとも1つのscreenIdが必要です。生成完了またはタイムアウト(180秒)までブロックします。入力

パラメータ	型	デフォルト	説明
`fileId`	`uuid`	—	ターゲットファイル
`message`	`string`	—	適用する編集を説明する指示
`targets`	`uuid[]` (min 1)	—	編集する画面のscreenIds
`operationVariant`	`"dark_theme" \| "light_theme" \| "make_pretty"`	—	オプショナルなスタイルショートカット
`attachments`	`AttachmentRequestData[]` (max 5)	`[]`	プリロード済み添付ファイル。常に`upload-attachment`でアップロードしてください
`designs`	`DesignRequestData[]`	`[]`	デザインリファレンス（自動的に解決）

出力 — { fileId, screenIds, designGuidelinesUpdated }。結果を表示するには、各screenIdをget-screen-imageに渡します。

`upload-attachment`

create-new-design または edit-design で使用する添付ファイルとしてファイルをアップロードします (regenerate-design または expand-design ではありません)。ファイルバイトはモデルを通じて渡されず、サーバーはあなたに代わって URL をフェッチしません。正確に1つのモードを使用し、組み合わせないでください。 モード 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",
  "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 をファイルへの絶対パスに置き換えて、そのコマンドを shell で実行します — exit 0 である必要があります。signedUrl のトークンはこの単一アップロードのみを認可します。このステップをスキップするとストレージが空のままになり、デザインツールが事前チェックに失敗します。
{ id, path, type } のみをデザインツールの attachments 配列に渡します — signedUrl、uploadCommand、または nextStep は渡しません。

リモートファイルを添付するには、まず自分でローカルパスにダウンロードしてから (例えば 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` (min 1)	拡張子付きの元のファイル名 (例: `cat.png` または `design.md`)

モード B — 短いテキスト (text + mimeType) 既にコンテキストにあるテキストをアップロードします — shell コマンドは不要です。レスポンスはすぐに使用できます。

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

パラメータ	型	説明
`text`	`string` (max 64,000 chars)	生のテキストコンテンツ。テキストファイルのみ — 画像や PDF には使用しないでください。64,000 文字より長い場合は、モード A を使用してください
`mimeType`	enum	`text/markdown`、`text/plain`、`text/javascript` のいずれか

create-new-design または edit-design の attachments 配列に結果の { id, path, type } を渡します。最大ファイルサイズは両方のモード全体で 3 MB です。PDF は 100 ページに制限されています。type は画像ファイルの場合 "image"、PDF とテキストファイルの場合 "document" です。

チャットツール

`get-chat-history`

ファイルのチャットメッセージ履歴を取得します。入力

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

出力 — messages 配列を含む JSON オブジェクト。各メッセージは type ("request" または "response")、author ("human" または "ai")、および content_type ("text"、"summary"、または "followup") を持ちます。

{
  "messages": [
    {
      "id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b",
      "type": "request",
      "status": "success",
      "content": "Generate a simple mobile login screen with email and password fields",
      "author": "human",
      "content_type": "text",
      "sequence": 1,
      "request_message_id": null,
      "targets": [],
      "attachments": []
    },
    {
      "id": "d860186b-82d5-4bd1-8e8e-8ba5377a14bf",
      "chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b",
      "type": "response",
      "status": "success",
      "content": "Generated a mobile login screen with email and password input fields, sign in button, remember me checkbox, forgot password link, social login options (Apple/Google), and 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" }],
      "attachments": []
    }
  ]
}

デザインツール

`get-design-guidelines`

ファイル用に保存されたデザインガイドラインを取得します。入力

パラメータ	型	デフォルト	説明
`resourceId`	`uuid`	—	ファイルID
`linkedTo`	`"file"`	`"file"`	リソースタイプ

出力

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

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

`update-design-guidelines`

ファイルのデザインガイドラインを設定または置換します。ガイドラインはGoogle の design.md 形式の平文文字列として渡されます — オブジェクトまたは JSON を渡さないでください。サーバーはソフト検証を実行し、レスポンス内に Warnings: セクションを返す場合があります。このセクションには受け入れられたが AI が無視する可能性のある問題 (未知のキー、16進数以外の色) をリストしています。これらをユーザーに表示してください。入力

パラメータ	型	デフォルト	説明
`resourceId`	`uuid`	—	ファイルID
`designGuidelines`	`string` (min 1)	—	ガイドラインの生のテキストコンテンツ。平文文字列である必要があります — JSON エンコードされていません
`linkedTo`	`"file"`	`"file"`	リソースタイプ

検証ルール

フロントマターは正しく開かれ、閉じられる必要があります
フロントマター行は有効なブロックスタイル YAML である必要があります
Markdown 本体には重複した ## セクション見出しが含まれません

出力 — "Design guidelines updated successfully" (場合によっては Warnings: セクション)。

`delete-design-guidelines`

ファイルのデザインガイドラインをクリアします。入力

パラメータ	型	デフォルト	説明
`resourceId`	`uuid`	—	ファイルID
`linkedTo`	`"file"`	`"file"`	リソースタイプ

出力 — "Design guidelines deleted successfully"

Figma ツール

`import-figma`

Figma フレームを Flowstep ファイルにキャンバス上の編集可能な要素としてインポートします。同じフレームを再度インポートすると、その場で更新されます。ファイルの組織には Flowstep 設定で Figma が接続されている必要があります。入力

パラメータ	型	説明
`figmaUrl`	`string`	特定の Figma フレームへのリンク。Figma で、フレームを右クリックして Copy link to selection を選択します。ページへのリンクはそのページ上のすべてのトップレベルフレームをインポートします (MCP を使用する場合は20フレームに制限)。
`fileId`	`uuid`	フレームをインポートする Flowstep ファイル

出力 — { fileId, screenId }。screenId はインポートされた画面要素の ID です — get-screen-image に渡して結果を表示します。ページ URL が複数のフレームをインポートする場合、screenId は null で、frameCount が代わりに返されます。

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

課金ツール

`get-plan-details`

現在のユーザーのプラン、サブスクリプションステータス、および残りのクォータを取得します。入力は不要です。出力

{
  "plan": {
    "name": "Starter",
    "code": "starter",
    "type": "paid"
  },
  "subscription": {
    "isPaid": true,
    "isTrial": false,
    "startDate": "2025-01-01T00:00:00Z",
    "endDate": null,
    "trialDaysRemaining": null
  },
  "limits": {
    "messages": {
      "daily": { "max": 50, "warn": 40 },
      "monthly": { "max": 500, "warn": 400 },
      "unlimited": false
    }
  },
  "usage": {
    "messages": { "daily": 12, "monthly": 87 }
  },
  "remaining": {
    "messages": { "daily": 38, "monthly": 413 }
  }
}

制限はプランによって異なります。生成のバッチの前にこのツールを呼び出して、利用可能なクォータを確認してください。

はじめに

Flowstep の使い方

チームと組織

エクスポートと連携

MCP サーバー

請求とプラン

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

MCPツールリファレンス

ファイルツール

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

画面ツール

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

`rename-screen`

AI ツール

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

チャットツール

`get-chat-history`

デザインツール

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Figma ツール

`import-figma`

課金ツール

`get-plan-details`

​ファイルツール

​list-files

​get-file

​create-file

​update-file

​delete-file

​画面ツール

​list-screens

​get-screen

​add-screen

​get-screen-image

​rename-screen

​AI ツール

​create-new-design

​regenerate-design

​expand-design

​edit-design

​upload-attachment

​チャット ツール

​get-chat-history

​デザインツール

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Figma ツール

​import-figma

​課金 ツール

​get-plan-details

ファイルツール

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

画面ツール

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

`rename-screen`

AI ツール

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

チャットツール

`get-chat-history`

デザインツール

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Figma ツール

`import-figma`

課金ツール

`get-plan-details`