| Filename | Latest commit message | Latest commit date |
|---|---|---|
d9006bd69a* feat: make MCP SDK a peer dependency - Move @modelcontextprotocol/sdk from dependencies to peerDependencies (^1.20.0) - Add to devDependencies for local development (^1.24.3) - Externalize SDK from all build entry points (app, app-bridge, react, server) Benefits: - Consumers control their SDK version - Deduplication when consumer already has SDK - Follows pattern of react/zod peer deps * fix: require SDK ^1.24.0 for Zod 4 compatibility Earlier SDK versions have Zod type incompatibilities that cause build errors. * chore: update examples to SDK ^1.24.0 to match peer dep |
||
| .. | ||
| src | ||
| mcp-app.html | ||
| package.json | ||
| README.md | ||
| server.ts | ||
| tsconfig.json | ||
| vite.config.ts | ||
Example: Basic Server (React)
An MCP App example with a React UI.
Tip
Looking for a vanilla JavaScript example? See
basic-server-vanillajs!
Overview
- Tool registration with a linked UI resource
- React UI using the
useApp()hook - App communication APIs:
callServerTool,sendMessage,sendLog,openLink
Key Files
server.ts- MCP server with tool and resource registrationmcp-app.html/src/mcp-app.tsx- React UI usinguseApp()hook
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.