Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đã đóng
  • Có gì không ổn?
#1,002 3 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@GallaGit đang làm issue này rồi.

Từ ngày 11/10/2026.

  • #1034 của @GallaGit — đang mở

Đánh giá

Độ khó
3/5
Thời gian dự kiến
Nửa ngày
Mức phù hợp với người mới
62/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
856
Fork
82
Merge trung bình
6 giờ 49 phút
Pull request đã merge (30 ngày)
152

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của HelpCode-ai/anythingmcp

Tất cả issue của HelpCode-ai/anythingmcp

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.