Upgrade to MCP-UI ~5.6.2 and handle internalized auto iframe resizing

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 handleUIAction = useCallback(async (result: ExtendedUIActionResult) => {
-    console.log('Handle action from MCP UI Action:', result);
+  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` };
+  };
 
-    // 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;
           }