Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#1,012 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
50/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
nextjs, playwright, typescript
Área
documentation, frontend, testing

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
856
Forks
82
Merge medio
8 h 27 min
PR fusionados (30 d)
104

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de HelpCode-ai/anythingmcp

Todos los issues de HelpCode-ai/anythingmcp

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.