Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-21 02:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🔧 feat: Initial MCP Support (Tools) (#5015)

Browse source 
* 📝 chore: Add comment to clarify purpose of check_updates.sh script

* feat: mcp package

* feat: add librechat-mcp package and update dependencies

* feat: refactor MCPConnectionSingleton to handle transport initialization and connection management

* feat: change private methods to public in MCPConnectionSingleton for improved accessibility

* feat: filesystem demo

* chore: everything demo and move everything under mcp workspace

* chore: move ts-node to mcp workspace

* feat: mcp examples

* feat: working sse MCP example

* refactor: rename MCPConnectionSingleton to MCPConnection for clarity

* refactor: replace MCPConnectionSingleton with MCPConnection for consistency

* refactor: manager/connections

* refactor: update MCPConnection to use type definitions from mcp types

* refactor: update MCPManager to use winston logger and enhance server initialization

* refactor: share logger between connections and manager

* refactor: add schema definitions and update MCPManager to accept logger parameter

* feat: map available MCP tools

* feat: load manifest tools

* feat: add MCP tools delimiter constant and update plugin key generation

* feat: call MCP tools

* feat: update librechat-data-provider version to 0.7.63 and enhance StdioOptionsSchema with additional properties

* refactor: simplify typing

* chore: update types/packages

* feat: MCP Tool Content parsing

* chore: update dependencies and improve package configurations

* feat: add 'mcp' directory to package and update configurations

* refactor: return CONTENT_AND_ARTIFACT format for MCP callTool

* chore: bump @librechat/agents

* WIP: MCP artifacts

* chore: bump @librechat/agents to v1.8.7

* fix: ensure filename has extension when saving base64 image

* fix: move base64 buffer conversion before filename extension check

* chore: update backend review workflow to install MCP package

* fix: use correct `mime` method

* fix: enhance file metadata with message and tool call IDs in image saving process

* fix: refactor ToolCall component to handle MCP tool calls and improve domain extraction

* fix: update ToolItem component for default isInstalled value and improve localization in ToolSelectDialog

* fix: update ToolItem component to use consistent text color for tool description

* style: add theming to ToolSelectDialog

* fix: improve domain extraction logic in ToolCall component

* refactor: conversation item theming, fix rename UI bug, optimize props, add missing types

* feat: enhance MCP options schema with base options (iconPath to start) and make transport type optional, infer based on other option fields

* fix: improve reconnection logic with parallel init and exponential backoff and enhance transport debug logging

* refactor: improve logging format

* refactor: improve logging of available tools by displaying tool names

* refactor: improve reconnection/connection logic

* feat: add MCP package build process to Dockerfile

* feat: add fallback icon for tools without an image in ToolItem component

* feat: Assistants Support for MCP Tools

* fix(build): configure rollup to use output.dir for dynamic imports

* chore: update @librechat/agents to version 1.8.8 and add @langchain/anthropic dependency

* fix: update CONFIG_VERSION to 1.2.0
This commit is contained in:
Danny Avila 2024-12-17 13:12:57 -05:00 • committed by GitHub
parent 0a97ad3915
commit e391347b9e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
58 changed files with 4322 additions and 234 deletions
Download patch file Download diff file Expand all files Collapse all files

29
client/src/components/Chat/Messages/Content/ToolCall.tsx
View file

@ -35,8 +35,30 @@ export default function ToolCall({
const circumference = 2 * Math.PI * radius;
const offset = circumference - progress * circumference;
const [function_name, _domain] = name.split(actionDelimiter) as [string, string | undefined];
const domain = _domain?.replaceAll(actionDomainSeparator, '.') ?? null;
const { function_name, domain, isMCPToolCall } = useMemo(() => {
if (typeof name !== 'string') {
return { function_name: '', domain: null, isMCPToolCall: false };
}
if (name.includes(Constants.mcp_delimiter)) {
const [func, server] = name.split(Constants.mcp_delimiter);
return {
function_name: func || '',
domain: server && (server.replaceAll(actionDomainSeparator, '.') || null),
isMCPToolCall: true,
};
}
const [func, _domain] = name.includes(actionDelimiter)
? name.split(actionDelimiter)
: [name, ''];
return {
function_name: func || '',
domain: _domain && (_domain.replaceAll(actionDomainSeparator, '.') || null),
isMCPToolCall: false,
};
}, [name]);
const error =
typeof output === 'string' && output.toLowerCase().includes('error processing tool');
@ -83,6 +105,9 @@ export default function ToolCall({
};
const getFinishedText = () => {
if (isMCPToolCall === true) {
return localize('com_assistants_completed_function', function_name);
}
if (domain != null && domain && domain.length !== Constants.ENCODED_DOMAIN_LENGTH) {
return localize('com_assistants_completed_action', domain);
}

139
client/src/components/Conversations/Convo.tsx
View file

@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef, useMemo } from 'react';
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { useRecoilValue } from 'recoil';
import { Check, X } from 'lucide-react';
import { useParams } from 'react-router-dom';
@ -6,7 +6,7 @@ import { Constants } from 'librechat-data-provider';
import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
import type { MouseEvent, FocusEvent, KeyboardEvent } from 'react';
import type { TConversation } from 'librechat-data-provider';
import { useConversations, useNavigateToConvo, useMediaQuery } from '~/hooks';
import { useConversations, useNavigateToConvo, useMediaQuery, useLocalize } from '~/hooks';
import { useUpdateConversationMutation } from '~/data-provider';
import EndpointIcon from '~/components/Endpoints/EndpointIcon';
import { NotificationSeverity } from '~/common';
@ -14,7 +14,6 @@ import { useToastContext } from '~/Providers';
import { ConvoOptions } from './ConvoOptions';
import { cn } from '~/utils';
import store from '~/store';
import { useLocalize } from '~/hooks'
type KeyEvent = KeyboardEvent<HTMLInputElement>;
@ -71,11 +70,11 @@ export default function Conversation({
);
};
const renameHandler: (e: MouseEvent<HTMLButtonElement>) => void = () => {
const renameHandler = useCallback(() => {
setIsPopoverActive(false);
setTitleInput(title);
setRenaming(true);
};
}, [title]);
useEffect(() => {
if (renaming && inputRef.current) {
@ -83,64 +82,76 @@ export default function Conversation({
}
}, [renaming]);
const onRename = (e: MouseEvent<HTMLButtonElement> | FocusEvent<HTMLInputElement> | KeyEvent) => {
e.preventDefault();
setRenaming(false);
if (titleInput === title) {
return;
}
if (typeof conversationId !== 'string' || conversationId === '') {
return;
}
const onRename = useCallback(
(e: MouseEvent<HTMLButtonElement> | FocusEvent<HTMLInputElement> | KeyEvent) => {
e.preventDefault();
setRenaming(false);
if (titleInput === title) {
return;
}
if (typeof conversationId !== 'string' || conversationId === '') {
return;
}
updateConvoMutation.mutate(
{ conversationId, title: titleInput ?? '' },
{
onSuccess: () => refreshConversations(),
onError: () => {
setTitleInput(title);
showToast({
message: 'Failed to rename conversation',
severity: NotificationSeverity.ERROR,
showIcon: true,
});
updateConvoMutation.mutate(
{ conversationId, title: titleInput ?? '' },
{
onSuccess: () => refreshConversations(),
onError: () => {
setTitleInput(title);
showToast({
message: 'Failed to rename conversation',
severity: NotificationSeverity.ERROR,
showIcon: true,
});
},
},
},
);
};
);
},
[title, titleInput, conversationId, showToast, refreshConversations, updateConvoMutation],
);
const handleKeyDown = (e: KeyEvent) => {
if (e.key === 'Escape') {
const handleKeyDown = useCallback(
(e: KeyEvent) => {
if (e.key === 'Escape') {
setTitleInput(title);
setRenaming(false);
} else if (e.key === 'Enter') {
onRename(e);
}
},
[title, onRename],
);
const cancelRename = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
setTitleInput(title);
setRenaming(false);
} else if (e.key === 'Enter') {
onRename(e);
}
};
},
[title],
);
const cancelRename = (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
setTitleInput(title);
setRenaming(false);
};
const isActiveConvo: boolean =
currentConvoId === conversationId ||
(isLatestConvo &&
currentConvoId === 'new' &&
activeConvos[0] != null &&
activeConvos[0] !== 'new');
const isActiveConvo: boolean = useMemo(
() =>
currentConvoId === conversationId ||
(isLatestConvo &&
currentConvoId === 'new' &&
activeConvos[0] != null &&
activeConvos[0] !== 'new'),
[currentConvoId, conversationId, isLatestConvo, activeConvos],
);
return (
<div
className={cn(
'group relative mt-2 flex h-9 w-full items-center rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700',
isActiveConvo ? 'bg-gray-200 dark:bg-gray-700' : '',
'group relative mt-2 flex h-9 w-full items-center rounded-lg hover:bg-surface-active-alt',
isActiveConvo ? 'bg-surface-active-alt' : '',
isSmallScreen ? 'h-12' : '',
)}
>
{renaming ? (
<div className="absolute inset-0 z-20 flex w-full items-center rounded-lg bg-gray-200 p-1.5 dark:bg-gray-700">
<div className="absolute inset-0 z-20 flex w-full items-center rounded-lg bg-surface-active-alt p-1.5">
<input
ref={inputRef}
type="text"
@ -151,11 +162,23 @@ export default function Conversation({
aria-label={`${localize('com_ui_rename')} ${localize('com_ui_chat')}`}
/>
<div className="flex gap-1">
<button onClick={cancelRename} aria-label={`${localize('com_ui_cancel')} ${localize('com_ui_rename')}`}>
<X aria-hidden={true} className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
<button
onClick={cancelRename}
aria-label={`${localize('com_ui_cancel')} ${localize('com_ui_rename')}`}
>
<X
aria-hidden={true}
className="h-4 w-4 transition-colors duration-200 ease-in-out hover:opacity-70"
/>
</button>
<button onClick={onRename} aria-label={`${localize('com_ui_submit')} ${localize('com_ui_rename')}`}>
<Check aria-hidden={true} className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
<button
onClick={onRename}
aria-label={`${localize('com_ui_submit')} ${localize('com_ui_rename')}`}
>
<Check
aria-hidden={true}
className="h-4 w-4 transition-colors duration-200 ease-in-out hover:opacity-70"
/>
</button>
</div>
</div>
@ -166,7 +189,7 @@ export default function Conversation({
onClick={clickHandler}
className={cn(
'flex grow cursor-pointer items-center gap-2 overflow-hidden whitespace-nowrap break-all rounded-lg px-2 py-2',
isActiveConvo ? 'bg-gray-200 dark:bg-gray-700' : '',
isActiveConvo ? 'bg-surface-active-alt' : '',
)}
title={title ?? ''}
>
@ -180,7 +203,7 @@ export default function Conversation({
{isActiveConvo ? (
<div className="absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l" />
) : (
<div className="absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:from-gray-200 group-hover:from-40% dark:from-gray-850 dark:group-hover:from-gray-700" />
<div className="absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l from-surface-primary-alt from-0% to-transparent group-hover:from-surface-active-alt group-hover:from-40%" />
)}
</a>
)}
@ -193,12 +216,14 @@ export default function Conversation({
)}
>
<ConvoOptions
conversation={conversation}
title={title}
renaming={renaming}
retainView={retainView}
renameHandler={renameHandler}
isActiveConvo={isActiveConvo}
conversationId={conversationId}
isPopoverActive={isPopoverActive}
setIsPopoverActive={setIsPopoverActive}
isActiveConvo={isActiveConvo}
/>
</div>
</div>

24
client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
View file

@ -2,6 +2,7 @@ import { useState, useId } from 'react';
import * as Ariakit from '@ariakit/react';
import { Ellipsis, Share2, Archive, Pen, Trash } from 'lucide-react';
import { useGetStartupConfig } from 'librechat-data-provider/react-query';
import type { MouseEvent } from 'react';
import { useLocalize, useArchiveHandler } from '~/hooks';
import { DropdownPopup } from '~/components/ui';
import DeleteButton from './DeleteButton';
@ -9,16 +10,26 @@ import ShareButton from './ShareButton';
import { cn } from '~/utils';
export default function ConvoOptions({
conversation,
conversationId,
title,
renaming,
retainView,
renameHandler,
isPopoverActive,
setIsPopoverActive,
isActiveConvo,
}: {
conversationId: string | null;
title: string | null;
renaming: boolean;
retainView: () => void;
renameHandler: (e: MouseEvent) => void;
isPopoverActive: boolean;
setIsPopoverActive: React.Dispatch<React.SetStateAction<boolean>>;
isActiveConvo: boolean;
}) {
const localize = useLocalize();
const { data: startupConfig } = useGetStartupConfig();
const { conversationId, title } = conversation;
const [showShareDialog, setShowShareDialog] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const archiveHandler = useArchiveHandler(conversationId, true, retainView);
@ -73,6 +84,7 @@ export default function ConvoOptions({
isActiveConvo === true
? 'opacity-100'
: 'opacity-0 focus:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 data-[open]:opacity-100',
renaming === true ? 'pointer-events-none opacity-0' : '',
)}
>
<Ellipsis className="icon-md text-text-secondary" aria-hidden={true} />
@ -83,17 +95,17 @@ export default function ConvoOptions({
/>
{showShareDialog && (
<ShareButton
conversationId={conversationId}
title={title}
title={title ?? ''}
conversationId={conversationId ?? ''}
showShareDialog={showShareDialog}
setShowShareDialog={setShowShareDialog}
/>
)}
{showDeleteDialog && (
<DeleteButton
conversationId={conversationId}
title={title ?? ''}
retainView={retainView}
title={title}
conversationId={conversationId ?? ''}
showDeleteDialog={showDeleteDialog}
setShowDeleteDialog={setShowDeleteDialog}
/>

28
client/src/components/Tools/ToolItem.tsx
View file

@ -1,5 +1,5 @@
import { TPlugin } from 'librechat-data-provider';
import { XCircle, PlusCircleIcon } from 'lucide-react';
import { XCircle, PlusCircleIcon, Wrench } from 'lucide-react';
import { useLocalize } from '~/hooks';
type ToolItemProps = {
@ -9,7 +9,7 @@ type ToolItemProps = {
isInstalled?: boolean;
};
function ToolItem({ tool, onAddTool, onRemoveTool, isInstalled }: ToolItemProps) {
function ToolItem({ tool, onAddTool, onRemoveTool, isInstalled = false }: ToolItemProps) {
const localize = useLocalize();
const handleClick = () => {
if (isInstalled) {
@ -20,20 +20,26 @@ function ToolItem({ tool, onAddTool, onRemoveTool, isInstalled }: ToolItemProps)
};
return (
<div className="flex flex-col gap-4 rounded border border-black/10 bg-white p-6 dark:border-white/20 dark:bg-gray-800">
<div className="flex flex-col gap-4 rounded border border-border-medium bg-transparent p-6">
<div className="flex gap-4">
<div className="h-[70px] w-[70px] shrink-0">
<div className="relative h-full w-full">
<img
src={tool.icon}
alt={`${tool.name} logo`}
className="h-full w-full rounded-[5px] bg-white"
/>
{tool.icon != null && tool.icon ? (
<img
src={tool.icon}
alt={localize('com_ui_logo', tool.name)}
className="h-full w-full rounded-[5px] bg-white"
/>
) : (
<div className="flex h-full w-full items-center justify-center rounded-[5px] border border-border-medium bg-transparent">
<Wrench className="h-8 w-8 text-text-secondary" />
</div>
)}
<div className="absolute inset-0 rounded-[5px] ring-1 ring-inset ring-black/10"></div>
</div>
</div>
<div className="flex min-w-0 flex-col items-start justify-between">
<div className="mb-2 line-clamp-1 max-w-full text-lg leading-5 text-gray-700/80 dark:text-gray-50">
<div className="mb-2 line-clamp-1 max-w-full text-lg leading-5 text-text-primary">
{tool.name}
</div>
{!isInstalled ? (
@ -61,9 +67,7 @@ function ToolItem({ tool, onAddTool, onRemoveTool, isInstalled }: ToolItemProps)
)}
</div>
</div>
<div className="line-clamp-3 h-[60px] text-sm text-gray-700/70 dark:text-gray-50/70">
{tool.description}
</div>
<div className="line-clamp-3 h-[60px] text-sm text-text-secondary">{tool.description}</div>
</div>
);
}

18
client/src/components/Tools/ToolSelectDialog.tsx
View file

@ -151,22 +151,22 @@ function ToolSelectDialog({
className="relative z-[102]"
>
{/* The backdrop, rendered as a fixed sibling to the panel container */}
<div className="fixed inset-0 bg-gray-600/65 transition-opacity dark:bg-black/80" />
<div className="fixed inset-0 bg-surface-primary opacity-60 transition-opacity dark:opacity-80" />
{/* Full-screen container to center the panel */}
<div className="fixed inset-0 flex items-center justify-center p-4">
<DialogPanel
className="relative w-full transform overflow-hidden overflow-y-auto rounded-lg bg-white text-left shadow-xl transition-all dark:bg-gray-800 max-sm:h-full sm:mx-7 sm:my-8 sm:max-w-2xl lg:max-w-5xl xl:max-w-7xl"
className="relative w-full transform overflow-hidden overflow-y-auto rounded-lg bg-surface-secondary text-left shadow-xl transition-all max-sm:h-full sm:mx-7 sm:my-8 sm:max-w-2xl lg:max-w-5xl xl:max-w-7xl"
style={{ minHeight: '610px' }}
>
<div className="flex items-center justify-between border-b-[1px] border-black/10 px-4 pb-4 pt-5 dark:border-white/10 sm:p-6">
<div className="flex items-center justify-between border-b-[1px] border-border-medium px-4 pb-4 pt-5 sm:p-6">
<div className="flex items-center">
<div className="text-center sm:text-left">
<DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
<DialogTitle className="text-lg font-medium leading-6 text-text-primary">
{isAgentTools
? localize('com_nav_tool_dialog_agents')
: localize('com_nav_tool_dialog')}
</DialogTitle>
<Description className="text-sm text-gray-500 dark:text-gray-300">
<Description className="text-sm text-text-secondary">
{localize('com_nav_tool_dialog_description')}
</Description>
</div>
@ -178,7 +178,7 @@ function ToolSelectDialog({
setIsOpen(false);
setCurrentPage(1);
}}
className="inline-block text-gray-500 hover:text-gray-200"
className="inline-block text-text-tertiary hover:text-text-secondary"
tabIndex={0}
>
<X />
@ -206,13 +206,13 @@ function ToolSelectDialog({
<div className="p-4 sm:p-6 sm:pt-4">
<div className="mt-4 flex flex-col gap-4">
<div className="flex items-center justify-center space-x-4">
<Search className="h-6 w-6 text-gray-500" />
<Search className="h-6 w-6 text-text-tertiary" />
<input
type="text"
value={searchValue}
onChange={handleSearch}
placeholder={localize('com_nav_plugin_search')}
className="w-64 rounded border border-gray-300 px-2 py-1 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
placeholder={localize('com_nav_tool_search')}
className="w-64 rounded border border-border-medium bg-transparent px-2 py-1 text-text-primary focus:outline-none"
/>
</div>
<div

4
client/src/components/ui/DropdownPopup.tsx
View file

@ -6,7 +6,7 @@ interface DropdownProps {
trigger: React.ReactNode;
items: {
label?: string;
onClick?: () => void;
onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
icon?: React.ReactNode;
kbd?: string;
show?: boolean;
@ -69,7 +69,7 @@ const DropdownPopup: React.FC<DropdownProps> = ({
onClick={(event) => {
event.preventDefault();
if (item.onClick) {
item.onClick();
item.onClick(event);
}
menu.hide();
}}

12
client/src/hooks/Conversations/useArchiveHandler.ts
View file

@ -8,7 +8,7 @@ import useLocalize from '../useLocalize';
import useNewConvo from '../useNewConvo';
export default function useArchiveHandler(
conversationId: string,
conversationId: string | null,
shouldArchive: boolean,
retainView: () => void,
) {
@ -19,18 +19,22 @@ export default function useArchiveHandler(
const { refreshConversations } = useConversations();
const { conversationId: currentConvoId } = useParams();
const archiveConvoMutation = useArchiveConversationMutation(conversationId);
const archiveConvoMutation = useArchiveConversationMutation(conversationId ?? '');
return async (e?: MouseEvent | FocusEvent | KeyboardEvent) => {
if (e) {
e.preventDefault();
}
const convoId = conversationId ?? '';
if (!convoId) {
return;
}
const label = shouldArchive ? 'archive' : 'unarchive';
archiveConvoMutation.mutate(
{ conversationId, isArchived: shouldArchive },
{ conversationId: convoId, isArchived: shouldArchive },
{
onSuccess: () => {
if (currentConvoId === conversationId || currentConvoId === 'new') {
if (currentConvoId === convoId || currentConvoId === 'new') {
newConversation();
navigate('/c/new', { replace: true });
}

2
client/src/style.css
View file

@ -48,6 +48,7 @@ html {
--header-hover: var(--gray-50);
--header-button-hover: var(--gray-50);
--surface-active: var(--gray-100);
--surface-active-alt: var(--gray-200);
--surface-hover: var(--gray-200);
--surface-primary: var(--white);
--surface-primary-alt: var(--gray-50);
@ -99,6 +100,7 @@ html {
--header-hover: var(--gray-600);
--header-button-hover: var(--gray-700);
--surface-active: var(--gray-500);
--surface-active-alt: var(--gray-700);
--surface-hover: var(--gray-600);
--surface-primary: var(--gray-900);
--surface-primary-alt: var(--gray-850);