Merge pull request modelcontextprotocol#406 from jonathanhefner/extract-getUiCapability-example

Extract `getUiCapability` example to type-checked examples file

Author: jonathanhefner

src/server/index.examples.ts

@@ -17,6 +17,7 @@ import { z } from "zod";
 import {
   registerAppTool,
   registerAppResource,
+  getUiCapability,
   RESOURCE_MIME_TYPE,
 } from "./index.js";
 
@@ -196,3 +197,41 @@ function registerAppResource_withCsp(
   );
   //#endregion registerAppResource_withCsp
 }
+
+/**
+ * Example: Check for MCP Apps support in server initialization.
+ */
+function getUiCapability_checkSupport(
+  server: McpServer,
+  weatherHandler: ToolCallback,
+  textWeatherHandler: ToolCallback,
+) {
+  //#region getUiCapability_checkSupport
+  server.server.oninitialized = () => {
+    const clientCapabilities = server.server.getClientCapabilities();
+    const uiCap = getUiCapability(clientCapabilities);
+
+    if (uiCap?.mimeTypes?.includes(RESOURCE_MIME_TYPE)) {
+      // App-enhanced tool
+      registerAppTool(
+        server,
+        "weather",
+        {
+          description: "Get weather information with interactive dashboard",
+          _meta: { ui: { resourceUri: "ui://weather/dashboard" } },
+        },
+        weatherHandler,
+      );
+    } else {
+      // Text-only fallback
+      server.registerTool(
+        "weather",
+        {
+          description: "Get weather information",
+        },
+        textWeatherHandler,
+      );
+    }
+  };
+  //#endregion getUiCapability_checkSupport
+}

src/server/index.ts

@@ -340,21 +340,31 @@ export const EXTENSION_ID = "io.modelcontextprotocol/ui";
  * @returns The MCP Apps capability settings, or `undefined` if not supported
  *
  * @example Check for MCP Apps support in server initialization
- * ```typescript
- * import { getUiCapability, RESOURCE_MIME_TYPE, registerAppTool } from "@modelcontextprotocol/ext-apps/server";
- *
- * server.oninitialized = ({ clientCapabilities }) => {
+ * ```ts source="./index.examples.ts#getUiCapability_checkSupport"
+ * server.server.oninitialized = () => {
+ *   const clientCapabilities = server.server.getClientCapabilities();
  *   const uiCap = getUiCapability(clientCapabilities);
+ *
  *   if (uiCap?.mimeTypes?.includes(RESOURCE_MIME_TYPE)) {
- *     registerAppTool(server, "weather", {
- *       description: "Get weather with interactive dashboard",
- *       _meta: { ui: { resourceUri: "ui://weather/dashboard" } },
- *     }, weatherHandler);
+ *     // App-enhanced tool
+ *     registerAppTool(
+ *       server,
+ *       "weather",
+ *       {
+ *         description: "Get weather information with interactive dashboard",
+ *         _meta: { ui: { resourceUri: "ui://weather/dashboard" } },
+ *       },
+ *       weatherHandler,
+ *     );
  *   } else {
- *     // Register text-only fallback
- *     server.registerTool("weather", {
- *       description: "Get weather as text",
- *     }, textWeatherHandler);
+ *     // Text-only fallback
+ *     server.registerTool(
+ *       "weather",
+ *       {
+ *         description: "Get weather information",
+ *       },
+ *       textWeatherHandler,
+ *     );
  *   }
  * };
  * ```