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

できることは何ですか

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

一般的な使用例

プロンプトから画面を生成する — 説明を指定してcreate-new-designを呼び出します。Flowstep はファイルと画面を1ステップで作成します。返されたscreenIdsget-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を使用してそれらを完全にリセットします。 割り当てを監査する — 生成バッチを開始する前に、get-plan-detailsを呼び出して残りの日次使用量と月次使用量を確認します。

エンドポイント

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

次のステップ

クイックスタート

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

認証

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

ツール

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

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