> ## 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ツール リファレンス

> すべての20個のFlowstep 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配列。

```json theme={"system"}
[
  {
    "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 ファイルオブジェクト。

```json theme={"system"}
{
  "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 ファイルオブジェクト。

```json theme={"system"}
{
  "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` と同じ形状の更新されたファイルオブジェクト。

```json theme={"system"}
{
  "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"`

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

***

## 画面ツール

### `list-screens`

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

**入力**

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

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

```json theme={"system"}
[
  {
    "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` はユーザーが割り当てた画面名、またはUnnamedの場合は `null` です。

***

### `get-screen`

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

**入力**

| パラメータ      | 型      | 説明                                                                   |
| ---------- | ------ | -------------------------------------------------------------------- |
| `fileId`   | `uuid` | ファイル ID                                                              |
| `screenId` | `uuid` | `list-screens` によって返された `screenId` または設計ツールによって返された `screenIds` 配列から |

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

```json theme={"system"}
<!-- 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>" として表示）、またはAbsentの場合は "Untitled" です。

`<!-- screenType: "iphone-x-vertical" width: "375" height: "812" name: "Change to a light theme" colorTheme: "blue" -->`

**出力** — 新しく追加された画面ID。

```json theme={"system"}
{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf" }
```

***

### `get-screen-image`

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

**入力**

| パラメータ      | 型      | 説明                                                                   |
| ---------- | ------ | -------------------------------------------------------------------- |
| `fileId`   | `uuid` | ファイル ID                                                              |
| `screenId` | `uuid` | `list-screens` によって返された `screenId` または設計ツールによって返された `screenIds` 配列から |

**出力** — MCPイメージコンテンツブロック（`image/png`）。

***

## AIツール

<Warning>
  `regenerate-design`, `expand-design`, `edit-design` は、最初に `designs` 配列を使用して生成された画面にのみ存在する設計コンテキストが必要です。設計コンテキストなしで生成された画面はエラーを返します。回避策：`upload-attachment` を使用して画面を画像としてレンダリングし、その後、望みの変更を説明するメッセージとともに `create-new-design` を `attachments` 内の画像で呼び出します。
</Warning>

### `create-new-design`

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

**入力**

| パラメータ         | 型                                 | デフォルト | 説明                                                                                                        |
| ------------- | --------------------------------- | ----- | --------------------------------------------------------------------------------------------------------- |
| `fileId`      | `uuid`                            | —     | ターゲット ファイル — 新しいファイルを自動的に作成するには省略                                                                         |
| `message`     | `string`                          | —     | 生成する画面を説明するプロンプト                                                                                          |
| `attachments` | `AttachmentRequestData[]` (max 5) | `[]`  | プリロード済み添付ファイル — 画像、PDF、またはコードファイル。常に最初に `upload-attachment` でアップロードしてください。ファイルコンテンツをメッセージに直接インラインしないでください |
| `designs`     | `DesignRequestData[]`             | `[]`  | 設計リファレンス                                                                                                  |

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

```json theme={"system"}
{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"]
}
```

***

### `regenerate-design`

既存の画面をスクラッチからまたはスタイルの変化で再実行します。`targets` に少なくとも1つの `screenId` が必要です。生成完了またはタイムアウト（180秒）までブロックします。

**入力**

| パラメータ              | 型                                                           | デフォルト | 説明                |
| ------------------ | ----------------------------------------------------------- | ----- | ----------------- |
| `fileId`           | `uuid`                                                      | —     | ターゲット ファイル        |
| `message`          | `string`                                                    | —     | プロンプト テキスト        |
| `targets`          | `uuid[]` (min 1)                                            | —     | 再生成する画面のscreenIds |
| `operationVariant` | `"different_layout" \| "different_style" \| "from_scratch"` | —     | オプショナルなスタイルバリアント  |
| `designs`          | `DesignRequestData[]`                                       | `[]`  | 設計リファレンス（自動的に解決）  |

**出力** — `{ fileId, screenIds }`. 結果を表示するには、各 `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 }`. 結果を表示するには、各 `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 }`. 結果を表示するには、各 `screenId` を `get-screen-image` に渡します。

***

### `upload-attachment`

`create-new-design` または `edit-design` で使用する添付ファイルとしてファイルをアップロードします。`{ id, path, type, mimeType }` を返します — このオブジェクトを `attachments` 配列に直接渡します。

2つのモード：

**モード 1 — IDで画面を指定**

`screenId` と `fileId` を渡します。サーバーはデータベースから画面の状態をフェッチしてそれを画像としてレンダリングします。

| パラメータ      | 型      | 説明            |
| ---------- | ------ | ------------- |
| `fileId`   | `uuid` | 画面を含むファイル（必須） |
| `screenId` | `uuid` | レンダリングする画面    |

**モード 2 — 外部ファイル**

ファイルコンテンツを直接渡します。バイナリファイルはbase64でエンコードする必要があります。テキストファイル（ソースコード含む）は平文UTF-8文字列として渡します。

| パラメータ      | 型                                                                                                       | 説明                                                                    |
| ---------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| `fileData` | `string`                                                                                                | ファイルコンテンツ — バイナリはbase64、テキストはUTF-8文字列                                 |
| `fileName` | `string`                                                                                                | 元のファイル名                                                               |
| `mimeType` | `"image/jpeg" \| "image/png" \| "image/webp" \| "application/pdf" \| "text/plain" \| "text/javascript"` | MIME型。`.jsx`, `.tsx`, `.js`, `.ts` ファイルには `text/javascript` を使用してください |

最大ファイルサイズ：**3 MB**。大きな画像の場合は `image/png` より `image/jpeg` を優先してください。

**出力**

```json theme={"system"}
{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "type": "image",
  "mimeType": "image/jpeg"
}
```

`type` は画像/PDFアップロードは `"image"` 、テキスト/コードファイルは `"document"` です。

***

## チャットツール

### `get-chat-history`

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

**入力**

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

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

```json theme={"system"}
{
  "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"` | リソース型   |

**出力**

```json theme={"system"}
{
  "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` が代わりに返されます。

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

***

## 請求ツール

### `get-plan-details`

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

**出力**

```json theme={"system"}
{
  "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 }
  }
}
```

生成の一括処理の前にこのツールを呼び出して、利用可能なクォータを確認します。
