Flowstep MCP — Windsurf

設定

~/.codeium/windsurf/mcp_config.json を編集します。

{
  "mcpServers": {
    "flowstep": {
      "serverUrl": "https://api.flowstep.ai/mcp"
    }
  }
}

保存したら、Windsurf を再起動します。

認証

初回使用時に、Windsurf がブラウザーで Flowstep の OAuth ログインページを開きます。Flowstepの認証情報（メールアドレスとパスワード、またはGoogle SSO）でサインインし、同意画面で Allow をクリックすると、Windsurf がトークンを保存します。

接続の前に、Flowstepアカウントが必要です。app.flowstep.ai で作成してください。

接続を確認する

Windsurf で MCP パネルを開き、Flowstep が一覧に表示されていることを確認します。Cascade のチャットで、次のように入力します。

List my Flowstep files

使用例

Create a Flowstep file called "Empty states", then generate a mobile empty-state screen
for a task list app with an illustration placeholder and a call-to-action button.
Show me the rendered result.

Cascade は create-file → ai-design-screens → get-screen-image の順に呼び出します。

はじめに

Flowstep の使い方

チームと組織

エクスポートと連携

MCP サーバー

請求とプラン

セキュリティとプライバシー

Flowstep MCP — Windsurf

設定

認証

接続を確認する

使用例

​設定

​認証

​接続を確認する

​使用例

設定

認証

接続を確認する

使用例