feat/mcp-app-client

[lloydrichards]

Goals/Scope

Implement MCP app client with dynamic tooling, UI host proxy, and app bridge integration.

Description

• Introduces McpUiPanel as the client-side App Bridge that embeds MCP UI resources in a sandboxed iframe and routes tool/resource calls back to the server.
• Wires server-side dynamic UI tools/resources for chart widgets, exposing them with MCP UI metadata so the client can discover and render tool UIs.
• Adds a sandbox proxy and tool list wiring so chat tool calls can render their associated MCP UI panels inline.

What Changed

• Client bridge for MCP UI: McpUiPanel loads UI resources, sets host context (theme, CSS vars), and uses AppBridge + PostMessageTransport to relay callTool, readResource, size updates, and logging. (apps/client/src/components/mcp-ui-panel.tsx)
• Tool UI discovery and embedding: Chat UI fetches MCP tool list, resolves resourceUri via MCP UI metadata, and renders McpUiPanel in tool call segments. (apps/client/src/components/chat-box.tsx)
• Server dynamic tool + resource mapping: makeUiResource and makeUiRenderTool define UI resources and tool metadata (ui.resourceUri), then toolkit registration exposes render tools for bar/line/scatter widgets. (apps/server-mcp/src/UiResource.ts, apps/server-mcp/src/index.ts, widget files)

How the App Bridge Works (mcp-ui-panel)

• Fetches UI resource HTML + CSP/permissions from /mcp-ui/resources/:uri.
• Bootstraps an iframe with /sandbox-proxy.html and sends sandbox-ready payload including CSP and host theming.
• Uses AppBridge to:
  • forward callTool → /mcp-ui/tools/call
  • forward readResource → /mcp-ui/resources/read
  • send tool input + tool result back to the embedded UI
  • react to size updates for responsive iframe height
• Keeps theme in sync by rebuilding host context when the document theme changes.

How Dynamic Tools Are Exposed (server-mcp)

• UI resources are registered via makeUiResource with MCP UI mime type and optional meta.
• UI tools are created via makeUiRenderTool, which annotates MCP tool metadata with ui.resourceUri.
• Tools are bundled into a Toolkit and registered with McpServer.toolkit, so the tool list includes UI metadata the client can use for discovery.