Watch

History

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
Jonathan Hefner 6eb82b5562 Refactor server startup functions Rename `startServer` to `startStreamableHTTPServer` and add a new `startStdioServer` helper to make the transport type explicit. Remove the `ServerOptions` interface in favor of reading `PORT` directly from the environment inside the function (defaulting to `3001`). Also update Python examples to default to port `3001` for consistency. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>		2026-01-24 09:27:54 -06:00
..
src	fix(e2e): make server-time element fill width for consistent mask (#283 )	2026-01-19 17:01:55 +00:00
.gitignore	Improve consistency and organization of examples for AI learning	2026-01-13 20:48:02 -06:00
main.ts	Refactor server startup functions	2026-01-24 09:27:54 -06:00
mcp-app.html	Add color-scheme meta tag to all example apps	2025-12-15 11:42:18 -08:00
package.json	chore: bump version to 0.4.1 (#282 )	2026-01-15 16:11:53 +00:00
README.md	docs: add MCP client configuration to example READMEs	2026-01-16 14:00:57 +00:00
server.ts	fix(examples): resolve DIST_DIR path for npm package execution (#277 )	2026-01-15 12:23:13 +00:00
tsconfig.json	Add basic-server-vanillajs example	2025-12-04 14:28:27 -06:00
tsconfig.server.json	feat: compile example servers to JavaScript for npm consumption (#259 )	2026-01-14 23:46:17 +00:00
vite.config.ts	Add basic-server-vanillajs example	2025-12-04 14:28:27 -06:00

README.md

Example: Basic Server (Vanilla JS)

An MCP App example with a vanilla JavaScript UI (no framework).

Tip

Looking for a React-based example? See basic-server-react!

MCP Client Configuration

Add to your MCP client configuration (stdio transport):

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

Overview

Tool registration with a linked UI resource
Vanilla JS UI using the App class directly
App communication APIs: callServerTool, sendMessage, sendLog, openLink
Theme integration via applyDocumentTheme(), applyHostStyleVariables(), and applyHostFonts()

Key Files

server.ts - MCP server with tool and resource registration
mcp-app.html / src/mcp-app.ts - Vanilla JS UI using App class

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.