前提条件
- Flowstep アカウント (app.flowstep.ai)
- Cursor
- Claude Code
Cursor v0.43+ が必要です保存後に Cursor を再起動します。Cursor が
ステップ 1 — サーバーを追加する
~/.cursor/mcp.json (グローバル) またはプロジェクトルートの .cursor/mcp.json を作成または編集します：ステップ 2 — 認証する
Cursor MCP パネル (Settings → MCP) を開き、Flowstep の隣の Connect (接続) をクリックします。Cursor がブラウザを開いて Flowstep OAuth ログイン画面を表示します。Flowstep の認証情報 (メールアドレス/パスワード、または Google) でサインインします。ブラウザが戻ると、Cursor がトークンを自動的に保存します。認証する前に Flowstep アカウントが必要です。まだ持っていない場合は、まず app.flowstep.ai でサインアップしてください。
ステップ 3 — ツール呼び出しを実行する
Cursor チャットで以下を入力してください：“List my Flowstep files”Cursor が
list-files を呼び出して、ファイルリストを返します。レスポンスが空の場合は、まずファイルを作成してください：“Create a new Flowstep file called ‘Dashboard‘“
ステップ 4 — 画面を生成する
create-new-design (ファイルを作成し、画面を 1 ステップで生成します) を呼び出し、その後 get-screen-image を呼び出します。チャットでレンダリングされたデザインがインラインで表示されます。次のステップ
- ツール リファレンス — 20 個すべてのツールの完全な入出力ドキュメント
- 例 — マルチステップ ワークフロー
- その他のクライアント — Windsurf、Claude Desktop、claude.ai