modelcontextprotocol/ext-apps

Watch

Jonathan Hefner 4b5b0c7d79 Add basic-server-vanillajs example

Demonstrates MCP App SDK usage with vanilla JavaScript (no framework),
providing parity with the existing basic-server-react example.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-12-04 14:28:27 -06:00

1.4 KiB

Raw Blame History

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.