💻 feat: deeper MCP UI integration in the chat UI using plugins

---------

Co-authored-by: Samuel Path <samuel.path@shopify.com>
Co-authored-by: Pierre-Luc Godin <pierreluc.godin@shopify.com>
This commit is contained in:
Pierre-Luc Godin 2025-10-16 14:51:01 -04:00 committed by Dustin Healy
parent b8a149e563
commit 08103ffb22
22 changed files with 1441 additions and 54 deletions

View file

@ -1,6 +1,8 @@
import React, { useState } from 'react';
import { UIResourceRenderer } from '@mcp-ui/client';
import type { UIResource } from 'librechat-data-provider';
import useSubmitMessage from '~/hooks/Messages/useSubmitMessage';
import { handleUIAction } from '~/utils';
interface UIResourceCarouselProps {
uiResources: UIResource[];
@ -11,6 +13,7 @@ const UIResourceCarousel: React.FC<UIResourceCarouselProps> = React.memo(({ uiRe
const [showRightArrow, setShowRightArrow] = useState(true);
const [isContainerHovered, setIsContainerHovered] = useState(false);
const scrollContainerRef = React.useRef<HTMLDivElement>(null);
const { submitMessage } = useSubmitMessage();
const handleScroll = React.useCallback(() => {
if (!scrollContainerRef.current) return;
@ -111,9 +114,7 @@ const UIResourceCarousel: React.FC<UIResourceCarouselProps> = React.memo(({ uiRe
mimeType: uiResource.mimeType,
text: uiResource.text,
}}
onUIAction={async (result) => {
console.log('Action:', result);
}}
onUIAction={async (result) => handleUIAction(result, submitMessage)}
htmlProps={{
autoResizeIframe: { width: true, height: true },
}}