MCP Ext Apps

🚀 MCP Ext Apps

This is a sample implementation of MCP Apps Extension (SEP-1865), which enables interactive HTML/JS UIs through MCP tools.

Click here to view the related content

🚀 Quick Start

First, install the necessary dependencies and start the application with the following commands:

npm install
npm start

Then, open http://localhost:8080 in your browser.

💻 Usage Examples

Basic Usage

The following commands show the basic usage steps:

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

🔧 Technical Details

How It Works

The following diagram and steps illustrate how the system works:

Host Client                              MCP Server
┌────────────────────┐                  ┌──────────────┐
│  tools-sidebar     │ ── call tool ─> │  Tools:      │
│  app-container     │ <── HTML UI ─── │  - dashboard │
│  [sandboxed iframe]│                 │  - clock     │
└────────────────────┘                  └──────────────┘
   localhost:8080                        localhost:3001

1. The host connects to the MCP server and lists the available tools.
2. When the user clicks a tool, the host calls it via MCP.
3. The tool returns a text/html+mcp resource with a ui:// URI.
4. The host renders the resource in a sandboxed iframe with CSP.
5. The UI communicates via JSON - RPC 2.0 over postMessage.

SEP - 1865 Compliance

This implementation complies with SEP - 1865 in the following aspects:

• 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

📄 License

This project is licensed under the MIT license.