Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

🎃 Add "Open in MCP Inspector" to the MCP server page

クローズ
  • 何か問題がありますか？
#1,002 コメント 3 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@GallaGit がすでに取り組んでいます。

2026年10月11日 から。

  • #1034 @GallaGit による — オープン

評価

難易度
3/5
見積もり時間
半日
初心者へのやさしさ
62/100
issue の種類
機能追加
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
typescript
領域
frontend

調査の方向性

Start in packages/frontend/src/app/mcp-server/[id]/page.tsx: add the Inspector entry to aiClients (around :347-358) and a case in renderModalContent (:438), modeled on the Gemini command modal (:593-610). Put the link builder in a pure helper under packages/frontend/src/lib/, and extend tests/e2e/mcp-server-connect-clients.spec.ts. Done when the Quick Connect modal shows the command, the encoded link, and the sign-in steps, and the e2e test passes. Claim the issue in a comment before starting.

索引モデルが issue の本文から書いたものです。

説明

enhancement good first issue hacktoberfest help wanted

Part of the October Challenge #997.

Why

The MCP Inspector (npx @modelcontextprotocol/inspector) is the standard tool for looking at an MCP server from the outside: tools/list, the input schemas, a test call and the raw JSON-RPC messages. When a client shows no tools or a call fails, it tells you quickly whether the problem is the server or the client. The MCP server page lists ten clients under Quick Connect (mcp-server/[id]/page.tsx:347-358) but not the Inspector, and nothing in the repository mentions it, so users have to work out the transport and the URL themselves.

Self-hosted vs Cloud

  • Self-hosted: enabled in Community and Business. Frontend only: no new endpoint, no ee/ code. The Inspector runs on the user's machine and connects through its own local proxy, so an instance on a LAN address or plain HTTP works as long as that machine can reach it.
  • Cloud (DEPLOYMENT_MODE=cloud): enabled. The URL is https://cloud.anythingmcp.com/mcp/<serverId>. The Inspector's OAuth flow registers a http://localhost:… redirect URI, which Dynamic Client Registration accepts for loopback hosts (redirect-uri.util.ts:61-69); the user then sees the normal consent screen, and server membership is still enforced (mcp-endpoint.controller.ts:924-970).
  • Who can use it: any role that can open the MCP server page. The link contains only the server URL, which the page already displays.

What to build

  1. Add { id: 'inspector', name: 'MCP Inspector', ... } to aiClients (:347-358) and a case 'inspector' in renderModalContent (:438), following the Gemini case (:593-610), which already shows a copyable command.
  2. The modal shows three steps:
    • Run it: the command npx @modelcontextprotocol/inspector with a Copy button (handleCopy, which uses copyText from lib/clipboard.ts).
    • Open it: an "Open in MCP Inspector" link (new tab) to http://localhost:6274/?transport=streamable-http&serverUrl=<encodeURIComponent(endpointUrl)>. Before you finalize it, check the current Inspector README for the query parameters it accepts and for its proxy session token (the Inspector prints a URL containing MCP_PROXY_AUTH_TOKEN on start and asks for the token when opened without it). Explain that in one sentence in the modal, and name the Inspector version you tested in the PR.
    • Sign in: OAuth (connect, sign in, approve) or an API key (add an X-API-Key header in the Inspector's authentication settings, using a key from the API keys card on this page). Never put a key or token into the link: it would end up in browser history.
    • Below the steps, the endpoint row (endpointRow, :394-408) so the URL can be pasted by hand.
  3. Build the link in a small pure helper in packages/frontend/src/lib/ (for example inspectorUrl(endpointUrl)), so the test can check the encoding.

Where to look

  • packages/frontend/src/app/mcp-server/[id]/page.tsx:101-105 (apiUrl), :251 (endpointUrl), :347-358 (aiClients), :394-408 (endpointRow), :438 (renderModalContent), :593-610 (Gemini modal with a command), :689-712 (Quick Connect grid).
  • packages/frontend/src/lib/clipboard.ts: copy with a fallback for plain-HTTP installs.
  • packages/backend/src/auth/redirect-uri.util.ts:61-69: loopback redirect URIs.
  • packages/frontend/tests/e2e/mcp-server-connect-clients.spec.ts: Quick Connect modal tests to extend.
  • docs/integrations/claude.md:112: "Any MCP Client" section.

Acceptance criteria

  • "MCP Inspector" appears under Quick Connect on self-hosted and Cloud, and its modal shows the command, the link and the sign-in steps.
  • The link's serverUrl decodes to exactly the page's endpoint URL, and no X-API-Key, token or cookie value appears in it.
  • Manually verified against a local instance: tools/list works in the Inspector with an API key, and with OAuth if your instance runs MCP_AUTH_MODE=oauth2 or both (describe the steps in the PR).
  • Playwright test for the new modal in mcp-server-connect-clients.spec.ts (cd packages/frontend && npm run test:e2e).
  • A short "Test with the MCP Inspector" paragraph in docs/integrations/claude.md under "Any MCP Client".

Out of scope

  • Embedding or hosting the Inspector inside AnythingMCP.
  • A hosted Inspector for Cloud users.
  • Changes to the OAuth or DCR rules.

Size

S (a few hours)

How to claim

Comment "I'd like to work on this" and we'll assign you. Rules in #997.

主要言語
TypeScript
スター
856
フォーク
82
平均マージ
5時間 18分
マージ済み PR（30日）
162

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

HelpCode-ai/anythingmcp のほかの issue

HelpCode-ai/anythingmcp の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。