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

* 📝 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

client/src/components/Tools/ToolItem.tsx

@@ -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>
   );
 }