8b8ecbea64
PR #184 accidentally removed/reverted educational comments from `basic-server-react` and `basic-server-vanillajs` that were established in PR #182. This restores consistency with the other basic-server examples (Vue, Svelte, Preact, Solid). Changes: - Add back the three-comment pattern explaining two-part registration - Restore full tool description ("as an ISO 8601 string") - Change vanillajs to return plain text instead of JSON (matching #182) - Use local `resourceUri` variable instead of top-level constant Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
|
|
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
|
|
import type { CallToolResult, ReadResourceResult } from "@modelcontextprotocol/sdk/types.js";
|
|
import fs from "node:fs/promises";
|
|
import path from "node:path";
|
|
import { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "@modelcontextprotocol/ext-apps/server";
|
|
import { startServer } from "./server-utils.js";
|
|
|
|
const DIST_DIR = path.join(import.meta.dirname, "dist");
|
|
|
|
/**
|
|
* Creates a new MCP server instance with tools and resources registered.
|
|
*/
|
|
export function createServer(): McpServer {
|
|
const server = new McpServer({
|
|
name: "Basic MCP App Server (React)",
|
|
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[RESOURCE_URI_META_KEY]` 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: {},
|
|
_meta: { [RESOURCE_URI_META_KEY]: resourceUri },
|
|
},
|
|
async (): Promise<CallToolResult> => {
|
|
const time = new Date().toISOString();
|
|
return { content: [{ type: "text", text: 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;
|
|
}
|
|
|
|
async function main() {
|
|
if (process.argv.includes("--stdio")) {
|
|
await createServer().connect(new StdioServerTransport());
|
|
} else {
|
|
const port = parseInt(process.env.PORT ?? "3001", 10);
|
|
await startServer(createServer, { port, name: "Basic MCP App Server (React)" });
|
|
}
|
|
}
|
|
|
|
main().catch((e) => {
|
|
console.error(e);
|
|
process.exit(1);
|
|
});
|