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 ( - <> - - {/* Append a disclaimer if this is the last item in the array */} -
- -
- MCP UI is experimental and may change at any time. -
+ return ( +
+ +
+ +
+ MCP UI is experimental and may change at any time.
- - ); - } else { - return ; - } +
+
+ ); } else { return null; }