[mcp-ui] Adding MCP-UI support to those that support URLs

Author: mattpodwysocki

src/tools/geojson-preview-tool/GeojsonPreviewTool.ts

@@ -52,6 +52,36 @@ export class GeojsonPreviewTool extends BaseTool<typeof GeojsonPreviewSchema> {
     );
   }
 
+  /**
+   * Generate a Mapbox Static Images API URL for the GeoJSON data
+   * @see https://docs.mapbox.com/api/maps/static-images/
+   */
+  private generateStaticImageUrl(geojsonData: GeoJSON): string | null {
+    const accessToken = process.env.MAPBOX_ACCESS_TOKEN;
+    if (!accessToken) {
+      return null; // Fallback to geojson.io if no token available
+    }
+
+    // Create a simplified GeoJSON for the overlay
+    // The Static API requires specific format for GeoJSON overlays
+    const geojsonString = JSON.stringify(geojsonData);
+    const encodedGeoJSON = encodeURIComponent(geojsonString);
+
+    // Use Mapbox Streets style with auto-bounds fitting
+    // Format: /styles/v1/{username}/{style_id}/static/geojson({geojson})/auto/{width}x{height}@2x
+    const staticImageUrl =
+      `https://api.mapbox.com/styles/v1/mapbox/streets-v12/static/` +
+      `geojson(${encodedGeoJSON})/auto/1000x700@2x` +
+      `?access_token=${accessToken}`;
+
+    // Check if URL is too long (browsers typically limit to ~8192 chars)
+    if (staticImageUrl.length > 8000) {
+      return null; // Fallback to geojson.io for large GeoJSON
+    }
+
+    return staticImageUrl;
+  }
+
   protected async execute(input: GeojsonPreviewInput): Promise<CallToolResult> {
     try {
       // Parse and validate JSON format
@@ -92,15 +122,39 @@ export class GeojsonPreviewTool extends BaseTool<typeof GeojsonPreviewSchema> {
           .digest('hex')
           .substring(0, 16); // Use first 16 chars for brevity
 
-        const uiResource = createUIResource({
-          uri: `ui://mapbox/geojson-preview/${contentHash}`,
-          content: {
-            type: 'externalUrl',
-            iframeUrl: geojsonIOUrl
-          },
-          encoding: 'text'
-        });
-        content.push(uiResource);
+        // Try to generate a Mapbox Static Image URL
+        const staticImageUrl = this.generateStaticImageUrl(geojsonData);
+
+        if (staticImageUrl) {
+          // Use Mapbox Static Images API - embeds as an image
+          const uiResource = createUIResource({
+            uri: `ui://mapbox/geojson-preview/${contentHash}`,
+            content: {
+              type: 'externalUrl',
+              iframeUrl: staticImageUrl
+            },
+            encoding: 'text',
+            uiMetadata: {
+              'preferred-frame-size': ['1000px', '700px']
+            }
+          });
+          content.push(uiResource);
+        } else {
+          // Fallback to geojson.io URL (for large GeoJSON or when no token)
+          // Note: geojson.io may not work in iframes due to X-Frame-Options
+          const uiResource = createUIResource({
+            uri: `ui://mapbox/geojson-preview/${contentHash}`,
+            content: {
+              type: 'externalUrl',
+              iframeUrl: geojsonIOUrl
+            },
+            encoding: 'text',
+            uiMetadata: {
+              'preferred-frame-size': ['1000px', '700px']
+            }
+          });
+          content.push(uiResource);
+        }
       }
 
       return {

src/tools/preview-style-tool/PreviewStyleTool.ts

@@ -81,7 +81,10 @@ export class PreviewStyleTool extends BaseTool<typeof PreviewStyleSchema> {
           type: 'externalUrl',
           iframeUrl: url
         },
-        encoding: 'text'
+        encoding: 'text',
+        uiMetadata: {
+          'preferred-frame-size': ['1000px', '700px']
+        }
       });
       content.push(uiResource);
     }

src/tools/style-comparison-tool/StyleComparisonTool.ts

@@ -117,7 +117,10 @@ export class StyleComparisonTool extends BaseTool<
           type: 'externalUrl',
           iframeUrl: url
         },
-        encoding: 'text'
+        encoding: 'text',
+        uiMetadata: {
+          'preferred-frame-size': ['1000px', '700px']
+        }
       });
       content.push(uiResource);
     }

test/config/toolConfig.test.ts

@@ -19,15 +19,23 @@ vi.mock('../../src/utils/versionUtils.js', () => ({
 describe('Tool Configuration', () => {
   // Save original argv
   const originalArgv = process.argv;
+  const originalEnableMcpUi = process.env.ENABLE_MCP_UI;
 
   beforeEach(() => {
     // Reset argv before each test
     process.argv = [...originalArgv];
+    // Reset environment variable before each test
+    delete process.env.ENABLE_MCP_UI;
   });
 
   afterAll(() => {
-    // Restore original argv
+    // Restore original argv and env
     process.argv = originalArgv;
+    if (originalEnableMcpUi !== undefined) {
+      process.env.ENABLE_MCP_UI = originalEnableMcpUi;
+    } else {
+      delete process.env.ENABLE_MCP_UI;
+    }
   });
 
   describe('parseToolConfigFromArgs', () => {

test/tools/geojson-preview-tool/GeojsonPreviewTool.test.ts

@@ -49,16 +49,22 @@ describe('GeojsonPreviewTool', () => {
     }
 
     // Verify MCP-UI resource is included by default
+    // Could be either Mapbox Static Images API or geojson.io (fallback)
     expect(result.content[1]).toMatchObject({
       type: 'resource',
       resource: {
         uri: expect.stringMatching(/^ui:\/\/mapbox\/geojson-preview\//),
         mimeType: 'text/uri-list',
-        text: expect.stringContaining(
-          'https://geojson.io/#data=data:application/json,'
-        )
+        text: expect.stringMatching(/^https:\/\//)
       }
     });
+
+    // Verify the iframe URL is either Mapbox Static Images API or geojson.io
+    const iframeUrl = (result.content[1] as any).resource.text;
+    expect(
+      iframeUrl.includes('api.mapbox.com/styles') ||
+        iframeUrl.includes('geojson.io')
+    ).toBe(true);
   });
 
   it('returns only URL when MCP-UI is disabled', async () => {