前提条件
- Flowstepアカウント（app.flowstep.ai）
- Cursor
- Claude Code
Cursor v0.43 以降が必要です保存したら、Cursor を再起動します。Cursor は
ステップ 1 — サーバーを追加する
Add Flowstep to Cursor をクリックしてワンクリックでインストールするか、~/.cursor/mcp.json（グローバル）またはプロジェクトのルートにある .cursor/mcp.json を作成または編集します。ステップ 2 — 認証する
Cursor の MCP パネル（Settings → MCP）を開き、Flowstep の横にある Connect をクリックします。Cursor がブラウザーで Flowstep のサインインページを開きます。Flowstepの認証情報（メールアドレスとパスワード、またはGoogle）でサインインし、同意画面で Allow をクリックします。ブラウザーが戻り、Cursor がトークンを自動的に保存します。認証の前に、Flowstepアカウントが必要です。お持ちでない場合は、先に app.flowstep.ai でサインアップしてください。
ステップ 3 — ツールを呼び出す
Cursor のチャットで、次のように依頼します。「Flowstepのファイルを一覧表示して」Cursor は
list-files を呼び出し、ファイル一覧を返します。一覧が空の場合は、先にファイルを作成してください。「‘Dashboard’ という名前の新しいFlowstepファイルを作成して」
ステップ 4 — 画面を生成する
ai-design-screens（新しいファイルを作成し、画面を1つの手順で生成します）を呼び出し、その後 get-screen-image を呼び出します。レンダリングされたデザインが、チャット内にインラインで表示されます。ai-design-screens や他のAIデザインツールは、Flowstepのメッセージの利用枠を消費します。ファイルや画面の一覧表示、読み取り、レンダリングは無料です。利用上限を参照してください。次のステップ
- ツールリファレンス — 22個すべてのツールの入出力に関する詳細
- 例 — 複数ステップのワークフロー
- その他のクライアント — Windsurf、Codex、Claude Desktop、claude.ai