> ## 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.

# Flowstep MCP Server

> Flowstep を MCP サーバーとして使用して、Cursor、Claude Code、または任意の MCP 互換クライアントから UI デザインを直接生成、検査、管理します。

Flowstep は[Model Context Protocol](https://modelcontextprotocol.io/)を通じて設計ツールを公開し、AI アシスタントがエディタを離れずに UI 画面を作成し、反復処理できるようにします。

サーバーは`https://api.flowstep.ai/mcp`でホストされています（Streamable HTTP トランスポート）。ローカルプロセスの実行は不要です。

## できることは何ですか

サーバーは7つのカテゴリーにわたる20個のツールを公開しています：

| カテゴリー     | ツール                                                                                           |
| --------- | --------------------------------------------------------------------------------------------- |
| **ファイル**  | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **画面**    | `list-screens`, `get-screen`, `get-screen-image`, `add-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`                                                                            |

## 一般的な使用例

**プロンプトから画面を生成する** — `create-new-design` を説明とともに呼び出します。Flowstepはファイルと画面を1ステップで作成します。返された `screenIds` で `get-screen-image` を呼び出して、結果をインラインで表示します。

**Reactコンポーネントを視覚化する** — `upload-attachment` 経由で `.jsx` または `.tsx` ファイルをアップロードします（`mimeType: text/javascript` を使用）。次に、返された添付ファイルをコンポーネントを説明するメッセージとともに `create-new-design` に渡します。Flowstepはソースを読み取り、一致する設計画面を生成します。

**デザインを反復処理する** — ターゲット `screenId` と変更指示で `edit-design` を呼び出すか、画面をゼロから作り直すために `regenerate-design` を呼び出します。

**デザインガイドラインを保持する** — `get-design-guidelines` を呼び出して現在のスタイルルール（色、タイポグラフィ、スペーシング、トーン）を取得します。次に、`update-design-guidelines` を使用してデザインが進化する際にそれらを同期に保ちます。一貫性のあるガイドラインを `create-new-design` または `edit-design` に渡すと、生成されたすべての画面がブランドに沿っていることが保証されます。`delete-design-guidelines` を使用してそれらを完全にリセットします。

**Figmaからインポートする** — `import-figma` をFigmaフレームリンクと `fileId` とともに呼び出して、フレームをFlowstepファイルに編集可能な要素として持ち込みます。ファイルの組織には最初にFigmaが接続されている必要があります。

**割り当てを監査する** — 生成バッチを開始する前に、`get-plan-details` を呼び出して残りの日次使用量と月次使用量を確認します。

## エンドポイント

```
https://api.flowstep.ai/mcp
```

トランスポート：Streamable HTTP。セッションモデル：ステートレス（各リクエストは独立し、セッション ID はありません）。

## 次のステップ

<CardGroup cols={2}>
  <Card title="クイックスタート" icon="bolt" href="/ja/mcp/quickstart">
    Cursor を使用して 5 分以内に最初のツール呼び出しを行います。
  </Card>

  <Card title="認証" icon="lock" href="/ja/mcp/authentication">
    OAuth 2.1 PKCE の仕組みとトークンの発行方法。
  </Card>

  <Card title="ツール" icon="wrench" href="/ja/mcp/tools">
    すべての20個のツールの完全な入出力リファレンス。
  </Card>

  <Card title="例" icon="code" href="/ja/mcp/examples">
    一般的なタスク向けのエンドツーエンドワークフロー。
  </Card>
</CardGroup>