Add MCP Apps support for static_map_image_tool

CHANGELOG.md

@@ -40,13 +40,33 @@
 
 ## 0.8.3
 
+### Breaking Changes
+
+- **`static_map_image_tool`**: Tool now returns the map URL as `text` content instead of a base64-encoded image
+  - Before: `content: [{ type: "image", data: "...base64...", mimeType: "image/png" }]`
+  - After: `content: [{ type: "text", text: "https://api.mapbox.com/styles/v1/..." }]`
+  - In MCP Apps-capable hosts the image is rendered interactively via `StaticMapUIResource`; in other hosts the model receives the URL and can present or use it directly
+
+### Features Added
+
+- **MCP Apps Support for StaticMapImageTool** (#109)
+  - Added interactive map preview in compatible MCP clients (VS Code, Claude Code, Goose)
+  - Implemented `StaticMapUIResource` serving interactive HTML with inline MCP Apps SDK
+  - Added `@modelcontextprotocol/ext-apps@^1.0.1` dependency
+  - Enhanced `BaseTool` with `meta` property for MCP Apps metadata
+  - Configured CSP for `api.mapbox.com` domains
+  - Sends `ui/notifications/size-changed` to fit panel to rendered image height
+  - Fullscreen toggle using `ui/request-display-mode`
+  - Uses proper `RESOURCE_MIME_TYPE` ("text/html;profile=mcp-app") per MCP Apps specification
+
 ### Security
 
 - **CVE-2026-0621**: Updated `@modelcontextprotocol/sdk` to 1.25.3 to fix ReDoS vulnerability in UriTemplate regex patterns
 - Regenerated SDK patch for version 1.25.3
 
 ### Dependencies
 
+- Added `@modelcontextprotocol/ext-apps@^1.0.1`
 - Updated `@modelcontextprotocol/sdk` from 1.17.5 to 1.25.3
 
 ## 0.8.2

package.json

@@ -77,6 +77,7 @@
   ],
   "dependencies": {
     "@mcp-ui/server": "^5.13.1",
+    "@modelcontextprotocol/ext-apps": "^1.1.0",
     "@modelcontextprotocol/sdk": "^1.26.0",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/auto-instrumentations-node": "^0.56.0",

src/index.ts

@@ -11,6 +11,10 @@ import { SpanStatusCode } from '@opentelemetry/api';
 
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import {
+  registerAppResource,
+  RESOURCE_MIME_TYPE
+} from '@modelcontextprotocol/ext-apps/server';
 import {
   ListPromptsRequestSchema,
   GetPromptRequestSchema
@@ -109,8 +113,30 @@ enabledCoreTools.forEach((tool) => {
   tool.installTo(server);
 });
 
-// Register all resources to the server
-allResources.forEach((resource) => {
+// Separate MCP Apps UI resources from regular resources
+const uiResources = allResources.filter((r) => r.uri.startsWith('ui://'));
+const regularResources = allResources.filter((r) => !r.uri.startsWith('ui://'));
+
+// Register MCP Apps UI resources using registerAppResource
+// IMPORTANT: Use RESOURCE_MIME_TYPE which is "text/html;profile=mcp-app"
+// This tells clients (like Claude Desktop) that this is an MCP App
+uiResources.forEach((resource) => {
+  registerAppResource(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    server as any,
+    resource.name,
+    resource.uri,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    { mimeType: RESOURCE_MIME_TYPE, description: resource.description } as any,
+    async () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return await resource.read(resource.uri, {} as any);
+    }
+  );
+});
+
+// Register regular resources using standard registration
+regularResources.forEach((resource) => {
   resource.installTo(server);
 });
 

src/resources/resourceRegistry.ts

@@ -4,13 +4,15 @@
 // INSERT NEW RESOURCE IMPORT HERE
 import { CategoryListResource } from './category-list/CategoryListResource.js';
 import { TemporaryDataResource } from './temporary/TemporaryDataResource.js';
+import { StaticMapUIResource } from './ui-apps/StaticMapUIResource.js';
 import { httpRequest } from '../utils/httpPipeline.js';
 
 // Central registry of all resources
 export const ALL_RESOURCES = [
   // INSERT NEW RESOURCE INSTANCE HERE
   new CategoryListResource({ httpRequest }),
-  new TemporaryDataResource()
+  new TemporaryDataResource(),
+  new StaticMapUIResource()
 ] as const;
 
 export type ResourceInstance = (typeof ALL_RESOURCES)[number];