メインコンテンツへスキップ

​
設定

Claude Code CLI でサーバーを追加します。
リポジトリで作業するすべてのメンバーとサーバーを共有するには、代わりにプロジェクトのルートにある .mcp.json に追加し、ファイルをコミットしてください。
Claude Code の HTTP サーバーでは、"type": "http" フィールドが必須です。

​
認証

Claude Code は、最初に Flowstep ツールを呼び出すときに、OAuth 2.1 PKCE フローを自動的に処理します。ブラウザーで Flowstep のサインインページが開きます。Flowstepの認証情報（メールアドレスとパスワード、またはGoogle）でサインインし、同意画面で Allow をクリックすると、CLI がコールバックを受け取ります。作成やローテーションが必要な API キーはありません。
認証の前に、Flowstepアカウントが必要です。app.flowstep.ai で作成してください。

​
接続を確認する

Claude Code のセッションで /mcp と入力します。Flowstep が接続済みとして表示され、ツールが利用可能になっているはずです。次に、以下のように尋ねてください。

​
使用例

Claude Code は ai-design-screens → get-screen-image を呼び出し、レンダリング結果をインラインで表示します。Claude Code はすでにリポジトリを開いているため、「Now build this screen in our app」（この画面をアプリに実装して）と続けて依頼できます。Claude Code は get-screen-jsx でデザインを読み取り、お使いのコンポーネントを使って実装できます。