# Vibe Gallery > A platform for posting and discovering small apps built with vibe coding. Show your weekend projects, browse by tag, heart the ones you like. --- --- # MCP クライアントから Vibe Gallery につなぐ Vibe Gallery は **Streamable HTTP transport** で Model Context Protocol (MCP) サーバを公開しています。読み取り系・書き込み系を問わず、すべての ツールは **Vibe Gallery OAuth 2.1** (PKCE + Dynamic Client Registration + RFC 8707 Resource Indicators、MCP authorization spec 2025-06-18 準拠) で 保護されています。クライアントが初回アクセスしたタイミングで OAuth フローが走り、以降はキャッシュされたトークンを使い回します。 ## サーバエンドポイント ``` https://vibe-gallery.space/api/mcp ``` MCP の authorization spec で要求されるディスカバリエンドポイントも公開 しています。 - `/.well-known/oauth-protected-resource` — クライアントに Vibe Gallery の認可 サーバを通知します。 - `/.well-known/oauth-authorization-server` — RFC 8414 メタデータ (Vibe Gallery)。 最新のクライアント (Claude Code / Cursor / VS Code / MCP Inspector) は、 この URL を渡すだけで OAuth フロー全体を自動処理します。 ## OAuth サインインの流れ MCP クライアントは初回接続時に OAuth フローを開始し、以降のリクエストは `Authorization: Bearer ` を付けて呼び出します。 1. クライアントが `POST https://vibe-gallery.space/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 をネイティブに サポートしています。 ```bash claude mcp add --transport http vibe-gallery https://vibe-gallery.space/api/mcp ``` 追加後、Claude Code 内で `/mcp` を実行するとブラウザで Vibe Gallery のサインイン 画面が開きます。トークンは自動で保存・更新されます。 ### Claude Desktop Claude Desktop は **`claude_desktop_config.json` から remote HTTP サーバを 直接指定できません**。下記いずれかを使ってください。 **Custom Connectors UI（Pro / Team / Enterprise、推奨）** — 設定 → *Connectors* → *Add custom connector* → `https://vibe-gallery.space/api/mcp` を貼り付けて Vibe Gallery にサインインするだけ。ファイル編集は不要。 **`mcp-remote` shim（フォールバック）** — Custom Connectors が使えない プランでは、`mcp-remote` で stdio ↔ HTTP を橋渡しして OAuth を肩代わり させる方法があります。 `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS) / `%APPDATA%\Claude\claude_desktop_config.json` (Windows): ```json { "mcpServers": { "vibe-gallery": { "command": "npx", "args": ["mcp-remote", "https://vibe-gallery.space/api/mcp"] } } } ``` ### Cursor `~/.cursor/mcp.json`（グローバル）または `.cursor/mcp.json`（プロジェクト） に追記してください。Cursor は `streamable-http` を transport タイプとして 扱い、OAuth は自動発見されます。 ```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 へ遷移します。 ```json { "servers": { "vibe-gallery": { "type": "http", "url": "https://vibe-gallery.space/api/mcp" } } } ``` ### MCP Inspector ローカルでツール一覧や OAuth フローを試したいときに便利です。 ```bash npx @modelcontextprotocol/inspector ``` 起動後、*Transport Type* を **Streamable HTTP** に切り替え、*Server URL* に `https://vibe-gallery.space/api/mcp` を貼って *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 https://vibe-gallery.space/.well-known/oauth-protected-resource` が Vibe Gallery を指す resource metadata を返すこと。 - プロトコル仕様の詳細: 。