> ## 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 クイックスタート

> Flowstep を AI エディタに接続して、初めてのツール呼び出しを実行します。

## 前提条件

* Flowstep アカウント ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **Cursor v0.43+ が必要です**

    ## ステップ 1 — サーバーを追加する

    `~/.cursor/mcp.json` (グローバル) またはプロジェクトルートの `.cursor/mcp.json` を作成または編集します：

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    保存後に Cursor を再起動します。

    ## ステップ 2 — 認証する

    Cursor MCP パネル (Settings → MCP) を開き、Flowstep の隣の **Connect** (接続) をクリックします。Cursor がブラウザを開いて Flowstep OAuth ログイン画面を表示します。Flowstep の認証情報 (メールアドレス/パスワード、または Google) でサインインします。ブラウザが戻ると、Cursor がトークンを自動的に保存します。

    <Note>
      認証する前に Flowstep アカウントが必要です。まだ持っていない場合は、まず [app.flowstep.ai](https://app.flowstep.ai) でサインアップしてください。
    </Note>

    ## ステップ 3 — ツール呼び出しを実行する

    Cursor チャットで以下を入力してください：

    > "List my Flowstep files"

    Cursor が `list-files` を呼び出して、ファイルリストを返します。レスポンスが空の場合は、まずファイルを作成してください：

    > "Create a new Flowstep file called 'Dashboard'"

    ## ステップ 4 — 画面を生成する

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    Cursor が `create-new-design` (ファイルを作成し、画面を 1 ステップで生成します) を呼び出し、その後 `get-screen-image` を呼び出します。チャットでレンダリングされたデザインがインラインで表示されます。
  </Tab>

  <Tab title="Claude Code">
    **Claude Code CLI が必要です**

    ## ステップ 1 — サーバーを追加する

    プロジェクトルートに `.mcp.json` (プロジェクトスコープ) または `~/.claude/mcp.json` (グローバル) を作成します：

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "type": "http",
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    <Note>
      `"type": "http"` フィールドは Claude Code HTTP サーバーに必須です。Cursor には必要ありません。
    </Note>

    ## ステップ 2 — 認証する

    Claude Code チャットから任意の Flowstep ツールを実行します。初回使用時には、Claude Code がブラウザを開いて Flowstep OAuth ログイン画面を表示します。Flowstep の認証情報 (メールアドレス/パスワード、または Google) でサインインします。ブラウザが戻ると、トークンが自動的に保存されます。

    <Note>
      認証する前に Flowstep アカウントが必要です。まだ持っていない場合は、まず [app.flowstep.ai](https://app.flowstep.ai) でサインアップしてください。
    </Note>

    ## ステップ 3 — ツール呼び出しを実行する

    Claude Code チャットで以下を入力してください：

    > "List my Flowstep files"

    Claude Code が `list-files` を呼び出して、ファイルリストを返します。レスポンスが空の場合は、まずファイルを作成してください：

    > "Create a new Flowstep file called 'Dashboard'"

    ## ステップ 4 — 画面を生成する

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    Claude Code が `create-new-design` (ファイルを作成し、画面を 1 ステップで生成します) を呼び出し、その後 `get-screen-image` を呼び出します。チャットでレンダリングされたデザインがインラインで表示されます。
  </Tab>
</Tabs>

## 次のステップ

* [ツール リファレンス](/ja/mcp/tools) — 20 個すべてのツールの完全な入出力ドキュメント
* [例](/ja/mcp/examples) — マルチステップ ワークフロー
* [その他のクライアント](/ja/mcp/clients/claude-code) — Windsurf、Claude Desktop、claude.ai