feat(playground): support MCP Apps with sandboxed iframe views

[samuv]

Adds support for MCP Apps in the playground chat, allowing MCP tools that declare a ui resource to render interactive sandboxed HTML interfaces alongside their tool call results.

• Discovers and advertises the mcp-apps/2026-01-26 capability when connecting to MCP servers
• Fetches UiResourceMetadata (HTML, CSP, permissions, prefersBorder) via a new chat:fetch-ui-resource IPC handler
• Streams tool UI metadata to the renderer at the start of each chat turn via chat:stream:tool-ui-metadata
• Renders MCP App HTML in sandboxed srcdoc iframes with server-declared CSP injected via <meta> tags
• Implements the MCP Apps display-mode spec (inline / fullscreen) using AppBridge and a host-side toolbar
• Updates Electron CSP to permit blob: iframes required by the spec

Kapture.2026-04-08.at.17.21.48.mp4

[Copilot]

Pull request overview

Adds MCP Apps support to the chat playground by discovering UI-enabled MCP tools, fetching their UI resources via IPC, and rendering interactive HTML UIs in a sandboxed iframe alongside tool call output.

Changes:

• Advertises the MCP UI extension capability to MCP servers and caches per-tool UI metadata for each stream.
• Adds IPC surface to fetch UI resources / proxy tool calls and streams UI metadata to the renderer.
• Introduces renderer hook + view component to render MCP App UIs (inline/fullscreen) with CSP meta injection and permissions allowlist.

Reviewed changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
renderer/src/features/chat/hooks/use-mcp-app-metadata.ts	New hook to read cached tool→UI metadata and subscribe to stream updates.
renderer/src/features/chat/hooks/tests/use-mcp-app-metadata.test.ts	Unit tests for the metadata hook behavior and subscriptions.
renderer/src/features/chat/components/mcp-app-view.tsx	New iframe-based MCP App renderer + AppBridge integration + fullscreen mode.
renderer/src/features/chat/components/tests/mcp-app-view.test.tsx	Component tests covering loading/error, CSP injection, toolbar, and callbacks.
renderer/src/features/chat/components/chat-message.tsx	Renders McpAppView after tool output when UI metadata is present.
preload/src/api/chat.ts	Exposes new chat IPC methods for UI metadata/resources and proxy tool calls.
main/src/utils/mcp-tools.ts	Adds buildRawTransport() to create SDK transports for raw MCP Client usage.
main/src/utils/tests/mcp-tools.test.ts	Fixes import path for utils transport tests.
main/src/chat/mcp-tools.ts	Implements UI capability advertisement, UI metadata cache, UI resource fetch, and tool-call proxying.
main/src/chat/tests/mcp-tools.test.ts	Adds test coverage for new UI metadata/resource/proxy behavior and capability advertising.
main/src/ipc-handlers/chat/mcp-apps.ts	New IPC handlers for UI metadata fetch, UI resource fetch, tool call proxy, and external link opening.
main/src/ipc-handlers/chat/index.ts	Registers the new MCP Apps IPC handlers.
main/src/chat/streaming.ts	Emits tool UI metadata at the start of each streaming session.
main/src/csp.ts	Relaxes Electron CSP to allow blob/self frames/children for app iframe requirements.
main/src/chat/types.ts	Adds optional uiResourceUri field to tool metadata type.
package.json	Adds @modelcontextprotocol/ext-apps dependency.
pnpm-lock.yaml	Locks @modelcontextprotocol/ext-apps@1.5.0.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

[peppescg]

🚀