Watch

History

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
Olivier Chafik bea0ae27f5 feat: add server helpers, make connect() to default to parent post transport (#165 ) * feat: add server helpers and optional connect() transport Add `src/server/` with convenience functions for registering MCP App tools and resources: - `registerAppTool(server, name, config, handler)` - `registerAppResource(server, name, uri, config, callback)` The `transport` parameter in `App.connect()` is now optional, defaulting to `PostMessageTransport(window.parent)`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Update src/server/index.ts Co-authored-by: Jonathan Hefner <jonathan@hefner.pro> * fix: refine server helper types - Make RESOURCE_URI_META_KEY required in McpUiAppToolConfig (tools need a UI resource) - Make _meta optional in McpUiAppResourceConfig (not all resources need custom metadata) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor: simplify RESOURCE_URI_META_KEY re-export * refactor: consolidate export statements --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Jonathan Hefner <jonathan@hefner.pro>		2025-12-16 21:25:26 +00:00
..
src	fix: Make MCP App UIs responsive for narrow viewports (#135 )	2025-12-13 12:12:06 +00:00
mcp-app.html	Add color-scheme meta tag to all example apps	2025-12-15 11:42:18 -08:00
package.json	fix: Windows compatibility - bun as optional dep, cross-env for examples (#145 )	2025-12-16 14:07:38 +00:00
README.md	Add basic-server-vanillajs example	2025-12-04 14:28:27 -06:00
server.ts	feat: add server helpers, make connect() to default to parent post transport (#165 )	2025-12-16 21:25:26 +00:00
tsconfig.json	Add basic-host and basic-server-react examples	2025-12-04 14:28:27 -06:00
vite.config.ts	Add basic-host and basic-server-react examples	2025-12-04 14:28:27 -06:00

README.md

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, sendOpenLink

Key Files

server.ts - MCP server with tool and resource registration
mcp-app.html / src/mcp-app.tsx - React UI using useApp() hook

Getting Started

npm install
npm run dev

How It Works

The server registers a get-time tool 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.