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

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.

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.