https://api.flowstep.ai/mcp（Streamable HTTP 傳輸方式）。無需執行本機程序，也無需管理 API 金鑰——用戶端會透過 OAuth 使用你的 Flowstep 帳號登入。
你可以做什麼
伺服器共提供 22 個工具，分為八個類別：
三個 AI 設計 工具與 Flowstep 應用程式使用相同的訊息額度。其他所有工具皆免費。請參閱使用限制。
常見使用情境
從提示詞產生畫面——以描述呼叫ai-design-screens。省略 fileId，Flowstep 便會在一個步驟中建立檔案與畫面。對每個回傳的 screenId 呼叫 get-screen-image，即可直接查看結果。
將 React 元件視覺化——使用 upload-attachment（mimeType: text/javascript）上傳你的 .jsx 或 .tsx 原始碼，然後將回傳的附件連同描述畫面的訊息一併傳入 ai-design-screens。Flowstep 會讀取原始碼並產生相符的設計。
反覆調整設計——呼叫 ai-design-screens，並在 elementIds 中傳入一或多個 screenId（或個別元素 ID），再加上自由格式的指示，直接修改它們。同一次呼叫也能新增畫面，因此一個請求可以編輯一個畫面，並同時建立下一個畫面。若要對整個畫面套用預設，例如深色主題或不同的版面配置，請使用 ai-edit-screen-variant。
擴展流程——呼叫 ai-generate-screen-variant，為現有畫面新增下一個畫面、錯誤或空白狀態，或網頁、平板或行動版本。
以程式碼優先的方式工作——使用 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 匯入——呼叫 import-figma，並傳入 Figma 框架連結與 fileId，即可將框架以可編輯元素的形式帶入畫布。檔案所屬的組織必須先連接 Figma。
檢查你的額度——在一批產生作業前，呼叫 get-plan-details 查看你的方案、用量與剩餘訊息數。
端點
2026-07-28，並在 https://api.flowstep.ai/.well-known/mcp.json 中公告此版本。使用較早 2025-11-25 協定的用戶端，會連接到同一個端點。
後續步驟
快速入門
連接用戶端，並執行你的第一次工具呼叫。
驗證
OAuth 2.1 PKCE 登入與核准的運作方式。
工具
全部 22 個工具的完整輸入／輸出參考。
範例
常見任務的端對端工作流程。