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

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.

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.