Flowstep MCP — Claude Desktop

Flowstepは、Claudeのコネクターディレクトリに掲載されているコネクターです。コネクターはClaudeアカウントに紐づくため、Flowstepを一度追加すると、Claude Desktop と claude.ai の両方で利用できます。

コネクターを追加する

ディレクトリでFlowstepを開く

claude.ai/directory/flowstep にアクセスし、Flowstepコネクターを追加します。

認証する

Claudeがブラウザーで Flowstep のサインインページを開きます。Flowstepアカウント（メールアドレスとパスワード、またはGoogle）でサインインし、同意画面で Allow をクリックします。

コネクターを有効にする

Claude Desktop の会話で、Flowstepコネクターがオンになっていることを確認します。

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

Flowstepをローカルサーバーとして設定する場合は、claude_desktop_config.json を編集し、mcp-remote ブリッジ経由で接続します。Node.js が必要です。ファイルの場所は OS によって異なります。

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

保存したら、Claude Desktop を再起動します。初回接続時に、ブラウザーで Flowstep のサインインページが開きます。

Claude Desktop の会話で、次のように入力します。

List my Flowstep files

ファイル一覧（まだファイルがない場合は空の一覧）が表示されれば、接続は正常に機能しています。

Generate a mobile profile screen in Flowstep with an avatar, display name, bio,
and an edit button. Show me the rendered image.

Claude Desktop は ai-design-screens → get-screen-image の順に呼び出します。