| Filename | Latest commit message | Latest commit date |
|---|---|---|
ecc593bcec* chore: bump version to 0.3.0 Breaking changes: - `viewport` replaced with `containerDimensions` in host context New examples: - video-resource-server - sheet-music-server 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix(video-resource-server): add missing server-utils and fix import path The video-resource-server was importing from a non-existent ../shared/server-utils.js path. Added the server-utils.ts file and fixed the import to use ./src/server-utils.js like other examples. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * chore: update ext-apps version refs to 0.3.0 --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
| .. | ||
| src | ||
| mcp-app.html | ||
| package.json | ||
| README.md | ||
| server-utils.ts | ||
| server.ts | ||
| tsconfig.json | ||
| vite.config.ts | ||
Example: Basic Server (Preact)
An MCP App example with a Preact UI.
Tip
Looking for a vanilla JavaScript example? See
basic-server-vanillajs!
Overview
- Tool registration with a linked UI resource
- Preact UI using the
Appclass - App communication APIs:
callServerTool,sendMessage,sendLog,openLink
Key Files
server.ts- MCP server with tool and resource registrationmcp-app.html/src/mcp-app.tsx- Preact UI usingAppclass
Getting Started
npm install
npm run dev
How It Works
- The server registers a
get-timetool with metadata linking it to a UI HTML resource (ui://get-time/mcp-app.html). - When the tool is invoked, the Host renders the UI from the resource.
- The UI uses the MCP App SDK API to communicate with the host and call server tools.