Watch

History

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
Olivier Chafik 75cbf8612c feat(basic-host): URL params, fullscreen mode, unified layout (#266 ) * basic-host: handle containerDimensions * feat(basic-host): Unified tool call layout with shared collapsible panels * snapshots * format		2026-01-14 22:09:41 +00:00
..
src	Improve consistency and organization of examples for AI learning	2026-01-13 20:48:02 -06:00
.gitignore	Improve consistency and organization of examples for AI learning	2026-01-13 20:48:02 -06:00
grid-cell.png	feat(basic-host): URL params, fullscreen mode, unified layout (#266 )	2026-01-14 22:09:41 +00:00
mcp-app.html	Add color-scheme meta tag to all example apps	2025-12-15 11:42:18 -08:00
package.json	chore: release 0.4.0 (#249 )	2026-01-12 22:40:24 +00:00
README.md	Improve consistency and organization of examples for AI learning	2026-01-13 20:48:02 -06:00
screenshot.png	feat(basic-host): URL params, fullscreen mode, unified layout (#266 )	2026-01-14 22:09:41 +00:00
server-utils.ts	fix: add error handling for server startup failures (#236 )	2026-01-11 16:52:55 +00:00
server.ts	Replace deprecated `RESOURCE_URI_META_KEY` with `_meta.ui.resourceUri`	2026-01-12 13:00:11 -06: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, openLink

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.

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.