Add basic-host and basic-server-react examples
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>
This commit is contained in:
parent
0af15322af
commit
97310d50c5
1 changed files with 1808 additions and 25 deletions
37
examples/basic-host/README.md
Normal file
37
examples/basic-host/README.md
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
# 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.
|
||||
Loading…
Reference in a new issue