feat: init MCP server (#2)

Signed-off-by: Jintao Zhang <zhangjintao9020@gmail.com>

server/index.js

@@ -3,6 +3,9 @@ import cors from 'cors';
 import fetch from 'node-fetch';
 import path from 'path'
 import { fileURLToPath } from 'url'
+import { callMcpServer, discoverMcpServerTools, executeMcpTool } from './mcp.js';
+
+// Note: Run the mock MCP server separately with: node server/start-mock-mcp.js
 
 const app = express();
 const port = 7860;
@@ -15,7 +18,7 @@ app.use(express.json());
 
 app.post('/api/summarize', async (req, res) => {
   const { content, apiEndpoint, apiKey, model } = req.body;
-  
+
   console.log('Received summarize request with:', {
     apiEndpoint,
     model,
@@ -32,7 +35,7 @@ app.post('/api/summarize', async (req, res) => {
         apiUrl = `${apiEndpoint}/v1/chat/completions`;
     }
     console.log('Calling API endpoint:', apiUrl);
-    
+
     const response = await fetch(apiUrl, {
       method: 'POST',
       headers: {
@@ -70,7 +73,7 @@ app.post('/api/summarize', async (req, res) => {
 
 app.post('/api/chat', async (req, res) => {
   const { messages, apiEndpoint, apiKey, model } = req.body;
-  
+
   console.log('Received chat request with:', {
     apiEndpoint,
     model,
@@ -87,7 +90,7 @@ app.post('/api/chat', async (req, res) => {
         apiUrl = `${apiEndpoint}/v1/chat/completions`;
     }
     console.log('Calling API endpoint:', apiUrl);
-    
+
     const response = await fetch(apiUrl, {
       method: 'POST',
       headers: {
@@ -148,6 +151,51 @@ if (process.env.NODE_ENV === 'production') {
   })
 }
 
+// MCP endpoints
+app.post('/api/mcp/discover', async (req, res) => {
+  const { server } = req.body;
+
+  console.log('Received MCP discovery request for server:', server);
+
+  if (!server || !server.endpoint) {
+    console.log('Invalid server configuration');
+    return res.status(400).json({ error: 'Invalid server configuration' });
+  }
+
+  try {
+    console.log(`Discovering tools from MCP server: ${server.name} at ${server.endpoint}`);
+    const toolsInfo = await discoverMcpServerTools(server);
+    console.log('Discovered tools:', toolsInfo);
+    res.json(toolsInfo);
+  } catch (error) {
+    console.error('Error discovering MCP tools:', error);
+    res.status(500).json({ error: error.message });
+  }
+});
+
+app.post('/api/mcp/execute', async (req, res) => {
+  const { server, tool, parameters } = req.body;
+
+  console.log(`Received MCP tool execution request: ${tool}`);
+  console.log('Server:', server);
+  console.log('Parameters:', parameters);
+
+  if (!server || !server.endpoint || !tool) {
+    console.log('Invalid request parameters');
+    return res.status(400).json({ error: 'Invalid request parameters' });
+  }
+
+  try {
+    console.log(`Executing MCP tool ${tool} on server ${server.name}`);
+    const result = await executeMcpTool(server, tool, parameters);
+    console.log('Tool execution result:', result);
+    res.json(result);
+  } catch (error) {
+    console.error('Error executing MCP tool:', error);
+    res.status(500).json({ error: error.message });
+  }
+});
+
 app.listen(port, () => {
   console.log(`Server running at http://localhost:${port}`);
 });

server/mcp.js

@@ -0,0 +1,81 @@
+// MCP (Model Context Protocol) client implementation
+import fetch from 'node-fetch';
+
+// Function to call an MCP server
+export async function callMcpServer(server, request) {
+  try {
+    console.log(`Calling MCP server: ${server.name} at ${server.endpoint}`);
+
+    const headers = {
+      'Content-Type': 'application/json'
+    };
+
+    // Add authentication if provided
+    if (server.authToken) {
+      headers['Authorization'] = `Bearer ${server.authToken}`;
+    }
+
+    const response = await fetch(server.endpoint, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify(request)
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error(`MCP server error: ${response.status}`, errorText);
+      throw new Error(`MCP server error: ${response.status} - ${errorText}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error(`Error calling MCP server ${server.name}:`, error);
+    throw error;
+  }
+}
+
+// Function to discover available tools from an MCP server
+export async function discoverMcpServerTools(server) {
+  try {
+    console.log(`[MCP] Discovering tools from server ${server.name} at ${server.endpoint}`);
+    const discoveryRequest = {
+      type: 'discovery'
+    };
+
+    console.log('[MCP] Sending discovery request:', discoveryRequest);
+    const response = await callMcpServer(server, discoveryRequest);
+    console.log('[MCP] Discovery response:', response);
+
+    const result = {
+      serverId: server.id,
+      serverName: server.name,
+      tools: response.tools || []
+    };
+    console.log('[MCP] Processed discovery result:', result);
+    return result;
+  } catch (error) {
+    console.error(`[MCP] Error discovering tools from MCP server ${server.name}:`, error);
+    return {
+      serverId: server.id,
+      serverName: server.name,
+      tools: [],
+      error: error.message
+    };
+  }
+}
+
+// Function to execute a tool on an MCP server
+export async function executeMcpTool(server, toolName, parameters) {
+  try {
+    const toolRequest = {
+      type: 'tool_execution',
+      tool: toolName,
+      parameters
+    };
+
+    return await callMcpServer(server, toolRequest);
+  } catch (error) {
+    console.error(`Error executing tool ${toolName} on MCP server ${server.name}:`, error);
+    throw error;
+  }
+}

server/mock-mcp-server.js

@@ -0,0 +1,99 @@
+// Mock MCP server for testing
+import express from 'express';
+import cors from 'cors';
+
+const app = express();
+const port = 7861;
+
+app.use(cors());
+app.use(express.json());
+
+// Mock MCP tools
+const mockTools = [
+  {
+    name: 'web-search',
+    description: 'Search the web for information',
+    parameters: {
+      query: {
+        type: 'string',
+        description: 'The search query'
+      }
+    }
+  },
+  {
+    name: 'weather',
+    description: 'Get current weather information',
+    parameters: {
+      location: {
+        type: 'string',
+        description: 'The location to get weather for'
+      }
+    }
+  },
+  {
+    name: 'calculator',
+    description: 'Perform mathematical calculations',
+    parameters: {
+      expression: {
+        type: 'string',
+        description: 'The mathematical expression to evaluate'
+      }
+    }
+  }
+];
+
+// MCP discovery endpoint
+app.post('/', (req, res) => {
+  const { type } = req.body;
+
+  if (type === 'discovery') {
+    console.log('Received discovery request');
+    res.json({
+      tools: mockTools
+    });
+  } else if (type === 'tool_execution') {
+    const { tool, parameters } = req.body;
+    console.log(`Executing tool: ${tool} with parameters:`, parameters);
+
+    // Mock responses for different tools
+    if (tool === 'web-search') {
+      res.json({
+        result: `Search results for: ${parameters.query || 'unknown query'}`,
+        links: [
+          { title: 'Example result 1', url: 'https://example.com/1' },
+          { title: 'Example result 2', url: 'https://example.com/2' }
+        ]
+      });
+    } else if (tool === 'weather') {
+      res.json({
+        location: parameters.location || 'unknown location',
+        temperature: '22°C',
+        condition: 'Sunny',
+        humidity: '45%'
+      });
+    } else if (tool === 'calculator') {
+      let result;
+      try {
+        // Simple evaluation (not secure for production)
+        result = eval(parameters.expression);
+      } catch (error) {
+        result = 'Error evaluating expression';
+      }
+
+      res.json({
+        expression: parameters.expression,
+        result: result
+      });
+    } else {
+      res.status(400).json({ error: `Unknown tool: ${tool}` });
+    }
+  } else {
+    res.status(400).json({ error: 'Invalid request type' });
+  }
+});
+
+const server = app.listen(port, () => {
+  console.log(`Mock MCP server running at http://localhost:${port}`);
+});
+
+export default { app, server };

server/start-mock-mcp.js

@@ -0,0 +1,2 @@
+// Start the mock MCP server
+import './mock-mcp-server.js';

src/App.jsx

@@ -23,6 +23,8 @@ function App() {
     model: 'DeepSeek-R1'
   });
 
+  const [mcpServers, setMcpServers] = useLocalStorage('mcpServers', []);
+
   const [activeProfileId, setActiveProfileId] = useLocalStorage('activeProfileId', 'default');
 
   const [chats, setChats] = useLocalStorage('chats', []);
@@ -228,6 +230,7 @@ function App() {
               isStreamingChat={isStreamingChat}
               allChats={chats}
               currentChatId={currentChatId}
+              mcpServers={mcpServers}
             />
           ) : (
             <div className="flex flex-col items-center justify-center h-full p-5 text-center">
@@ -262,6 +265,8 @@ function App() {
               }}
               onSaveSummarizationProfile={setSummarizationProfile}
               summarizationProfile={summarizationProfile}
+              mcpServers={mcpServers}
+              onSaveMcpServers={setMcpServers}
               onChangeActiveProfile={setActiveProfileId}
               onCloseSettings={() => setShowSettings(false)}
             />

src/components/ChatWindow.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
+import useMcp from '../hooks/useMcp';
 
 function ChatWindow({
   chat,
@@ -11,7 +12,8 @@ function ChatWindow({
   removeStreamingChat,
   isStreamingChat,
   allChats,
-  currentChatId
+  currentChatId,
+  mcpServers
 }) {
   const [input, setInput] = useState('');
   const [isLoading, setIsLoading] = useState(false);
@@ -19,8 +21,55 @@ function ChatWindow({
   const [partialResponse, setPartialResponse] = useState('');
   const [streamController, setStreamController] = useState(null);
   const [copiedMessageId, setCopiedMessageId] = useState(null);
+  const [showMcpTools, setShowMcpTools] = useState(false);
   const messagesEndRef = useRef(null);
 
+  // Initialize MCP hook
+  const { getAllTools, executeTool } = useMcp(mcpServers);
+
+  // 检测是否需要使用MCP工具来回答用户的问题
+  const shouldUseMcpTool = (userInput) => {
+    // 如果没有可用的MCP工具，则不使用
+    const availableTools = getAllTools();
+    if (!availableTools || availableTools.length === 0) {
+      return false;
+    }
+
+    // 定义可能需要使用MCP工具的问题类型
+    const informationQuestions = [
+      'what is', 'who is', 'tell me about', 'how to', 'where is',
+      'when was', 'why is', 'how does', 'what are', 'can you explain',
+      'information about', 'details on', 'facts about', 'history of',
+      'latest news', 'current events', 'recent developments'
+    ];
+
+    const weatherQuestions = [
+      'weather', 'temperature', 'forecast', 'how hot', 'how cold',
+      'is it raining', 'is it sunny', 'will it rain', 'climate'
+    ];
+
+    const calculationQuestions = [
+      'calculate', 'compute', 'solve', 'what is', 'evaluate',
+      'plus', 'minus', 'times', 'divided by', 'square root',
+      'percentage', 'factorial', 'exponent', 'logarithm'
+    ];
+
+    // 检查用户输入是否包含这些问题类型的关键词
+    const input = userInput.toLowerCase();
+
+    // 检查是否是信息查询类型的问题
+    const isInformationQuestion = informationQuestions.some(keyword => input.includes(keyword.toLowerCase()));
+
+    // 检查是否是天气查询类型的问题
+    const isWeatherQuestion = weatherQuestions.some(keyword => input.includes(keyword.toLowerCase()));
+
+    // 检查是否是计算类型的问题
+    const isCalculationQuestion = calculationQuestions.some(keyword => input.includes(keyword.toLowerCase()));
+
+    // 如果是任何一种类型的问题，则可能需要使用MCP工具
+    return isInformationQuestion || isWeatherQuestion || isCalculationQuestion;
+  };
+
   // Scroll to bottom when messages change
   useEffect(() => {
     if (chat && chat.messages) {
@@ -53,6 +102,184 @@ function ChatWindow({
     setCollapsedThinks(newCollapsed);
   };
 
+  // Handle MCP tool execution
+  const handleExecuteMcpTool = async (serverId, toolName, parameters) => {
+    try {
+      setIsLoading(true);
+      const result = await executeTool(serverId, toolName, parameters);
+
+      // Add the tool execution and result to the chat
+      const toolMessage = {
+        role: 'user',
+        content: `Executing MCP tool: ${toolName}`,
+        timestamp: Date.now(),
+        mcpTool: {
+          serverId,
+          toolName,
+          parameters
+        }
+      };
+
+      const resultMessage = {
+        role: 'assistant',
+        content: JSON.stringify(result, null, 2),
+        timestamp: Date.now(),
+        mcpResult: true
+      };
+
+      const updatedChat = {
+        ...chat,
+        messages: [...chat.messages, toolMessage, resultMessage]
+      };
+
+      onUpdateChat(updatedChat);
+      setShowMcpTools(false);
+    } catch (error) {
+      console.error('Error executing MCP tool:', error);
+
+      // Add error message to chat
+      const errorMessage = {
+        role: 'assistant',
+        content: `Error executing MCP tool: ${error.message}`,
+        timestamp: Date.now(),
+        error: true
+      };
+
+      const updatedChat = {
+        ...chat,
+        messages: [...chat.messages, errorMessage]
+      };
+
+      onUpdateChat(updatedChat);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 检测用户输入是否需要使用MCP工具
+  const detectMcpToolRequest = (userInput) => {
+    console.log('Detecting MCP tool request for:', userInput);
+    // 获取所有可用的MCP工具
+    const availableTools = getAllTools();
+    if (!availableTools || availableTools.length === 0) {
+      return null;
+    }
+
+    // 定义工具的意图模式和关键词
+    const toolPatterns = {
+      'web-search': {
+        intents: ['search', 'find', 'look up', 'google', 'information about', 'tell me about', 'what is', 'who is'],
+        paramExtractor: (input) => {
+          // 尝试不同的模式来提取查询
+          const patterns = [
+            /search\s+for\s+([\w\s\d\-\.,?!]+)/i,
+            /search\s+([\w\s\d\-\.,?!]+)/i,
+            /find\s+([\w\s\d\-\.,?!]+)/i,
+            /look\s+up\s+([\w\s\d\-\.,?!]+)/i,
+            /information\s+about\s+([\w\s\d\-\.,?!]+)/i,
+            /tell\s+me\s+about\s+([\w\s\d\-\.,?!]+)/i,
+            /what\s+is\s+([\w\s\d\-\.,?!]+)/i,
+            /who\s+is\s+([\w\s\d\-\.,?!]+)/i
+          ];
+
+          for (const pattern of patterns) {
+            const match = input.match(pattern);
+            if (match && match[1]) {
+              return { query: match[1].trim() };
+            }
+          }
+
+          // 如果没有匹配到特定模式，使用整个输入作为查询
+          return { query: input.trim() };
+        }
+      },
+      'weather': {
+        intents: ['weather', 'temperature', 'forecast', 'how hot', 'how cold', 'raining', 'sunny'],
+        paramExtractor: (input) => {
+          // 尝试不同的模式来提取位置
+          const patterns = [
+            /weather\s+in\s+([\w\s\d\-\.,]+)/i,
+            /temperature\s+in\s+([\w\s\d\-\.,]+)/i,
+            /forecast\s+for\s+([\w\s\d\-\.,]+)/i,
+            /how\s+(?:hot|cold)\s+is\s+it\s+in\s+([\w\s\d\-\.,]+)/i,
+            /is\s+it\s+(?:raining|sunny)\s+in\s+([\w\s\d\-\.,]+)/i
+          ];
+
+          for (const pattern of patterns) {
+            const match = input.match(pattern);
+            if (match && match[1]) {
+              return { location: match[1].trim() };
+            }
+          }
+
+          // 如果没有指定位置，使用默认位置
+          return { location: 'current location' };
+        }
+      },
+      'calculator': {
+        intents: ['calculate', 'compute', 'math', 'solve', 'what is', 'evaluate'],
+        paramExtractor: (input) => {
+          // 尝试不同的模式来提取表达式
+          const patterns = [
+            /calculate\s+([\d\+\-\*\/\(\)\s\.]+)/i,
+            /compute\s+([\d\+\-\*\/\(\)\s\.]+)/i,
+            /solve\s+([\d\+\-\*\/\(\)\s\.]+)/i,
+            /what\s+is\s+([\d\+\-\*\/\(\)\s\.]+)/i,
+            /evaluate\s+([\d\+\-\*\/\(\)\s\.]+)/i
+          ];
+
+          for (const pattern of patterns) {
+            const match = input.match(pattern);
+            if (match && match[1]) {
+              return { expression: match[1].trim() };
+            }
+          }
+
+          // 如果没有匹配到特定模式，尝试提取数学表达式
+          const mathExpressionMatch = input.match(/([\d\+\-\*\/\(\)\s\.]+)/i);
+          if (mathExpressionMatch && mathExpressionMatch[1]) {
+            return { expression: mathExpressionMatch[1].trim() };
+          }
+
+          return { expression: '' };
+        }
+      }
+    };
+
+    // 检查每个工具
+    for (const tool of availableTools) {
+      const toolPattern = toolPatterns[tool.name];
+
+      // 如果有这个工具的模式定义
+      if (toolPattern) {
+        // 检查是否匹配任何意图
+        const matchesIntent = toolPattern.intents.some(intent =>
+          userInput.toLowerCase().includes(intent.toLowerCase())
+        );
+
+        if (matchesIntent) {
+          // 提取参数
+          const parameters = toolPattern.paramExtractor(userInput);
+
+          return {
+            tool,
+            parameters
+          };
+        }
+      } else {
+        // 如果没有定义特定模式，使用简单的关键词匹配
+        if (userInput.toLowerCase().includes(tool.name.toLowerCase())) {
+          return {
+            tool,
+            parameters: {}
+          };
+        }
+      }
+    }
+
+    return null;
+  };
+
   const handleSendMessage = async () => {
     if (!input.trim()) return;
     if (!chat || !chat.messages) return; // Add safety check
@@ -62,6 +289,145 @@ function ChatWindow({
     const userInput = input; // 保存用户输入，以便在流结束后仍能访问
     console.log(`Starting message send for chat ${currentChatID}`);
 
+    // 检测是否需要使用MCP工具
+    let toolRequest = detectMcpToolRequest(userInput);
+
+    // 如果没有直接检测到工具请求，但问题类型可能需要使用MCP工具
+    if (!toolRequest && shouldUseMcpTool(userInput)) {
+      console.log('Question might benefit from MCP tools, trying to find a suitable tool...');
+
+      // 获取所有可用的工具
+      const availableTools = getAllTools();
+
+      // 尝试找到最适合的工具
+      if (userInput.toLowerCase().includes('weather') ||
+          userInput.toLowerCase().includes('temperature') ||
+          userInput.toLowerCase().includes('forecast')) {
+        // 天气相关问题
+        const weatherTool = availableTools.find(tool => tool.name === 'weather');
+        if (weatherTool) {
+          // 提取位置
+          const locationMatch = userInput.match(/(?:in|at|for)\s+([\w\s,]+)(?:\?|\.|$)/i);
+          const location = locationMatch ? locationMatch[1].trim() : 'current location';
+
+          toolRequest = {
+            tool: weatherTool,
+            parameters: { location }
+          };
+        }
+      } else if (userInput.match(/[\d\+\-\*\/\(\)]/)) {
+        // 包含数学表达式
+        const calculatorTool = availableTools.find(tool => tool.name === 'calculator');
+        if (calculatorTool) {
+          const expressionMatch = userInput.match(/([\d\+\-\*\/\(\)\s\.]+)/i);
+          const expression = expressionMatch ? expressionMatch[1].trim() : '';
+
+          toolRequest = {
+            tool: calculatorTool,
+            parameters: { expression }
+          };
+        }
+      } else {
+        // 其他信息查询问题
+        const searchTool = availableTools.find(tool => tool.name === 'web-search');
+        if (searchTool) {
+          toolRequest = {
+            tool: searchTool,
+            parameters: { query: userInput }
+          };
+        }
+      }
+    }
+
+    // 如果检测到工具请求，自动使用相应的工具
+    if (toolRequest) {
+      console.log(`Detected MCP tool request: ${toolRequest.tool.name}`);
+      console.log(`Parameters: `, toolRequest.parameters);
+
+      // 添加用户消息
+      const newMessage = {
+        role: 'user',
+        content: userInput,
+        timestamp: Date.now()
+      };
+
+      const updatedChat = {
+        ...chat,
+        messages: [...chat.messages, newMessage]
+      };
+      onUpdateChat(updatedChat);
+      setInput('');
+
+      // 执行工具
+      try {
+        setIsLoading(true);
+        const result = await executeTool(toolRequest.tool.serverId, toolRequest.tool.name, toolRequest.parameters);
+
+        // 添加工具执行结果消息
+        let formattedResult = '';
+
+        // 根据工具类型格式化结果
+        if (toolRequest.tool.name === 'web-search') {
+          formattedResult = `**Search Results:**\n\n`;
+          if (result.links && Array.isArray(result.links)) {
+            result.links.forEach((link, index) => {
+              formattedResult += `${index + 1}. [${link.title}](${link.url})\n`;
+            });
+          } else {
+            formattedResult += result.result || JSON.stringify(result, null, 2);
+          }
+        } else if (toolRequest.tool.name === 'weather') {
+          formattedResult = `**Weather in ${result.location || 'the requested location'}:**\n\n`;
+          formattedResult += `- Temperature: ${result.temperature || 'N/A'}\n`;
+          formattedResult += `- Condition: ${result.condition || 'N/A'}\n`;
+          formattedResult += `- Humidity: ${result.humidity || 'N/A'}\n`;
+        } else if (toolRequest.tool.name === 'calculator') {
+          formattedResult = `**Calculation Result:**\n\n`;
+          formattedResult += `Expression: ${result.expression || toolRequest.parameters.expression}\n`;
+          formattedResult += `Result: ${result.result !== undefined ? result.result : 'Error in calculation'}\n`;
+        } else {
+          // 其他工具类型的默认格式
+          formattedResult = JSON.stringify(result, null, 2);
+        }
+
+        const toolMessage = {
+          role: 'assistant',
+          content: `I used the ${toolRequest.tool.name} tool to help answer your question.\n\n${formattedResult}`,
+          timestamp: Date.now(),
+          mcpResult: true
+        };
+
+        const finalChat = {
+          ...updatedChat,
+          messages: [...updatedChat.messages, toolMessage]
+        };
+
+        onUpdateChat(finalChat);
+      } catch (error) {
+        console.error('Error executing MCP tool:', error);
+
+        // 添加错误消息
+        const errorMessage = {
+          role: 'assistant',
+          content: `I tried to use the ${toolRequest.tool.name} tool, but encountered an error: ${error.message}`,
+          timestamp: Date.now(),
+          error: true
+        };
+
+        const errorChat = {
+          ...updatedChat,
+          messages: [...updatedChat.messages, errorMessage]
+        };
+
+        onUpdateChat(errorChat);
+      } finally {
+        setIsLoading(false);
+      }
+
+      return;
+    }
+
+    // 如果不是工具请求，正常发送消息
     // Cancel any ongoing stream for this chat
     if (streamController) {
       streamController.abort();
@@ -341,6 +707,9 @@ function ChatWindow({
     });
   };
 
+  // Get all available MCP tools
+  const mcpTools = getAllTools();
+
   return (
     <div className="chat-window relative">
       {/* Floating New Chat button */}
@@ -440,6 +809,16 @@ function ChatWindow({
 
       <div className="chat-input">
         <div className="flex items-center gap-2 w-full">
+          {mcpTools.length > 0 && (
+            <button
+              className="mcp-tools-button"
+              onClick={() => setShowMcpTools(!showMcpTools)}
+              title="MCP Tools"
+            >
+              🧰
+            </button>
+          )}
+
           <textarea
             className="message-input"
             value={input}
@@ -460,9 +839,45 @@ function ChatWindow({
             >
               Send
             </button>
-
           </div>
         </div>
+
+        {showMcpTools && (
+          <div className="mcp-tools-panel">
+            <h3>Available MCP Tools</h3>
+            <div className="mcp-tools-list">
+              {mcpTools.map((tool, index) => (
+                <div key={`${tool.serverId}-${tool.name}-${index}`} className="mcp-tool-item">
+                  <div className="mcp-tool-header">
+                    <strong>{tool.name}</strong>
+                    <span className="mcp-server-name">({tool.serverName})</span>
+                  </div>
+                  <p className="mcp-tool-description">{tool.description}</p>
+                  <button
+                    className="mcp-tool-execute-button"
+                    onClick={() => {
+                      // For simplicity, we're not implementing parameter input UI
+                      // In a real implementation, you would show a form for parameters
+                      const parameters = {};
+                      handleExecuteMcpTool(tool.serverId, tool.name, parameters);
+                    }}
+                  >
+                    Execute
+                  </button>
+                </div>
+              ))}
+              {mcpTools.length === 0 && (
+                <p className="no-tools-message">No MCP tools available. Add MCP servers in settings.</p>
+              )}
+            </div>
+            <button
+              className="close-mcp-tools-button"
+              onClick={() => setShowMcpTools(false)}
+            >
+              Close
+            </button>
+          </div>
+        )}
       </div>
     </div>
   );

src/components/Settings.jsx

@@ -1,13 +1,15 @@
 import { useState } from 'react';
 
-function Settings({ 
-  profiles, 
-  activeProfileId, 
-  onSaveProfiles, 
-  onChangeActiveProfile, 
+function Settings({
+  profiles,
+  activeProfileId,
+  onSaveProfiles,
+  onChangeActiveProfile,
   onCloseSettings,
   onSaveSummarizationProfile,
-  summarizationProfile 
+  summarizationProfile,
+  mcpServers,
+  onSaveMcpServers
 }) {
   const [localProfiles, setLocalProfiles] = useState(profiles);
   const [localSummarizationProfile, setLocalSummarizationProfile] = useState(summarizationProfile || {
@@ -16,14 +18,17 @@ function Settings({
     apiKey: '',
     model: 'DeepSeek-R1'
   });
+  const [localMcpServers, setLocalMcpServers] = useState(mcpServers || []);
   const [editingProfileId, setEditingProfileId] = useState(activeProfileId);
+  const [editingMcpServerId, setEditingMcpServerId] = useState(null);
   const [isHintExpanded, setIsHintExpanded] = useState(false);
+  const [isMcpHintExpanded, setIsMcpHintExpanded] = useState(false);
 
   const editingProfile = localProfiles.find(p => p.id === editingProfileId) || localProfiles[0];
-  const editingSummarizationProfile = localSummarizationProfile;
+  const editingMcpServer = localMcpServers.find(s => s.id === editingMcpServerId) || null;
 
   const handleProfileChange = (updatedProfile) => {
-    setLocalProfiles(localProfiles.map(p => 
+    setLocalProfiles(localProfiles.map(p =>
       p.id === updatedProfile.id ? updatedProfile : p
     ));
   };
@@ -32,6 +37,12 @@ function Settings({
     setLocalSummarizationProfile(updatedProfile);
   };
 
+  const handleMcpServerChange = (updatedServer) => {
+    setLocalMcpServers(localMcpServers.map(s =>
+      s.id === updatedServer.id ? updatedServer : s
+    ));
+  };
+
   const handleAddProfile = () => {
     const newId = `profile-${Date.now()}`;
     const newProfile = {
@@ -41,7 +52,7 @@ function Settings({
       apiKey: '',
       model: 'DeepSeek-R1'
     };
-    
+
     const updatedProfiles = [...localProfiles, newProfile];
     setLocalProfiles(updatedProfiles);
     setEditingProfileId(newId);
@@ -55,16 +66,43 @@ function Settings({
 
     const updatedProfiles = localProfiles.filter(p => p.id !== profileId);
     setLocalProfiles(updatedProfiles);
-    
+
     if (editingProfileId === profileId) {
       setEditingProfileId(updatedProfiles[0].id);
     }
   };
 
+  const handleAddMcpServer = () => {
+    const newId = `mcp-server-${Date.now()}`;
+    const newServer = {
+      id: newId,
+      name: `MCP Server ${localMcpServers.length + 1}`,
+      endpoint: '',
+      authToken: '',
+      description: ''
+    };
+
+    const updatedServers = [...localMcpServers, newServer];
+    setLocalMcpServers(updatedServers);
+    setEditingMcpServerId(newId);
+  };
+
+  const handleDeleteMcpServer = (serverId) => {
+    const updatedServers = localMcpServers.filter(s => s.id !== serverId);
+    setLocalMcpServers(updatedServers);
+
+    if (editingMcpServerId === serverId) {
+      setEditingMcpServerId(updatedServers.length > 0 ? updatedServers[0].id : null);
+    }
+  };
+
   const handleSubmit = (e) => {
     e.preventDefault();
     onSaveProfiles(localProfiles);
     onSaveSummarizationProfile(localSummarizationProfile);
+    if (onSaveMcpServers) {
+      onSaveMcpServers(localMcpServers);
+    }
     onChangeActiveProfile(editingProfileId);
     onCloseSettings();
   };
@@ -72,29 +110,29 @@ function Settings({
   return (
     <div className="settings-panel">
       <h2>Settings</h2>
-      
+
       <div className="profiles-section">
         <div className="profiles-header">
           <h3>Chat Profiles</h3>
-          <button 
-            type="button" 
+          <button
+            type="button"
             className="add-profile-button"
             onClick={handleAddProfile}
           >
             + Add Profile
           </button>
         </div>
-        
+
         <div className="profiles-list">
           {localProfiles.map(profile => (
-            <div 
-              key={profile.id} 
+            <div
+              key={profile.id}
               className={`profile-item ${profile.id === editingProfileId ? 'active' : ''}`}
               onClick={() => setEditingProfileId(profile.id)}
             >
               <span>{profile.name}</span>
               {localProfiles.length > 1 && (
-                <button 
+                <button
                   className="delete-profile-button"
                   onClick={(e) => {
                     e.stopPropagation();
@@ -113,7 +151,7 @@ function Settings({
         {editingProfile && (
           <div className="current-profile-section">
             <h3>Edit Chat Profile: {editingProfile.name}</h3>
-            
+
             <div className="setting-item">
               <label>Profile Name:</label>
               <input
@@ -121,11 +159,12 @@ function Settings({
                 value={editingProfile.name}
                 onChange={(e) => handleProfileChange({
                   ...editingProfile,
-                    })}
+                  name: e.target.value
+                })}
                 placeholder="Enter profile name"
               />
             </div>
-            
+
             <div className="setting-item">
               <label>API Endpoint:</label>
               <input
@@ -138,8 +177,8 @@ function Settings({
                 placeholder="Enter API endpoint"
               />
               <div className="setting-hint">
-                <button 
-                  type="button" 
+                <button
+                  type="button"
                   className="hint-toggle"
                   onClick={() => setIsHintExpanded(!isHintExpanded)}
                 >
@@ -155,7 +194,7 @@ function Settings({
                 </div>
               </div>
             </div>
-            
+
             <div className="setting-item">
               <label>API Key:</label>
               <input
@@ -168,7 +207,7 @@ function Settings({
                 placeholder="Enter your API key"
               />
             </div>
-            
+
             <div className="setting-item">
               <label>Model:</label>
               <input
@@ -184,7 +223,7 @@ function Settings({
           </div>
         )}
 
-        
+
       <div className="profiles-section">
         <h3>Summarization Profile</h3>
         <div className="current-profile-section">
@@ -200,7 +239,7 @@ function Settings({
               placeholder="Enter API endpoint"
             />
           </div>
-          
+
           <div className="setting-item">
             <label>API Key:</label>
             <input
@@ -213,7 +252,7 @@ function Settings({
               placeholder="Enter your API key"
             />
           </div>
-          
+
           <div className="setting-item">
             <label>Model:</label>
             <input
@@ -229,6 +268,122 @@ function Settings({
         </div>
       </div>
 
+        {/* MCP Servers Section */}
+        <div className="profiles-section">
+          <div className="profiles-header">
+            <h3>MCP Servers</h3>
+            <button
+              type="button"
+              className="add-profile-button"
+              onClick={handleAddMcpServer}
+            >
+              + Add MCP Server
+            </button>
+          </div>
+
+          <div className="profiles-list">
+            {localMcpServers.map(server => (
+              <div
+                key={server.id}
+                className={`profile-item ${server.id === editingMcpServerId ? 'active' : ''}`}
+                onClick={() => setEditingMcpServerId(server.id)}
+              >
+                <span>{server.name}</span>
+                <button
+                  className="delete-profile-button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleDeleteMcpServer(server.id);
+                  }}
+                >
+                  ×
+                </button>
+              </div>
+            ))}
+            {localMcpServers.length === 0 && (
+              <div className="empty-state">
+                <p>No MCP servers added yet. Add a server to enable Model Context Protocol capabilities.</p>
+              </div>
+            )}
+          </div>
+
+          {editingMcpServer && (
+            <div className="current-profile-section">
+              <h3>Edit MCP Server: {editingMcpServer.name}</h3>
+
+              <div className="setting-item">
+                <label>Server Name:</label>
+                <input
+                  type="text"
+                  value={editingMcpServer.name}
+                  onChange={(e) => handleMcpServerChange({
+                    ...editingMcpServer,
+                    name: e.target.value
+                  })}
+                  placeholder="Enter server name"
+                />
+              </div>
+
+              <div className="setting-item">
+                <label>Endpoint URL:</label>
+                <input
+                  type="text"
+                  value={editingMcpServer.endpoint}
+                  onChange={(e) => handleMcpServerChange({
+                    ...editingMcpServer,
+                    endpoint: e.target.value
+                  })}
+                  placeholder="Enter MCP server endpoint URL"
+                />
+              </div>
+
+              <div className="setting-item">
+                <label>Authentication Token:</label>
+                <input
+                  type="password"
+                  value={editingMcpServer.authToken}
+                  onChange={(e) => handleMcpServerChange({
+                    ...editingMcpServer,
+                    authToken: e.target.value
+                  })}
+                  placeholder="Enter authentication token (if required)"
+                />
+              </div>
+
+              <div className="setting-item">
+                <label>Description:</label>
+                <textarea
+                  value={editingMcpServer.description}
+                  onChange={(e) => handleMcpServerChange({
+                    ...editingMcpServer,
+                    description: e.target.value
+                  })}
+                  placeholder="Enter server description"
+                  rows="3"
+                />
+              </div>
+
+              <div className="setting-hint">
+                <button
+                  type="button"
+                  className="hint-toggle"
+                  onClick={() => setIsMcpHintExpanded(!isMcpHintExpanded)}
+                >
+                  {isMcpHintExpanded ? 'Hide' : 'Show'} MCP Information
+                </button>
+                <div className={`hint-content ${isMcpHintExpanded ? 'expanded' : ''}`}>
+                  <p>Model Context Protocol (MCP) allows AI models to access external tools and data sources.</p>
+                  <ul>
+                    <li>MCP servers provide specialized capabilities to AI models</li>
+                    <li>Each server can offer different tools like web search, data retrieval, etc.</li>
+                    <li>The model will automatically use available MCP servers when needed</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
         <div className="settings-actions">
           <button type="submit" className="save-button">Save Settings</button>
           <button type="button" className="cancel-button" onClick={onCloseSettings}>Cancel</button>

src/hooks/useMcp.js

@@ -0,0 +1,153 @@
+import { useState, useEffect, useCallback } from 'react';
+
+// Custom hook for managing MCP servers and tools
+function useMcp(mcpServers) {
+  const [serverTools, setServerTools] = useState({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Discover tools from all MCP servers
+  const discoverTools = useCallback(async () => {
+    console.log('Discovering MCP tools, servers:', mcpServers);
+    if (!mcpServers || mcpServers.length === 0) {
+      console.log('No MCP servers configured');
+      setServerTools({});
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    const toolsMap = {};
+
+    try {
+      // Discover tools from each server in parallel
+      const discoveryPromises = mcpServers.map(async (server) => {
+        try {
+          const response = await fetch('/api/mcp/discover', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ server })
+          });
+
+          if (!response.ok) {
+            const errorText = await response.text();
+            console.error(`Error discovering tools for server ${server.name}:`, errorText);
+            return {
+              serverId: server.id,
+              tools: [],
+              error: `Failed to discover tools: ${response.status}`
+            };
+          }
+
+          return await response.json();
+        } catch (error) {
+          console.error(`Error discovering tools for server ${server.name}:`, error);
+          return {
+            serverId: server.id,
+            tools: [],
+            error: error.message
+          };
+        }
+      });
+
+      const results = await Promise.all(discoveryPromises);
+
+      // Organize tools by server
+      results.forEach(result => {
+        if (result && result.serverId) {
+          toolsMap[result.serverId] = {
+            tools: result.tools || [],
+            error: result.error || null
+          };
+        }
+      });
+
+      setServerTools(toolsMap);
+    } catch (error) {
+      console.error('Error discovering MCP tools:', error);
+      setError(error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [mcpServers]);
+
+  // Execute a tool on an MCP server
+  const executeTool = useCallback(async (serverId, toolName, parameters) => {
+    if (!mcpServers || !serverId || !toolName) {
+      throw new Error('Invalid tool execution parameters');
+    }
+
+    const server = mcpServers.find(s => s.id === serverId);
+    if (!server) {
+      throw new Error(`MCP server with ID ${serverId} not found`);
+    }
+
+    try {
+      const response = await fetch('/api/mcp/execute', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          server,
+          tool: toolName,
+          parameters
+        })
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`Tool execution failed: ${response.status} - ${errorText}`);
+      }
+
+      return await response.json();
+    } catch (error) {
+      console.error(`Error executing tool ${toolName} on server ${server.name}:`, error);
+      throw error;
+    }
+  }, [mcpServers]);
+
+  // Discover tools when servers change
+  useEffect(() => {
+    console.log('MCP servers changed, discovering tools');
+    discoverTools();
+  }, [discoverTools]);
+
+  // Get all available tools across all servers
+  const getAllTools = useCallback(() => {
+    console.log('Getting all MCP tools, serverTools:', serverTools);
+    const allTools = [];
+
+    Object.entries(serverTools).forEach(([serverId, serverData]) => {
+      if (serverData.tools && serverData.tools.length > 0) {
+        const server = mcpServers.find(s => s.id === serverId);
+        if (server) {
+          serverData.tools.forEach(tool => {
+            allTools.push({
+              ...tool,
+              serverId,
+              serverName: server.name
+            });
+          });
+        }
+      }
+    });
+
+    console.log('All MCP tools:', allTools);
+    return allTools;
+  }, [serverTools, mcpServers]);
+
+  return {
+    serverTools,
+    isLoading,
+    error,
+    discoverTools,
+    executeTool,
+    getAllTools
+  };
+}
+
+export default useMcp;

src/index.css

@@ -1,3 +1,6 @@
+/* Import MCP styles */
+@import './styles/mcp.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/styles/mcp.css

@@ -0,0 +1,133 @@
+/* MCP Tools Styling */
+
+.mcp-tools-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  background-color: #f0f0f0;
+  border: 1px solid #ddd;
+  cursor: pointer;
+  font-size: 18px;
+  transition: background-color 0.2s;
+}
+
+.mcp-tools-button:hover {
+  background-color: #e0e0e0;
+}
+
+.mcp-tools-panel {
+  margin-top: 10px;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background-color: #f9f9f9;
+}
+
+.mcp-tools-panel h3 {
+  margin-top: 0;
+  margin-bottom: 10px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.mcp-tools-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 12px;
+  max-height: 300px;
+  overflow-y: auto;
+  padding-right: 5px;
+}
+
+.mcp-tool-item {
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: white;
+}
+
+.mcp-tool-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.mcp-server-name {
+  margin-left: 5px;
+  font-size: 12px;
+  color: #666;
+}
+
+.mcp-tool-description {
+  font-size: 13px;
+  color: #444;
+  margin-bottom: 10px;
+}
+
+.mcp-tool-execute-button {
+  padding: 5px 10px;
+  background-color: #3e6ae1;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.mcp-tool-execute-button:hover {
+  background-color: #2a56c8;
+}
+
+.close-mcp-tools-button {
+  margin-top: 10px;
+  padding: 5px 10px;
+  background-color: #f0f0f0;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.close-mcp-tools-button:hover {
+  background-color: #e0e0e0;
+}
+
+.no-tools-message {
+  color: #666;
+  font-style: italic;
+  text-align: center;
+  padding: 20px;
+}
+
+/* MCP Message Styling */
+.message .mcp-tool-execution {
+  background-color: #f0f8ff;
+  border-left: 3px solid #3e6ae1;
+  padding: 8px 12px;
+  margin-bottom: 5px;
+  font-family: monospace;
+  font-size: 13px;
+}
+
+.message .mcp-result {
+  background-color: #f5f5f5;
+  border-left: 3px solid #4caf50;
+  padding: 8px 12px;
+  margin-top: 5px;
+  font-family: monospace;
+  font-size: 13px;
+  white-space: pre-wrap;
+  overflow-x: auto;
+}
+
+.message .mcp-error {
+  background-color: #fff0f0;
+  border-left: 3px solid #f44336;
+  padding: 8px 12px;
+  margin-top: 5px;
+  font-family: monospace;
+  font-size: 13px;
+}