2109dccadbRewrites the Quickstart tutorial to provide a more focused, step-by-step introduction to building MCP Apps. The guide now uses synced code fences that pull from `examples/quickstart/`, ensuring all code shown in the documentation is type-checked and tested. Key improvements: - Clearer project setup instructions with explicit commands - Streamlined explanations of the tool + resource registration pattern - Added screenshot showing the completed app - E2E test coverage validates the example works end-to-end Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
import { registerAppResource, registerAppTool, RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps/server";
|
|
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
|
|
import type { CallToolResult, ReadResourceResult } from "@modelcontextprotocol/sdk/types.js";
|
|
import fs from "node:fs/promises";
|
|
import path from "node:path";
|
|
import { z } from "zod";
|
|
// Works both from source (server.ts) and compiled (dist/server.js)
|
|
const DIST_DIR = import.meta.filename.endsWith(".ts")
|
|
? path.join(import.meta.dirname, "dist")
|
|
: import.meta.dirname;
|
|
|
|
/**
|
|
* Creates a new MCP server instance with tools and resources registered.
|
|
*/
|
|
export function createServer(): McpServer {
|
|
const server = new McpServer({
|
|
name: "Basic MCP App Server (Vanilla JS)",
|
|
version: "1.0.0",
|
|
});
|
|
|
|
// Two-part registration: tool + resource, tied together by the resource URI.
|
|
const resourceUri = "ui://get-time/mcp-app.html";
|
|
|
|
// Register a tool with UI metadata. When the host calls this tool, it reads
|
|
// `_meta.ui.resourceUri` to know which resource to fetch and render as an
|
|
// interactive UI.
|
|
registerAppTool(server,
|
|
"get-time",
|
|
{
|
|
title: "Get Time",
|
|
description: "Returns the current server time as an ISO 8601 string.",
|
|
inputSchema: {},
|
|
outputSchema: z.object({
|
|
time: z.string(),
|
|
}),
|
|
_meta: { ui: { resourceUri } }, // Links this tool to its UI resource
|
|
},
|
|
async (): Promise<CallToolResult> => {
|
|
const time = new Date().toISOString();
|
|
return {
|
|
content: [{ type: "text", text: time }],
|
|
structuredContent: { time },
|
|
};
|
|
},
|
|
);
|
|
|
|
// Register the resource, which returns the bundled HTML/JavaScript for the UI.
|
|
registerAppResource(server,
|
|
resourceUri,
|
|
resourceUri,
|
|
{ mimeType: RESOURCE_MIME_TYPE },
|
|
async (): Promise<ReadResourceResult> => {
|
|
const html = await fs.readFile(path.join(DIST_DIR, "mcp-app.html"), "utf-8");
|
|
|
|
return {
|
|
contents: [
|
|
{ uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html },
|
|
],
|
|
};
|
|
},
|
|
);
|
|
|
|
return server;
|
|
}
|