★ 1. MCP connect hub
/connect/mcp apps/web/src/components/mcp-connect/ConnectHub.tsx
sageox.ai/connect/mcp
Use SageOx inside your AI tools
Pick the AI tool you use — most setups take under a minute.
★ Best experience — interactive cards
These tools render your team's work as live, clickable cards — decisions, action items, and sessions you act on inline, not walls of text. Why it's better
VS Code
Copilot agent mode reads SageOx cards
Goose
Native ui:// card rendering
Claude Desktop
MCP UI extensions enabled
ChatGPT
Apps render interactive widgets
More tools
One-click
Cursor
Windsurf
Copy command
Claude Code
Manual paste
Copilot Studio Admin
Any MCP client
Implementor notes
- The 4 featured clients (VS Code, Goose, Claude Desktop, ChatGPT) are filtered out of the effort groups so no tile duplicates — the array is partitioned once on the capability flag.
- Promotion keys on an objective capability — does the host render
ui://cards? — never a cohort guess. This is why the featured row is honest where "recommended for you" was refused: we can prove the claim per-client. Copilot Studiocarries a neutral-grayADMINchip (no brand color) because setup requires a tenant admin; the chip is information, not a call to action.
2. Per-client wizard
/connect/mcp/[client] apps/web/src/components/mcp-connect/ClientWizard.tsx
sageox.ai/connect/mcp/goose
Connect Goose
Click below, approve access in the tab that opens, then return here.
Goose renders SageOx as interactive cards — decisions, action items, and sessions you can act on inline.
1Open Goose
2Approve access
3Return here
▸ Doesn't work? Paste it manually
{"mcpServers": { "sageox": { "url": "https://sageox.ai/mcp" } } }
Connect Copilot Studio
AdminManual paste — a tenant admin adds SageOx once for everyone.
- Open Copilot Studio → Tools → Add a tool.
- Choose "Model Context Protocol" and paste the SageOx URL.
- Approve the OAuth consent for your tenant.
- Publish — agents in your tenant now read SageOx.
Implementor notes
- Code blocks are server-side Shiki dual-theme (zero client JS) — both themes ship in the markup and the visible one flips with
data-mode, so the highlight never reflows or repaints on the client. - One Copper CTA per view: the hero owns "Open Goose"; the mini-card's "Copy URL" is the single CTA for that distinct surface (they never co-occur in the real route — shown together here for the spec).
- The sage reinforcement line only renders for card-capable hosts; a copy-only host (Claude Code) gets the wizard without it, because the promise would be false there.
★ 3. Interactive-card preview (show, not tell)
McpAppCardPreview apps/web/src/components/mcp-connect/McpAppCardPreview.tsx
host chat bubble · ui://decision-ledger-v1
From Q3 planning sync · 2 days ago
Ship the retry-policy change behind a flag; default off for one week.Grounded at 14:32
AI
Move the ingestion cutover to after the holiday freeze.
Human
Draft the rollout comms for the team.
#owner
A real card-capable tool renders this — clickable, not a paragraph.
Implementor notes
- Tokens ported verbatim from the live
ui://asset (apps/api-go/internal/handlers/mcp/widgets/assets/decision-ledger-v1.htmlonryan/mcp-app-cards-impl) — the preview and the wire-rendered card must be byte-identical, so they share the source-of-truth palette. - Badge source color is redundant with the badge LABEL (color + text, never color alone): AI = sage-soft + "AI", Human = copper-soft + "HUMAN". Colorblind-safe by construction.
- Slugs are never color-coded —
#owneris a neutral mono pill onsurface-2; it's an identifier, not a status, so it must not borrow the AI/Human hue language. - No drop shadow: the card lives inside a host chat bubble, so a hairline border + 12px radius is the entire container affordance — a shadow would fight the host's own bubble elevation.