4ca20f21c4* Restructure threejs-server README to match marketing examples - Update title format to "Example: Three.js App" - Constrain screenshot width using table layout - Add Features section with key capabilities - Reorganize Running section with Tool Input subsection - Add Architecture section describing server and app components - Remove implementation-focused sections (WidgetProps, Creating a New Widget) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add bun as devDependency to example packages npm install now automatically installs bun, eliminating the need for separate installation instructions. Removed manual bun install step from customer-segmentation-server README. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add start:http and start:stdio npm scripts to examples For the 6 examples supporting --stdio transport, add explicit scripts: - serve:http / serve:stdio for running the server - start:http / start:stdio for build + serve - start now aliases to start:http for backward compatibility Update READMEs to document both transport options. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Default basic-host SERVERS to localhost:3001/mcp - Change threejs-server default port from 3109 to 3001 for consistency - Add default SERVERS value in basic-host serve.ts - Document SERVERS env var in basic-host README 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Improve Examples section in README Frame the three basic examples as foundational starting points and add a link to the examples directory for additional demo apps. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
43 lines
1.7 KiB
Markdown
43 lines
1.7 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 start
|
|
# Open http://localhost:8080
|
|
```
|
|
|
|
By default, the host application will try to connect to an MCP server at `http://localhost:3001/mcp`. You can configure this behavior by setting the `SERVERS` environment variable with a JSON array of server URLs:
|
|
|
|
```bash
|
|
SERVERS='["http://localhost:1234/mcp", "http://localhost:5678/mcp"]' npm run start
|
|
```
|
|
|
|
## 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.
|