diff --git a/ui/desktop/package-lock.json b/ui/desktop/package-lock.json
index c42a289c6d86..edd61cc4ac8a 100644
--- a/ui/desktop/package-lock.json
+++ b/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",
diff --git a/ui/desktop/package.json b/ui/desktop/package.json
index 17a607f2def9..39f845a586d4 100644
--- a/ui/desktop/package.json
+++ b/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",
diff --git a/ui/desktop/src/components/MCPUIResourceRenderer.tsx b/ui/desktop/src/components/MCPUIResourceRenderer.tsx
index 8734cbc519cd..8800c93e63bf 100644
--- a/ui/desktop/src/components/MCPUIResourceRenderer.tsx
+++ b/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
+ },
}}
/>
diff --git a/ui/desktop/src/components/ToolCallWithResponse.tsx b/ui/desktop/src/components/ToolCallWithResponse.tsx
index f88840ef2a8a..e72fb19b2589 100644
--- a/ui/desktop/src/components/ToolCallWithResponse.tsx
+++ b/ui/desktop/src/components/ToolCallWithResponse.tsx
@@ -49,24 +49,19 @@ export default function ToolCallWithResponse({
{/* 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 (
- <>
-