MCP Discovery Brief — ADDENDUM: Human Bridge Component¶

SURFACE: ucco.foundation (ucco-site) + ucca.online (ucca-site)
CF ACCOUNT (UCCO): aed3398a4e698767328cc3a9e698721d
CF ACCOUNT (UCCA): e5a9830215a8d88961dc6c80a8c7442a
DO NOT TOUCH: everything else

Attach to: MCP Spec Compliance Audit + Discovery Layer Brief (Brief #16)

→ TIM¶

The machine discovery layer (.well-known, HTTP headers, HTML tags) is for when AI clients start auto-discovering MCP endpoints. But right now, no AI does that automatically. So you had the idea: make the human the bridge. Put something visible on the site that tells a person "this organisation is MCP-enabled — tell your AI agent to connect here." The human reads the signal, tells their agent, the agent connects. Loop closed.

This addendum adds a UI component to both ucco.foundation and ucca.online — a small persistent badge that expands into a full explainer overlay. The overlay is written for humans who don't know what MCP is, with copy-to-clipboard connection strings for every major AI client.

→ ALEX¶

1. MCP Badge¶

A small, persistent, on-brand element visible on every page of ucco.foundation and ucca.online. Not a popup. Not a banner. Part of the header bar or floating in a fixed position.

Badge appearance:

MCP Enabled ↓

Small, muted text — not shouting, not hidden
Monospace or IBM Plex Mono
Subtle pulse/glow animation on first page load (once only, not repeating)
Clicking/tapping opens the explainer overlay
On dark backgrounds: light text. On light backgrounds: dark text. Match the page.

Placement options (Tim to decide): - Option A: In the site header, right side, next to nav - Option B: Fixed bottom-right corner, small floating badge - Option C: Below the hero section as a subtle inline element

2. Explainer Overlay¶

Clicking the badge opens a modal/overlay that fades up. Clean, on-brand, no clutter.

Content for ucco.foundation:

New to MCP? You're not alone.

The Model Context Protocol is an open standard that lets AI agents connect directly to services and query them in structured, meaningful ways. Instead of your AI reading a webpage and guessing, it gets precise, verified answers from the source.

Why this matters for you

When you ask your AI assistant about UCCO, it reads our website the same way you do — skimming text, making inferences. Our MCP server gives it direct access to structured data: the standard itself, our governance, our pioneer programme, verified credentials. Better source, better answers.

Why you have to tell your agent

AI agents don't auto-discover MCP servers yet. The protocol is new and the discovery layer is still being built. Right now, you're the bridge — you tell your agent where to connect, and it handles the rest. One line, once.

Connect your agent

Claude Desktop / Claude Code

claude mcp add ucco-foundation https://mcp.ucco.foundation/mcp

[ 📋 Copy ]

Any MCP-compatible client (Cursor, VS Code, Windsurf, Continue)

{ "mcpServers": { "ucco-foundation": { "url": "https://mcp.ucco.foundation/mcp" } } }

[ 📋 Copy ]

Works with: Claude · ChatGPT · Gemini · Grok · GitHub Copilot · Cursor · VS Code · Windsurf · Microsoft Copilot · Perplexity · DeepSeek · OpenRouter

Who manages MCP?

The Model Context Protocol is maintained by the Agentic AI Foundation under the Linux Foundation. Co-founded by Anthropic, Block, and OpenAI. Open source, open governance. Adopted across the industry.

Learn more about MCP →

[ ✕ Close ]

Content for ucca.online — same structure, different endpoint:

Replace: - "UCCO" → "UCCA" - "ucco-foundation" → "ucca" - mcp.ucco.foundation/mcp → mcp.ucca.online/mcp - "the standard itself, our governance, our pioneer programme" → "our certification infrastructure, entity details, and the relationship to the UCCO open standard"

3. Copy Button Implementation¶

Every code block in the overlay has a copy-to-clipboard button.

function copyToClipboard(text, buttonElement) {
  navigator.clipboard.writeText(text).then(() => {
    buttonElement.textContent = '✓ Copied';
    setTimeout(() => {
      buttonElement.textContent = '📋 Copy';
    }, 2000);
  });
}

Button sits to the right of each code block
On click: copies the text, button changes to "✓ Copied" for 2 seconds, then reverts
Keyboard accessible (tab + enter)

4. Design Specifications¶

Overlay: - Backdrop: semi-transparent dark overlay (rgba(0,0,0,0.7)) - Content card: max-width 640px, centred, rounded corners - Background: matches site theme (dark card on dark site, light card on light site) - Typography: IBM Plex Sans for body, IBM Plex Mono for code blocks and the badge - Close button: top right corner, also closes on backdrop click and Escape key - Animation: fade up on open (200ms ease), fade down on close - Mobile: full-width card with padding, scrollable if needed

Code blocks: - Dark background (darker than card) with subtle border - Monospace (IBM Plex Mono) - Copy button right-aligned, subtle until hover - Overflow-x: auto for long lines

"Works with" line: - Single line of client names separated by middot (·) - All plain text, no logos, no links — bipartisan, no favourites - Alphabetical order

Badge: - No emoji in the badge itself — just text - Consider a small MCP-style icon if one exists in the ecosystem, otherwise text only

5. Shared Component¶

Build this as a single reusable component (<MCPBadge /> or similar) that takes:

<MCPBadge
  entity="ucco-foundation"
  endpoint="https://mcp.ucco.foundation/mcp"
  entityName="UCCO"
  entityDescription="the standard itself, our governance, our pioneer programme, verified credentials"
/>

Deploy on ucco.foundation and ucca.online with their respective props. Same component, different data.

6. Accessibility¶

Overlay is focus-trapped when open
Escape key closes it
Screen reader: badge has aria-label "MCP Enabled — click to learn more"
Code blocks have aria-label with the copy text
Copy button announces "Copied to clipboard" to screen readers

Deployment Checklist¶

Addendum to Brief #16 — MCP Discovery Layer 16 March 2026 "The human is the bridge."