diff --git a/examples/quickstart/mcp-app.html b/examples/quickstart/mcp-app.html index bf276aa57..bcdba846b 100644 --- a/examples/quickstart/mcp-app.html +++ b/examples/quickstart/mcp-app.html @@ -8,6 +8,9 @@

Server Time: Loading...

+

+ Tool Meta Source: [none] +

diff --git a/examples/quickstart/server.ts b/examples/quickstart/server.ts index eb3c3b1ab..dc4988881 100644 --- a/examples/quickstart/server.ts +++ b/examples/quickstart/server.ts @@ -35,7 +35,14 @@ export function createServer(): McpServer { }, async () => { const time = new Date().toISOString(); - return { content: [{ type: "text", text: time }] }; + return { + content: [{ type: "text", text: time }], + _meta: { + timestamp: time, + source: "quickstart-server", + debugToken: "quickstart-meta-debug", + }, + }; }, ); diff --git a/examples/quickstart/src/mcp-app.ts b/examples/quickstart/src/mcp-app.ts index 5780bb706..9aa08b340 100644 --- a/examples/quickstart/src/mcp-app.ts +++ b/examples/quickstart/src/mcp-app.ts @@ -2,24 +2,34 @@ import { App } from "@modelcontextprotocol/ext-apps"; // Get element references const serverTimeEl = document.getElementById("server-time")!; +const toolMetaSourceEl = document.getElementById("tool-meta-source")!; const getTimeBtn = document.getElementById("get-time-btn")!; // Create app instance const app = new App({ name: "Get Time App", version: "1.0.0" }); +function extractMetaSource(result: unknown): string { + const meta = (result as { _meta?: { source?: unknown } })._meta; + return typeof meta?.source === "string" ? meta.source : "[missing]"; +} + // Handle tool results from the server. Set before `app.connect()` to avoid // missing the initial tool result. app.ontoolresult = (result) => { + console.info("tool-result _meta:", (result as { _meta?: unknown })._meta); const time = result.content?.find((c) => c.type === "text")?.text; serverTimeEl.textContent = time ?? "[ERROR]"; + toolMetaSourceEl.textContent = extractMetaSource(result); }; // Wire up button click getTimeBtn.addEventListener("click", async () => { // `app.callServerTool()` lets the UI request fresh data from the server const result = await app.callServerTool({ name: "get-time", arguments: {} }); + console.info("callServerTool _meta:", (result as { _meta?: unknown })._meta); const time = result.content?.find((c) => c.type === "text")?.text; serverTimeEl.textContent = time ?? "[ERROR]"; + toolMetaSourceEl.textContent = extractMetaSource(result); }); // Connect to host