| Filename | Latest commit message | Latest commit date |
|---|---|---|
8550545ccbAccording to spec, mimeType should be present in both the resource declaration and the resource content. This adds the missing mimeType to the registerResource() declaration (third parameter) in all example servers and the quickstart documentation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: ochafik <olivier.chafik@gmail.com> |
||
| .. | ||
| src | ||
| mcp-app.html | ||
| package.json | ||
| README.md | ||
| server.ts | ||
| tsconfig.json | ||
| vite.config.ts | ||
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!
Overview
- Tool registration with a linked UI resource
- Vanilla JS UI using the
Appclass directly - App communication APIs:
callServerTool,sendMessage,sendLog,sendOpenLink
Key Files
server.ts- MCP server with tool and resource registrationmcp-app.html/src/mcp-app.ts- Vanilla JS UI usingAppclass
Getting Started
npm install
npm run dev
How It Works
- The server registers a
get-timetool 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.
Vanilla JS Pattern
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(new PostMessageTransport(window.parent));