Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-22 03:10:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 feat: MCP UI basic integration (#9299)

Browse source
This commit is contained in:
Samuel Path 2025-08-29 19:07:19 +02:00 • committed by GitHub
parent 20b29bbfa6
commit d16f93b5f7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 365 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

38
client/src/components/Chat/Messages/Content/ToolCallInfo.tsx
View file

@ -1,5 +1,8 @@
import React from 'react';
import { useLocalize } from '~/hooks';
import { UIResourceRenderer } from '@mcp-ui/client';
import UIResourceGrid from './UIResourceGrid';
import type { UIResource } from '~/common';
function OptimizedCodeBlock({ text, maxHeight = 320 }: { text: string; maxHeight?: number }) {
return (
@ -51,6 +54,21 @@ export default function ToolCallInfo({
: localize('com_assistants_attempt_info');
}
// Extract ui_resources from the output to display them in the UI
let uiResources: UIResource[] = [];
if (output?.includes('ui_resources')) {
const parsedOutput = JSON.parse(output);
const uiResourcesItem = parsedOutput.find(
(contentItem) => contentItem.metadata === 'ui_resources',
);
if (uiResourcesItem?.text) {
uiResources = JSON.parse(atob(uiResourcesItem.text)) as UIResource[];
}
output = JSON.stringify(
parsedOutput.filter((contentItem) => contentItem.metadata !== 'ui_resources'),
);
}
return (
<div className="w-full p-2">
<div style={{ opacity: 1 }}>
@ -66,6 +84,26 @@ export default function ToolCallInfo({
<div>
<OptimizedCodeBlock text={formatText(output)} maxHeight={250} />
</div>
{uiResources.length > 0 && (
<div className="my-2 text-sm font-medium text-text-primary">
{localize('com_ui_ui_resources')}
</div>
)}
<div>
{uiResources.length > 1 && <UIResourceGrid uiResources={uiResources} />}
{uiResources.length === 1 && (
<UIResourceRenderer
resource={uiResources[0]}
onUIAction={async (result) => {
console.log('Action:', result);
}}
htmlProps={{
autoResizeIframe: { width: true, height: true },
}}
/>
)}
</div>
</>
)}
</div>