Flowstep MCP — Claude Desktop

設定

claude_desktop_config.json を編集してください。ファイルの場所はOSによって異なります。

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

Native HTTP (Claude Desktop v0.9+)
mcp-remote (older versions)

{
  "mcpServers": {
    "flowstep": {
      "type": "http",
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}

Node.jsがインストールされている必要があります。

{
  "mcpServers": {
    "flowstep": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://api.flowstep.ai/mcp"]
    }
  }
}

保存後、Claude Desktopを再起動してください。

認証

Claude Desktopは初回接続時に https://api.flowstep.ai/oauth/authorize でブラウザを開きます。Flowstepの認証情報でサインインすると、アプリがコールバックをキャプチャします。

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

接続の確認

Claude Desktopの会話内で以下を入力してください。

List my Flowstep files

ファイルリストが表示されたら（またはファイルがない場合は空の配列が表示されたら）、接続は正常に機能しています。

使用例

Create a Flowstep file called "Profile page", generate a mobile profile screen
with an avatar, display name, bio, and an edit button. Show me the rendered image.

Claude Desktopが create-file → ai-prompt → get-screen-image の順に呼び出します。

Flowstep MCP — Windsurf

Flowstep MCP — claude.ai

​設定

​認証

​接続の確認

​使用例

設定

認証

接続の確認

使用例