Upgrade to MCP-UI ~5.6.2 and handle internalized auto iframe resizing (#3889)

ui/desktop/package-lock.json

@@ -12,7 +12,7 @@
         "@ai-sdk/openai": "^0.0.72",
         "@ai-sdk/ui-utils": "^1.0.2",
         "@hey-api/client-fetch": "^0.8.1",
-        "@mcp-ui/client": "~5.3.1",
+        "@mcp-ui/client": "~5.6.2",
         "@radix-ui/react-accordion": "^1.2.2",
         "@radix-ui/react-avatar": "^1.1.1",
         "@radix-ui/react-dialog": "^1.1.7",
@@ -2660,13 +2660,14 @@
       }
     },
     "node_modules/@mcp-ui/client": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/@mcp-ui/client/-/client-5.3.1.tgz",
-      "integrity": "sha512-COcpCwV+SKd2m9Me++aG9Xm1sb4WMyl+Ak4cepe4EGzMqypjdn5f+KbOMGzs7itFOWhf8LVxeMTFsbeI38dQvg==",
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/@mcp-ui/client/-/client-5.6.2.tgz",
+      "integrity": "sha512-CLHin0eDM+0m0AmSc/PS0XgZAU2D+b/ppt4CxLykTck4CrQ0Gi589ieqh9VidijiB9R5Aw3F8Wi/IUr6Tp6urg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@modelcontextprotocol/sdk": "*",
         "@quilted/threads": "^3.1.3",
+        "@r2wc/react-to-web-component": "^2.0.4",
         "@remote-dom/core": "^1.8.0",
         "@remote-dom/react": "^1.2.2",
         "react": "^18.3.1",
@@ -3121,6 +3122,25 @@
         }
       }
     },
+    "node_modules/@r2wc/core": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@r2wc/core/-/core-1.2.0.tgz",
+      "integrity": "sha512-vAfiuS5KywtV54SRzc4maEHcpdgeUyJzln+ATpNCOkO+ArIuOkTXd92b5YauVAd0A8B2rV/y9OeVW19vb73bUQ==",
+      "license": "MIT"
+    },
+    "node_modules/@r2wc/react-to-web-component": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@r2wc/react-to-web-component/-/react-to-web-component-2.0.4.tgz",
+      "integrity": "sha512-g1dtTTEGETNUimYldTW+2hxY3mmJZjzPEca0vqCutUht2GHmpK9mT5r/urmEI7uSbOkn6HaymosgVy26lvU1JQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@r2wc/core": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@radix-ui/colors": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-3.0.0.tgz",

ui/desktop/package.json

@@ -42,7 +42,7 @@
     "@ai-sdk/openai": "^0.0.72",
     "@ai-sdk/ui-utils": "^1.0.2",
     "@hey-api/client-fetch": "^0.8.1",
-    "@mcp-ui/client": "~5.3.1",
+    "@mcp-ui/client": "~5.6.2",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.7",

ui/desktop/src/components/MCPUIResourceRenderer.tsx

@@ -1,60 +1,61 @@
 import { UIResourceRenderer, UIActionResult } from '@mcp-ui/client';
 import { ResourceContent } from '../types/message';
-import { useState, useCallback } from 'react';
-
-// Extend UIActionResult to include size-change type
-type ExtendedUIActionResult =
-  | UIActionResult
-  | {
-      type: 'size-change';
-      payload: {
-        height: string;
-      };
-    };
+import { useCallback } from 'react';
+import { toast } from 'react-toastify';
 
 interface MCPUIResourceRendererProps {
   content: ResourceContent;
 }
 
 export default function MCPUIResourceRenderer({ content }: MCPUIResourceRendererProps) {
-  console.log('MCPUIResourceRenderer', content);
-  const [iframeHeight, setIframeHeight] = useState('200px');
+  const handleAction = (action: UIActionResult) => {
+    console.log(
+      `MCP UI message received (but only handled with a toast notification for now):`,
+      action
+    );
+    toast.info(`${action.type} message sent from MCP UI, refer to console for more info`, {
+      data: action,
+    });
+    return { status: 'handled', message: `${action.type} action logged` };
+  };
 
-  const handleUIAction = useCallback(async (result: ExtendedUIActionResult) => {
-    console.log('Handle action from MCP UI Action:', result);
-
-    // Handle UI actions here
+  const handleUIAction = useCallback(async (result: UIActionResult) => {
     switch (result.type) {
-      case 'intent':
+      case 'intent': {
         // TODO: Implement intent handling
+        handleAction(result);
         break;
+      }
 
-      case 'link':
+      case 'link': {
         // TODO: Implement link handling
+        handleAction(result);
         break;
+      }
 
-      case 'notify':
-        // TODO: Implement notification handling
+      case 'notify': {
+        // TODO: Implement notify handling
+        handleAction(result);
         break;
+      }
 
-      case 'prompt':
+      case 'prompt': {
         // TODO: Implement prompt handling
+        handleAction(result);
         break;
+      }
 
-      case 'tool':
-        // TODO: Implement tool handling
+      case 'tool': {
+        // TODO: Implement tool call handling
+        handleAction(result);
         break;
+      }
 
-      // Currently, `size-change` is non-standard
-      case 'size-change': {
-        // We expect the height to be a string with a unit
-        console.log('Setting iframe height to:', result.payload.height);
-        setIframeHeight(result.payload.height);
+      default: {
+        console.warn('unsupported message sent from MCP-UI:', result);
         break;
       }
     }
-
-    return { status: 'handled' };
   }, []);
 
   return (
@@ -64,7 +65,10 @@ export default function MCPUIResourceRenderer({ content }: MCPUIResourceRenderer
           resource={content.resource}
           onUIAction={handleUIAction}
           htmlProps={{
-            style: { minHeight: iframeHeight },
+            autoResizeIframe: {
+              height: true,
+              width: false, // set to false to allow for responsive design
+            },
           }}
         />
       </div>

ui/desktop/src/components/ToolCallWithResponse.tsx

@@ -49,24 +49,19 @@ export default function ToolCallWithResponse({
       </div>
       {/* MCP UI — Inline */}
       {toolResponse?.toolResult?.value &&
-        toolResponse.toolResult.value.map((content, index, results) => {
+        toolResponse.toolResult.value.map((content, index) => {
           if (content.type === 'resource' && content.resource.uri?.startsWith('ui://')) {
-            if (index === results.length - 1) {
-              return (
-                <>
-                  <MCPUIResourceRenderer key={`${content.type}-${index}`} content={content} />
-                  {/* Append a disclaimer if this is the last item in the array */}
-                  <div className="mt-3 p-4 py-3 border border-borderSubtle rounded-lg bg-background-muted flex items-center">
-                    <FlaskConical className="mr-2" size={20} />
-                    <div className="text-sm font-medium mono">
-                      MCP UI is experimental and may change at any time.
-                    </div>
+            return (
+              <div key={`${content.type}-${index}`} className="mt-3">
+                <MCPUIResourceRenderer content={content} />
+                <div className="mt-3 p-4 py-3 border border-borderSubtle rounded-lg bg-background-muted flex items-center">
+                  <FlaskConical className="mr-2" size={20} />
+                  <div className="text-sm font-medium mono">
+                    MCP UI is experimental and may change at any time.
                   </div>
-                </>
-              );
-            } else {
-              return <MCPUIResourceRenderer key={`${content.type}-${index}`} content={content} />;
-            }
+                </div>
+              </div>
+            );
           } else {
             return null;
           }