| Filename | Latest commit message | Latest commit date |
|---|---|---|
9e9f5f0210* Centralize example server transport logic in shared utils Move stdio/HTTP transport handling into `server-utils.ts` so example servers only need to call `startServer(createServer)`. Switch HTTP transport to stateless mode and remove legacy SSE endpoints. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Make example servers self-contained with local server-utils Copy `server-utils.ts` into each example's `src/` directory so examples can be used standalone without the shared directory. Updates imports from `"../shared/server-utils.js"` to `"./src/server-utils.js"`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add `integration-server` example for E2E testing Add dedicated `integration-server` example (duplicated from `basic-server-react`) to preserve E2E testing capabilities while allowing `basic-server-react` to be simplified as a minimal example. Changes: - Add `examples/integration-server` exercising SDK communication APIs - Update E2E tests to use `integration-server` instead of `basic-server-react` and `basic-server-vanillajs` - Use server name labels instead of indices for more robust test selection - Remove `basic-react.png` and `basic-vanillajs.png` golden snapshots 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Simplify `basic-server-*` examples - Clarify comments - Return plain text from `get-time` tool instead of JSON - Remove simulated cleanup delay from `onteardown` 🤖 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 | ||
| 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.