Docs / MCP

MCP クライアントから Vibe Gallery につなぐ

Vibe Gallery の MCP は OAuth 2.1 (PKCE + Dynamic Client Registration) で全ツールを保護しています。下記のいずれかの設定を入れると、初回接続時にブラウザのサインインを経て自分のアカウントとしてアプリ閲覧・投稿などができます。

サーバエンドポイント

Streamable HTTP transport。ほとんどのクライアントはこの URL を指定するだけで動きます。

https://vibe-gallery.space/api/mcp

MCP authorization spec で要求されるディスカバリエンドポイントも公開しています。

  • https://vibe-gallery.space/.well-known/oauth-protected-resourceVibe Gallery の認可サーバを通知します。
  • https://vibe-gallery.space/.well-known/oauth-authorization-serverRFC 8414 メタデータ (Vibe Gallery)。

OAuth サインインの流れ

MCP クライアントは初回接続時に OAuth フローを開始し、以降のリクエストはトークン付きで行います。

  1. クライアントがトークンなしで POST /api/mcp を呼ぶと、サーバは 401 と WWW-Authenticate: Bearer resource_metadata="…" を返します。
  2. クライアントが resource-metadata URL を取得し、Vibe Gallery を認可サーバとして発見します。
  3. Dynamic Client Registration (DCR) で client を自動登録し、ブラウザを開いて Vibe Gallery にサインイン。
  4. アクセストークン + リフレッシュトークンが手元に保存され、以降は Authorization: Bearer が自動付与されます。

クライアント別の設定

Claude Code (CLI) — おすすめ

Claude Code は HTTP transport の MCP サーバと OAuth をネイティブにサポートしています。

claude mcp add --transport http vibe-gallery https://vibe-gallery.space/api/mcp

追加後、Claude Code 内で /mcp を実行するとブラウザで Vibe Gallery のサインインが開きます。トークンは自動で保存・更新されます。

Claude Desktop

claude_desktop_config.json から remote HTTP サーバを直接指定できないため、下記いずれかを使ってください。

Custom Connectors UI（Pro / Team / Enterprise、推奨）

設定 → Connectors → Add custom connector → エンドポイント URL を貼り付けて Vibe Gallery にサインインするだけ。ファイル編集は不要。

https://vibe-gallery.space/api/mcp

mcp-remote shim（フォールバック）

Custom Connectors が使えないプランでは、mcp-remote で stdio ↔ HTTP を橋渡しして OAuth を肩代わりさせます。

macOS の設定ファイル

~/Library/Application Support/Claude/claude_desktop_config.json

Windows の設定ファイル

%APPDATA%\Claude\claude_desktop_config.json

設定スニペット

{
  "mcpServers": {
    "vibe-gallery": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://vibe-gallery.space/api/mcp"
      ]
    }
  }
}

保存後 Claude Desktop を再起動。初回は mcp-remote がブラウザを開いて Vibe Gallery のサインインを求めます。

Cursor

~/.cursor/mcp.json（グローバル）または .cursor/mcp.json（プロジェクト）に追記。Cursor は streamable-http を transport タイプとして扱い、OAuth は自動発見されます。

設定ファイル

~/.cursor/mcp.json

設定スニペット

{
  "mcpServers": {
    "vibe-gallery": {
      "type": "streamable-http",
      "url": "https://vibe-gallery.space/api/mcp"
    }
  }
}

VS Code (Copilot Chat)

.vscode/mcp.json（ワークスペース）または ユーザの MCP 設定に追記。VS Code は OAuth DCR をネイティブにサポートしており、初回利用時にブラウザが Vibe Gallery へ遷移します。

設定ファイル

.vscode/mcp.json

設定スニペット

{
  "servers": {
    "vibe-gallery": {
      "type": "http",
      "url": "https://vibe-gallery.space/api/mcp"
    }
  }
}

MCP Inspector で動作確認

ローカルでツール一覧や OAuth フローを試したいときに便利です。

npx @modelcontextprotocol/inspector

起動後、Transport Type を Streamable HTTP に切り替え、Server URL にエンドポイント URL を貼って Connect。

うまく繋がらないとき

  • トークンが古い場合
    • Claude Code: claude mcp remove vibe-gallery で再追加するか、/mcp → Clear authentication。
    • mcp-remote (Claude Desktop フォールバック): ~/.mcp-auth を削除。
  • DCR が拒否される場合は Vibe Gallery の OAuth Application で Dynamic client registration が ON か確認してください。
  • ディスカバリ確認: curl /.well-known/oauth-protected-resource が Vibe Gallery を指す resource metadata を返すこと。
  • プロトコル仕様の詳細は modelcontextprotocol.io
ダッシュボードに戻る