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>
1.7 KiB
1.7 KiB
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/src/index.tsx- React UI host with tool selection, parameter input, and iframe managementsandbox.html/src/sandbox.ts- Outer iframe proxy with security validation and bidirectional message relaysrc/implementation.ts- Core logic: server connection, tool calling, and AppBridge setup
Getting Started
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:
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
srcdocand 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.