Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

🎃 Add a "Share / README badge" section with Add-to-Cursor and Add-to-VS-Code badges

Aperta
  • Qualcosa non va?
#1,012 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
50/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
nextjs, playwright, typescript
Ambito
documentation, frontend, testing

Direzione di ricerca

Start with the deep-link code in packages/frontend/src/app/mcp-server/[id]/page.tsx (around lines 337-345 and the Quick Connect uses at 440-457 and 473) and move the config into a new packages/frontend/src/lib/mcp-install-links.ts so the in-app buttons keep producing the same links. Then add the Share card below the Connect section, with copy buttons via handleCopy and an oauth2/both gate from server.info(). Done when the copied Markdown decodes to this server's endpoint, legacy mode shows the explanation, and the Playwright spec in tests/e2e/mcp-server-connect-clients.spec.ts passes.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement hacktoberfest help wanted

Part of the October Challenge #997.

Why

An admin who sets up an MCP server for a team wants to hand it out without walking every colleague through a config file: put "Add to Cursor" and "Add to VS Code" badges in the team README, wiki or onboarding page, click, done. Both editors support one-click MCP install links, and many MCP servers on GitHub show such badges at the top of their README.

What already exists: the MCP server page builds a Cursor deep link (cursor://anysphere.cursor-deeplink/mcp/install?…, mcp-server/[id]/page.tsx:337-340) and a VS Code deep link (vscode:mcp/install?…, :342-345), used by the "Open in Cursor" / "Open in VS Code" buttons in the Quick Connect modals (:440-457) and by "One-click add to VS Code" in the Copilot modal (:473). Custom-scheme links work when clicked inside the app, but not in a README: GitHub's Markdown sanitizer removes links that are not http(s), and most wikis do the same. What is missing is a "Share" section that produces copy-paste badge snippets based on the https install links the two editors provide.

Self-hosted vs Cloud

  • Self-hosted: enabled in Community and Business. Frontend only, no ee/ code. The badge contains the instance's MCP URL; when that is localhost or 127.0.0.1, show a warning that the badge only works on this machine. The preview on the page must not load images from shields.io or any other host, because some instances run without outbound connections (docs/deployment.md:422, "Fully Offline Mode"). Only the copied snippet references remote badge images.
  • Cloud (DEPLOYMENT_MODE=cloud): enabled. The URL is https://cloud.anythingmcp.com/mcp/<serverId>. Publishing it is safe: the URL is not a credential, and whoever clicks the badge still has to sign in and be a member of the workspace that owns the server (mcp-endpoint.controller.ts:924-970).
  • Who can use it: any role that can open the MCP server page. Snippets never contain an API key, token or session value.

What to build

  1. Shared link builders: move the config of the two existing deep links into packages/frontend/src/lib/mcp-install-links.ts (pure functions taking { name, url }), add the https variants next to them, and use the module in the page, so in-app buttons and badges always encode the same config:

    • Cursor: https://cursor.com/en/install-mcp?name=<name>&config=<base64 of {"url":"<endpoint>"}>
    • VS Code: https://vscode.dev/redirect/mcp/install?name=<name>&config=<URL-encoded {"name","type":"http","url"}>

    Check both formats against the current Cursor and VS Code documentation before building, and link the doc pages in the PR. If an editor documents an official button image, use it; otherwise use a shields.io static badge, as the repository README already does (README.md:26-30).

  2. "Share this server" card in the right column, below "Connect your MCP client" (mcp-server/[id]/page.tsx:673-759), with:

    • a preview of both badges rendered locally (styled links, no remote images);
    • "Copy Markdown" and "Copy HTML" buttons using handleCopy (:213-227, which already records client_config_copied);
    • the snippet itself in a code block (codeBlock, :360-373).

  3. Auth mode: a badge carries only the URL, so whoever clicks it signs in with OAuth. Show the badges only when mcpAuthMode is oauth2 or both (from server.info(), lib/api.ts:982-996). In legacy or none, show one line instead, explaining that one-click installs need OAuth (MCP_AUTH_MODE=oauth2 or both).

  4. Docs: a short "Share a server with your team" paragraph in docs/guides.md under "Connect your AI client".

Where to look

  • packages/frontend/src/app/mcp-server/[id]/page.tsx:101-105 (apiUrl), :251 (endpointUrl), :253 (slug), :337-345 (existing deep links), :440-457 and :473 (where they are used), :673-759 (right column).
  • packages/frontend/src/lib/api.ts:982-996: server.info() with mcpAuthMode.
  • packages/frontend/src/lib/clipboard.ts: copy with a fallback for plain-HTTP installs.
  • packages/backend/src/mcp-server/mcp-endpoint.controller.ts:924-970: membership check on /mcp/<serverId>.
  • README.md:26-30: shields.io badge style already in use.
  • packages/frontend/tests/e2e/mcp-server-connect-clients.spec.ts: test setup for this page.

Acceptance criteria

  • The copied Markdown contains https links for both editors whose decoded config points at exactly this server's endpoint, and no cursor://, vscode:, X-API-Key, token or cookie value.
  • The existing "Open in Cursor" / "Open in VS Code" buttons produce the same links as before (moved, not changed).
  • With mcpAuthMode: 'legacy' the snippets are replaced by the explanation; a localhost endpoint shows the warning.
  • Rendering the page makes no request to a third-party host (assert with page.on('request') in Playwright).
  • Manually verified: badges pasted into a GitHub README (a gist or a test repository) open Cursor and VS Code and add the server (describe it in the PR).
  • Playwright test in mcp-server-connect-clients.spec.ts (stub /health/server-info with mcpAuthMode, grant clipboard permission, assert the copied text). Run with cd packages/frontend && npm run test:e2e.

Out of scope

  • Badges for other clients (Claude, ChatGPT, Windsurf), which have no comparable https install link.
  • Badges in this repository's own README.
  • Install links that carry an API key.

Size

M (1–2 days)

How to claim

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

Lingua principale
TypeScript
Stelle
856
Fork
82
Merge medio
6h 49m
PR unite (30g)
152

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di HelpCode-ai/anythingmcp

Tutte le issue di HelpCode-ai/anythingmcp

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.