Extract getUiCapability example to type-checked examples file

Move the inline example from the `getUiCapability()` JSDoc to
`index.examples.ts` for type checking, following the pattern used
by other examples in the codebase.

The example now uses the correct MCP SDK API:
- `server.server.oninitialized` callback for post-initialization hook
- `server.server.getClientCapabilities()` to retrieve capabilities

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jonathan Hefner 2026-01-29 19:55:33 -06:00
commit 52cc193e1b
No known key found for this signature in database
GPG key ID: 0DA40AFD21043691
2 changed files with 61 additions and 12 deletions

View file

@ -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
}

View file

@ -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,
* );
* }
* };
* ```