| Filename | Latest commit message | Latest commit date |
|---|---|---|
89a684546b* fix(examples): resolve DIST_DIR path for npm package execution When servers are compiled to dist/server.js and published to npm, `import.meta.dirname` already points to dist/, so joining with "dist" results in dist/dist/ which doesn't exist. This fix detects whether we're running from TypeScript source or compiled JavaScript and adjusts the path accordingly: - From source (server.ts): use dist/ subdirectory - From compiled (dist/server.js): use current directory Fixes ENOENT errors like: "ENOENT: no such file or directory, open '.../dist/dist/mcp-app.html'" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix(pdf-server): mark pdfjs-dist as external in bundle The pdf.worker.mjs file wasn't being found when running from npm because bun bundled pdfjs-dist but didn't include the worker file. By marking pdfjs-dist as external, it uses the installed package from node_modules at runtime where the worker is available. 🤖 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> |
||
| .. | ||
| src | ||
| .gitignore | ||
| main.ts | ||
| mcp-app.html | ||
| package.json | ||
| README.md | ||
| server.ts | ||
| tsconfig.json | ||
| tsconfig.server.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.
Build System
This example bundles into a single HTML file using Vite with vite-plugin-singlefile — see vite.config.ts. This allows all UI content to be served as a single MCP resource. Alternatively, MCP apps can load external resources by defining _meta.ui.csp.resourceDomains in the UI resource metadata.