https://api.flowstep.ai/mcp（Streamable HTTP トランスポート）でホストされています。実行するローカルプロセスも、管理するAPIキーもありません。クライアントはOAuth経由でFlowstepアカウントにサインインします。
できること
サーバーは8つのカテゴリにわたり、22個のツールを公開しています。
3つの AIデザイン ツールは、Flowstepアプリと同じメッセージの利用枠を消費します。それ以外のツールはすべて無料です。利用上限を参照してください。
よくあるユースケース
プロンプトから画面を生成する — 説明を指定してai-design-screens を呼び出します。fileId を省略すると、Flowstepがファイルと画面を1つの手順で作成します。返された screenId ごとに get-screen-image を呼び出すと、結果をインラインで確認できます。
Reactコンポーネントを可視化する — upload-attachment（mimeType: text/javascript）で .jsx または .tsx のソースをアップロードし、返された添付ファイルを、画面を説明するメッセージとともに ai-design-screens に渡します。Flowstepがソースを読み取り、それに合うデザインを生成します。
デザインを反復的に改善する — 1つ以上の screenId（または個別の要素ID）を elementIds に指定し、自由形式の指示を添えて ai-design-screens を呼び出すと、その場で変更できます。同じ呼び出しで新しい画面を追加することもできるため、1回のリクエストで画面を編集し、次の画面を構築できます。ダークテーマや別のレイアウトなどのプリセットを画面全体に適用するには、ai-edit-screen-variant を使用します。
フローを広げる — ai-generate-screen-variant を呼び出し、次の画面、エラー状態や空の状態の画面、または既存の画面のWeb、タブレット、モバイル版を追加します。
コードファーストで作業する — get-screen-jsx で任意の画面をJSXとして読み取り、add-screen-jsx（新しい画面）または replace-screen-jsx（既存の画面を上書き）で自分のJSXを書き戻します。独自の画像を使うには、upload-attachment でアップロードし、返された assetUrl をJSXに記述します。これらのツールは無料です。
出力をブランドに沿って保つ — update-design-guidelines を使うと、色、タイポグラフィ、コンポーネントのルールを DESIGN.md テキストとしてファイルに保存できます。そのファイルに対するAIによる生成は、これらのルールに従います。get-design-guidelines で内容を読み取ったり、delete-design-guidelines で削除したりできます。
Figmaから取り込む — Figmaのフレームのリンクと fileId を指定して import-figma を呼び出し、フレームを編集可能な要素としてキャンバスに取り込みます。ファイルの組織で、事前にFigmaが接続されている必要があります。
利用枠を確認する — 複数の生成を行う前に、get-plan-details を呼び出して、プラン、利用状況、残りのメッセージ数を確認します。
エンドポイント
2026-07-28 をサポートしており、https://api.flowstep.ai/.well-known/mcp.json でそれを公開しています。以前の 2025-11-25 プロトコルを使うクライアントも、同じエンドポイントに接続します。
次のステップ
クイックスタート
クライアントを接続して、最初のツール呼び出しを実行します。
認証
OAuth 2.1 PKCE によるサインインと承認の仕組み。
ツール
22個すべてのツールの入出力リファレンス。
例
一般的なタスクのエンドツーエンドのワークフロー。