| Filename | Latest commit message | Latest commit date |
|---|---|---|
61cd4ed219
Not all MCP clients support structuredContent in MCP tool results, so
examples now return data as JSON in content and parse it client-side.
Pattern used:
- Server: content: [{ type: "text", text: JSON.stringify(data) }]
- Client: JSON.parse(result.content!.filter(...).map(...).join(""))
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.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));