4140565b77
- Add `.gitignore` files to all 19 examples (`node_modules/`, `dist/`) - Replace custom `log` objects with standard `console` methods - Add `ontoolcancelled` handler to all `basic-server-*` examples - Add host styling integration (`applyDocumentTheme`, `applyHostFonts`, `applyHostStyleVariables`) to non-React `basic-server-*` examples - Add section headers for better code organization in feature examples - Update READMEs with Build System section explaining single-file bundling These changes make examples more consistent and easier to adapt. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
35 lines
2.2 KiB
Markdown
35 lines
2.2 KiB
Markdown
# 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`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-react)!
|
|
|
|
## Overview
|
|
|
|
- Tool registration with a linked UI resource
|
|
- Vanilla JS UI using the [`App`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html) class directly
|
|
- App communication APIs: [`callServerTool`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#callservertool), [`sendMessage`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendmessage), [`sendLog`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendlog), [`openLink`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#openlink)
|
|
- Theme integration via [`applyDocumentTheme()`](https://modelcontextprotocol.github.io/ext-apps/api/functions/app.applyDocumentTheme.html), [`applyHostStyleVariables()`](https://modelcontextprotocol.github.io/ext-apps/api/functions/app.applyHostStyleVariables.html), and [`applyHostFonts()`](https://modelcontextprotocol.github.io/ext-apps/api/functions/app.applyHostFonts.html)
|
|
|
|
## Key Files
|
|
|
|
- [`server.ts`](server.ts) - MCP server with tool and resource registration
|
|
- [`mcp-app.html`](mcp-app.html) / [`src/mcp-app.ts`](src/mcp-app.ts) - Vanilla JS UI using `App` class
|
|
|
|
## Getting Started
|
|
|
|
```bash
|
|
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.
|
|
|
|
## Build System
|
|
|
|
This example bundles into a single HTML file using Vite with `vite-plugin-singlefile` — see [`vite.config.ts`](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`](https://modelcontextprotocol.github.io/ext-apps/api/interfaces/app.McpUiResourceCsp.html#resourcedomains) in the UI resource metadata.
|