@modelcontextprotocol/server-basic-react

Example: Basic Server (React)

An MCP App example with a React UI.

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

MCP Client Configuration

Add to your MCP client configuration (stdio transport):

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

Local Development

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

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

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.