Add MCP Apps protocol support for Chartifact embeddings

[Copilot]

Chartifact can now be embedded as an interactive UI in MCP-compatible clients (Claude, VS Code, ChatGPT) via the Model Context Protocol Apps extension. This leverages the existing sandboxed renderer architecture with a JSON-RPC 2.0 protocol adapter integrated into the host package.

Implementation

Protocol Layer (packages/host/src/)

• JSON-RPC 2.0 message handler integrated into existing host package
• Automatic protocol detection: message.jsonrpc === '2.0' for MCP vs message.type for standard messages
• MCP Apps methods: initialize, ui/render, ui/get-content, ui/clear
• Origin validation and error handling

Viewer (docs/view/)

• Enhanced existing /view/ endpoint with MCP support via ?mcp URL parameter
• Automatically disables clipboard, drag-drop, and file upload in MCP mode
• Sends ui/ready notification when in MCP context
• Reuses entire rendering pipeline - no changes to core sandbox or renderer

Example Server (demos/mcp-server/)

• Working MCP server with create_chart and create_dashboard tools
• Returns Chartifact documents as MCP resource URIs
• SDK updated to v1.25.2 (fixes ReDoS CVE and DNS rebinding vulnerabilities)

Usage

MCP servers return Chartifact visualizations as UI resources:

return {
  content: [{
    type: 'resource',
    resource: {
      uri: 'https://microsoft.github.io/chartifact/view/?mcp',
      mimeType: 'application/x-chartifact+markdown',
      text: '# Dashboard\n\n```json chartifact\n{"type": "chart", ...}\n```'
    }
  }]
};

The MCP client embeds the viewer iframe with the ?mcp parameter, which handles JSON-RPC protocol translation and delegates to the existing Chartifact host for rendering.

Architecture Decisions

• Consolidated endpoint: Single /view/ endpoint handles both standard and MCP protocols
• Automatic protocol detection: JSON-RPC 2.0 messages detected via jsonrpc property
• URL-based mode switching: ?mcp parameter disables interactive features for embedding
• Integrated into host package: Protocol handling lives in packages/host/src/ where postMessage logic exists
• No core changes: All new code integrated into existing packages, preserving existing behavior

Testing

• Example server ready for Claude Desktop/VS Code configuration
• ~280 LOC added to host package for MCP protocol support
• ~1,700 LOC removed by consolidating into existing viewer

Original prompt

Investigate https://blog.modelcontextprotocol.io/posts/2026-01-26-mcp-apps/ and plan a wrapper for Chartifact since it is already sandboxed. remember there is already a hosted ui at https://microsoft.github.io/chartifact/view/ on the website. I suppose we just need listeners for the json-rpc ??

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[danmarshall]

@copilot any reason to create https://microsoft.github.io/chartifact/mcp-view/ and not just add functionality to our existing https://microsoft.github.io/chartifact/view/ ?

[Copilot]

@copilot any reason to create https://microsoft.github.io/chartifact/mcp-view/ and not just add functionality to our existing https://microsoft.github.io/chartifact/view/ ?

Good point! You're right that we could consolidate. The existing /view/ already has postMessage support with HostRenderRequestMessage, and the MCP protocol is essentially a JSON-RPC 2.0 wrapper around the same rendering functionality.

I initially created a separate endpoint for:

1. Clean separation between MCP protocol (JSON-RPC 2.0) and the general viewer's custom postMessage format
2. Different UX - MCP viewer is for embedding (minimal UI), while standard viewer has clipboard/drag-drop/file upload
3. Avoiding protocol confusion in one endpoint

However, we could merge them by detecting message.jsonrpc === '2.0' to route to MCP handler vs. message.type for existing messages. This would maintain one viewer with both protocols.

Would you prefer I consolidate into /view/ with protocol detection, or keep them separate for clearer separation of concerns? I can refactor either way.

[danmarshall]

@copilot /view/ uses the host package, so just add to that. if it detects mcp app hosting, then disable clipboard etc.

[Copilot]

@copilot /view/ uses the host package, so just add to that. if it detects mcp app hosting, then disable clipboard etc.

Done! Consolidated MCP protocol into the existing /view/ endpoint with the host package. Changes in commit 38ad402:

• Added MCP JSON-RPC 2.0 protocol detection to packages/host/src/post-receive.ts
• URL parameter ?mcp triggers MCP mode which disables clipboard, drag-drop, and file upload
• Removed separate /mcp-view/ directory and mcp-adapter package
• Updated all documentation and examples to use /view/?mcp
• Viewer now automatically detects message.jsonrpc === '2.0' to route to MCP handler

The single /view/ endpoint now handles both standard Chartifact messages and MCP JSON-RPC protocol seamlessly.