ext-apps/examples/basic-server-preact

Example: Basic Server (Preact)

An MCP App example with a Preact UI.

Tip

Looking for a vanilla JavaScript example? See basic-server-vanillajs!

Overview

• Tool registration with a linked UI resource
• Preact UI using the App class
• 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 - Preact UI using App class

Getting Started

npm install
npm run dev

How It Works

1. The server registers a get-time tool with metadata linking it to a UI HTML resource (ui://get-time/mcp-app.html).
2. When the tool is invoked, the Host renders the UI from the resource.
3. The UI uses the MCP App SDK API to communicate with the host and call server tools.