feat: export McpUiToolMeta type and add type annotations

- Export McpUiToolMeta and McpUiToolVisibility types from types.ts
- Export corresponding Zod schemas (McpUiToolMetaSchema, McpUiToolVisibilitySchema)
- Add `as McpUiToolMeta` type annotations to all example servers
- Update docs/quickstart.md with proper typing

Ensures type safety for `_meta.ui` tool metadata across the codebase.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: antonpk1

docs/quickstart.md

@@ -97,7 +97,10 @@ Create `server.ts`:
 ```typescript
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
-import { RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps";
+import {
+  RESOURCE_MIME_TYPE,
+  type McpUiToolMeta,
+} from "@modelcontextprotocol/ext-apps";
 import cors from "cors";
 import express from "express";
 import fs from "node:fs/promises";
@@ -119,7 +122,7 @@ server.registerTool(
     description: "Returns the current server time.",
     inputSchema: {},
     outputSchema: { time: z.string() },
-    _meta: { ui: { resourceUri } }, // Links tool to UI
+    _meta: { ui: { resourceUri } as McpUiToolMeta }, // Links tool to UI
   },
   async () => {
     const time = new Date().toISOString();

examples/basic-server-react/server.ts

@@ -3,7 +3,7 @@ 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 { RESOURCE_MIME_TYPE } from "../../dist/src/app";
+import { RESOURCE_MIME_TYPE, type McpUiToolMeta } from "../../dist/src/app";
 import { startServer } from "../shared/server-utils.js";
 
 const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -28,7 +28,7 @@ function createServer(): McpServer {
       title: "Get Time",
       description: "Returns the current server time as an ISO 8601 string.",
       inputSchema: {},
-      _meta: { ui: { resourceUri: RESOURCE_URI } },
+      _meta: { ui: { resourceUri: RESOURCE_URI } as McpUiToolMeta },
     },
     async (): Promise<CallToolResult> => {
       const time = new Date().toISOString();

examples/basic-server-vanillajs/server.ts

@@ -3,7 +3,7 @@ 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 { RESOURCE_MIME_TYPE } from "../../dist/src/app";
+import { RESOURCE_MIME_TYPE, type McpUiToolMeta } from "../../dist/src/app";
 import { startServer } from "../shared/server-utils.js";
 
 const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -28,7 +28,7 @@ function createServer(): McpServer {
       title: "Get Time",
       description: "Returns the current server time as an ISO 8601 string.",
       inputSchema: {},
-      _meta: { ui: { resourceUri: RESOURCE_URI } },
+      _meta: { ui: { resourceUri: RESOURCE_URI } as McpUiToolMeta },
     },
     async (): Promise<CallToolResult> => {
       const time = new Date().toISOString();

examples/budget-allocator-server/server.ts

@@ -13,7 +13,7 @@ import type {
 import fs from "node:fs/promises";
 import path from "node:path";
 import { z } from "zod";
-import { RESOURCE_MIME_TYPE } from "../../dist/src/app";
+import { RESOURCE_MIME_TYPE, type McpUiToolMeta } from "../../dist/src/app";
 import { startServer } from "../shared/server-utils.js";
 
 const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -242,7 +242,7 @@ function createServer(): McpServer {
       description:
         "Returns budget configuration with 24 months of historical allocations and industry benchmarks by company stage",
       inputSchema: {},
-      _meta: { ui: { resourceUri } },
+      _meta: { ui: { resourceUri } as McpUiToolMeta },
     },
     async (): Promise<CallToolResult> => {
       const response: BudgetDataResponse = {

examples/cohort-heatmap-server/server.ts

@@ -4,7 +4,7 @@ import type { ReadResourceResult } from "@modelcontextprotocol/sdk/types.js";
 import fs from "node:fs/promises";
 import path from "node:path";
 import { z } from "zod";
-import { RESOURCE_MIME_TYPE } from "../../dist/src/app";
+import { RESOURCE_MIME_TYPE, type McpUiToolMeta } from "../../dist/src/app";
 import { startServer } from "../shared/server-utils.js";
 
 const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -163,7 +163,7 @@ function createServer(): McpServer {
       description:
         "Returns cohort retention heatmap data showing customer retention over time by signup month",
       inputSchema: GetCohortDataInputSchema.shape,
-      _meta: { ui: { resourceUri } },
+      _meta: { ui: { resourceUri } as McpUiToolMeta },
     },
     async ({ metric, periodType, cohortCount, maxPeriods }) => {
       const data = generateCohortData(

examples/customer-segmentation-server/server.ts

@@ -7,7 +7,7 @@ import type {
 import fs from "node:fs/promises";
 import path from "node:path";
 import { z } from "zod";
-import { RESOURCE_MIME_TYPE } from "../../dist/src/app";
+import { RESOURCE_MIME_TYPE, type McpUiToolMeta } from "../../dist/src/app";
 import { startServer } from "../shared/server-utils.js";
 import {
   generateCustomers,
@@ -72,7 +72,7 @@ function createServer(): McpServer {
         description:
           "Returns customer data with segment information for visualization. Optionally filter by segment.",
         inputSchema: GetCustomerDataInputSchema.shape,
-        _meta: { ui: { resourceUri } },
+        _meta: { ui: { resourceUri } as McpUiToolMeta },
       },
       async ({ segment }): Promise<CallToolResult> => {
         const data = getCustomerData(segment);

examples/scenario-modeler-server/server.ts

@@ -7,7 +7,7 @@ import type {
 import fs from "node:fs/promises";
 import path from "node:path";
 import { z } from "zod";
-import { RESOURCE_MIME_TYPE } from "../../dist/src/app";
+import { RESOURCE_MIME_TYPE, type McpUiToolMeta } from "../../dist/src/app";
 import { startServer } from "../shared/server-utils.js";
 
 const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -263,7 +263,7 @@ function createServer(): McpServer {
         description:
           "Returns SaaS scenario templates and optionally computes custom projections for given inputs",
         inputSchema: GetScenarioDataInputSchema.shape,
-        _meta: { ui: { resourceUri } },
+        _meta: { ui: { resourceUri } as McpUiToolMeta },
       },
       async (args: {
         customInputs?: ScenarioInputs;

examples/system-monitor-server/server.ts

@@ -9,7 +9,7 @@ import os from "node:os";
 import path from "node:path";
 import si from "systeminformation";
 import { z } from "zod";
-import { RESOURCE_MIME_TYPE } from "../../dist/src/app";
+import { RESOURCE_MIME_TYPE, type McpUiToolMeta } from "../../dist/src/app";
 import { startServer } from "../shared/server-utils.js";
 
 // Schemas - types are derived from these using z.infer
@@ -152,7 +152,7 @@ function createServer(): McpServer {
         ui: {
           resourceUri,
           visibility: ["model"],
-        },
+        } as McpUiToolMeta,
       },
     },
     getStats,
@@ -168,7 +168,7 @@ function createServer(): McpServer {
       _meta: {
         ui: {
           visibility: ["app"],
-        },
+        } as McpUiToolMeta,
       },
     },
     getStats,

examples/threejs-server/server.ts

@@ -9,7 +9,7 @@ import type { ReadResourceResult } from "@modelcontextprotocol/sdk/types.js";
 import fs from "node:fs/promises";
 import path from "node:path";
 import { z } from "zod";
-import { RESOURCE_MIME_TYPE } from "../../dist/src/app";
+import { RESOURCE_MIME_TYPE, type McpUiToolMeta } from "../../dist/src/app";
 import { startServer } from "../shared/server-utils.js";
 
 const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -160,7 +160,7 @@ function createServer(): McpServer {
           .default(400)
           .describe("Height in pixels"),
       },
-      _meta: { ui: { resourceUri } },
+      _meta: { ui: { resourceUri } as McpUiToolMeta },
     },
     async ({ code, height }) => {
       return {

examples/wiki-explorer-server/server.ts

@@ -8,7 +8,7 @@ import * as cheerio from "cheerio";
 import fs from "node:fs/promises";
 import path from "node:path";
 import { z } from "zod";
-import { RESOURCE_MIME_TYPE } from "../../dist/src/app";
+import { RESOURCE_MIME_TYPE, type McpUiToolMeta } from "../../dist/src/app";
 import { startServer } from "../shared/server-utils.js";
 
 const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -89,7 +89,7 @@ function createServer(): McpServer {
           .default("https://en.wikipedia.org/wiki/Model_Context_Protocol")
           .describe("Wikipedia page URL"),
       }),
-      _meta: { ui: { resourceUri } },
+      _meta: { ui: { resourceUri } as McpUiToolMeta },
     },
     async ({ url }): Promise<CallToolResult> => {
       let title = url;