Add MCP Apps support alongside MCP-UI

package.json

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

src/index.ts

@@ -11,6 +11,10 @@
 
 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 { z } from 'zod';
 import { parseToolConfigFromArgs, filterTools } from './config/toolConfig.js';
 import {
@@ -92,7 +96,29 @@
 
 // Register resources to the server
 const resources = getAllResources();
-resources.forEach((resource) => {
+
+// Separate MCP Apps UI resources from regular resources
+const uiResources = resources.filter((r) => r.uri.startsWith('ui://'));
+const regularResources = resources.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(
+    server as any,
+    resource.name,
+    resource.uri,
+    { mimeType: RESOURCE_MIME_TYPE, description: resource.description },
+    async () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return await resource.readCallback(new URL(resource.uri), {} as any);
+    }
+  );
+});
+
+// Register regular resources using standard registration
+regularResources.forEach((resource) => {
   resource.installTo(server);
 });
 

src/resources/resourceRegistry.ts

@@ -6,6 +6,9 @@ import { MapboxStreetsV8FieldsResource } from './mapbox-streets-v8-fields-resour
 import { MapboxTokenScopesResource } from './mapbox-token-scopes-resource/MapboxTokenScopesResource.js';
 import { MapboxLayerTypeMappingResource } from './mapbox-layer-type-mapping-resource/MapboxLayerTypeMappingResource.js';
 import { MapboxDocumentationResource } from './mapbox-documentation-resource/MapboxDocumentationResource.js';
+import { PreviewStyleUIResource } from './ui-apps/PreviewStyleUIResource.js';
+import { StyleComparisonUIResource } from './ui-apps/StyleComparisonUIResource.js';
+import { GeojsonPreviewUIResource } from './ui-apps/GeojsonPreviewUIResource.js';
 import { httpRequest } from '../utils/httpPipeline.js';
 
 // Central registry of all resources
@@ -14,7 +17,11 @@ export const ALL_RESOURCES = [
   new MapboxStreetsV8FieldsResource(),
   new MapboxTokenScopesResource(),
   new MapboxLayerTypeMappingResource(),
-  new MapboxDocumentationResource({ httpRequest })
+  new MapboxDocumentationResource({ httpRequest }),
+  // MCP Apps UI resources (ui:// scheme)
+  new PreviewStyleUIResource(),
+  new StyleComparisonUIResource(),
+  new GeojsonPreviewUIResource()
 ] as const;
 
 export type ResourceInstance = (typeof ALL_RESOURCES)[number];