Merge pull request #1839 from roaminro/feature/mcp

feat(mcp): add Model Context Protocol integration

app/components/@settings/core/ControlPanel.tsx

@@ -25,6 +25,7 @@ import ConnectionsTab from '~/components/@settings/tabs/connections/ConnectionsT
 import CloudProvidersTab from '~/components/@settings/tabs/providers/cloud/CloudProvidersTab';
 import ServiceStatusTab from '~/components/@settings/tabs/providers/status/ServiceStatusTab';
 import LocalProvidersTab from '~/components/@settings/tabs/providers/local/LocalProvidersTab';
+import McpTab from '~/components/@settings/tabs/mcp/McpTab';
 
 interface ControlPanelProps {
   open: boolean;
@@ -32,7 +33,7 @@ interface ControlPanelProps {
 }
 
 // Beta status for experimental features
-const BETA_TABS = new Set<TabType>(['service-status', 'local-providers']);
+const BETA_TABS = new Set<TabType>(['service-status', 'local-providers', 'mcp']);
 
 const BetaLabel = () => (
   <div className="absolute top-2 right-2 px-1.5 py-0.5 rounded-full bg-purple-500/10 dark:bg-purple-500/20">
@@ -139,6 +140,8 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
         return <EventLogsTab />;
       case 'service-status':
         return <ServiceStatusTab />;
+      case 'mcp':
+        return <McpTab />;
       default:
         return null;
     }

app/components/@settings/core/constants.ts

@@ -11,6 +11,7 @@ export const TAB_ICONS: Record<TabType, string> = {
   'service-status': 'i-ph:activity-bold',
   connection: 'i-ph:wifi-high',
   'event-logs': 'i-ph:list-bullets',
+  mcp: 'i-ph:wrench',
 };
 
 export const TAB_LABELS: Record<TabType, string> = {
@@ -24,6 +25,7 @@ export const TAB_LABELS: Record<TabType, string> = {
   'service-status': 'Service Status',
   connection: 'Connection',
   'event-logs': 'Event Logs',
+  mcp: 'MCP Servers',
 };
 
 export const TAB_DESCRIPTIONS: Record<TabType, string> = {
@@ -37,6 +39,7 @@ export const TAB_DESCRIPTIONS: Record<TabType, string> = {
   'service-status': 'Monitor cloud LLM service status',
   connection: 'Check connection status and settings',
   'event-logs': 'View system events and logs',
+  mcp: 'Configure MCP (Model Context Protocol) servers',
 };
 
 export const DEFAULT_TAB_CONFIG = [
@@ -48,9 +51,10 @@ export const DEFAULT_TAB_CONFIG = [
   { id: 'connection', visible: true, window: 'user' as const, order: 4 },
   { id: 'notifications', visible: true, window: 'user' as const, order: 5 },
   { id: 'event-logs', visible: true, window: 'user' as const, order: 6 },
+  { id: 'mcp', visible: true, window: 'user' as const, order: 7 },
+  { id: 'profile', visible: true, window: 'user' as const, order: 8 },
+  { id: 'service-status', visible: true, window: 'user' as const, order: 9 },
+  { id: 'settings', visible: true, window: 'user' as const, order: 10 },
 
   // User Window Tabs (In dropdown, initially hidden)
-  { id: 'profile', visible: true, window: 'user' as const, order: 7 },
-  { id: 'service-status', visible: true, window: 'user' as const, order: 8 },
-  { id: 'settings', visible: true, window: 'user' as const, order: 9 },
 ];

app/components/@settings/core/types.ts

@@ -12,7 +12,8 @@ export type TabType =
   | 'local-providers'
   | 'service-status'
   | 'connection'
-  | 'event-logs';
+  | 'event-logs'
+  | 'mcp';
 
 export type WindowType = 'user' | 'developer';
 
@@ -72,6 +73,7 @@ export const TAB_LABELS: Record<TabType, string> = {
   'service-status': 'Service Status',
   connection: 'Connections',
   'event-logs': 'Event Logs',
+  mcp: 'MCP Servers',
 };
 
 export const categoryLabels: Record<SettingCategory, string> = {

app/components/@settings/tabs/mcp/McpServerList.tsx

@@ -0,0 +1,99 @@
+import type { MCPServer } from '~/lib/services/mcpService';
+import McpStatusBadge from '~/components/@settings/tabs/mcp/McpStatusBadge';
+import McpServerListItem from '~/components/@settings/tabs/mcp/McpServerListItem';
+
+type McpServerListProps = {
+  serverEntries: [string, MCPServer][];
+  expandedServer: string | null;
+  checkingServers: boolean;
+  onlyShowAvailableServers?: boolean;
+  toggleServerExpanded: (serverName: string) => void;
+};
+
+export default function McpServerList({
+  serverEntries,
+  expandedServer,
+  checkingServers,
+  onlyShowAvailableServers = false,
+  toggleServerExpanded,
+}: McpServerListProps) {
+  if (serverEntries.length === 0) {
+    return <p className="text-sm text-bolt-elements-textSecondary">No MCP servers configured</p>;
+  }
+
+  const filteredEntries = onlyShowAvailableServers
+    ? serverEntries.filter(([, s]) => s.status === 'available')
+    : serverEntries;
+
+  return (
+    <div className="space-y-2">
+      {filteredEntries.map(([serverName, mcpServer]) => {
+        const isAvailable = mcpServer.status === 'available';
+        const isExpanded = expandedServer === serverName;
+        const serverTools = isAvailable ? Object.entries(mcpServer.tools) : [];
+
+        return (
+          <div key={serverName} className="flex flex-col p-2 rounded-md bg-bolt-elements-background-depth-1">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2 min-w-0 flex-1">
+                <div
+                  onClick={() => toggleServerExpanded(serverName)}
+                  className="flex items-center gap-1.5 text-bolt-elements-textPrimary"
+                  aria-expanded={isExpanded}
+                >
+                  <div
+                    className={`i-ph:${isExpanded ? 'caret-down' : 'caret-right'} w-3 h-3 transition-transform duration-150`}
+                  />
+                  <span className="font-medium truncate text-left">{serverName}</span>
+                </div>
+
+                <div className="flex-1 min-w-0 truncate">
+                  {mcpServer.config.type === 'sse' || mcpServer.config.type === 'streamable-http' ? (
+                    <span className="text-xs text-bolt-elements-textSecondary truncate">{mcpServer.config.url}</span>
+                  ) : (
+                    <span className="text-xs text-bolt-elements-textSecondary truncate">
+                      {mcpServer.config.command} {mcpServer.config.args?.join(' ')}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <div className="ml-2 flex-shrink-0">
+                {checkingServers ? (
+                  <McpStatusBadge status="checking" />
+                ) : (
+                  <McpStatusBadge status={isAvailable ? 'available' : 'unavailable'} />
+                )}
+              </div>
+            </div>
+
+            {/* Error message */}
+            {!isAvailable && mcpServer.error && (
+              <div className="mt-1.5 ml-6 text-xs text-red-600 dark:text-red-400">Error: {mcpServer.error}</div>
+            )}
+
+            {/* Tool list */}
+            {isExpanded && isAvailable && (
+              <div className="mt-2">
+                <div className="text-bolt-elements-textSecondary text-xs font-medium ml-1 mb-1.5">Available Tools:</div>
+                {serverTools.length === 0 ? (
+                  <div className="ml-4 text-xs text-bolt-elements-textSecondary">No tools available</div>
+                ) : (
+                  <div className="mt-1 space-y-2">
+                    {serverTools.map(([toolName, toolSchema]) => (
+                      <McpServerListItem
+                        key={`${serverName}-${toolName}`}
+                        toolName={toolName}
+                        toolSchema={toolSchema}
+                      />
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

app/components/@settings/tabs/mcp/McpServerListItem.tsx

@@ -0,0 +1,70 @@
+import type { Tool } from 'ai';
+
+type ParameterProperty = {
+  type?: string;
+  description?: string;
+};
+
+type ToolParameters = {
+  jsonSchema: {
+    properties?: Record<string, ParameterProperty>;
+    required?: string[];
+  };
+};
+
+type McpToolProps = {
+  toolName: string;
+  toolSchema: Tool;
+};
+
+export default function McpServerListItem({ toolName, toolSchema }: McpToolProps) {
+  if (!toolSchema) {
+    return null;
+  }
+
+  const parameters = (toolSchema.parameters as ToolParameters)?.jsonSchema.properties || {};
+  const requiredParams = (toolSchema.parameters as ToolParameters)?.jsonSchema.required || [];
+
+  return (
+    <div className="mt-2 ml-4 p-3 rounded-md bg-bolt-elements-background-depth-2 text-xs">
+      <div className="flex flex-col gap-1.5">
+        <h3 className="text-bolt-elements-textPrimary font-semibold truncate" title={toolName}>
+          {toolName}
+        </h3>
+
+        <p className="text-bolt-elements-textSecondary">{toolSchema.description || 'No description available'}</p>
+
+        {Object.keys(parameters).length > 0 && (
+          <div className="mt-2.5">
+            <h4 className="text-bolt-elements-textSecondary font-semibold mb-1.5">Parameters:</h4>
+            <ul className="ml-1 space-y-2">
+              {Object.entries(parameters).map(([paramName, paramDetails]) => (
+                <li key={paramName} className="break-words">
+                  <div className="flex items-start">
+                    <span className="font-medium text-bolt-elements-textPrimary">
+                      {paramName}
+                      {requiredParams.includes(paramName) && (
+                        <span className="text-red-600 dark:text-red-400 ml-1">*</span>
+                      )}
+                    </span>
+
+                    <span className="mx-2 text-bolt-elements-textSecondary">•</span>
+
+                    <div className="flex-1">
+                      {paramDetails.type && (
+                        <span className="text-bolt-elements-textSecondary italic">{paramDetails.type}</span>
+                      )}
+                      {paramDetails.description && (
+                        <div className="mt-0.5 text-bolt-elements-textSecondary">{paramDetails.description}</div>
+                      )}
+                    </div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

app/components/@settings/tabs/mcp/McpStatusBadge.tsx

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+
+export default function McpStatusBadge({ status }: { status: 'checking' | 'available' | 'unavailable' }) {
+  const { styles, label, icon, ariaLabel } = useMemo(() => {
+    const base = 'px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1 transition-colors';
+
+    const config = {
+      checking: {
+        styles: `${base} bg-blue-100 text-blue-800 dark:bg-blue-900/80 dark:text-blue-200`,
+        label: 'Checking...',
+        ariaLabel: 'Checking server status',
+        icon: <span className="i-svg-spinners:90-ring-with-bg w-3 h-3 text-current animate-spin" aria-hidden="true" />,
+      },
+      available: {
+        styles: `${base} bg-green-100 text-green-800 dark:bg-green-900/80 dark:text-green-200`,
+        label: 'Available',
+        ariaLabel: 'Server available',
+        icon: <span className="i-ph:check-circle w-3 h-3 text-current" aria-hidden="true" />,
+      },
+      unavailable: {
+        styles: `${base} bg-red-100 text-red-800 dark:bg-red-900/80 dark:text-red-200`,
+        label: 'Unavailable',
+        ariaLabel: 'Server unavailable',
+        icon: <span className="i-ph:warning-circle w-3 h-3 text-current" aria-hidden="true" />,
+      },
+    };
+
+    return config[status];
+  }, [status]);
+
+  return (
+    <span className={styles} role="status" aria-live="polite" aria-label={ariaLabel}>
+      {icon}
+      {label}
+    </span>
+  );
+}

app/components/@settings/tabs/mcp/McpTab.tsx

@@ -0,0 +1,239 @@
+import { useEffect, useMemo, useState } from 'react';
+import { classNames } from '~/utils/classNames';
+import type { MCPConfig } from '~/lib/services/mcpService';
+import { toast } from 'react-toastify';
+import { useMCPStore } from '~/lib/stores/mcp';
+import McpServerList from '~/components/@settings/tabs/mcp/McpServerList';
+
+const EXAMPLE_MCP_CONFIG: MCPConfig = {
+  mcpServers: {
+    everything: {
+      type: 'stdio',
+      command: 'npx',
+      args: ['-y', '@modelcontextprotocol/server-everything'],
+    },
+    deepwiki: {
+      type: 'streamable-http',
+      url: 'https://mcp.deepwiki.com/mcp',
+    },
+    'local-sse': {
+      type: 'sse',
+      url: 'http://localhost:8000/sse',
+      headers: {
+        Authorization: 'Bearer mytoken123',
+      },
+    },
+  },
+};
+
+export default function McpTab() {
+  const settings = useMCPStore((state) => state.settings);
+  const isInitialized = useMCPStore((state) => state.isInitialized);
+  const serverTools = useMCPStore((state) => state.serverTools);
+  const initialize = useMCPStore((state) => state.initialize);
+  const updateSettings = useMCPStore((state) => state.updateSettings);
+  const checkServersAvailabilities = useMCPStore((state) => state.checkServersAvailabilities);
+
+  const [isSaving, setIsSaving] = useState(false);
+  const [mcpConfigText, setMCPConfigText] = useState('');
+  const [maxLLMSteps, setMaxLLMSteps] = useState(1);
+  const [error, setError] = useState<string | null>(null);
+  const [isCheckingServers, setIsCheckingServers] = useState(false);
+  const [expandedServer, setExpandedServer] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isInitialized) {
+      initialize().catch((err) => {
+        setError(`Failed to initialize MCP settings: ${err instanceof Error ? err.message : String(err)}`);
+        toast.error('Failed to load MCP configuration');
+      });
+    }
+  }, [isInitialized]);
+
+  useEffect(() => {
+    setMCPConfigText(JSON.stringify(settings.mcpConfig, null, 2));
+    setMaxLLMSteps(settings.maxLLMSteps);
+    setError(null);
+  }, [settings]);
+
+  const parsedConfig = useMemo(() => {
+    try {
+      setError(null);
+      return JSON.parse(mcpConfigText) as MCPConfig;
+    } catch (e) {
+      setError(`Invalid JSON format: ${e instanceof Error ? e.message : String(e)}`);
+      return null;
+    }
+  }, [mcpConfigText]);
+
+  const handleMaxLLMCallChange = (value: string) => {
+    setMaxLLMSteps(parseInt(value, 10));
+  };
+
+  const handleSave = async () => {
+    if (!parsedConfig) {
+      return;
+    }
+
+    setIsSaving(true);
+
+    try {
+      await updateSettings({
+        mcpConfig: parsedConfig,
+        maxLLMSteps,
+      });
+      toast.success('MCP configuration saved');
+
+      setError(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to save configuration');
+      toast.error('Failed to save MCP configuration');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleLoadExample = () => {
+    setMCPConfigText(JSON.stringify(EXAMPLE_MCP_CONFIG, null, 2));
+    setError(null);
+  };
+
+  const checkServerAvailability = async () => {
+    if (serverEntries.length === 0) {
+      return;
+    }
+
+    setIsCheckingServers(true);
+    setError(null);
+
+    try {
+      await checkServersAvailabilities();
+    } catch (e) {
+      setError(`Failed to check server availability: ${e instanceof Error ? e.message : String(e)}`);
+    } finally {
+      setIsCheckingServers(false);
+    }
+  };
+
+  const toggleServerExpanded = (serverName: string) => {
+    setExpandedServer(expandedServer === serverName ? null : serverName);
+  };
+
+  const serverEntries = useMemo(() => Object.entries(serverTools), [serverTools]);
+
+  return (
+    <div className="max-w-2xl mx-auto space-y-6">
+      <section aria-labelledby="server-status-heading">
+        <div className="flex justify-between items-center mb-3">
+          <h2 className="text-base font-medium text-bolt-elements-textPrimary">MCP Servers Configured</h2>{' '}
+          <button
+            onClick={checkServerAvailability}
+            disabled={isCheckingServers || !parsedConfig || serverEntries.length === 0}
+            className={classNames(
+              'px-3 py-1.5 rounded-lg text-sm',
+              'bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4',
+              'text-bolt-elements-textPrimary',
+              'transition-all duration-200',
+              'flex items-center gap-2',
+              'disabled:opacity-50 disabled:cursor-not-allowed',
+            )}
+          >
+            {isCheckingServers ? (
+              <div className="i-svg-spinners:90-ring-with-bg w-3 h-3 text-bolt-elements-loader-progress animate-spin" />
+            ) : (
+              <div className="i-ph:arrow-counter-clockwise w-3 h-3" />
+            )}
+            Check availability
+          </button>
+        </div>
+        <McpServerList
+          checkingServers={isCheckingServers}
+          expandedServer={expandedServer}
+          serverEntries={serverEntries}
+          toggleServerExpanded={toggleServerExpanded}
+        />
+      </section>
+
+      <section aria-labelledby="config-section-heading">
+        <h2 className="text-base font-medium text-bolt-elements-textPrimary mb-3">Configuration</h2>
+
+        <div className="space-y-4">
+          <div>
+            <label htmlFor="mcp-config" className="block text-sm text-bolt-elements-textSecondary mb-2">
+              Configuration JSON
+            </label>
+            <textarea
+              id="mcp-config"
+              value={mcpConfigText}
+              onChange={(e) => setMCPConfigText(e.target.value)}
+              className={classNames(
+                'w-full px-3 py-2 rounded-lg text-sm font-mono h-72',
+                'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
+                'border',
+                error ? 'border-bolt-elements-icon-error' : 'border-[#E5E5E5] dark:border-[#333333]',
+                'text-bolt-elements-textPrimary',
+                'focus:outline-none focus:ring-1 focus:ring-bolt-elements-focus',
+              )}
+            />
+          </div>
+          <div>{error && <p className="mt-2 mb-2 text-sm text-bolt-elements-icon-error">{error}</p>}</div>
+          <div>
+            <label htmlFor="max-llm-steps" className="block text-sm text-bolt-elements-textSecondary mb-2">
+              Maximum number of sequential LLM calls (steps)
+            </label>
+            <input
+              id="max-llm-steps"
+              type="number"
+              placeholder="Maximum number of sequential LLM calls"
+              min="1"
+              max="20"
+              value={maxLLMSteps}
+              onChange={(e) => handleMaxLLMCallChange(e.target.value)}
+              className="w-full px-3 py-2 text-bolt-elements-textPrimary text-sm rounded-lg bg-white dark:bg-bolt-elements-background-depth-4 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+            The MCP configuration format is identical to the one used in Claude Desktop.
+            <a
+              href="https://modelcontextprotocol.io/examples"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-bolt-elements-link hover:underline inline-flex items-center gap-1"
+            >
+              View example servers
+              <div className="i-ph:arrow-square-out w-4 h-4" />
+            </a>
+          </div>
+        </div>
+      </section>
+
+      <div className="flex flex-wrap justify-between gap-3 mt-6">
+        <button
+          onClick={handleLoadExample}
+          className="px-4 py-2 rounded-lg text-sm border border-bolt-elements-borderColor
+                    bg-bolt-elements-background-depth-2 text-bolt-elements-textSecondary
+                    hover:bg-bolt-elements-background-depth-3"
+        >
+          Load Example
+        </button>
+
+        <div className="flex gap-2">
+          <button
+            onClick={handleSave}
+            disabled={isSaving || !parsedConfig}
+            aria-disabled={isSaving || !parsedConfig}
+            className={classNames(
+              'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+              'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent',
+              'hover:bg-bolt-elements-item-backgroundActive',
+              'disabled:opacity-50 disabled:cursor-not-allowed',
+            )}
+          >
+            <div className="i-ph:floppy-disk w-4 h-4" />
+            {isSaving ? 'Saving...' : 'Save Configuration'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/chat/AssistantMessage.tsx

@@ -7,6 +7,16 @@ import { WORK_DIR } from '~/utils/constants';
 import WithTooltip from '~/components/ui/Tooltip';
 import type { Message } from 'ai';
 import type { ProviderInfo } from '~/types/model';
+import type {
+  TextUIPart,
+  ReasoningUIPart,
+  ToolInvocationUIPart,
+  SourceUIPart,
+  FileUIPart,
+  StepStartUIPart,
+} from '@ai-sdk/ui-utils';
+import { ToolInvocations } from './ToolInvocations';
+import type { ToolCallAnnotation } from '~/types/context';
 
 interface AssistantMessageProps {
   content: string;
@@ -19,6 +29,10 @@ interface AssistantMessageProps {
   setChatMode?: (mode: 'discuss' | 'build') => void;
   model?: string;
   provider?: ProviderInfo;
+  parts:
+    | (TextUIPart | ReasoningUIPart | ToolInvocationUIPart | SourceUIPart | FileUIPart | StepStartUIPart)[]
+    | undefined;
+  addToolResult: ({ toolCallId, result }: { toolCallId: string; result: any }) => void;
 }
 
 function openArtifactInWorkbench(filePath: string) {
@@ -57,6 +71,8 @@ export const AssistantMessage = memo(
     setChatMode,
     model,
     provider,
+    parts,
+    addToolResult,
   }: AssistantMessageProps) => {
     const filteredAnnotations = (annotations?.filter(
       (annotation: JSONValue) =>
@@ -81,6 +97,11 @@ export const AssistantMessage = memo(
       totalTokens: number;
     } = filteredAnnotations.find((annotation) => annotation.type === 'usage')?.value;
 
+    const toolInvocations = parts?.filter((part) => part.type === 'tool-invocation');
+    const toolCallAnnotations = filteredAnnotations.filter(
+      (annotation) => annotation.type === 'toolCall',
+    ) as ToolCallAnnotation[];
+
     return (
       <div className="overflow-hidden w-full">
         <>
@@ -155,6 +176,13 @@ export const AssistantMessage = memo(
             </div>
           </div>
         </>
+        {toolInvocations && toolInvocations.length > 0 && (
+          <ToolInvocations
+            toolInvocations={toolInvocations}
+            toolCallAnnotations={toolCallAnnotations}
+            addToolResult={addToolResult}
+          />
+        )}
         <Markdown append={append} chatMode={chatMode} setChatMode={setChatMode} model={model} provider={provider} html>
           {content}
         </Markdown>

app/components/chat/BaseChat.tsx

@@ -80,6 +80,7 @@ interface BaseChatProps {
   setDesignScheme?: (scheme: DesignScheme) => void;
   selectedElement?: ElementInfo | null;
   setSelectedElement?: (element: ElementInfo | null) => void;
+  addToolResult?: ({ toolCallId, result }: { toolCallId: string; result: any }) => void;
 }
 
 export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
@@ -126,6 +127,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       setDesignScheme,
       selectedElement,
       setSelectedElement,
+      addToolResult = () => {
+        throw new Error('addToolResult not implemented');
+      },
     },
     ref,
   ) => {
@@ -374,6 +378,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                         setChatMode={setChatMode}
                         provider={provider}
                         model={model}
+                        addToolResult={addToolResult}
                       />
                     ) : null;
                   }}

app/components/chat/Chat.client.tsx

@@ -1,10 +1,6 @@
-/*
- * @ts-nocheck
- * Preventing TS checks with files presented in the video for a better presentation.
- */
 import { useStore } from '@nanostores/react';
 import type { Message } from 'ai';
-import { useChat } from 'ai/react';
+import { useChat } from '@ai-sdk/react';
 import { useAnimate } from 'framer-motion';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { cssTransition, toast, ToastContainer } from 'react-toastify';
@@ -29,6 +25,8 @@ import { filesToArtifacts } from '~/utils/fileUtils';
 import { supabaseConnection } from '~/lib/stores/supabase';
 import { defaultDesignScheme, type DesignScheme } from '~/types/design-scheme';
 import type { ElementInfo } from '~/components/workbench/Inspector';
+import type { TextUIPart, FileUIPart, Attachment } from '@ai-sdk/ui-utils';
+import { useMCPStore } from '~/lib/stores/mcp';
 import type { LlmErrorAlertType } from '~/types/actions';
 
 const toastAnimation = cssTransition({
@@ -150,6 +148,8 @@ export const ChatImpl = memo(
     const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
     const [chatMode, setChatMode] = useState<'discuss' | 'build'>('build');
     const [selectedElement, setSelectedElement] = useState<ElementInfo | null>(null);
+    const mcpSettings = useMCPStore((state) => state.settings);
+
     const {
       messages,
       isLoading,
@@ -163,6 +163,7 @@ export const ChatImpl = memo(
       error,
       data: chatData,
       setData,
+      addToolResult,
     } = useChat({
       api: '/api/chat',
       body: {
@@ -180,6 +181,7 @@ export const ChatImpl = memo(
             anonKey: supabaseConn?.credentials?.anonKey,
           },
         },
+        maxLLMSteps: mcpSettings.maxLLMSteps,
       },
       sendExtraMessageFields: true,
       onError: (e) => {
@@ -217,12 +219,7 @@ export const ChatImpl = memo(
         runAnimation();
         append({
           role: 'user',
-          content: [
+          content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${prompt}`,
-            {
-              type: 'text',
-              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${prompt}`,
-            },
-          ] as any, // Type assertion to bypass compiler check
         });
       }
     }, [model, provider, searchParams]);
@@ -369,6 +366,59 @@ export const ChatImpl = memo(
       setChatStarted(true);
     };
 
+    // Helper function to create message parts array from text and images
+    const createMessageParts = (text: string, images: string[] = []): Array<TextUIPart | FileUIPart> => {
+      // Create an array of properly typed message parts
+      const parts: Array<TextUIPart | FileUIPart> = [
+        {
+          type: 'text',
+          text,
+        },
+      ];
+
+      // Add image parts if any
+      images.forEach((imageData) => {
+        // Extract correct MIME type from the data URL
+        const mimeType = imageData.split(';')[0].split(':')[1] || 'image/jpeg';
+
+        // Create file part according to AI SDK format
+        parts.push({
+          type: 'file',
+          mimeType,
+          data: imageData.replace(/^data:image\/[^;]+;base64,/, ''),
+        });
+      });
+
+      return parts;
+    };
+
+    // Helper function to convert File[] to Attachment[] for AI SDK
+    const filesToAttachments = async (files: File[]): Promise<Attachment[] | undefined> => {
+      if (files.length === 0) {
+        return undefined;
+      }
+
+      const attachments = await Promise.all(
+        files.map(
+          (file) =>
+            new Promise<Attachment>((resolve) => {
+              const reader = new FileReader();
+
+              reader.onloadend = () => {
+                resolve({
+                  name: file.name,
+                  contentType: file.type,
+                  url: reader.result as string,
+                });
+              };
+              reader.readAsDataURL(file);
+            }),
+        ),
+      );
+
+      return attachments;
+    };
+
     const sendMessage = async (_event: React.UIEvent, messageInput?: string) => {
       const messageContent = messageInput || input;
 
@@ -415,20 +465,14 @@ export const ChatImpl = memo(
 
             if (temResp) {
               const { assistantMessage, userMessage } = temResp;
+              const userMessageText = `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`;
+
               setMessages([
                 {
                   id: `1-${new Date().getTime()}`,
                   role: 'user',
-                  content: [
+                  content: userMessageText,
-                    {
+                  parts: createMessageParts(userMessageText, imageDataList),
-                      type: 'text',
-                      text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`,
-                    },
-                    ...imageDataList.map((imageData) => ({
-                      type: 'image',
-                      image: imageData,
-                    })),
-                  ] as any,
                 },
                 {
                   id: `2-${new Date().getTime()}`,
@@ -442,7 +486,13 @@ export const ChatImpl = memo(
                   annotations: ['hidden'],
                 },
               ]);
-              reload();
+
+              const reloadOptions =
+                uploadedFiles.length > 0
+                  ? { experimental_attachments: await filesToAttachments(uploadedFiles) }
+                  : undefined;
+
+              reload(reloadOptions);
               setInput('');
               Cookies.remove(PROMPT_COOKIE_KEY);
 
@@ -460,23 +510,19 @@ export const ChatImpl = memo(
         }
 
         // If autoSelectTemplate is disabled or template selection failed, proceed with normal message
+        const userMessageText = `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`;
+        const attachments = uploadedFiles.length > 0 ? await filesToAttachments(uploadedFiles) : undefined;
+
         setMessages([
           {
             id: `${new Date().getTime()}`,
             role: 'user',
-            content: [
+            content: userMessageText,
-              {
+            parts: createMessageParts(userMessageText, imageDataList),
-                type: 'text',
+            experimental_attachments: attachments,
-                text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`,
-              },
-              ...imageDataList.map((imageData) => ({
-                type: 'image',
-                image: imageData,
-              })),
-            ] as any,
           },
         ]);
-        reload();
+        reload(attachments ? { experimental_attachments: attachments } : undefined);
         setFakeLoading(false);
         setInput('');
         Cookies.remove(PROMPT_COOKIE_KEY);
@@ -501,35 +547,35 @@ export const ChatImpl = memo(
 
       if (modifiedFiles !== undefined) {
         const userUpdateArtifact = filesToArtifacts(modifiedFiles, `${Date.now()}`);
-        append({
+        const messageText = `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${userUpdateArtifact}${finalMessageContent}`;
-          role: 'user',
+
-          content: [
+        const attachmentOptions =
-            {
+          uploadedFiles.length > 0 ? { experimental_attachments: await filesToAttachments(uploadedFiles) } : undefined;
-              type: 'text',
+
-              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${userUpdateArtifact}${finalMessageContent}`,
+        append(
-            },
+          {
-            ...imageDataList.map((imageData) => ({
+            role: 'user',
-              type: 'image',
+            content: messageText,
-              image: imageData,
+            parts: createMessageParts(messageText, imageDataList),
-            })),
+          },
-          ] as any,
+          attachmentOptions,
-        });
+        );
 
         workbenchStore.resetAllFileModifications();
       } else {
-        append({
+        const messageText = `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`;
-          role: 'user',
+
-          content: [
+        const attachmentOptions =
-            {
+          uploadedFiles.length > 0 ? { experimental_attachments: await filesToAttachments(uploadedFiles) } : undefined;
-              type: 'text',
+
-              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`,
+        append(
-            },
+          {
-            ...imageDataList.map((imageData) => ({
+            role: 'user',
-              type: 'image',
+            content: messageText,
-              image: imageData,
+            parts: createMessageParts(messageText, imageDataList),
-            })),
+          },
-          ] as any,
+          attachmentOptions,
-        });
+        );
       }
 
       setInput('');
@@ -650,6 +696,7 @@ export const ChatImpl = memo(
         setDesignScheme={setDesignScheme}
         selectedElement={selectedElement}
         setSelectedElement={setSelectedElement}
+        addToolResult={addToolResult}
       />
     );
   },

app/components/chat/ChatBox.tsx

@@ -18,6 +18,7 @@ import type { ProviderInfo } from '~/types/model';
 import { ColorSchemeDialog } from '~/components/ui/ColorSchemeDialog';
 import type { DesignScheme } from '~/types/design-scheme';
 import type { ElementInfo } from '~/components/workbench/Inspector';
+import { McpTools } from './MCPTools';
 
 interface ChatBoxProps {
   isModelSettingsCollapsed: boolean;
@@ -260,6 +261,7 @@ export const ChatBox: React.FC<ChatBoxProps> = (props) => {
         <div className="flex justify-between items-center text-sm p-4 pt-2">
           <div className="flex gap-1 items-center">
             <ColorSchemeDialog designScheme={props.designScheme} setDesignScheme={props.setDesignScheme} />
+            <McpTools />
             <IconButton title="Upload file" className="transition-all" onClick={() => props.handleFileUpload()}>
               <div className="i-ph:paperclip text-xl"></div>
             </IconButton>

app/components/chat/MCPTools.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useMemo, useState } from 'react';
+import { classNames } from '~/utils/classNames';
+import { Dialog, DialogRoot, DialogClose, DialogTitle, DialogButton } from '~/components/ui/Dialog';
+import { IconButton } from '~/components/ui/IconButton';
+import { useMCPStore } from '~/lib/stores/mcp';
+import McpServerList from '~/components/@settings/tabs/mcp/McpServerList';
+
+export function McpTools() {
+  const isInitialized = useMCPStore((state) => state.isInitialized);
+  const serverTools = useMCPStore((state) => state.serverTools);
+  const initialize = useMCPStore((state) => state.initialize);
+  const checkServersAvailabilities = useMCPStore((state) => state.checkServersAvailabilities);
+
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isCheckingServers, setIsCheckingServers] = useState(false);
+  const [expandedServer, setExpandedServer] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isInitialized) {
+      initialize();
+    }
+  }, [isInitialized]);
+
+  const checkServerAvailability = async () => {
+    setIsCheckingServers(true);
+    setError(null);
+
+    try {
+      await checkServersAvailabilities();
+    } catch (e) {
+      setError(`Failed to check server availability: ${e instanceof Error ? e.message : String(e)}`);
+    } finally {
+      setIsCheckingServers(false);
+    }
+  };
+
+  const toggleServerExpanded = (serverName: string) => {
+    setExpandedServer(expandedServer === serverName ? null : serverName);
+  };
+
+  const handleDialogOpen = (open: boolean) => {
+    setIsDialogOpen(open);
+  };
+
+  const serverEntries = useMemo(() => Object.entries(serverTools), [serverTools]);
+
+  return (
+    <div className="relative">
+      <div className="flex">
+        <IconButton
+          onClick={() => setIsDialogOpen(!isDialogOpen)}
+          title="MCP Tools Available"
+          disabled={!isInitialized}
+          className="transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {!isInitialized ? (
+            <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
+          ) : (
+            <div className="i-bolt:mcp text-xl"></div>
+          )}
+        </IconButton>
+      </div>
+
+      <DialogRoot open={isDialogOpen} onOpenChange={handleDialogOpen}>
+        {isDialogOpen && (
+          <Dialog className="max-w-4xl w-full p-6">
+            <div className="space-y-4 max-h-[80vh] overflow-y-auto pr-2">
+              <DialogTitle>
+                <div className="i-bolt:mcp text-xl"></div>
+                MCP tools
+              </DialogTitle>
+
+              <div className="space-y-4">
+                <div>
+                  <div className="flex justify-end items-center mb-2">
+                    <button
+                      onClick={checkServerAvailability}
+                      disabled={isCheckingServers || serverEntries.length === 0}
+                      className={classNames(
+                        'px-3 py-1.5 rounded-lg text-sm',
+                        'bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4',
+                        'text-bolt-elements-textPrimary',
+                        'transition-all duration-200',
+                        'flex items-center gap-2',
+                        'disabled:opacity-50 disabled:cursor-not-allowed',
+                      )}
+                    >
+                      {isCheckingServers ? (
+                        <div className="i-svg-spinners:90-ring-with-bg w-3 h-3 text-bolt-elements-loader-progress animate-spin" />
+                      ) : (
+                        <div className="i-ph:arrow-counter-clockwise w-3 h-3" />
+                      )}
+                      Check availability
+                    </button>
+                  </div>
+                  {serverEntries.length > 0 ? (
+                    <McpServerList
+                      checkingServers={isCheckingServers}
+                      expandedServer={expandedServer}
+                      serverEntries={serverEntries}
+                      onlyShowAvailableServers={true}
+                      toggleServerExpanded={toggleServerExpanded}
+                    />
+                  ) : (
+                    <div className="py-4 text-center text-bolt-elements-textSecondary">
+                      <p>No MCP servers configured</p>
+                      <p className="text-xs mt-1">Configure servers in Settings → MCP Servers</p>
+                    </div>
+                  )}
+                </div>
+
+                <div>{error && <p className="mt-2 text-sm text-bolt-elements-icon-error">{error}</p>}</div>
+              </div>
+
+              <div className="flex justify-end gap-2 mt-6">
+                <div className="flex gap-2">
+                  <DialogClose asChild>
+                    <DialogButton type="secondary">Close</DialogButton>
+                  </DialogClose>
+                </div>
+              </div>
+            </div>
+          </Dialog>
+        )}
+      </DialogRoot>
+    </div>
+  );
+}

app/components/chat/Messages.client.tsx

@@ -21,6 +21,7 @@ interface MessagesProps {
   setChatMode?: (mode: 'discuss' | 'build') => void;
   model?: string;
   provider?: ProviderInfo;
+  addToolResult: ({ toolCallId, result }: { toolCallId: string; result: any }) => void;
 }
 
 export const Messages = forwardRef<HTMLDivElement, MessagesProps>(
@@ -52,7 +53,7 @@ export const Messages = forwardRef<HTMLDivElement, MessagesProps>(
       <div id={id} className={props.className} ref={ref}>
         {messages.length > 0
           ? messages.map((message, index) => {
-              const { role, content, id: messageId, annotations } = message;
+              const { role, content, id: messageId, annotations, parts } = message;
               const isUserMessage = role === 'user';
               const isFirst = index === 0;
               const isHidden = annotations?.includes('hidden');
@@ -83,6 +84,8 @@ export const Messages = forwardRef<HTMLDivElement, MessagesProps>(
                         setChatMode={props.setChatMode}
                         model={props.model}
                         provider={props.provider}
+                        parts={parts}
+                        addToolResult={props.addToolResult}
                       />
                     )}
                   </div>

app/components/chat/ToolInvocations.tsx

@@ -0,0 +1,367 @@
+import type { ToolInvocationUIPart } from '@ai-sdk/ui-utils';
+import { AnimatePresence, motion } from 'framer-motion';
+import { memo, useMemo, useState } from 'react';
+import { createHighlighter, type BundledLanguage, type BundledTheme, type HighlighterGeneric } from 'shiki';
+import { classNames } from '~/utils/classNames';
+import {
+  TOOL_EXECUTION_APPROVAL,
+  TOOL_EXECUTION_DENIED,
+  TOOL_EXECUTION_ERROR,
+  TOOL_NO_EXECUTE_FUNCTION,
+} from '~/utils/constants';
+import { cubicEasingFn } from '~/utils/easings';
+import { logger } from '~/utils/logger';
+import { themeStore, type Theme } from '~/lib/stores/theme';
+import { useStore } from '@nanostores/react';
+import type { ToolCallAnnotation } from '~/types/context';
+
+const highlighterOptions = {
+  langs: ['json'],
+  themes: ['light-plus', 'dark-plus'],
+};
+
+const jsonHighlighter: HighlighterGeneric<BundledLanguage, BundledTheme> =
+  import.meta.hot?.data.jsonHighlighter ?? (await createHighlighter(highlighterOptions));
+
+if (import.meta.hot) {
+  import.meta.hot.data.jsonHighlighter = jsonHighlighter;
+}
+
+interface JsonCodeBlockProps {
+  className?: string;
+  code: string;
+  theme: Theme;
+}
+
+function JsonCodeBlock({ className, code, theme }: JsonCodeBlockProps) {
+  let formattedCode = code;
+
+  try {
+    if (typeof formattedCode === 'object') {
+      formattedCode = JSON.stringify(formattedCode, null, 2);
+    } else if (typeof formattedCode === 'string') {
+      // Attempt to parse and re-stringify for formatting
+      try {
+        const parsed = JSON.parse(formattedCode);
+        formattedCode = JSON.stringify(parsed, null, 2);
+      } catch {
+        // Leave as is if not JSON
+      }
+    }
+  } catch (e) {
+    // If parsing fails, keep original code
+    logger.error('Failed to parse JSON', { error: e });
+  }
+
+  return (
+    <div
+      className={classNames('text-xs rounded-md overflow-hidden mcp-tool-invocation-code', className)}
+      dangerouslySetInnerHTML={{
+        __html: jsonHighlighter.codeToHtml(formattedCode, {
+          lang: 'json',
+          theme: theme === 'dark' ? 'dark-plus' : 'light-plus',
+        }),
+      }}
+      style={{
+        padding: '0',
+        margin: '0',
+      }}
+    ></div>
+  );
+}
+
+interface ToolInvocationsProps {
+  toolInvocations: ToolInvocationUIPart[];
+  toolCallAnnotations: ToolCallAnnotation[];
+  addToolResult: ({ toolCallId, result }: { toolCallId: string; result: any }) => void;
+}
+
+export const ToolInvocations = memo(({ toolInvocations, toolCallAnnotations, addToolResult }: ToolInvocationsProps) => {
+  const theme = useStore(themeStore);
+  const [showDetails, setShowDetails] = useState(false);
+
+  const toggleDetails = () => {
+    setShowDetails((prev) => !prev);
+  };
+
+  const toolCalls = useMemo(
+    () => toolInvocations.filter((inv) => inv.toolInvocation.state === 'call'),
+    [toolInvocations],
+  );
+
+  const toolResults = useMemo(
+    () => toolInvocations.filter((inv) => inv.toolInvocation.state === 'result'),
+    [toolInvocations],
+  );
+
+  const hasToolCalls = toolCalls.length > 0;
+  const hasToolResults = toolResults.length > 0;
+
+  if (!hasToolCalls && !hasToolResults) {
+    return null;
+  }
+
+  return (
+    <div className="tool-invocation border border-bolt-elements-borderColor flex flex-col overflow-hidden rounded-lg w-full transition-border duration-150 mt-4 mb-4">
+      <div className="flex">
+        <button
+          className="flex items-stretch bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover w-full overflow-hidden"
+          onClick={toggleDetails}
+          aria-label={showDetails ? 'Collapse details' : 'Expand details'}
+        >
+          <div className="p-2">
+            <div className="i-ph:wrench text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"></div>
+          </div>
+          <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
+          <div className="px-5 p-2 w-full text-left">
+            <div className="w-full text-bolt-elements-textPrimary font-medium leading-5 text-sm">
+              MCP Tool Invocations{' '}
+              {hasToolResults && (
+                <span className="w-full w-full text-bolt-elements-textSecondary text-xs mt-0.5">
+                  ({toolResults.length} tool{hasToolResults ? 's' : ''} used)
+                </span>
+              )}
+            </div>
+          </div>
+        </button>
+        <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
+        <AnimatePresence>
+          {hasToolResults && (
+            <motion.button
+              initial={{ width: 0 }}
+              animate={{ width: 'auto' }}
+              exit={{ width: 0 }}
+              transition={{ duration: 0.15, ease: cubicEasingFn }}
+              className="bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover"
+              onClick={toggleDetails}
+            >
+              <div className="p-2">
+                <div
+                  className={`${showDetails ? 'i-ph:caret-up-bold' : 'i-ph:caret-down-bold'} text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors`}
+                ></div>
+              </div>
+            </motion.button>
+          )}
+        </AnimatePresence>
+      </div>
+      <AnimatePresence>
+        {hasToolCalls && (
+          <motion.div
+            className="details"
+            initial={{ height: 0 }}
+            animate={{ height: 'auto' }}
+            exit={{ height: '0px' }}
+            transition={{ duration: 0.15 }}
+          >
+            <div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
+
+            <div className="p-5 text-left bg-bolt-elements-actions-background">
+              <ToolCallsList
+                toolInvocations={toolCalls}
+                toolCallAnnotations={toolCallAnnotations}
+                addToolResult={addToolResult}
+                theme={theme}
+              />
+            </div>
+          </motion.div>
+        )}
+
+        {hasToolResults && showDetails && (
+          <motion.div
+            className="details"
+            initial={{ height: 0 }}
+            animate={{ height: 'auto' }}
+            exit={{ height: '0px' }}
+            transition={{ duration: 0.15 }}
+          >
+            <div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
+
+            <div className="p-5 text-left bg-bolt-elements-actions-background">
+              <ToolResultsList toolInvocations={toolResults} toolCallAnnotations={toolCallAnnotations} theme={theme} />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+});
+
+const toolVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 },
+};
+
+interface ToolResultsListProps {
+  toolInvocations: ToolInvocationUIPart[];
+  toolCallAnnotations: ToolCallAnnotation[];
+  theme: Theme;
+}
+
+const ToolResultsList = memo(({ toolInvocations, toolCallAnnotations, theme }: ToolResultsListProps) => {
+  return (
+    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
+      <ul className="list-none space-y-4">
+        {toolInvocations.map((tool, index) => {
+          const toolCallState = tool.toolInvocation.state;
+
+          if (toolCallState !== 'result') {
+            return null;
+          }
+
+          const { toolName, toolCallId } = tool.toolInvocation;
+
+          const annotation = toolCallAnnotations.find((annotation) => {
+            return annotation.toolCallId === toolCallId;
+          });
+
+          const isErrorResult = [TOOL_NO_EXECUTE_FUNCTION, TOOL_EXECUTION_DENIED, TOOL_EXECUTION_ERROR].includes(
+            tool.toolInvocation.result,
+          );
+
+          return (
+            <motion.li
+              key={index}
+              variants={toolVariants}
+              initial="hidden"
+              animate="visible"
+              transition={{
+                duration: 0.2,
+                ease: cubicEasingFn,
+              }}
+            >
+              <div className="flex items-center gap-1.5 text-xs mb-1">
+                {isErrorResult ? (
+                  <div className="text-lg text-bolt-elements-icon-error">
+                    <div className="i-ph:x"></div>
+                  </div>
+                ) : (
+                  <div className="text-lg text-bolt-elements-icon-success">
+                    <div className="i-ph:check"></div>
+                  </div>
+                )}
+                <div className="text-bolt-elements-textSecondary text-xs">Server:</div>
+                <div className="text-bolt-elements-textPrimary font-semibold">{annotation?.serverName}</div>
+              </div>
+
+              <div className="ml-6 mb-2">
+                <div className="text-bolt-elements-textSecondary text-xs mb-1">
+                  Tool: <span className="text-bolt-elements-textPrimary font-semibold">{toolName}</span>
+                </div>
+                <div className="text-bolt-elements-textSecondary text-xs mb-1">
+                  Description:{' '}
+                  <span className="text-bolt-elements-textPrimary font-semibold">{annotation?.toolDescription}</span>
+                </div>
+                <div className="text-bolt-elements-textSecondary text-xs mb-1">Parameters:</div>
+                <div className="bg-[#FAFAFA] dark:bg-[#0A0A0A] p-3 rounded-md">
+                  <JsonCodeBlock className="mb-0" code={JSON.stringify(tool.toolInvocation.args)} theme={theme} />
+                </div>
+                <div className="text-bolt-elements-textSecondary text-xs mt-3 mb-1">Result:</div>
+                <div className="bg-[#FAFAFA] dark:bg-[#0A0A0A] p-3 rounded-md">
+                  <JsonCodeBlock className="mb-0" code={JSON.stringify(tool.toolInvocation.result)} theme={theme} />
+                </div>
+              </div>
+            </motion.li>
+          );
+        })}
+      </ul>
+    </motion.div>
+  );
+});
+
+interface ToolCallsListProps {
+  toolInvocations: ToolInvocationUIPart[];
+  toolCallAnnotations: ToolCallAnnotation[];
+  addToolResult: ({ toolCallId, result }: { toolCallId: string; result: any }) => void;
+  theme: Theme;
+}
+
+const ToolCallsList = memo(({ toolInvocations, toolCallAnnotations, addToolResult, theme }: ToolCallsListProps) => {
+  return (
+    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
+      <ul className="list-none space-y-4">
+        {toolInvocations.map((tool, index) => {
+          const toolCallState = tool.toolInvocation.state;
+
+          if (toolCallState !== 'call') {
+            return null;
+          }
+
+          const { toolName, toolCallId } = tool.toolInvocation;
+
+          const annotation = toolCallAnnotations.find((annotation) => {
+            return annotation.toolCallId === toolCallId;
+          });
+
+          return (
+            <motion.li
+              key={index}
+              variants={toolVariants}
+              initial="hidden"
+              animate="visible"
+              transition={{
+                duration: 0.2,
+                ease: cubicEasingFn,
+              }}
+            >
+              <div className="ml-6 mb-2">
+                <div key={toolCallId}>
+                  <div className="text-bolt-elements-textPrimary">Bolt wants to use a tool.</div>
+                  <div className="text-bolt-elements-textSecondary text-xs mb-1">
+                    Server:{' '}
+                    <span className="text-bolt-elements-textPrimary font-semibold">{annotation?.serverName}</span>
+                  </div>
+                  <div className="text-bolt-elements-textSecondary text-xs mb-1">
+                    Tool: <span className="text-bolt-elements-textPrimary font-semibold">{toolName}</span>
+                  </div>
+                  <div className="text-bolt-elements-textSecondary text-xs mb-1">
+                    Description:{' '}
+                    <span className="text-bolt-elements-textPrimary font-semibold">{annotation?.toolDescription}</span>
+                  </div>
+                  <div className="text-bolt-elements-textSecondary text-xs mb-1">Parameters:</div>
+                  <div className="bg-[#FAFAFA] dark:bg-[#0A0A0A] p-3 rounded-md">
+                    <JsonCodeBlock className="mb-0" code={JSON.stringify(tool.toolInvocation.args)} theme={theme} />
+                  </div>{' '}
+                  <div className="flex justify-end gap-2 pt-2">
+                    <button
+                      className={classNames(
+                        'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+                        'bg-purple-500 hover:bg-purple-600',
+                        'text-white',
+                        'disabled:opacity-50 disabled:cursor-not-allowed',
+                      )}
+                      onClick={() =>
+                        addToolResult({
+                          toolCallId,
+                          result: TOOL_EXECUTION_APPROVAL.APPROVE,
+                        })
+                      }
+                    >
+                      Approve
+                    </button>
+                    <button
+                      className={classNames(
+                        'px-3 py-1.5 rounded-lg text-sm',
+                        'bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4',
+                        'text-bolt-elements-textPrimary',
+                        'transition-all duration-200',
+                        'flex items-center gap-2',
+                      )}
+                      onClick={() =>
+                        addToolResult({
+                          toolCallId,
+                          result: TOOL_EXECUTION_APPROVAL.REJECT,
+                        })
+                      }
+                    >
+                      Reject
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </motion.li>
+          );
+        })}
+      </ul>
+    </motion.div>
+  );
+});

app/lib/services/mcpService.ts

@@ -0,0 +1,457 @@
+import {
+  experimental_createMCPClient,
+  type ToolSet,
+  type Message,
+  type DataStreamWriter,
+  convertToCoreMessages,
+  formatDataStreamPart,
+} from 'ai';
+import { Experimental_StdioMCPTransport } from 'ai/mcp-stdio';
+import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
+import { z } from 'zod';
+import type { ToolCallAnnotation } from '~/types/context';
+import {
+  TOOL_EXECUTION_APPROVAL,
+  TOOL_EXECUTION_DENIED,
+  TOOL_EXECUTION_ERROR,
+  TOOL_NO_EXECUTE_FUNCTION,
+} from '~/utils/constants';
+import { createScopedLogger } from '~/utils/logger';
+
+const logger = createScopedLogger('mcp-service');
+
+export const stdioServerConfigSchema = z
+  .object({
+    type: z.enum(['stdio']).optional(),
+    command: z.string().min(1, 'Command cannot be empty'),
+    args: z.array(z.string()).optional(),
+    cwd: z.string().optional(),
+    env: z.record(z.string()).optional(),
+  })
+  .transform((data) => ({
+    ...data,
+    type: 'stdio' as const,
+  }));
+export type STDIOServerConfig = z.infer<typeof stdioServerConfigSchema>;
+
+export const sseServerConfigSchema = z
+  .object({
+    type: z.enum(['sse']).optional(),
+    url: z.string().url('URL must be a valid URL format'),
+    headers: z.record(z.string()).optional(),
+  })
+  .transform((data) => ({
+    ...data,
+    type: 'sse' as const,
+  }));
+export type SSEServerConfig = z.infer<typeof sseServerConfigSchema>;
+
+export const streamableHTTPServerConfigSchema = z
+  .object({
+    type: z.enum(['streamable-http']).optional(),
+    url: z.string().url('URL must be a valid URL format'),
+    headers: z.record(z.string()).optional(),
+  })
+  .transform((data) => ({
+    ...data,
+    type: 'streamable-http' as const,
+  }));
+
+export type StreamableHTTPServerConfig = z.infer<typeof streamableHTTPServerConfigSchema>;
+
+export const mcpServerConfigSchema = z.union([
+  stdioServerConfigSchema,
+  sseServerConfigSchema,
+  streamableHTTPServerConfigSchema,
+]);
+export type MCPServerConfig = z.infer<typeof mcpServerConfigSchema>;
+
+export const mcpConfigSchema = z.object({
+  mcpServers: z.record(z.string(), mcpServerConfigSchema),
+});
+export type MCPConfig = z.infer<typeof mcpConfigSchema>;
+
+export type MCPClient = {
+  tools: () => Promise<ToolSet>;
+  close: () => Promise<void>;
+} & {
+  serverName: string;
+};
+
+export type ToolCall = {
+  type: 'tool-call';
+  toolCallId: string;
+  toolName: string;
+  args: Record<string, unknown>;
+};
+
+export type MCPServerTools = Record<string, MCPServer>;
+
+export type MCPServerAvailable = {
+  status: 'available';
+  tools: ToolSet;
+  client: MCPClient;
+  config: MCPServerConfig;
+};
+export type MCPServerUnavailable = {
+  status: 'unavailable';
+  error: string;
+  client: MCPClient | null;
+  config: MCPServerConfig;
+};
+export type MCPServer = MCPServerAvailable | MCPServerUnavailable;
+
+export class MCPService {
+  private static _instance: MCPService;
+  private _tools: ToolSet = {};
+  private _toolsWithoutExecute: ToolSet = {};
+  private _mcpToolsPerServer: MCPServerTools = {};
+  private _toolNamesToServerNames = new Map<string, string>();
+  private _config: MCPConfig = {
+    mcpServers: {},
+  };
+
+  static getInstance(): MCPService {
+    if (!MCPService._instance) {
+      MCPService._instance = new MCPService();
+    }
+
+    return MCPService._instance;
+  }
+
+  private _validateServerConfig(serverName: string, config: any): MCPServerConfig {
+    const hasStdioField = config.command !== undefined;
+    const hasUrlField = config.url !== undefined;
+
+    if (hasStdioField && hasUrlField) {
+      throw new Error(`cannot have "command" and "url" defined for the same server.`);
+    }
+
+    if (!config.type && hasStdioField) {
+      config.type = 'stdio';
+    }
+
+    if (hasUrlField && !config.type) {
+      throw new Error(`missing "type" field, only "sse" and "streamable-http" are valid options.`);
+    }
+
+    if (!['stdio', 'sse', 'streamable-http'].includes(config.type)) {
+      throw new Error(`provided "type" is invalid, only "stdio", "sse" or "streamable-http" are valid options.`);
+    }
+
+    // Check for type/field mismatch
+    if (config.type === 'stdio' && !hasStdioField) {
+      throw new Error(`missing "command" field.`);
+    }
+
+    if (['sse', 'streamable-http'].includes(config.type) && !hasUrlField) {
+      throw new Error(`missing "url" field.`);
+    }
+
+    try {
+      return mcpServerConfigSchema.parse(config);
+    } catch (validationError) {
+      if (validationError instanceof z.ZodError) {
+        const errorMessages = validationError.errors.map((err) => `${err.path.join('.')}: ${err.message}`).join('; ');
+        throw new Error(`Invalid configuration for server "${serverName}": ${errorMessages}`);
+      }
+
+      throw validationError;
+    }
+  }
+
+  async updateConfig(config: MCPConfig) {
+    logger.debug('updating config', JSON.stringify(config));
+    this._config = config;
+    await this._createClients();
+
+    return this._mcpToolsPerServer;
+  }
+
+  private async _createStreamableHTTPClient(
+    serverName: string,
+    config: StreamableHTTPServerConfig,
+  ): Promise<MCPClient> {
+    logger.debug(`Creating Streamable-HTTP client for ${serverName} with URL: ${config.url}`);
+
+    const client = await experimental_createMCPClient({
+      transport: new StreamableHTTPClientTransport(new URL(config.url), {
+        requestInit: {
+          headers: config.headers,
+        },
+      }),
+    });
+
+    return Object.assign(client, { serverName });
+  }
+
+  private async _createSSEClient(serverName: string, config: SSEServerConfig): Promise<MCPClient> {
+    logger.debug(`Creating SSE client for ${serverName} with URL: ${config.url}`);
+
+    const client = await experimental_createMCPClient({
+      transport: config,
+    });
+
+    return Object.assign(client, { serverName });
+  }
+
+  private async _createStdioClient(serverName: string, config: STDIOServerConfig): Promise<MCPClient> {
+    logger.debug(
+      `Creating STDIO client for '${serverName}' with command: '${config.command}' ${config.args?.join(' ') || ''}`,
+    );
+
+    const client = await experimental_createMCPClient({ transport: new Experimental_StdioMCPTransport(config) });
+
+    return Object.assign(client, { serverName });
+  }
+
+  private _registerTools(serverName: string, tools: ToolSet) {
+    for (const [toolName, tool] of Object.entries(tools)) {
+      if (this._tools[toolName]) {
+        const existingServerName = this._toolNamesToServerNames.get(toolName);
+
+        if (existingServerName && existingServerName !== serverName) {
+          logger.warn(`Tool conflict: "${toolName}" from "${serverName}" overrides tool from "${existingServerName}"`);
+        }
+      }
+
+      this._tools[toolName] = tool;
+      this._toolsWithoutExecute[toolName] = { ...tool, execute: undefined };
+      this._toolNamesToServerNames.set(toolName, serverName);
+    }
+  }
+
+  private async _createMCPClient(serverName: string, serverConfig: MCPServerConfig): Promise<MCPClient> {
+    const validatedConfig = this._validateServerConfig(serverName, serverConfig);
+
+    if (validatedConfig.type === 'stdio') {
+      return await this._createStdioClient(serverName, serverConfig as STDIOServerConfig);
+    } else if (validatedConfig.type === 'sse') {
+      return await this._createSSEClient(serverName, serverConfig as SSEServerConfig);
+    } else {
+      return await this._createStreamableHTTPClient(serverName, serverConfig as StreamableHTTPServerConfig);
+    }
+  }
+
+  private async _createClients() {
+    await this._closeClients();
+
+    const createClientPromises = Object.entries(this._config?.mcpServers || []).map(async ([serverName, config]) => {
+      let client: MCPClient | null = null;
+
+      try {
+        client = await this._createMCPClient(serverName, config);
+
+        try {
+          const tools = await client.tools();
+
+          this._registerTools(serverName, tools);
+
+          this._mcpToolsPerServer[serverName] = {
+            status: 'available',
+            client,
+            tools,
+            config,
+          };
+        } catch (error) {
+          logger.error(`Failed to get tools from server ${serverName}:`, error);
+          this._mcpToolsPerServer[serverName] = {
+            status: 'unavailable',
+            error: 'could not retrieve tools from server',
+            client,
+            config,
+          };
+        }
+      } catch (error) {
+        logger.error(`Failed to initialize MCP client for server: ${serverName}`, error);
+        this._mcpToolsPerServer[serverName] = {
+          status: 'unavailable',
+          error: (error as Error).message,
+          client,
+          config,
+        };
+      }
+    });
+
+    await Promise.allSettled(createClientPromises);
+  }
+
+  async checkServersAvailabilities() {
+    this._tools = {};
+    this._toolsWithoutExecute = {};
+    this._toolNamesToServerNames.clear();
+
+    const checkPromises = Object.entries(this._mcpToolsPerServer).map(async ([serverName, server]) => {
+      let client = server.client;
+
+      try {
+        logger.debug(`Checking MCP server "${serverName}" availability: start`);
+
+        if (!client) {
+          client = await this._createMCPClient(serverName, this._config?.mcpServers[serverName]);
+        }
+
+        try {
+          const tools = await client.tools();
+
+          this._registerTools(serverName, tools);
+
+          this._mcpToolsPerServer[serverName] = {
+            status: 'available',
+            client,
+            tools,
+            config: server.config,
+          };
+        } catch (error) {
+          logger.error(`Failed to get tools from server ${serverName}:`, error);
+          this._mcpToolsPerServer[serverName] = {
+            status: 'unavailable',
+            error: 'could not retrieve tools from server',
+            client,
+            config: server.config,
+          };
+        }
+
+        logger.debug(`Checking MCP server "${serverName}" availability: end`);
+      } catch (error) {
+        logger.error(`Failed to connect to server ${serverName}:`, error);
+        this._mcpToolsPerServer[serverName] = {
+          status: 'unavailable',
+          error: 'could not connect to server',
+          client,
+          config: server.config,
+        };
+      }
+    });
+
+    await Promise.allSettled(checkPromises);
+
+    return this._mcpToolsPerServer;
+  }
+
+  private async _closeClients(): Promise<void> {
+    const closePromises = Object.entries(this._mcpToolsPerServer).map(async ([serverName, server]) => {
+      if (!server.client) {
+        return;
+      }
+
+      logger.debug(`Closing client for server "${serverName}"`);
+
+      try {
+        await server.client.close();
+      } catch (error) {
+        logger.error(`Error closing client for ${serverName}:`, error);
+      }
+    });
+
+    await Promise.allSettled(closePromises);
+    this._tools = {};
+    this._toolsWithoutExecute = {};
+    this._mcpToolsPerServer = {};
+    this._toolNamesToServerNames.clear();
+  }
+
+  isValidToolName(toolName: string): boolean {
+    return toolName in this._tools;
+  }
+
+  processToolCall(toolCall: ToolCall, dataStream: DataStreamWriter): void {
+    const { toolCallId, toolName } = toolCall;
+
+    if (this.isValidToolName(toolName)) {
+      const { description = 'No description available' } = this.toolsWithoutExecute[toolName];
+      const serverName = this._toolNamesToServerNames.get(toolName);
+
+      if (serverName) {
+        dataStream.writeMessageAnnotation({
+          type: 'toolCall',
+          toolCallId,
+          serverName,
+          toolName,
+          toolDescription: description,
+        } satisfies ToolCallAnnotation);
+      }
+    }
+  }
+
+  async processToolInvocations(messages: Message[], dataStream: DataStreamWriter): Promise<Message[]> {
+    const lastMessage = messages[messages.length - 1];
+    const parts = lastMessage.parts;
+
+    if (!parts) {
+      return messages;
+    }
+
+    const processedParts = await Promise.all(
+      parts.map(async (part) => {
+        // Only process tool invocations parts
+        if (part.type !== 'tool-invocation') {
+          return part;
+        }
+
+        const { toolInvocation } = part;
+        const { toolName, toolCallId } = toolInvocation;
+
+        // return part as-is if tool does not exist, or if it's not a tool call result
+        if (!this.isValidToolName(toolName) || toolInvocation.state !== 'result') {
+          return part;
+        }
+
+        let result;
+
+        if (toolInvocation.result === TOOL_EXECUTION_APPROVAL.APPROVE) {
+          const toolInstance = this._tools[toolName];
+
+          if (toolInstance && typeof toolInstance.execute === 'function') {
+            logger.debug(`calling tool "${toolName}" with args: ${JSON.stringify(toolInvocation.args)}`);
+
+            try {
+              result = await toolInstance.execute(toolInvocation.args, {
+                messages: convertToCoreMessages(messages),
+                toolCallId,
+              });
+            } catch (error) {
+              logger.error(`error while calling tool "${toolName}":`, error);
+              result = TOOL_EXECUTION_ERROR;
+            }
+          } else {
+            result = TOOL_NO_EXECUTE_FUNCTION;
+          }
+        } else if (toolInvocation.result === TOOL_EXECUTION_APPROVAL.REJECT) {
+          result = TOOL_EXECUTION_DENIED;
+        } else {
+          // For any unhandled responses, return the original part.
+          return part;
+        }
+
+        // Forward updated tool result to the client.
+        dataStream.write(
+          formatDataStreamPart('tool_result', {
+            toolCallId,
+            result,
+          }),
+        );
+
+        // Return updated toolInvocation with the actual result.
+        return {
+          ...part,
+          toolInvocation: {
+            ...toolInvocation,
+            result,
+          },
+        };
+      }),
+    );
+
+    // Finally return the processed messages
+    return [...messages.slice(0, -1), { ...lastMessage, parts: processedParts }];
+  }
+
+  get tools() {
+    return this._tools;
+  }
+
+  get toolsWithoutExecute() {
+    return this._toolsWithoutExecute;
+  }
+}

app/lib/stores/mcp.ts

@@ -0,0 +1,115 @@
+import { create } from 'zustand';
+import type { MCPConfig, MCPServerTools } from '~/lib/services/mcpService';
+
+const MCP_SETTINGS_KEY = 'mcp_settings';
+const isBrowser = typeof window !== 'undefined';
+
+type MCPSettings = {
+  mcpConfig: MCPConfig;
+  maxLLMSteps: number;
+};
+
+const defaultSettings = {
+  maxLLMSteps: 5,
+  mcpConfig: {
+    mcpServers: {},
+  },
+} satisfies MCPSettings;
+
+type Store = {
+  isInitialized: boolean;
+  settings: MCPSettings;
+  serverTools: MCPServerTools;
+  error: string | null;
+  isUpdatingConfig: boolean;
+};
+
+type Actions = {
+  initialize: () => Promise<void>;
+  updateSettings: (settings: MCPSettings) => Promise<void>;
+  checkServersAvailabilities: () => Promise<void>;
+};
+
+export const useMCPStore = create<Store & Actions>((set, get) => ({
+  isInitialized: false,
+  settings: defaultSettings,
+  serverTools: {},
+  error: null,
+  isUpdatingConfig: false,
+  initialize: async () => {
+    if (get().isInitialized) {
+      return;
+    }
+
+    if (isBrowser) {
+      const savedConfig = localStorage.getItem(MCP_SETTINGS_KEY);
+
+      if (savedConfig) {
+        try {
+          const settings = JSON.parse(savedConfig) as MCPSettings;
+          const serverTools = await updateServerConfig(settings.mcpConfig);
+          set(() => ({ settings, serverTools }));
+        } catch (error) {
+          console.error('Error parsing saved mcp config:', error);
+          set(() => ({
+            error: `Error parsing saved mcp config: ${error instanceof Error ? error.message : String(error)}`,
+          }));
+        }
+      } else {
+        localStorage.setItem(MCP_SETTINGS_KEY, JSON.stringify(defaultSettings));
+      }
+    }
+
+    set(() => ({ isInitialized: true }));
+  },
+  updateSettings: async (newSettings: MCPSettings) => {
+    if (get().isUpdatingConfig) {
+      return;
+    }
+
+    try {
+      set(() => ({ isUpdatingConfig: true }));
+
+      const serverTools = await updateServerConfig(newSettings.mcpConfig);
+
+      if (isBrowser) {
+        localStorage.setItem(MCP_SETTINGS_KEY, JSON.stringify(newSettings));
+      }
+
+      set(() => ({ settings: newSettings, serverTools }));
+    } catch (error) {
+      throw error;
+    } finally {
+      set(() => ({ isUpdatingConfig: false }));
+    }
+  },
+  checkServersAvailabilities: async () => {
+    const response = await fetch('/api/mcp-check', {
+      method: 'GET',
+    });
+
+    if (!response.ok) {
+      throw new Error(`Server responded with ${response.status}: ${response.statusText}`);
+    }
+
+    const serverTools = (await response.json()) as MCPServerTools;
+
+    set(() => ({ serverTools }));
+  },
+}));
+
+async function updateServerConfig(config: MCPConfig) {
+  const response = await fetch('/api/mcp-update-config', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(config),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Server responded with ${response.status}: ${response.statusText}`);
+  }
+
+  const data = (await response.json()) as MCPServerTools;
+
+  return data;
+}

app/routes/api.chat.ts

@@ -12,6 +12,7 @@ import { WORK_DIR } from '~/utils/constants';
 import { createSummary } from '~/lib/.server/llm/create-summary';
 import { extractPropertiesFromMessage } from '~/lib/.server/llm/utils';
 import type { DesignScheme } from '~/types/design-scheme';
+import { MCPService } from '~/lib/services/mcpService';
 
 export async function action(args: ActionFunctionArgs) {
   return chatAction(args);
@@ -38,22 +39,24 @@ function parseCookies(cookieHeader: string): Record<string, string> {
 }
 
 async function chatAction({ context, request }: ActionFunctionArgs) {
-  const { messages, files, promptId, contextOptimization, supabase, chatMode, designScheme } = await request.json<{
+  const { messages, files, promptId, contextOptimization, supabase, chatMode, designScheme, maxLLMSteps } =
-    messages: Messages;
+    await request.json<{
-    files: any;
+      messages: Messages;
-    promptId?: string;
+      files: any;
-    contextOptimization: boolean;
+      promptId?: string;
-    chatMode: 'discuss' | 'build';
+      contextOptimization: boolean;
-    designScheme?: DesignScheme;
+      chatMode: 'discuss' | 'build';
-    supabase?: {
+      designScheme?: DesignScheme;
-      isConnected: boolean;
+      supabase?: {
-      hasSelectedProject: boolean;
+        isConnected: boolean;
-      credentials?: {
+        hasSelectedProject: boolean;
-        anonKey?: string;
+        credentials?: {
-        supabaseUrl?: string;
+          anonKey?: string;
+          supabaseUrl?: string;
+        };
       };
-    };
+      maxLLMSteps: number;
-  }>();
+    }>();
 
   const cookieHeader = request.headers.get('Cookie');
   const apiKeys = JSON.parse(parseCookies(cookieHeader || '').apiKeys || '{}');
@@ -72,6 +75,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
   let progressCounter: number = 1;
 
   try {
+    const mcpService = MCPService.getInstance();
     const totalMessageContent = messages.reduce((acc, message) => acc + message.content, '');
     logger.debug(`Total message length: ${totalMessageContent.split(' ').length}, words`);
 
@@ -84,8 +88,10 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
         let summary: string | undefined = undefined;
         let messageSliceId = 0;
 
-        if (messages.length > 3) {
+        const processedMessages = await mcpService.processToolInvocations(messages, dataStream);
-          messageSliceId = messages.length - 3;
+
+        if (processedMessages.length > 3) {
+          messageSliceId = processedMessages.length - 3;
         }
 
         if (filePaths.length > 0 && contextOptimization) {
@@ -99,10 +105,10 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
           } satisfies ProgressAnnotation);
 
           // Create a summary of the chat
-          console.log(`Messages count: ${messages.length}`);
+          console.log(`Messages count: ${processedMessages.length}`);
 
           summary = await createSummary({
-            messages: [...messages],
+            messages: [...processedMessages],
             env: context.cloudflare?.env,
             apiKeys,
             providerSettings,
@@ -128,7 +134,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
           dataStream.writeMessageAnnotation({
             type: 'chatSummary',
             summary,
-            chatId: messages.slice(-1)?.[0]?.id,
+            chatId: processedMessages.slice(-1)?.[0]?.id,
           } as ContextAnnotation);
 
           // Update context buffer
@@ -142,9 +148,9 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
           } satisfies ProgressAnnotation);
 
           // Select context files
-          console.log(`Messages count: ${messages.length}`);
+          console.log(`Messages count: ${processedMessages.length}`);
           filteredFiles = await selectContext({
-            messages: [...messages],
+            messages: [...processedMessages],
             env: context.cloudflare?.env,
             apiKeys,
             files,
@@ -192,7 +198,15 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
 
         const options: StreamingOptions = {
           supabaseConnection: supabase,
-          toolChoice: 'none',
+          toolChoice: 'auto',
+          tools: mcpService.toolsWithoutExecute,
+          maxSteps: maxLLMSteps,
+          onStepFinish: ({ toolCalls }) => {
+            // add tool call annotations for frontend processing
+            toolCalls.forEach((toolCall) => {
+              mcpService.processToolCall(toolCall, dataStream);
+            });
+          },
           onFinish: async ({ text: content, finishReason, usage }) => {
             logger.debug('usage', JSON.stringify(usage));
 
@@ -232,17 +246,17 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
 
             logger.info(`Reached max token limit (${MAX_TOKENS}): Continuing message (${switchesLeft} switches left)`);
 
-            const lastUserMessage = messages.filter((x) => x.role == 'user').slice(-1)[0];
+            const lastUserMessage = processedMessages.filter((x) => x.role == 'user').slice(-1)[0];
             const { model, provider } = extractPropertiesFromMessage(lastUserMessage);
-            messages.push({ id: generateId(), role: 'assistant', content });
+            processedMessages.push({ id: generateId(), role: 'assistant', content });
-            messages.push({
+            processedMessages.push({
               id: generateId(),
               role: 'user',
               content: `[Model: ${model}]\n\n[Provider: ${provider}]\n\n${CONTINUE_PROMPT}`,
             });
 
             const result = await streamText({
-              messages,
+              messages: [...processedMessages],
               env: context.cloudflare?.env,
               options,
               apiKeys,
@@ -283,7 +297,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
         } satisfies ProgressAnnotation);
 
         const result = await streamText({
-          messages,
+          messages: [...processedMessages],
           env: context.cloudflare?.env,
           options,
           apiKeys,

app/routes/api.mcp-check.ts

@@ -0,0 +1,16 @@
+import { createScopedLogger } from '~/utils/logger';
+import { MCPService } from '~/lib/services/mcpService';
+
+const logger = createScopedLogger('api.mcp-check');
+
+export async function loader() {
+  try {
+    const mcpService = MCPService.getInstance();
+    const serverTools = await mcpService.checkServersAvailabilities();
+
+    return Response.json(serverTools);
+  } catch (error) {
+    logger.error('Error checking MCP servers:', error);
+    return Response.json({ error: 'Failed to check MCP servers' }, { status: 500 });
+  }
+}

app/routes/api.mcp-update-config.ts

@@ -0,0 +1,23 @@
+import { type ActionFunctionArgs } from '@remix-run/cloudflare';
+import { createScopedLogger } from '~/utils/logger';
+import { MCPService, type MCPConfig } from '~/lib/services/mcpService';
+
+const logger = createScopedLogger('api.mcp-update-config');
+
+export async function action({ request }: ActionFunctionArgs) {
+  try {
+    const mcpConfig = (await request.json()) as MCPConfig;
+
+    if (!mcpConfig || typeof mcpConfig !== 'object') {
+      return Response.json({ error: 'Invalid MCP servers configuration' }, { status: 400 });
+    }
+
+    const mcpService = MCPService.getInstance();
+    const serverTools = await mcpService.updateConfig(mcpConfig);
+
+    return Response.json(serverTools);
+  } catch (error) {
+    logger.error('Error updating MCP config:', error);
+    return Response.json({ error: 'Failed to update MCP config' }, { status: 500 });
+  }
+}

app/styles/components/code.scss

@@ -3,7 +3,7 @@
 }
 
 .shiki {
-  &:not(:has(.actions), .actions *) {
+  &:not(:has(.actions), .actions *, .mcp-tool-invocation-code *) {
     background-color: var(--bolt-elements-messages-code-background) !important;
   }
 }

app/types/context.ts

@@ -16,3 +16,11 @@ export type ProgressAnnotation = {
   order: number;
   message: string;
 };
+
+export type ToolCallAnnotation = {
+  type: 'toolCall';
+  toolCallId: string;
+  serverName: string;
+  toolName: string;
+  toolDescription: string;
+};

app/utils/constants.ts

@@ -8,6 +8,13 @@ export const MODEL_REGEX = /^\[Model: (.*?)\]\n\n/;
 export const PROVIDER_REGEX = /\[Provider: (.*?)\]\n\n/;
 export const DEFAULT_MODEL = 'claude-3-5-sonnet-latest';
 export const PROMPT_COOKIE_KEY = 'cachedPrompt';
+export const TOOL_EXECUTION_APPROVAL = {
+  APPROVE: 'Yes, approved.',
+  REJECT: 'No, rejected.',
+} as const;
+export const TOOL_NO_EXECUTE_FUNCTION = 'Error: No execute function found on tool';
+export const TOOL_EXECUTION_DENIED = 'Error: User denied access to tool execution';
+export const TOOL_EXECUTION_ERROR = 'Error: An error occured while calling tool';
 
 const llmManager = LLMManager.getInstance(import.meta.env);
 

icons/mcp.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>ModelContextProtocol</title><path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"></path><path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"></path></svg>

package.json

@@ -51,6 +51,8 @@
     "@ai-sdk/google": "0.0.52",
     "@ai-sdk/mistral": "0.0.43",
     "@ai-sdk/openai": "1.1.2",
+    "@ai-sdk/react": "^1.2.12",
+    "@ai-sdk/ui-utils": "^1.2.11",
     "@codemirror/autocomplete": "^6.18.3",
     "@codemirror/commands": "^6.7.1",
     "@codemirror/lang-cpp": "^6.0.2",
@@ -71,6 +73,7 @@
     "@heroicons/react": "^2.2.0",
     "@iconify-json/svg-spinners": "^1.2.1",
     "@lezer/highlight": "^1.2.1",
+    "@modelcontextprotocol/sdk": "^1.15.0",
     "@nanostores/react": "^0.7.3",
     "@octokit/rest": "^21.0.2",
     "@octokit/types": "^13.6.2",
@@ -101,7 +104,7 @@
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-web-links": "^0.11.0",
     "@xterm/xterm": "^5.5.0",
-    "ai": "4.1.2",
+    "ai": "4.3.16",
     "chalk": "^5.4.1",
     "chart.js": "^4.4.7",
     "class-variance-authority": "^0.7.0",

pnpm-lock.yaml

@@ -32,6 +32,12 @@ importers:
       '@ai-sdk/openai':
         specifier: 1.1.2
         version: 1.1.2(zod@3.24.2)
+      '@ai-sdk/react':
+        specifier: ^1.2.12
+        version: 1.2.12(react@18.3.1)(zod@3.24.2)
+      '@ai-sdk/ui-utils':
+        specifier: ^1.2.11
+        version: 1.2.11(zod@3.24.2)
       '@codemirror/autocomplete':
         specifier: ^6.18.3
         version: 6.18.6
@@ -92,6 +98,9 @@ importers:
       '@lezer/highlight':
         specifier: ^1.2.1
         version: 1.2.1
+      '@modelcontextprotocol/sdk':
+        specifier: ^1.15.0
+        version: 1.15.0
       '@nanostores/react':
         specifier: ^0.7.3
         version: 0.7.3(nanostores@0.10.3)(react@18.3.1)
@@ -183,8 +192,8 @@ importers:
         specifier: ^5.5.0
         version: 5.5.0
       ai:
-        specifier: 4.1.2
+        specifier: 4.3.16
-        version: 4.1.2(react@18.3.1)(zod@3.24.2)
+        version: 4.3.16(react@18.3.1)(zod@3.24.2)
       chalk:
         specifier: ^5.4.1
         version: 5.4.1
@@ -585,6 +594,12 @@ packages:
       zod:
         optional: true
 
+  '@ai-sdk/provider-utils@2.2.8':
+    resolution: {integrity: sha512-fqhG+4sCVv8x7nFzYnFo19ryhAa3w096Kmc3hWxMQfW/TubPOmt3A6tYZhl4mUfQWWQMsuSkLrtjlWuXBVSGQA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.23.8
+
   '@ai-sdk/provider@0.0.12':
     resolution: {integrity: sha512-oOwPQD8i2Ynpn22cur4sk26FW3mSy6t6/X/K1Ay2yGBKYiSpRyLfObhOrZEGsXDx+3euKy4nEZ193R36NM+tpQ==}
     engines: {node: '>=18'}
@@ -609,26 +624,25 @@ packages:
     resolution: {integrity: sha512-hwj/gFNxpDgEfTaYzCYoslmw01IY9kWLKl/wf8xuPvHtQIzlfXWmmUwc8PnCwxyt8cKzIuV0dfUghCf68HQ0SA==}
     engines: {node: '>=18'}
 
-  '@ai-sdk/react@1.1.2':
+  '@ai-sdk/provider@1.1.3':
-    resolution: {integrity: sha512-bBcRsDaNHzCKSIBbPngMeqbnwZ1RFadXQo9XzHoGrvLANYRwuphGNB8XTXYVLC/eXjoaGVGw2wWf/TYigEnCuA==}
+    resolution: {integrity: sha512-qZMxYJ0qqX/RfnuIaab+zp8UAeJn/ygXXAffR5I4N0n1IrvA6qBsjc8hXLmBiMV2zoXlifkacF7sEFnYnjBcqg==}
+    engines: {node: '>=18'}
+
+  '@ai-sdk/react@1.2.12':
+    resolution: {integrity: sha512-jK1IZZ22evPZoQW3vlkZ7wvjYGYF+tRBKXtrcolduIkQ/m/sOAVcVeVDUDvh1T91xCnWCdUGCPZg2avZ90mv3g==}
     engines: {node: '>=18'}
     peerDependencies:
       react: ^18 || ^19 || ^19.0.0-rc
-      zod: ^3.0.0
+      zod: ^3.23.8
     peerDependenciesMeta:
-      react:
-        optional: true
       zod:
         optional: true
 
-  '@ai-sdk/ui-utils@1.1.2':
+  '@ai-sdk/ui-utils@1.2.11':
-    resolution: {integrity: sha512-+0kfBF4Y9jmlg1KlbNKIxchmXx9PzuReSpgRNWhpU10vfl1eeer4xK/XL2qHnzAWhsMFe/SVZXJIQObk44zNEQ==}
+    resolution: {integrity: sha512-3zcwCc8ezzFlwp3ZD15wAPjf2Au4s3vAbKsXQVyhxODHcmu0iyPO2Eua6D/vicq/AUm/BAo60r97O6HU+EI0+w==}
     engines: {node: '>=18'}
     peerDependencies:
-      zod: ^3.0.0
+      zod: ^3.23.8
-    peerDependenciesMeta:
-      zod:
-        optional: true
 
   '@ampproject/remapping@2.3.0':
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
@@ -2085,6 +2099,10 @@ packages:
   '@mdx-js/mdx@2.3.0':
     resolution: {integrity: sha512-jLuwRlz8DQfQNiUCJR50Y09CGPq3fLtmtUQfVrj79E0JWu3dvsVcxVIcfhR5h0iXu+/z++zDrYeiJqifRynJkA==}
 
+  '@modelcontextprotocol/sdk@1.15.0':
+    resolution: {integrity: sha512-67hnl/ROKdb03Vuu0YOr+baKTvf1/5YBHBm9KnZdjdAh8hjt4FRCPD5ucwxGB237sBpzlqQsLy1PFu7z/ekZ9Q==}
+    engines: {node: '>=18'}
+
   '@nanostores/react@0.7.3':
     resolution: {integrity: sha512-/XuLAMENRu/Q71biW4AZ4qmU070vkZgiQ28gaTSNRPm2SZF5zGAR81zPE1MaMB4SeOp6ZTst92NBaG75XSspNg==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -3549,6 +3567,10 @@ packages:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
 
+  accepts@2.0.0:
+    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+    engines: {node: '>= 0.6'}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -3584,17 +3606,15 @@ packages:
     resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
     engines: {node: '>=8'}
 
-  ai@4.1.2:
+  ai@4.3.16:
-    resolution: {integrity: sha512-11efhPorWFphIpeCgjW6r/jk4wB5RWUGjxayHblBXCq6YEc7o5ki7vlmSnESprsDkMEfmONBWb/xM8pWjR5O2g==}
+    resolution: {integrity: sha512-KUDwlThJ5tr2Vw0A1ZkbDKNME3wzWhuVfAOwIvFUzl1TPVDFAXDFTXio3p+jaKneB+dKNCvFFlolYmmgHttG1g==}
     engines: {node: '>=18'}
     peerDependencies:
       react: ^18 || ^19 || ^19.0.0-rc
-      zod: ^3.0.0
+      zod: ^3.23.8
     peerDependenciesMeta:
       react:
         optional: true
-      zod:
-        optional: true
 
   ajv-formats@3.0.1:
     resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
@@ -3793,6 +3813,10 @@ packages:
     resolution: {integrity: sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
 
+  body-parser@2.2.0:
+    resolution: {integrity: sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==}
+    engines: {node: '>=18'}
+
   boolean@3.2.0:
     resolution: {integrity: sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==}
     deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
@@ -4122,6 +4146,10 @@ packages:
     resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
     engines: {node: '>= 0.6'}
 
+  content-disposition@1.0.0:
+    resolution: {integrity: sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==}
+    engines: {node: '>= 0.6'}
+
   content-type@1.0.5:
     resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
     engines: {node: '>= 0.6'}
@@ -4157,6 +4185,10 @@ packages:
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
+  cors@2.8.5:
+    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
+    engines: {node: '>= 0.10'}
+
   crc-32@1.2.2:
     resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
     engines: {node: '>=0.8'}
@@ -4727,6 +4759,10 @@ packages:
     resolution: {integrity: sha512-VARTJ9CYeuQYb0pZEPbzi740OWFgpHe7AYJ2WFZVnUDUQp5Dk2yJUgF36YsZ81cOyxT0QxmXD2EQpapAouzWVA==}
     engines: {node: '>=18.0.0'}
 
+  eventsource@3.0.7:
+    resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
+    engines: {node: '>=18.0.0'}
+
   evp_bytestokey@1.0.3:
     resolution: {integrity: sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==}
 
@@ -4745,10 +4781,20 @@ packages:
   exponential-backoff@3.1.2:
     resolution: {integrity: sha512-8QxYTVXUkuy7fIIoitQkPwGonB8F3Zj8eEO8Sqg9Zv/bkI7RJAzowee4gr81Hak/dUTpA2Z7VfQgoijjPNlUZA==}
 
+  express-rate-limit@7.5.1:
+    resolution: {integrity: sha512-7iN8iPMDzOMHPUYllBEsQdWVB6fPDMPqwjBaFrgr4Jgr/+okjvzAy+UHlYYL/Vs0OsOrMkwS6PJDkFlJwoxUnw==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      express: '>= 4.11'
+
   express@4.21.2:
     resolution: {integrity: sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==}
     engines: {node: '>= 0.10.0'}
 
+  express@5.1.0:
+    resolution: {integrity: sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==}
+    engines: {node: '>= 18'}
+
   exsolve@1.0.4:
     resolution: {integrity: sha512-xsZH6PXaER4XoV+NiT7JHp1bJodJVT+cxeSH1G0f0tlT0lJqYuHUP3bUx2HtfTDvOagMINYp8rsqusxud3RXhw==}
 
@@ -4824,6 +4870,10 @@ packages:
     resolution: {integrity: sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==}
     engines: {node: '>= 0.8'}
 
+  finalhandler@2.1.0:
+    resolution: {integrity: sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==}
+    engines: {node: '>= 0.8'}
+
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -4877,6 +4927,10 @@ packages:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
 
+  fresh@2.0.0:
+    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+    engines: {node: '>= 0.8'}
+
   fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
@@ -5329,6 +5383,9 @@ packages:
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
+  is-promise@4.0.0:
+    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+
   is-reference@3.0.3:
     resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
 
@@ -5715,12 +5772,20 @@ packages:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
 
+  media-typer@1.1.0:
+    resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
+    engines: {node: '>= 0.8'}
+
   memoize-one@5.2.1:
     resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
 
   merge-descriptors@1.0.3:
     resolution: {integrity: sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==}
 
+  merge-descriptors@2.0.0:
+    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
+    engines: {node: '>=18'}
+
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -5923,6 +5988,10 @@ packages:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
+  mime-types@3.0.1:
+    resolution: {integrity: sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==}
+    engines: {node: '>= 0.6'}
+
   mime@1.6.0:
     resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
     engines: {node: '>=4'}
@@ -6110,6 +6179,10 @@ packages:
     resolution: {integrity: sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==}
     engines: {node: '>= 0.6'}
 
+  negotiator@1.0.0:
+    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
+    engines: {node: '>= 0.6'}
+
   node-abi@3.74.0:
     resolution: {integrity: sha512-c5XK0MjkGBrQPGYG24GBADZud0NCbznxNx0ZkS+ebUTrmV1qTDxPxSL8zEAPURXSbLRWVexxmP4986BziahL5w==}
     engines: {node: '>=10'}
@@ -6340,6 +6413,10 @@ packages:
   path-to-regexp@6.3.0:
     resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
 
+  path-to-regexp@8.2.0:
+    resolution: {integrity: sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==}
+    engines: {node: '>=16'}
+
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
@@ -6393,6 +6470,10 @@ packages:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
 
+  pkce-challenge@5.0.0:
+    resolution: {integrity: sha512-ueGLflrrnvwB3xuo/uGob5pd5FN7l0MsLf0Z87o/UQmRtwjvfylfc9MurIxRAWywCYTgrvpXBcqjV4OfCYGCIQ==}
+    engines: {node: '>=16.20.0'}
+
   pkg-dir@5.0.0:
     resolution: {integrity: sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==}
     engines: {node: '>=10'}
@@ -6607,6 +6688,10 @@ packages:
     resolution: {integrity: sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==}
     engines: {node: '>= 0.8'}
 
+  raw-body@3.0.0:
+    resolution: {integrity: sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==}
+    engines: {node: '>= 0.8'}
+
   react-beautiful-dnd@13.1.1:
     resolution: {integrity: sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==}
     deprecated: 'react-beautiful-dnd is now deprecated. Context and options: https://github.com/atlassian/react-beautiful-dnd/issues/2672'
@@ -6954,6 +7039,10 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  router@2.2.0:
+    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
+    engines: {node: '>= 18'}
+
   rrweb-cssom@0.8.0:
     resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
 
@@ -7137,6 +7226,10 @@ packages:
     resolution: {integrity: sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==}
     engines: {node: '>= 0.8.0'}
 
+  send@1.2.0:
+    resolution: {integrity: sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==}
+    engines: {node: '>= 18'}
+
   serialize-error@7.0.1:
     resolution: {integrity: sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==}
     engines: {node: '>=10'}
@@ -7145,6 +7238,10 @@ packages:
     resolution: {integrity: sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==}
     engines: {node: '>= 0.8.0'}
 
+  serve-static@2.2.0:
+    resolution: {integrity: sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==}
+    engines: {node: '>= 18'}
+
   set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
 
@@ -7596,6 +7693,10 @@ packages:
     resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
     engines: {node: '>= 0.6'}
 
+  type-is@2.0.1:
+    resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
+    engines: {node: '>= 0.6'}
+
   typescript-eslint@8.28.0:
     resolution: {integrity: sha512-jfZtxJoHm59bvoCMYCe2BM0/baMswRhMmYhy+w6VfcyHrjxZ0OJe0tGasydCpIpA+A/WIJhTyZfb3EtwNC/kHQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -8262,6 +8363,13 @@ snapshots:
     optionalDependencies:
       zod: 3.24.2
 
+  '@ai-sdk/provider-utils@2.2.8(zod@3.24.2)':
+    dependencies:
+      '@ai-sdk/provider': 1.1.3
+      nanoid: 3.3.11
+      secure-json-parse: 2.7.0
+      zod: 3.24.2
+
   '@ai-sdk/provider@0.0.12':
     dependencies:
       json-schema: 0.4.0
@@ -8286,23 +8394,26 @@ snapshots:
     dependencies:
       json-schema: 0.4.0
 
-  '@ai-sdk/react@1.1.2(react@18.3.1)(zod@3.24.2)':
+  '@ai-sdk/provider@1.1.3':
     dependencies:
-      '@ai-sdk/provider-utils': 2.1.2(zod@3.24.2)
+      json-schema: 0.4.0
-      '@ai-sdk/ui-utils': 1.1.2(zod@3.24.2)
+
+  '@ai-sdk/react@1.2.12(react@18.3.1)(zod@3.24.2)':
+    dependencies:
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.2)
+      '@ai-sdk/ui-utils': 1.2.11(zod@3.24.2)
+      react: 18.3.1
       swr: 2.3.3(react@18.3.1)
       throttleit: 2.1.0
     optionalDependencies:
-      react: 18.3.1
       zod: 3.24.2
 
-  '@ai-sdk/ui-utils@1.1.2(zod@3.24.2)':
+  '@ai-sdk/ui-utils@1.2.11(zod@3.24.2)':
     dependencies:
-      '@ai-sdk/provider': 1.0.6
+      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.1.2(zod@3.24.2)
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.2)
-      zod-to-json-schema: 3.24.5(zod@3.24.2)
-    optionalDependencies:
       zod: 3.24.2
+      zod-to-json-schema: 3.24.5(zod@3.24.2)
 
   '@ampproject/remapping@2.3.0':
     dependencies:
@@ -9852,6 +9963,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@modelcontextprotocol/sdk@1.15.0':
+    dependencies:
+      ajv: 6.12.6
+      content-type: 1.0.5
+      cors: 2.8.5
+      cross-spawn: 7.0.6
+      eventsource: 3.0.7
+      eventsource-parser: 3.0.1
+      express: 5.1.0
+      express-rate-limit: 7.5.1(express@5.1.0)
+      pkce-challenge: 5.0.0
+      raw-body: 3.0.0
+      zod: 3.24.2
+      zod-to-json-schema: 3.24.5(zod@3.24.2)
+    transitivePeerDependencies:
+      - supports-color
+
   '@nanostores/react@0.7.3(nanostores@0.10.3)(react@18.3.1)':
     dependencies:
       nanostores: 0.10.3
@@ -11686,6 +11814,11 @@ snapshots:
       mime-types: 2.1.35
       negotiator: 0.6.3
 
+  accepts@2.0.0:
+    dependencies:
+      mime-types: 3.0.1
+      negotiator: 1.0.0
+
   acorn-jsx@5.3.2(acorn@8.14.1):
     dependencies:
       acorn: 8.14.1
@@ -11713,17 +11846,17 @@ snapshots:
       clean-stack: 2.2.0
       indent-string: 4.0.0
 
-  ai@4.1.2(react@18.3.1)(zod@3.24.2):
+  ai@4.3.16(react@18.3.1)(zod@3.24.2):
     dependencies:
-      '@ai-sdk/provider': 1.0.6
+      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.1.2(zod@3.24.2)
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.2)
-      '@ai-sdk/react': 1.1.2(react@18.3.1)(zod@3.24.2)
+      '@ai-sdk/react': 1.2.12(react@18.3.1)(zod@3.24.2)
-      '@ai-sdk/ui-utils': 1.1.2(zod@3.24.2)
+      '@ai-sdk/ui-utils': 1.2.11(zod@3.24.2)
       '@opentelemetry/api': 1.9.0
       jsondiffpatch: 0.6.0
+      zod: 3.24.2
     optionalDependencies:
       react: 18.3.1
-      zod: 3.24.2
 
   ajv-formats@3.0.1(ajv@8.17.1):
     optionalDependencies:
@@ -11970,6 +12103,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  body-parser@2.2.0:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 4.4.0
+      http-errors: 2.0.0
+      iconv-lite: 0.6.3
+      on-finished: 2.4.1
+      qs: 6.14.0
+      raw-body: 3.0.0
+      type-is: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
   boolean@3.2.0:
     optional: true
 
@@ -12395,6 +12542,10 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
+  content-disposition@1.0.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
   content-type@1.0.5: {}
 
   convert-source-map@2.0.0: {}
@@ -12417,6 +12568,11 @@ snapshots:
 
   core-util-is@1.0.3: {}
 
+  cors@2.8.5:
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+
   crc-32@1.2.2: {}
 
   crc32-stream@4.0.3:
@@ -13156,6 +13312,10 @@ snapshots:
 
   eventsource-parser@3.0.1: {}
 
+  eventsource@3.0.7:
+    dependencies:
+      eventsource-parser: 3.0.1
+
   evp_bytestokey@1.0.3:
     dependencies:
       md5.js: 1.3.5
@@ -13179,6 +13339,10 @@ snapshots:
 
   exponential-backoff@3.1.2: {}
 
+  express-rate-limit@7.5.1(express@5.1.0):
+    dependencies:
+      express: 5.1.0
+
   express@4.21.2:
     dependencies:
       accepts: 1.3.8
@@ -13215,6 +13379,38 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  express@5.1.0:
+    dependencies:
+      accepts: 2.0.0
+      body-parser: 2.2.0
+      content-disposition: 1.0.0
+      content-type: 1.0.5
+      cookie: 0.7.1
+      cookie-signature: 1.2.2
+      debug: 4.4.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 2.1.0
+      fresh: 2.0.0
+      http-errors: 2.0.0
+      merge-descriptors: 2.0.0
+      mime-types: 3.0.1
+      on-finished: 2.4.1
+      once: 1.4.0
+      parseurl: 1.3.3
+      proxy-addr: 2.0.7
+      qs: 6.14.0
+      range-parser: 1.2.1
+      router: 2.2.0
+      send: 1.2.0
+      serve-static: 2.2.0
+      statuses: 2.0.1
+      type-is: 2.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   exsolve@1.0.4: {}
 
   extend@3.0.2: {}
@@ -13301,6 +13497,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  finalhandler@2.1.0:
+    dependencies:
+      debug: 4.4.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -13348,6 +13555,8 @@ snapshots:
 
   fresh@0.5.2: {}
 
+  fresh@2.0.0: {}
+
   fs-constants@1.0.0: {}
 
   fs-extra@10.1.0:
@@ -13915,6 +14124,8 @@ snapshots:
 
   is-potential-custom-element-name@1.0.1: {}
 
+  is-promise@4.0.0: {}
+
   is-reference@3.0.3:
     dependencies:
       '@types/estree': 1.0.7
@@ -14498,10 +14709,14 @@ snapshots:
 
   media-typer@0.3.0: {}
 
+  media-typer@1.1.0: {}
+
   memoize-one@5.2.1: {}
 
   merge-descriptors@1.0.3: {}
 
+  merge-descriptors@2.0.0: {}
+
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
@@ -14930,6 +15145,10 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
+  mime-types@3.0.1:
+    dependencies:
+      mime-db: 1.54.0
+
   mime@1.6.0: {}
 
   mime@2.6.0: {}
@@ -15087,6 +15306,8 @@ snapshots:
 
   negotiator@0.6.4: {}
 
+  negotiator@1.0.0: {}
+
   node-abi@3.74.0:
     dependencies:
       semver: 7.7.1
@@ -15366,6 +15587,8 @@ snapshots:
 
   path-to-regexp@6.3.0: {}
 
+  path-to-regexp@8.2.0: {}
+
   pathe@1.1.2: {}
 
   pathe@2.0.3: {}
@@ -15411,6 +15634,8 @@ snapshots:
 
   pify@4.0.1: {}
 
+  pkce-challenge@5.0.0: {}
+
   pkg-dir@5.0.0:
     dependencies:
       find-up: 5.0.0
@@ -15618,6 +15843,13 @@ snapshots:
       iconv-lite: 0.4.24
       unpipe: 1.0.0
 
+  raw-body@3.0.0:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.0
+      iconv-lite: 0.6.3
+      unpipe: 1.0.0
+
   react-beautiful-dnd@13.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.27.0
@@ -16030,6 +16262,16 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.38.0
       fsevents: 2.3.3
 
+  router@2.2.0:
+    dependencies:
+      debug: 4.4.0
+      depd: 2.0.0
+      is-promise: 4.0.0
+      parseurl: 1.3.3
+      path-to-regexp: 8.2.0
+    transitivePeerDependencies:
+      - supports-color
+
   rrweb-cssom@0.8.0: {}
 
   run-parallel@1.2.0:
@@ -16189,6 +16431,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  send@1.2.0:
+    dependencies:
+      debug: 4.4.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 2.0.0
+      http-errors: 2.0.0
+      mime-types: 3.0.1
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
   serialize-error@7.0.1:
     dependencies:
       type-fest: 0.13.1
@@ -16203,6 +16461,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  serve-static@2.2.0:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 1.2.0
+    transitivePeerDependencies:
+      - supports-color
+
   set-blocking@2.0.0: {}
 
   set-cookie-parser@2.7.1: {}
@@ -16679,6 +16946,12 @@ snapshots:
       media-typer: 0.3.0
       mime-types: 2.1.35
 
+  type-is@2.0.1:
+    dependencies:
+      content-type: 1.0.5
+      media-typer: 1.1.0
+      mime-types: 3.0.1
+
   typescript-eslint@8.28.0(eslint@9.23.0(jiti@1.21.7))(typescript@5.8.2):
     dependencies:
       '@typescript-eslint/eslint-plugin': 8.28.0(@typescript-eslint/parser@8.28.0(eslint@9.23.0(jiti@1.21.7))(typescript@5.8.2))(eslint@9.23.0(jiti@1.21.7))(typescript@5.8.2)