97310d50c5
Introduce new example implementations to replace simple-host and simple-server: - basic-host: Reference host implementation with double-iframe sandbox pattern for secure UI isolation (outer iframe validates and relays messages, inner iframe renders untrusted tool UI via srcdoc) - basic-server-react: MCP server example demonstrating tool registration with linked UI resources and React UI using the useApp() hook Build infrastructure updates: - Add build:all script and simplify CI/pre-commit to use it - Add examples:dev for watch-mode development workflow Also change PostMessageTransport logging from info to debug level. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
37 lines
1.4 KiB
Markdown
37 lines
1.4 KiB
Markdown
# Example: Basic Host
|
|
|
|
A reference implementation showing how to build an MCP Host application that connects to MCP servers and renders tool UIs in a secure sandbox.
|
|
|
|
This basic host can also be used to test MCP Apps during local development.
|
|
|
|
## Key Files
|
|
|
|
- [`index.html`](index.html) / [`src/index.tsx`](src/index.tsx) - React UI host with tool selection, parameter input, and iframe management
|
|
- [`sandbox.html`](sandbox.html) / [`src/sandbox.ts`](src/sandbox.ts) - Outer iframe proxy with security validation and bidirectional message relay
|
|
- [`src/implementation.ts`](src/implementation.ts) - Core logic: server connection, tool calling, and AppBridge setup
|
|
|
|
## Getting Started
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
# Open http://localhost:8080
|
|
```
|
|
|
|
## Architecture
|
|
|
|
This example uses a double-iframe sandbox pattern for secure UI isolation:
|
|
|
|
```
|
|
Host (port 8080)
|
|
└── Outer iframe (port 8081) - sandbox proxy
|
|
└── Inner iframe (srcdoc) - untrusted tool UI
|
|
```
|
|
|
|
**Why two iframes?**
|
|
|
|
- The outer iframe runs on a separate origin (port 8081) preventing direct access to the host
|
|
- The inner iframe receives HTML via `srcdoc` and is restricted by sandbox attributes
|
|
- Messages flow through the outer iframe which validates and relays them bidirectionally
|
|
|
|
This architecture ensures that even if tool UI code is malicious, it cannot access the host application's DOM, cookies, or JavaScript context.
|