GitHub - hemanth/mcp-ext-apps: Sample App for MCP Apps Extension (SEP-1865)

1 min read Original article ↗

Skip to content

Navigation Menu

Repository files navigation

MCP Ext Apps

Sample implementation of MCP Apps Extension (SEP-1865) - interactive HTML/JS UIs through MCP tools.

mcp-app-ext.mov

Quick Start

Open http://localhost:8080

How It Works

Host Client                              MCP Server
┌────────────────────┐                  ┌──────────────┐
│  tools-sidebar     │ ── call tool ─> │  Tools:      │
│  app-container     │ <── HTML UI ─── │  - dashboard │
│  [sandboxed iframe]│                 │  - clock     │
└────────────────────┘                  └──────────────┘
   localhost:8080                        localhost:3001
  1. Host connects to MCP server, lists tools
  2. User clicks a tool, host calls it via MCP
  3. Tool returns text/html+mcp resource with ui:// URI
  4. Host renders in sandboxed iframe with CSP
  5. UI communicates via JSON-RPC 2.0 over postMessage

SEP-1865 Compliance

  • ui:// scheme for resource URIs
  • text/html+mcp MIME type
  • _meta.ui/resourceUri in tool responses
  • ui/initialize handshake protocol
  • JSON-RPC 2.0 message format
  • Sandboxed iframe with CSP headers

Scripts

npm start       # Build + start server
npm run server  # MCP server (port 3001)
npm run host    # Host client (port 8080)

License

MIT