An MCP App example with a Preact UI.

Add to your MCP client configuration (stdio transport):

{
  "mcpServers": {
    "basic-preact": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "--registry=https://registry.npmjs.org/",
        "@modelcontextprotocol/server-basic-preact",
        "--stdio"
      ]
    }
  }
}

To test local modifications, use this configuration (replace ~/code/ext-apps with your clone path):

{
  "mcpServers": {
    "basic-preact": {
      "command": "bash",
      "args": [
        "-c",
        "cd ~/code/ext-apps/examples/basic-server-preact && npm run build >&2 && node dist/index.js --stdio"
      ]
    }
  }
}

• Tool registration with a linked UI resource
• Preact UI using the App class
• App communication APIs: callServerTool, sendMessage, sendLog, openLink

• server.ts - MCP server with tool and resource registration
• mcp-app.html / src/mcp-app.tsx - Preact UI using App class

npm install
npm run dev

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.

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.