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 a "Share / README badge" section with Add-to-Cursor and Add-to-VS-Code badges

Đang mở
  • Có gì không ổn?
#864 0 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

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
58/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ệ
playwright, typescript
Lĩnh vực
documentation, frontend

Hướng nghiên cứu

Start with packages/frontend/src/app/mcp-server/[id]/page.tsx and packages/frontend/src/lib/api.ts to trace the existing install links, server info, and client card; then read the frontend Playwright e2e example named in the issue. Build the helper and share card, covering the auth modes and localhost note, and update the two integration docs. Done means the e2e assertions, lint, and TypeScript check pass, with generated snippets containing no secrets.

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

Mô tả

enhancement hacktoberfest help wanted

Part of the October Challenge #846.

Why

Teams that build an MCP server in AnythingMCP want to hand it to colleagues the way public MCP servers do: a badge in an internal README or wiki page that installs the server in one click. The MCP server page already builds Cursor and VS Code deeplinks, but only as buttons inside a modal, and with cursor:// and vscode: URLs. GitHub, GitLab and most wikis strip those schemes from Markdown links, so the button cannot be copied into a README. Smithery, Glama and the official GitHub MCP server README all ship copyable badges for this.

Self-hosted vs Cloud

  • Self-hosted: enabled in Community and Business. The endpoint is ${origin}/mcp/<serverId>. If the page runs on localhost (see apiUrl, page.tsx:98), show a note that the badge only works on this machine and set SERVER_URL/a public hostname first.
  • Cloud (DEPLOYMENT_MODE=cloud): enabled. Cloud runs with MCP_AUTH_MODE=oauth2 (docker-compose.cloud.yml:111), so whoever clicks the badge still has to sign in with an account in that organization. The badge reveals the server URL (and id), never data or credentials.
  • Who can use it: any member who can open the server page, VIEWER included. It is read-only and generated in the browser; no new endpoint. Nothing leaves the caller's organization because the snippet only contains this server's URL and slug.

What to build

  1. Move link building into a pure helper packages/frontend/src/lib/mcp-install-links.ts:
    • cursorInstallUrl({ name, url }) → https://cursor.com/en/install-mcp?name=<enc name>&config=<base64 of {"url": url}>. This https redirector opens the same cursor://anysphere.cursor-deeplink/mcp/install… deeplink and survives Markdown sanitizers.
    • vscodeInstallUrl({ name, url }) → https://vscode.dev/redirect/mcp/install?name=<enc>&config=<enc JSON {"type":"http","url":url}>. Add an insiders variant with https://insiders.vscode.dev/redirect/mcp/install….
    • badgeSnippets(...) → { markdown, html } for each client. Images: Cursor's official https://cursor.com/deeplink/mcp-install-dark.svg / -light.svg; VS Code via shields.io, e.g. https://img.shields.io/badge/VS_Code-Install_Server-0098FF?logo=visualstudiocode&logoColor=white.
    • Replace the inline cursorDeepLink / vscodeDeepLink (page.tsx:356-364) with the helper. The modal buttons may keep the native scheme.
  2. A new card "Share / README badge" on packages/frontend/src/app/mcp-server/[id]/page.tsx, below "Connect your MCP client" (:645): a badge preview, a Dark/Light toggle for the Cursor image, tabs Markdown | HTML, and a Copy button (reuse handleCopy and the codeBlock helper at :378). Show exposesLine() (:398) so people can see which connectors the badge hands out.
  3. Auth notes. Read mcpAuthMode from the public server.info() (src/lib/api.ts:964, served by health.controller.ts:30):
    • oauth2 / both: the URL alone is enough; say "people who click will sign in".
    • legacy (the default for self-hosted, docker-compose.yml:67): the badge installs the URL only; say each user must add their own X-API-Key header, and link to the API key card.
    • none: show a warning that anyone who can reach the URL can call these tools, and do not show the snippet until the user ticks "I understand".
  4. Never put a secret in a link or badge: no API key, no X-API-Key header, no token of any kind. The helper only takes name and url. A unit-level assertion and an e2e assertion both check this.
  5. Docs: a "Share with a badge" subsection under ## Cursor in docs/integrations/claude.md:119 and under ## VS Code Setup in docs/integrations/copilot.md:15.

Where to look

  • packages/frontend/src/app/mcp-server/[id]/page.tsx:270-272 — endpointUrl and slug; :356-364 — the current deeplinks; :440-456 — the Cursor/VS Code modal buttons; :645 — the client card.
  • packages/frontend/src/lib/api.ts:964-976 — server.info() with mcpAuthMode.
  • packages/backend/src/health/health.controller.ts:30-57 — where mcpAuthMode comes from.
  • packages/backend/src/mcp-servers/mcp-servers.controller.ts:107-115 — write permissions (VIEWER can't modify, which this feature doesn't need).
  • packages/frontend/tests/e2e/mcp-server-assignments.spec.ts — Playwright pattern with mocked /api/ routes and a server page.
  • Cursor docs: https://cursor.com/docs/mcp/install-links

Acceptance criteria

  • The card renders Markdown and HTML for Cursor and VS Code; clicking a rendered badge on GitHub opens the client's install prompt (screenshot or GIF in the PR).
  • Generated links use https, are correctly encoded (slugs with spaces/umlauts), and contain only name, type and url.
  • A Playwright test under packages/frontend/tests/e2e/ (npm run test:e2e in packages/frontend) mocks server.info() for oauth2, legacy and none, checks the matching note or warning, and asserts the copied snippet contains no X-API-Key header and no key or token.
  • The localhost note appears when the origin is localhost.
  • npm run lint and npx tsc --noEmit -p tsconfig.json pass in packages/frontend.
  • Docs updated (docs/integrations/claude.md Cursor section, docs/integrations/copilot.md VS Code section).

Out of scope

  • Public pages or a server directory listing; no backend changes.
  • Badges for other clients (Claude, ChatGPT, Windsurf). Add them later if they gain an install URL.
  • Anything under ee/.

Size

M (1–2 days)

How to claim

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

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

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.