2dd223b611* refactor: rename request methods to remove send prefix Following the MCP TS SDK convention where request methods don't have the "send" prefix (reserved for notifications): - App.sendMessage() → App.message() - App.sendOpenLink() → App.openLink() - AppBridge.sendResourceTeardown() → AppBridge.resourceTeardown() The old method names are kept as deprecated aliases for backwards compatibility. Updated all examples to use the new method names. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * test: add tests for deprecated method aliases - Update existing tests to use new method names (message, openLink) - Add tests verifying deprecated aliases are same reference as new methods - Add tests verifying deprecated aliases still work functionally 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor: rename message→sendMessage, resourceTeardown→teardownResource - App.message() → App.sendMessage() (with deprecated message alias) - AppBridge.resourceTeardown() → AppBridge.teardownResource() (with deprecated aliases) This better follows the pattern where methods that send data have 'send' or action verb prefix. * fix: update examples to use sendMessage instead of message * fix: update basic-host to use teardownResource * fix: update threejs-server to use sendMessage * refactor: remove deprecated app.message alias The app.message alias was removed since sendMessage is the correct name. sendResourceTeardown already exists in AppBridge. * refactor: remove resourceTeardown alias, keep only sendResourceTeardown --------- Co-authored-by: Claude <noreply@anthropic.com>
56 lines
1.9 KiB
Markdown
56 lines
1.9 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)
|
|
|
|
## 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.
|
|
|
|
## Vanilla JS Pattern
|
|
|
|
```typescript
|
|
import { App, PostMessageTransport } from "@modelcontextprotocol/ext-apps";
|
|
|
|
// Get element references from static HTML
|
|
const button = document.getElementById("my-button")!;
|
|
|
|
// Create app instance
|
|
const app = new App({ name: "My App", version: "1.0.0" });
|
|
|
|
// Register handlers BEFORE connecting
|
|
app.ontoolresult = (result) => {
|
|
/* handle result */
|
|
};
|
|
app.onerror = console.error;
|
|
|
|
// Add event listeners
|
|
button.addEventListener("click", () => {
|
|
/* ... */
|
|
});
|
|
|
|
// Connect to host
|
|
app.connect();
|
|
```
|