Connect Your Agent UI tab: copyable 'claude mcp add' install commands + live connection test

[PrielHaz]

Problem

There is no in-UI way for a user to discover how to point their agent at the store. Today you'd have to know the MCP URLs and hand-write the claude mcp add command yourself. We need a Connect Your Agent tab that surfaces the connection info and gives copy-paste-ready install commands.

Proposal

1. GET /admin/server-info endpoint returning backend host/port, both MCP URLs (curated + full), and the API docs URL, so the UI can discover connection info instead of hard-coding it.

2. Connect Your Agent UI page at /agent-connect (with nav entry) that shows:

   • Both MCP URLs with a curated / full toggle.
   • Copy-ready claude mcp add (and claude mcp remove) commands for Claude Code, with a project / user scope toggle — e.g. claude mcp add skillberry-store -s user -t sse http://localhost:9999/sse.
   • JSON config snippet for other agents / MCP clients.
   • A live "Test Connection" button that connects to the selected MCP and lists the tools (and prompts) it advertises.

Acceptance criteria

• /agent-connect page reachable from nav.
• Shows copyable claude mcp add / claude mcp remove commands with curated/full and project/user toggles.
• Shows JSON config for non-Claude-Code agents.
• "Test Connection" works against both curated and full MCP and lists advertised tools.
• Connection info is sourced from GET /admin/server-info, not hard-coded.

Context

Split out of the combined issue #76 and the (closed) PR #77. Reference implementation: ui/src/pages/AgentConnectPage.tsx + GET /admin/server-info in PR #77. Depends on the curated MCP server (separate issue).

[github-actions]

🤖 Automatic Labeling

Bob Shell has analyzed this issue and applied the following label(s): enhancement

These labels were selected based on the issue content and available label descriptions. If you believe the labels are incorrect, feel free to modify them manually.