Skip to main content
Flowstep はModel Context Protocolを通じて設計ツールを公開し、AI アシスタントがエディタを離れずに UI 画面を作成し、反復処理できるようにします。 サーバーはhttps://api.flowstep.ai/mcpでホストされています（Streamable HTTP トランスポート）。ローカルプロセスの実行は不要です。

​
できることは何ですか

サーバーは7つのカテゴリーにわたる20個のツールを公開しています：

​
一般的な使用例

プロンプトから画面を生成する — create-new-design を説明とともに呼び出します。Flowstepはファイルと画面を1ステップで作成します。返された screenIds で get-screen-image を呼び出して、結果をインラインで表示します。 Reactコンポーネントを視覚化する — upload-attachment 経由で .jsx または .tsx ファイルをアップロードします（mimeType: text/javascript を使用）。次に、返された添付ファイルをコンポーネントを説明するメッセージとともに create-new-design に渡します。Flowstepはソースを読み取り、一致する設計画面を生成します。 デザインを反復処理する — ターゲット screenId と変更指示で edit-design を呼び出すか、画面をゼロから作り直すために regenerate-design を呼び出します。 デザインガイドラインを保持する — get-design-guidelines を呼び出して現在のスタイルルール（色、タイポグラフィ、スペーシング、トーン）を取得します。次に、update-design-guidelines を使用してデザインが進化する際にそれらを同期に保ちます。一貫性のあるガイドラインを create-new-design または edit-design に渡すと、生成されたすべての画面がブランドに沿っていることが保証されます。delete-design-guidelines を使用してそれらを完全にリセットします。 Figmaからインポートする — import-figma をFigmaフレームリンクと fileId とともに呼び出して、フレームをFlowstepファイルに編集可能な要素として持ち込みます。ファイルの組織には最初にFigmaが接続されている必要があります。 割り当てを監査する — 生成バッチを開始する前に、get-plan-details を呼び出して残りの日次使用量と月次使用量を確認します。

​
エンドポイント

トランスポート：Streamable HTTP。セッションモデル：ステートレス（各リクエストは独立し、セッション ID はありません）。

​
次のステップ

クイックスタート

Cursor を使用して 5 分以内に最初のツール呼び出しを行います。

認証

OAuth 2.1 PKCE の仕組みとトークンの発行方法。

ツール

すべての20個のツールの完全な入出力リファレンス。

例

一般的なタスク向けのエンドツーエンドワークフロー。