diff --git a/server/routers/chat_router.py b/server/routers/chat_router.py
index 030ede903..0829586ad 100644
--- a/server/routers/chat_router.py
+++ b/server/routers/chat_router.py
@@ -542,7 +542,16 @@ async def stream_messages():
         # 构造运行时配置，如果没有thread_id则生成一个
         user_id = str(current_user.id)
         thread_id = config.get("thread_id")
-        input_context = {"user_id": user_id, "thread_id": thread_id}
+        user_priority_knowledge = config.get("user_priority_knowledge")
+        user_knowledges = config.get("user_knowledges")
+        user_mcp_tools = config.get("user_mcp_tools")
+        input_context = {
+            "user_id": user_id,
+            "thread_id": thread_id,
+            "user_priority_knowledge": user_priority_knowledge,
+            "user_knowledges": user_knowledges,
+            "user_mcp_tools": user_mcp_tools,
+        }
 
         if not thread_id:
             thread_id = str(uuid.uuid4())
diff --git a/server/routers/evaluation_router.py b/server/routers/evaluation_router.py
index 2c12575b1..1db786c6f 100644
--- a/server/routers/evaluation_router.py
+++ b/server/routers/evaluation_router.py
@@ -14,6 +14,7 @@
 # 评估基准
 # ============================================================================
 
+
 @evaluation.get("/databases/{db_id}/benchmarks/{benchmark_id}")
 async def get_evaluation_benchmark_by_db(
     db_id: str, benchmark_id: str, page: int = 1, page_size: int = 10, current_user: User = Depends(get_admin_user)
diff --git a/server/routers/mcp_router.py b/server/routers/mcp_router.py
index d886ec019..f773e5802 100644
--- a/server/routers/mcp_router.py
+++ b/server/routers/mcp_router.py
@@ -5,6 +5,7 @@
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from src.services.mcp_service import (
+    clear_mcp_server_tools_cache,
     create_mcp_server,
     get_mcp_tools_stats,
     delete_mcp_server,
@@ -219,10 +220,12 @@ async def test_mcp_server(
 ):
     """测试 MCP 服务器连接"""
     try:
-        await get_server_or_404(db, name)
+        server = await get_server_or_404(db, name)
 
         try:
-            tools = await get_all_mcp_tools(name)
+            tools = await get_all_mcp_tools(
+                name, force_refresh=True, additional_servers={server.name: server.to_mcp_config()}
+            )
             return {
                 "success": True,
                 "message": f"连接成功，共发现 {len(tools)} 个工具",
@@ -276,7 +279,7 @@ async def get_mcp_server_tools(
 
         try:
             # 获取所有工具（不过滤 disabled_tools）
-            tools = await get_all_mcp_tools(name)
+            tools = await get_all_mcp_tools(name, additional_servers={server.name: server.to_mcp_config()})
             tool_list = []
 
             for tool in tools:
@@ -291,7 +294,7 @@ async def get_mcp_server_tools(
                 }
                 # 提取参数信息
                 if hasattr(tool, "args_schema") and tool.args_schema:
-                    schema = tool.args_schema.schema() if hasattr(tool.args_schema, "schema") else {}
+                    schema = tool.args_schema
                     tool_info["parameters"] = schema.get("properties", {})
                     tool_info["required"] = schema.get("required", [])
                 else:
@@ -322,11 +325,16 @@ async def refresh_mcp_server_tools(
 ):
     """刷新 MCP 服务器的工具列表（清除缓存重新获取）"""
     try:
-        await get_server_or_404(db, name)
+        server = await get_server_or_404(db, name)
 
         try:
+            # 清除缓存，强制刷新
+            clear_mcp_server_tools_cache(name)
+
             # 获取所有工具（不过滤 disabled_tools）
-            tools = await get_all_mcp_tools(name)
+            tools = await get_all_mcp_tools(
+                name, cache=True, force_refresh=True, additional_servers={server.name: server.to_mcp_config()}
+            )
 
             # 获取统计信息
             stats = get_mcp_tools_stats(name)
diff --git a/server/routers/system_router.py b/server/routers/system_router.py
index 7be72c3d3..7dabc111d 100644
--- a/server/routers/system_router.py
+++ b/server/routers/system_router.py
@@ -66,7 +66,7 @@ async def get_system_logs(levels: str | None = None, current_user: User = Depend
         if levels:
             level_filter = set(level.strip().upper() for level in levels.split(",") if level.strip())
 
-        async with aiofiles.open(LOG_FILE) as f:
+        async with aiofiles.open(LOG_FILE, encoding="utf-8") as f:
             # 读取最后1000行
             lines = []
             async for line in f:
diff --git a/src/agents/chatbot/graph.py b/src/agents/chatbot/graph.py
index 810bdb1a8..5425a7d7c 100644
--- a/src/agents/chatbot/graph.py
+++ b/src/agents/chatbot/graph.py
@@ -2,10 +2,8 @@
 from langchain.agents.middleware import ModelRetryMiddleware
 
 from src.agents.common import BaseAgent, load_chat_model
-from src.agents.common.middlewares import (
-    inject_attachment_context,
-)
-from src.agents.common.tools import get_tools_from_context
+from src.agents.common.middlewares import DynamicToolMiddleware, inject_attachment_context
+from src.agents.common.tools import get_basic_tools, get_mcp_tools, get_tools_from_context
 
 
 class ChatbotAgent(BaseAgent):
@@ -24,6 +22,12 @@ async def get_graph(self, **kwargs):
         # 获取上下文配置
         context = self.context_schema.from_file(module_name=self.module_name)
 
+        dynamic_tool_middleware = DynamicToolMiddleware(
+            base_tools=[],
+            basic_tools=get_basic_tools(context.tools),
+            mcp_tools=await get_mcp_tools(server_names=context.mcps),
+        )
+
         # 使用 create_agent 创建智能体
         graph = create_agent(
             model=load_chat_model(context.model),  # 使用 context 中的模型配置
@@ -32,6 +36,7 @@ async def get_graph(self, **kwargs):
             middleware=[
                 inject_attachment_context,  # 附件上下文注入
                 ModelRetryMiddleware(),  # 模型重试中间件
+                dynamic_tool_middleware,
             ],
             checkpointer=await self._get_checkpointer(),
         )
diff --git a/src/agents/common/context.py b/src/agents/common/context.py
index 190fb7b2e..521f06856 100644
--- a/src/agents/common/context.py
+++ b/src/agents/common/context.py
@@ -10,7 +10,7 @@
 
 from src import config as sys_config
 from src.knowledge import knowledge_base
-from src.services.mcp_service import get_mcp_server_names
+from src.services.mcp_service import get_mcp_servers_info
 from src.utils import logger
 
 from .tools import gen_tool_info, get_buildin_tools
@@ -27,6 +27,11 @@ class BaseContext:
     3. 类默认配置：最低优先级，类中定义的默认值
     """
 
+    def set(self, data: dict):
+        """设置配置字段"""
+        for key, value in data.items():
+            setattr(self, key, value)
+
     def update(self, data: dict):
         """更新配置字段"""
         for key, value in data.items():
@@ -76,11 +81,11 @@ def update(self, data: dict):
         },
     )
 
-    mcps: list[str] = field(
+    mcps: Annotated[list[dict], {"__template_metadata__": {"kind": "mcps"}}] = field(
         default_factory=list,
         metadata={
             "name": "MCP服务器",
-            "options": lambda: get_mcp_server_names(),
+            "options": lambda: get_mcp_servers_info(),
             "description": (
                 "MCP服务器列表，建议使用支持 SSE 的 MCP 服务器，"
                 "如果需要使用 uvx 或 npx 运行的服务器，也请在项目外部启动 MCP 服务器，并在项目中配置 MCP 服务器。"
@@ -106,7 +111,7 @@ def from_file(cls, module_name: str, input_context: dict = None) -> "BaseContext
             context.update(file_config)
 
         if input_context:
-            context.update(input_context)
+            context.set(input_context)
 
         return context
 
diff --git a/src/agents/common/middlewares/dynamic_tool_middleware.py b/src/agents/common/middlewares/dynamic_tool_middleware.py
index 6f11e4c9f..1930e495f 100644
--- a/src/agents/common/middlewares/dynamic_tool_middleware.py
+++ b/src/agents/common/middlewares/dynamic_tool_middleware.py
@@ -14,7 +14,14 @@ class DynamicToolMiddleware(AgentMiddleware):
     运行时只是根据配置筛选工具，不能动态添加新工具
     """
 
-    def __init__(self, base_tools: list[Any], mcp_servers: list[str] | None = None):
+    def __init__(
+        self,
+        base_tools: list[Any],
+        mcp_servers: list[str] | None = None,
+        basic_tools: list[Any] | None = None,
+        kb_tools: list[Any] | None = None,
+        mcp_tools: list[Any] | None = None,
+    ):
         """初始化中间件
 
         Args:
@@ -26,6 +33,10 @@ def __init__(self, base_tools: list[Any], mcp_servers: list[str] | None = None):
         self._all_mcp_tools: dict[str, list[Any]] = {}  # 所有已加载的 MCP 工具
         self._mcp_servers = mcp_servers or []
 
+        self.basic_tools: list[Any] = basic_tools or []  # 基础工具
+        self.kb_tools: list[Any] = kb_tools or []  # 基于知识库的工具
+        self.mcp_tools: list[Any] = mcp_tools or []  # 基于MCP的工具
+
     async def initialize_mcp_tools(self) -> None:
         """异步初始化：预加载所有可能用到的 MCP 工具"""
         for mcp_name in self._mcp_servers:
@@ -42,26 +53,35 @@ async def awrap_model_call(
     ) -> ModelResponse:
         """根据配置动态选择工具（从已注册的工具中筛选）"""
         # 从 runtime context 获取配置
-        selected_tools = request.runtime.context.tools
-        selected_mcps = request.runtime.context.mcps
+        selected_tools = getattr(request.runtime.context, "tools", [])
+        selected_mcp_tools = getattr(request.runtime.context, "user_mcp_tools", [])
+        selected_knowledges = getattr(request.runtime.context, "user_knowledges", [])
 
         enabled_tools = []
 
         # 根据配置筛选基础工具
         if selected_tools and isinstance(selected_tools, list) and len(selected_tools) > 0:
-            enabled_tools = [tool for tool in self.tools if tool.name in selected_tools]
+            enabled_tools = [tool for tool in self.basic_tools if tool.name in selected_tools]
 
         # 根据配置筛选 MCP 工具（从已注册的工具中选择）
-        if selected_mcps and isinstance(selected_mcps, list) and len(selected_mcps) > 0:
-            for mcp in selected_mcps:
-                if mcp in self._all_mcp_tools:
-                    enabled_tools.extend(self._all_mcp_tools[mcp])
-                else:
-                    logger.warning(f"MCP server '{mcp}' not pre-loaded. Please add it to mcp_servers list.")
+        if selected_mcp_tools and isinstance(selected_mcp_tools, list) and len(selected_mcp_tools) > 0:
+            mcp_tools_from_selected = [tool for tool in self.mcp_tools if tool.metadata["id"] in selected_mcp_tools]
+            enabled_tools.extend(mcp_tools_from_selected)
+        else:
+            enabled_tools.extend(self.mcp_tools)
+
+        # 筛选知识工具
+        if selected_knowledges and isinstance(selected_knowledges, list) and len(selected_knowledges) > 0:
+            knowledge_tools_from_selected = [tool for tool in self.kb_tools if tool.name in selected_knowledges]
+            enabled_tools.extend(knowledge_tools_from_selected)
+        else:
+            enabled_tools.extend(self.kb_tools)
 
         logger.info(
             f"Dynamic tool selection: {len(enabled_tools)} tools enabled: {[tool.name for tool in enabled_tools]}, "
-            f"selected_tools: {selected_tools}, selected_mcps: {selected_mcps}"
+            f"selected_tools: {selected_tools}, "
+            f"selected_mcp_tools: {selected_mcp_tools}, "
+            f"selected_knowledges: {selected_knowledges}"
         )
 
         # 更新 request 中的工具列表
diff --git a/src/agents/common/tools.py b/src/agents/common/tools.py
index d4dc0791d..94359a343 100644
--- a/src/agents/common/tools.py
+++ b/src/agents/common/tools.py
@@ -360,18 +360,39 @@ def get_buildin_tools() -> list:
     return static_tools
 
 
+def get_basic_tools(tools: list[str] = None, extra_tools=None):
+    all_basic_tools = get_buildin_tools() + (extra_tools or [])
+    results = []
+
+    if tools:
+        # 创建工具映射表
+        tools_map = {t.name: t for t in all_basic_tools}
+        for tool_name in tools:
+            if tool_name in tools_map:
+                results.append(tools_map[tool_name])
+
+    return results
+
+
+async def get_mcp_tools(server_names: list[str] = None):
+    results = []
+
+    if server_names:
+        for server_name in server_names:
+            mcp_tools = await get_enabled_mcp_tools(server_name)
+            results.extend(mcp_tools)
+
+    return results
+
+
 async def get_tools_from_context(context, extra_tools=None) -> list:
     """从上下文配置中获取工具列表"""
     # 1. 基础工具 (从 context.tools 中筛选)
-    all_basic_tools = get_buildin_tools() + (extra_tools or [])
     selected_tools = []
 
     if context.tools:
-        # 创建工具映射表
-        tools_map = {t.name: t for t in all_basic_tools}
-        for tool_name in context.tools:
-            if tool_name in tools_map:
-                selected_tools.append(tools_map[tool_name])
+        basic_tools = get_basic_tools(context.tools, extra_tools)
+        selected_tools.extend(basic_tools)
 
     # 2. 知识库工具
     if context.knowledges:
@@ -380,8 +401,7 @@ async def get_tools_from_context(context, extra_tools=None) -> list:
 
     # 3. MCP 工具（使用统一入口，自动过滤 disabled_tools）
     if context.mcps:
-        for server_name in context.mcps:
-            mcp_tools = await get_enabled_mcp_tools(server_name)
-            selected_tools.extend(mcp_tools)
+        mcp_tools = await get_mcp_tools(server_names=context.mcps)
+        selected_tools.extend(mcp_tools)
 
     return selected_tools
diff --git a/src/agents/reporter/graph.py b/src/agents/reporter/graph.py
index d104b6813..15cbcdd2f 100644
--- a/src/agents/reporter/graph.py
+++ b/src/agents/reporter/graph.py
@@ -4,15 +4,13 @@
 from langchain.agents import create_agent
 
 from src.agents.common import BaseAgent, BaseContext, load_chat_model
-from src.agents.common.tools import gen_tool_info, get_buildin_tools
 from src.agents.common.toolkits.mysql import get_mysql_tools
-from src.agents.common.tools import get_tools_from_context
+from src.agents.common.tools import gen_tool_info, get_buildin_tools, get_tools_from_context
 from src.utils import logger
 
 
 @dataclass(kw_only=True)
 class ReporterContext(BaseContext):
-
     # 覆盖默认的工具列表，添加 MySQL 工具包
     tools: Annotated[list[dict], {"__template_metadata__": {"kind": "tools"}}] = field(
         default_factory=lambda: [t.name for t in get_mysql_tools()],
diff --git a/src/services/mcp_service.py b/src/services/mcp_service.py
index 90651a537..6b31cbe45 100644
--- a/src/services/mcp_service.py
+++ b/src/services/mcp_service.py
@@ -100,7 +100,7 @@ async def sync_mcp_server_to_cache(name: str, config: dict[str, Any] | None) ->
             logger.info(f"Synced MCP server '{name}' to cache")
 
         # Clear tools cache for this server
-        _mcp_tools_cache.pop(name, None)
+        # _mcp_tools_cache.pop(name, None)
 
 
 async def init_mcp_servers() -> None:
@@ -201,6 +201,68 @@ def to_camel_case(s: str) -> str:
     return s
 
 
+async def _fetch_tools_from_server(server_name: str, server_config: dict[str, Any]) -> list[Callable[..., Any]]:
+    """Fetch tools from MCP server and process them.
+
+    This function handles:
+    1. Connecting to the MCP server
+    2. Fetching all tools
+    3. Processing tool IDs and metadata
+
+    Args:
+        server_name: Server name
+        server_config: Server configuration (without non-connection fields)
+
+    Returns:
+        List of processed tools with unique IDs
+    """
+    try:
+        # Extract connection config
+        client_config = {
+            k: v
+            for k, v in server_config.items()
+            if k
+            not in (
+                "disabled_tools",
+                "description",
+                "icon",
+                "enabled",
+            )
+        }
+
+        client = await get_mcp_client({server_name: client_config})
+        if client is None:
+            return []
+
+        # Get ALL tools (Raw)
+        raw_tools = cast(list[Any], await client.get_tools())
+
+        # Render IDs for ALL tools
+        server_cc = to_camel_case(server_name)
+        all_processed_tools = []
+        for tool in raw_tools:
+            # Render unique ID rule: mcp__[camelCaseServer]__[camelCaseTool]
+            original_name = tool.name
+            tool_cc = to_camel_case(original_name)
+            unique_id = f"mcp__{server_cc}__{tool_cc}"
+
+            # Use metadata to store
+            if tool.metadata is None:
+                tool.metadata = {}
+            tool.metadata["id"] = unique_id
+
+            all_processed_tools.append(tool)
+
+        return all_processed_tools
+
+    except AssertionError as e:
+        logger.warning(f"[assert] Failed to load tools from MCP server '{server_name}': {e}")
+        return []
+    except Exception as e:
+        logger.error(f"Failed to load tools from MCP server '{server_name}': {e}, traceback: {traceback.format_exc()}")
+        return []
+
+
 async def get_mcp_tools(
     server_name: str,
     additional_servers: dict[str, dict] = None,
@@ -236,61 +298,31 @@ async def get_mcp_tools(
         all_processed_tools = _mcp_tools_cache[server_name]
     else:
         # Need to fetch from server
-        try:
-            assert server_name in mcp_servers, f"Server {server_name} not found in ({list(mcp_servers.keys())})"
+        assert server_name in mcp_servers, f"Server {server_name} not found in ({list(mcp_servers.keys())})"
 
-            # Extract connection config
-            server_config = mcp_servers[server_name]
-            client_config = {k: v for k, v in server_config.items() if k not in ("disabled_tools",)}
+        # Extract connection config
+        server_config = mcp_servers[server_name]
 
-            client = await get_mcp_client({server_name: client_config})
-            if client is None:
-                return []
+        # Use the new helper function to fetch and process tools
+        all_processed_tools = await _fetch_tools_from_server(server_name, server_config)
 
-            # Get ALL tools (Raw)
-            raw_tools = cast(list[Any], await client.get_tools())
-
-            # Render IDs for ALL tools
-            server_cc = to_camel_case(server_name)
-            for tool in raw_tools:
-                # Render unique ID rule: mcp__[camelCaseServer]__[camelCaseTool]
-                original_name = tool.name
-                tool_cc = to_camel_case(original_name)
-                unique_id = f"mcp__{server_cc}__{tool_cc}"
-
-                # Use metadata to store
-                if tool.metadata is None:
-                    tool.metadata = {}
-                tool.metadata["id"] = unique_id
-
-                all_processed_tools.append(tool)
-
-            # Update Cache (Store the FULL list)
-            if cache:
-                _mcp_tools_cache[server_name] = all_processed_tools
-
-                # Update Stats
-                # Stats should reflect the GLOBAL configuration state
-                # (How many are disabled in the stored config, not the transient arg)
-                global_config_disabled = mcp_servers.get(server_name, {}).get("disabled_tools") or []
-                enabled_count = len([t for t in all_processed_tools if t.name not in global_config_disabled])
-
-                _mcp_tools_stats[server_name] = {
-                    "total": len(all_processed_tools),
-                    "enabled": enabled_count,
-                    "disabled": len(all_processed_tools) - enabled_count,
-                }
+        # Update Cache (Store the FULL list)
+        if cache:
+            _mcp_tools_cache[server_name] = all_processed_tools
 
-                logger.info(f"Refreshed MCP tools cache for '{server_name}': {len(all_processed_tools)} tools loaded.")
+            # Update Stats
+            # Stats should reflect the GLOBAL configuration state
+            # (How many are disabled in the stored config, not the transient arg)
+            global_config_disabled = mcp_servers.get(server_name, {}).get("disabled_tools") or []
+            enabled_count = len([t for t in all_processed_tools if t.name not in global_config_disabled])
 
-        except AssertionError as e:
-            logger.warning(f"[assert] Failed to load tools from MCP server '{server_name}': {e}")
-            return []
-        except Exception as e:
-            logger.error(
-                f"Failed to load tools from MCP server '{server_name}': {e}, traceback: {traceback.format_exc()}"
-            )
-            return []
+            _mcp_tools_stats[server_name] = {
+                "total": len(all_processed_tools),
+                "enabled": enabled_count,
+                "disabled": len(all_processed_tools) - enabled_count,
+            }
+
+            logger.info(f"Refreshed MCP tools cache for '{server_name}': {len(all_processed_tools)} tools loaded.")
 
     # 3. Filtering (Apply to Return Value Only)
     if disabled_tools:
@@ -540,7 +572,7 @@ async def toggle_tool_enabled(
     await db.commit()
 
     # Clear tool cache (re-filtered on next fetch)
-    clear_mcp_server_tools_cache(server_name)
+    # clear_mcp_server_tools_cache(server_name)
 
     logger.info(f"Toggled tool '{tool_name}' for server '{server_name}' enabled={enabled}")
     return enabled, server
@@ -559,6 +591,83 @@ def get_mcp_server_names() -> list[str]:
     return list(MCP_SERVERS.keys())
 
 
+def get_mcp_servers_info(include_disabled: bool = False) -> list[dict[str, Any]]:
+    """Get MCP servers information with tools list.
+
+    Args:
+        refresh_tools: Whether to force refresh tools from servers
+        include_disabled: Whether to include disabled servers in the result
+
+    Returns:
+        List of server info dictionaries containing name, description, tools, etc.
+    """
+    result = []
+
+    for server_name, config in MCP_SERVERS.items():
+        # Skip disabled servers if requested
+        if not include_disabled and not config.get("enabled", True):
+            continue
+
+        # Get server basic info
+        server_info = {
+            "id": server_name,
+            "name": server_name,
+            "description": config.get("description", ""),
+            "icon": config.get("icon", ""),
+            "enabled": config.get("enabled", True),
+            "transport": config.get("transport", ""),
+            "tools": [],
+        }
+
+        def _format_parameters(input_schema: dict) -> list:
+            """将JSON Schema格式的参数转换为前端可直接使用的对象数组"""
+            if not input_schema or not input_schema.get("properties"):
+                return []
+            required_params = input_schema.get("required", [])
+            return [
+                {
+                    "name": key,
+                    "type": value.get("type", "unknown"),
+                    "description": value.get("description", ""),
+                    "required": key in required_params,
+                }
+                for key, value in input_schema["properties"].items()
+            ]
+
+        # Get tools for this server
+        try:
+            # Get enabled tools (filter disabled_tools)
+            disabled_tools = config.get("disabled_tools") or []
+            tools = _mcp_tools_cache.get(server_name, [])
+            enabled_tools = [t for t in tools if t.name not in disabled_tools]
+            # 转换为响应模型，包含参数信息
+            tool_responses = []
+            for tool in enabled_tools:
+                # 获取参数信息
+                args_schema = getattr(tool, "args_schema", {}) or {}
+                parameters = _format_parameters(args_schema)
+
+                tool_id = getattr(tool, "metadata", {}).get("id", "unknown")
+                tool_name = getattr(tool, "name", "unknown")
+                tool_description = getattr(tool, "description", "")
+
+                tool_responses.append(
+                    {"id": tool_id, "name": tool_name, "description": tool_description, "parameters": parameters}
+                )
+
+            # Filter out disabled tools
+            server_info["tools"] = tool_responses
+
+        except Exception as e:
+            logger.warning(f"Failed to get tools for server '{server_name}': {e}")
+            # Keep server info but with empty tools list
+            server_info["tools"] = []
+
+        result.append(server_info)
+
+    return list(result)
+
+
 async def get_enabled_mcp_tools(server_name: str) -> list:
     """Get MCP server tools (auto-filtering disabled_tools).
 
@@ -594,7 +703,9 @@ async def get_servers_config(names: list[str]) -> dict[str, dict[str, Any]]:
     return {name: MCP_SERVERS[name] for name in names if name in MCP_SERVERS}
 
 
-async def get_all_mcp_tools(server_name: str) -> list:
+async def get_all_mcp_tools(
+    server_name: str, cache: bool = True, force_refresh: bool = False, additional_servers=None
+) -> list:
     """Get all tools of an MCP server (no filtering).
 
     For management UI to display tool list, supports viewing all tools and their enabled status.
@@ -602,6 +713,9 @@ async def get_all_mcp_tools(server_name: str) -> list:
 
     Args:
         server_name: Server name
+        cache: Whether to use/update the cache (default: True)
+        force_refresh: Whether to force a refresh from the server (default: False)
+        additional_servers: Additional server configurations
 
     Returns:
         List of all tools (unfiltered)
@@ -609,7 +723,10 @@ async def get_all_mcp_tools(server_name: str) -> list:
     config = MCP_SERVERS.get(server_name)
     if not config:
         logger.warning(f"MCP server '{server_name}' not found in cache")
-        return []
+        if not additional_servers:
+            return []
 
     # Get all tools (no filtering, force refresh, no cache update)
-    return await get_mcp_tools(server_name, disabled_tools=[], cache=False, force_refresh=True)
+    return await get_mcp_tools(
+        server_name, additional_servers, disabled_tools=[], cache=cache, force_refresh=force_refresh
+    )
diff --git a/src/storage/db/models.py b/src/storage/db/models.py
index 6606410a6..cc9790666 100644
--- a/src/storage/db/models.py
+++ b/src/storage/db/models.py
@@ -383,4 +383,11 @@ def to_mcp_config(self) -> dict:
             config["sse_read_timeout"] = self.sse_read_timeout
         if self.disabled_tools:
             config["disabled_tools"] = self.disabled_tools
+
+        if self.description:
+            config["description"] = self.description
+        if self.icon:
+            config["icon"] = self.icon
+        if self.enabled:
+            config["enabled"] = self.enabled
         return config
diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue
index be09856e0..ad41a8046 100644
--- a/web/src/components/AgentChatComponent.vue
+++ b/web/src/components/AgentChatComponent.vue
@@ -6,6 +6,7 @@
       :is-sidebar-open="chatUIStore.isSidebarOpen"
       :is-initial-render="localUIState.isInitialRender"
       :single-mode="props.singleMode"
+      :is-loading="isProcessing"
       :agents="agents"
       :selected-agent-id="currentAgentId"
       :is-creating-new-chat="chatUIStore.creatingNewChat"
@@ -79,10 +80,6 @@
         <span>正在加载消息...</span>
       </div>
 
-      <div v-else-if="!conversations.length" class="chat-examples">
-        <div style="margin-bottom: 150px"></div>
-        <h1>您好，我是{{ currentAgentName }}！</h1>
-      </div>
       <div class="chat-box" ref="messagesContainer">
         <div class="conv-box" v-for="(conv, index) in conversations" :key="index">
           <AgentMessageComponent
@@ -99,14 +96,14 @@
           <!-- 显示对话最后一个消息使用的模型 -->
           <RefsComponent
             v-if="shouldShowRefs(conv)"
+            :is-latest-message="false"
             :message="getLastMessage(conv)"
             :show-refs="['model', 'copy']"
-            :is-latest-message="false"
           />
         </div>
 
         <!-- 生成中的加载状态 - 增强条件支持主聊天和resume流程 -->
-        <div class="generating-status" v-if="isProcessing && conversations.length > 0">
+        <div v-if="isProcessing && conversations.length > 0" class="generating-status">
           <div class="generating-indicator">
             <div class="loading-dots">
               <div></div>
@@ -117,31 +114,49 @@
           </div>
         </div>
       </div>
-      <div class="bottom" :class="{ 'start-screen': !conversations.length }">
+      <div :class="{ 'start-screen': !conversations.length }" class="bottom">
         <!-- 人工审批弹窗 - 放在输入框上方 -->
         <HumanApprovalModal
-          :visible="approvalState.showModal"
-          :question="approvalState.question"
           :operation="approvalState.operation"
+          :question="approvalState.question"
+          :visible="approvalState.showModal"
           @approve="handleApprove"
           @reject="handleReject"
         />
 
         <div class="message-input-wrapper">
-          <AgentInputArea
-            ref="messageInputRef"
-            v-model="userInput"
-            :is-loading="isProcessing"
-            :disabled="!currentAgent"
-            :send-button-disabled="(!userInput || !currentAgent) && !isProcessing"
-            placeholder="输入问题..."
-            :supports-file-upload="supportsFileUpload"
-            :agent-id="currentAgentId"
-            :thread-id="currentChatId"
-            :ensure-thread="ensureActiveThread"
-            @send="handleSendOrStop"
-          />
-
+          <!-- 添加欢迎词 -->
+          <div v-if="!conversations.length" class="welcome-message">
+            您好，我是{{ currentAgentName }}！
+          </div>
+          <div class="input-area-with-mcp">
+            <!-- 按钮容器 -->
+            <div v-if="currentAgent" class="button-container">
+              <!-- MCP工具按钮 -->
+              <div :title="getMCPTooltip" class="mcp-tools-btn" @click="openMCPSelector">
+                <span class="mcp-icon">⚙️</span>
+                <span class="mcp-text">MCP工具</span>
+                <span v-if="selectedMcpCount > 0" class="mcp-count-badge">
+                  {{ selectedMcpCount }}
+                </span>
+              </div>
+            </div>
+            <AgentInputArea
+              ref="messageInputRef"
+              v-model="userInput"
+              :is-loading="isProcessing"
+              :disabled="!currentAgent"
+              :send-button-disabled="(!userInput || !currentAgent) && !isProcessing"
+              placeholder="输入问题..."
+              :supports-file-upload="supportsFileUpload"
+              :agent-id="currentAgentId"
+              :thread-id="currentChatId"
+              :ensure-thread="ensureActiveThread"
+              @send="handleSendOrStop"
+            />
+          </div>
+          <!-- MCP选择器组件 -->
+          <McpSelector ref="mcpSelectorRef" :agentId="currentAgentId" />
           <!-- 示例问题 -->
           <div
             class="example-questions"
@@ -194,6 +209,7 @@ import HumanApprovalModal from '@/components/HumanApprovalModal.vue'
 import { useApproval } from '@/composables/useApproval'
 import { useAgentStreamHandler } from '@/composables/useAgentStreamHandler'
 import AgentPopover from '@/components/AgentPopover.vue'
+import McpSelector from '@/components/McpSelector.vue'
 
 // ==================== PROPS & EMITS ====================
 const props = defineProps({
@@ -621,7 +637,12 @@ const sendMessage = async ({
   const requestData = {
     query: text,
     config: {
-      thread_id: threadId
+      thread_id: threadId,
+      user_mcp_tools: [
+        ...(selectedMcpToolsConfig.value || [])
+          .filter((tool) => tool.enabled)
+          .map((tool) => tool.toolId)
+      ]
     }
   }
 
@@ -1066,6 +1087,54 @@ watch(
   },
   { deep: true, flush: 'post' }
 )
+
+// 引用 MCP 选择器组件
+const mcpSelectorRef = ref(null)
+
+// Store
+const { agentConfig, selectedMcpToolsConfig } = storeToRefs(agentStore)
+
+const selectedMcpCount = computed(() => {
+  const mcpsTools = selectedMcpToolsConfig.value || []
+  // 只计算 enabled 为 true 的工具
+  return mcpsTools.filter((tool) => tool.enabled).length
+})
+
+// 计算工具提示文本
+const getMCPTooltip = computed(() => {
+  const count = selectedMcpCount.value
+  if (count === 0) {
+    return '配置MCP工具（当前未选择任何工具）'
+  } else {
+    return `已选择 ${count} 个MCP工具（点击管理）`
+  }
+})
+
+// 打开 MCP 选择器
+const openMCPSelector = async () => {
+  if (!currentAgent.value) {
+    message.warning('请先选择智能体')
+    return
+  }
+
+  if (!mcpSelectorRef.value) {
+    console.error('MCP选择器组件未加载')
+    message.error('MCP工具加载失败')
+    return
+  }
+
+  try {
+    // 调用子组件的方法，传入当前选中的工具
+    await mcpSelectorRef.value.openMcpsModal(agentConfig.value?.mcps_tools || [])
+
+    // 注意：这里需要监听子组件的确认事件，或者通过Promise方式获取结果
+    // 假设子组件通过ref方法返回Promise
+  } catch (error) {
+    console.error('打开MCP工具选择器失败:', error)
+    message.error('打开MCP工具选择器失败')
+  }
+}
+
 </script>
 
 <style lang="less" scoped>
@@ -1147,6 +1216,48 @@ watch(
   margin-top: 16px;
   text-align: center;
 
+  .example-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 6px;
+  }
+
+  .refresh-btn {
+    color: var(--gray-600); /* 默认浅灰色 */
+    transition: all 0.2s ease;
+    border-radius: 6px;
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    /* 鼠标悬停时更明显 */
+    &:hover {
+      color: var(--main-500);
+      background: var(--main-50);
+      transform: rotate(90deg);
+    }
+
+    /* 点击效果 */
+    &:active {
+      transform: scale(0.9) rotate(90deg);
+    }
+  }
+
+  .example-title {
+    font-size: 0.85rem;
+    color: var(--gray-600);
+    margin-bottom: 0;
+    line-height: 1; /* 确保行高一致 */
+    display: flex;
+    align-items: center; /* 文本垂直居中 */
+    height: 28px; /* 与按钮高度保持一致 */
+  }
+
   .example-chips {
     display: flex;
     flex-wrap: wrap;
@@ -1236,9 +1347,11 @@ watch(
   z-index: 1000;
 
   .message-input-wrapper {
+    position: relative;
     width: 100%;
     max-width: 800px;
     margin: 0 auto;
+    margin-bottom: 12px;
 
     .bottom-actions {
       display: flex;
@@ -1401,4 +1514,142 @@ watch(
   color: var(--main-700);
   background-color: var(--main-20);
 }
+.welcome-message {
+  position: absolute;
+  top: -80px; /* 将欢迎词向上推，不影响输入框位置 */
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: var(--gray-700);
+  font-size: 1.3rem;
+  padding: 12px;
+  border-radius: 12px;
+  animation: fadeIn 0.5s ease;
+  z-index: 1;
+  pointer-events: none; /* 确保不会挡住输入框交互 */
+}
+
+.input-area-with-mcp {
+  position: relative;
+  width: 100%;
+}
+
+/* 按钮容器 */
+.button-container {
+  position: absolute;
+  top: -45px;
+  right: 0;
+  display: flex;
+  gap: 8px;
+}
+
+/* MCP工具按钮 */
+.mcp-tools-btn {
+  position: static;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: var(--gray-0);
+  border: 1px solid var(--gray-200);
+  border-radius: 8px;
+  color: var(--gray-700);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+  white-space: nowrap;
+  z-index: 10;
+}
+
+/* 知识库按钮 */
+.knowledge-tools-btn {
+  position: relative; /* 改为相对定位，为徽章提供定位上下文 */
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: var(--gray-0);
+  border: 1px solid var(--gray-200);
+  border-radius: 8px;
+  color: var(--gray-700);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+  white-space: nowrap;
+  z-index: 11;
+}
+
+/* 通用按钮样式 */
+.mcp-tools-btn,
+.knowledge-tools-btn .mcp-icon,
+.knowledge-tools-btn .mcp-text {
+  font-size: 14px;
+}
+
+.mcp-tools-btn .mcp-text,
+.knowledge-tools-btn .mcp-text {
+  font-weight: 500;
+}
+
+/* 按钮徽章样式 */
+.mcp-tools-btn .mcp-count-badge,
+.knowledge-tools-btn .mcp-count-badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  min-width: 18px;
+  height: 18px;
+  background: var(--main-500);
+  color: white;
+  font-size: 11px;
+  font-weight: 600;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .button-container {
+    top: -45px;
+    right: 0;
+    gap: 6px;
+  }
+
+  .mcp-tools-btn,
+  .knowledge-tools-btn {
+    padding: 5px 8px;
+    font-size: 12px;
+  }
+
+  .mcp-tools-btn .mcp-text,
+  .knowledge-tools-btn .mcp-text {
+    display: none; /* 在移动端隐藏文字，只显示图标 */
+  }
+
+  .mcp-tools-btn .mcp-icon,
+  .knowledge-tools-btn .mcp-icon {
+    font-size: 16px;
+  }
+
+  .mcp-tools-btn .mcp-count-badge,
+  .knowledge-tools-btn .mcp-count-badge {
+    top: -4px;
+    right: -4px;
+    min-width: 16px;
+    height: 16px;
+    font-size: 10px;
+  }
+}
+
+/* 如果输入框有边框，确保按钮覆盖在边框上 */
+:deep(.agent-input-area) {
+  position: relative;
+  z-index: 1;
+}
 </style>
diff --git a/web/src/components/AgentConfigSidebar.vue b/web/src/components/AgentConfigSidebar.vue
index 28d8e6f62..8f5724cab 100644
--- a/web/src/components/AgentConfigSidebar.vue
+++ b/web/src/components/AgentConfigSidebar.vue
@@ -118,6 +118,45 @@
                   </div>
                 </div>
 
+                <!-- MCP-Servers选择 -->
+                <div v-else-if="key === 'mcps'" class="tools-selector">
+                  <div class="tools-summary">
+                    <div class="tools-summary-info">
+                      <span class="tools-count"
+                        >已选择 {{ getSelectedCount(key) }} 个MCP服务器配置</span
+                      >
+                      <a-button
+                        v-if="getSelectedCount(key) > 0"
+                        class="clear-btn"
+                        size="small"
+                        type="link"
+                        @click="clearSelection(key)"
+                      >
+                        清空
+                      </a-button>
+                    </div>
+                    <a-button
+                      class="select-tools-btn"
+                      size="small"
+                      type="primary"
+                      @click="openMcpsModal"
+                    >
+                      选择MCP服务器
+                    </a-button>
+                  </div>
+                  <div v-if="getSelectedCount(key) > 0" class="selected-tools-preview">
+                    <a-tag
+                      v-for="toolId in agentConfig[key]"
+                      :key="toolId"
+                      class="tool-tag"
+                      closable
+                      @close="removeSelectedMcp(toolId)"
+                    >
+                      {{ getMcpNameById(toolId) }}
+                    </a-tag>
+                  </div>
+                </div>
+
                 <!-- 布尔类型 -->
                 <a-switch
                   v-else-if="typeof agentConfig[key] === 'boolean'"
@@ -279,6 +318,60 @@
         </div>
       </div>
     </a-modal>
+
+    <!-- MCP选择弹窗 -->
+    <a-modal
+      v-model:open="mcpsModalOpen"
+      :footer="null"
+      :maskClosable="false"
+      :width="800"
+      class="tools-modal"
+      title="选择MCP"
+    >
+      <div class="tools-modal-content">
+        <div class="tools-search">
+          <a-input
+            v-model:value="mcpsSearchText"
+            allow-clear
+            class="search-input"
+            placeholder="搜索MCP..."
+          >
+            <template #prefix>
+              <SearchOutlined class="search-icon" />
+            </template>
+          </a-input>
+        </div>
+
+        <div class="tools-list">
+          <div
+            v-for="mcp in filteredMcps"
+            :key="mcp.id"
+            :class="{ selected: selectedMcps.includes(mcp.id) }"
+            class="tool-item"
+            @click="toggleMcpSelection(mcp.id)"
+          >
+            <div class="tool-content">
+              <div class="tool-header">
+                <span class="tool-name">{{ mcp.name }}</span>
+                <div class="tool-indicator">
+                  <CheckCircleOutlined v-if="selectedMcps.includes(mcp.id)" />
+                  <PlusCircleOutlined v-else />
+                </div>
+              </div>
+              <div class="tool-description">{{ mcp.description }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="tools-modal-footer">
+          <div class="selected-count">已选择 {{ selectedMcps.length }} 个MCP</div>
+          <div class="modal-actions">
+            <a-button @click="cancelMcpsSelection">取消</a-button>
+            <a-button type="primary" @click="confirmMcpsSelection">确认</a-button>
+          </div>
+        </div>
+      </div>
+    </a-modal>
   </div>
 </template>
 
@@ -309,7 +402,7 @@ const emit = defineEmits(['close'])
 
 // Store 管理
 const agentStore = useAgentStore()
-const { availableTools, selectedAgent, selectedAgentId, agentConfig, configurableItems } =
+const { availableTools, selectedAgent, selectedAgentId, agentConfig, configurableItems, availableMcps } =
   storeToRefs(agentStore)
 
 // console.log(availableTools.value)
@@ -543,6 +636,15 @@ const validateAndFilterConfig = () => {
       if (validatedConfig[key].length !== currentValue.length) {
         console.warn(`工具配置 ${key} 中包含无效的工具ID，已自动过滤`)
       }
+    } else if (configItem.template_metadata?.kind === 'mcps' && Array.isArray(currentValue)) {
+      const availableMcpIds = availableMcps.value
+        ? Object.values(availableMcps.value).map((mcp) => mcp.id)
+        : []
+      validatedConfig[key] = currentValue.filter((mcpId) => availableMcpIds.includes(mcpId))
+
+      if (validatedConfig[key].length !== currentValue.length) {
+        console.warn(`MCP配置 ${key} 中包含无效的MCP-ID，已自动过滤`)
+      }
     }
 
     // 检查多选配置项 (type === 'list' 且有 options)
@@ -598,6 +700,73 @@ const resetConfig = async () => {
     message.error('重置配置失败')
   }
 }
+
+const mcpsModalOpen = ref(false)
+const selectedMcps = ref([])
+const mcpsSearchText = ref('')
+
+const filteredMcps = computed(() => {
+  const mcpsList = availableMcps.value ? Object.values(availableMcps.value) : []
+  if (!mcpsSearchText.value) {
+    return mcpsList
+  }
+  const searchLower = mcpsSearchText.value.toLowerCase()
+  return mcpsList.filter(
+    (mcp) =>
+      mcp.name.toLowerCase().includes(searchLower) ||
+      mcp.description.toLowerCase().includes(searchLower)
+  )
+})
+
+const getMcpNameById = (mcpId) => {
+  const mcpsList = availableMcps.value ? Object.values(availableMcps.value) : []
+  const mcp = mcpsList.find((t) => t.id === mcpId)
+  return mcp ? mcp.name : mcpId
+}
+
+const openMcpsModal = async () => {
+  try {
+    selectedMcps.value = [...(agentConfig.value?.mcps || [])]
+    mcpsModalOpen.value = true
+  } catch (error) {
+    console.error('打开MCP选择弹窗失败:', error)
+    message.error('打开MCP选择弹窗失败')
+  }
+}
+
+const toggleMcpSelection = (mcpId) => {
+  const index = selectedMcps.value.indexOf(mcpId)
+  if (index > -1) {
+    selectedMcps.value.splice(index, 1)
+  } else {
+    selectedMcps.value.push(mcpId)
+  }
+}
+
+const removeSelectedMcp = (mcpId) => {
+  const currentMcps = [...(agentConfig.value?.mcps || [])]
+  const index = currentMcps.indexOf(mcpId)
+  if (index > -1) {
+    currentMcps.splice(index, 1)
+    agentStore.updateAgentConfig({
+      mcps: currentMcps
+    })
+  }
+}
+
+const confirmMcpsSelection = () => {
+  agentStore.updateAgentConfig({
+    mcps: [...selectedMcps.value]
+  })
+  mcpsModalOpen.value = false
+  mcpsSearchText.value = ''
+}
+
+const cancelMcpsSelection = () => {
+  mcpsModalOpen.value = false
+  mcpsSearchText.value = ''
+  selectedMcps.value = []
+}
 </script>
 
 <style lang="less" scoped>
diff --git a/web/src/components/McpSelector.vue b/web/src/components/McpSelector.vue
new file mode 100644
index 000000000..b988cd869
--- /dev/null
+++ b/web/src/components/McpSelector.vue
@@ -0,0 +1,1795 @@
+<template>
+  <a-modal
+    v-model:open="mcpsModalOpen"
+    :bodyStyle="{
+      height: 'calc(100vh - 180px)',
+      maxHeight: '800px',
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden'
+    }"
+    :footer="null"
+    :maskClosable="false"
+    :width="1400"
+    centered
+    class="mcps-modal"
+    title="MCP工具管理"
+  >
+    <div class="mcps-modal-content">
+      <!-- 左侧：已选择的MCP工具列表 -->
+      <div :class="{ 'full-width': rightPanelCollapsed }" class="mcps-left-panel">
+        <div class="panel-header">
+          <h3>已选择</h3>
+          <div class="panel-header-right">
+            <a-button
+              v-if="selectedMcpTools.length > 0"
+              class="clear-btn"
+              size="small"
+              type="text"
+              @click="clearAllSelectedMcpTools"
+            >
+              <template #icon><ClearOutlined class="btn-icon" /></template>
+              清空
+            </a-button>
+            <!-- 添加/收起按钮 -->
+            <a-button
+              class="toggle-right-panel-btn"
+              size="small"
+              type="link"
+              @click="toggleRightPanel"
+            >
+              <template #icon>
+                <PlusOutlined v-if="rightPanelCollapsed" class="btn-icon" />
+                <CloseOutlined v-else class="btn-icon" />
+              </template>
+              {{ rightPanelCollapsed ? '添加' : '收起' }}
+            </a-button>
+          </div>
+        </div>
+        <div class="selected-tools-scroll-container">
+          <div class="selected-tools-list">
+            <div
+              v-for="(tool, index) in selectedMcpTools"
+              :key="`${tool.mcpId}-${tool.toolId}`"
+              class="selected-tool-card"
+            >
+              <div class="tool-card-content">
+                <div class="tool-card-header">
+                  <div class="tool-title">
+                    <span class="mcp-name">{{ tool.mcpName }}</span>
+                    <span class="tool-separator">-</span>
+                    <span class="tool-name">{{ tool.toolName }}</span>
+                    <a-tooltip :title="`ID：${tool.toolId}`">
+                      <InfoCircleOutlined class="tool-id-icon" />
+                    </a-tooltip>
+                  </div>
+                  <div class="tool-actions">
+                    <div class="tool-status">
+                      <a-switch v-model:checked="tool.enabled" size="small" />
+                      <span class="status-label">{{ tool.enabled ? '启用' : '禁用' }}</span>
+                    </div>
+                    <a-button danger size="small" type="text" @click="removeSelectedMcpTool(index)">
+                      <template #icon><DeleteOutlined /></template>
+                    </a-button>
+                  </div>
+                </div>
+                <div class="tool-description-container">
+                  <div :title="tool.toolDescription" class="tool-description">
+                    {{ tool.toolDescription }}
+                  </div>
+                  <a-button
+                    class="view-detail-btn"
+                    size="small"
+                    type="link"
+                    @click="
+                      showToolDescription({
+                        id: tool.mcpId,
+                        description: tool.toolDescription,
+                        mcpName: tool.mcpName,
+                        name: tool.toolName,
+                        server: tool.mcpName,
+                        parameters: tool.parameters || [],
+                        argsSchema: tool.argsSchema || null
+                      })
+                    "
+                  >
+                    查看详情
+                  </a-button>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="selectedMcpTools.length === 0" class="empty-state">
+              <div class="empty-text">暂无MCP工具</div>
+              <div class="empty-hint">从右侧选择MCP工具添加到此处</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="panel-footer">
+          <div class="footer-left">
+            <a-space size="small">
+              <span class="stats-total">共 {{ selectedMcpTools.length }} 个</span>
+              <span class="stats-enabled">{{ enabledToolsCount }} 个启用</span>
+            </a-space>
+          </div>
+          <div class="footer-right">
+            <a-space>
+              <a-button @click="cancelMcpsSelection">取消</a-button>
+              <a-button type="primary" @click="confirmMcpsSelection">确认</a-button>
+            </a-space>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧：MCP工具选择器 -->
+      <div :class="{ collapsed: rightPanelCollapsed }" class="mcps-right-panel">
+        <div class="panel-header">
+          <h3>未选择</h3>
+          <a-button class="refresh-btn" size="small" type="link" @click="refreshMcpTools">
+            <template #icon><ReloadOutlined /></template>
+            刷新
+          </a-button>
+        </div>
+
+        <div class="selector-search">
+          <a-input
+            v-model:value="mcpToolsSearchText"
+            allow-clear
+            class="search-input"
+            placeholder="搜索MCP名称或工具名称..."
+            size="small"
+          >
+            <template #prefix>
+              <SearchOutlined class="search-icon" />
+            </template>
+          </a-input>
+        </div>
+
+        <div class="mcps-selector">
+          <div class="mcps-tabs">
+            <a-tabs v-model:activeKey="activeTab" class="mcp-tabs">
+              <a-tab-pane key="by-mcp" tab="按MCP浏览">
+                <div class="mcp-list-container">
+                  <a-collapse
+                    v-model:activeKey="expandedMcpIds"
+                    class="mcp-collapse"
+                    ghost
+                    @change="handleCollapseChange"
+                  >
+                    <a-collapse-panel v-for="mcp in filteredMcps" :key="mcp.id">
+                      <template #header>
+                        <div class="custom-collapse-header">
+                          <span class="mcp-header-name">{{ mcp.name }}</span>
+                          <span :title="mcp.description" class="mcp-header-desp">
+                            {{ mcp.description }}
+                          </span>
+                        </div>
+                      </template>
+                      <template #extra>
+                        <span class="mcp-tools-count"> {{ getMcpToolsCount(mcp) }} 个工具 </span>
+                      </template>
+
+                      <div v-if="!mcp.tools">
+                        <a-spin size="small" />
+                        <span class="loading-text">加载工具中...</span>
+                      </div>
+
+                      <div v-else>
+                        <!-- 为工具列表添加滚动容器 -->
+                        <div class="tools-scroll-container">
+                          <div class="tools-list">
+                            <div
+                              v-for="tool in getFilteredMcpTools(mcp)"
+                              :key="tool.id"
+                              :class="{
+                                selected: isToolSelected(mcp.id, tool.id),
+                                disabled: isToolDisabled(mcp.id, tool.id)
+                              }"
+                              class="tool-select-item"
+                              @click="toggleToolSelection(mcp.id, tool)"
+                            >
+                              <div class="tool-select-content">
+                                <div class="tool-select-header">
+                                  <div class="tool-select-name">
+                                    <span class="tool-name-text">{{ tool.name }}</span>
+                                    <a-tooltip :title="`ID：${tool.id}`">
+                                      <InfoCircleOutlined class="tool-id-icon-small" />
+                                    </a-tooltip>
+                                  </div>
+                                  <div class="tool-select-actions">
+                                    <a-button
+                                      v-if="tool.description"
+                                      class="view-detail-btn"
+                                      size="small"
+                                      type="link"
+                                      @click.stop="
+                                        showToolDescription({ ...tool, mcpName: mcp.name })
+                                      "
+                                    >
+                                      详情
+                                    </a-button>
+                                  </div>
+                                  <div class="tool-select-indicator">
+                                    <CheckCircleOutlined
+                                      v-if="isToolSelected(mcp.id, tool.id)"
+                                      class="selected-icon"
+                                    />
+                                    <PlusCircleOutlined
+                                      v-else-if="!isToolDisabled(mcp.id, tool.id)"
+                                      class="available-icon"
+                                    />
+                                    <MinusCircleOutlined v-else class="disabled-icon" />
+                                  </div>
+                                </div>
+                                <div :title="tool.description" class="tool-select-description">
+                                  {{ tool.description || '暂无描述' }}
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <div v-if="getMcpToolsCount(mcp) === 0" class="no-tools">
+                          <span class="no-tools-text">此MCP暂无可用工具</span>
+                        </div>
+                      </div>
+                    </a-collapse-panel>
+                  </a-collapse>
+                </div>
+              </a-tab-pane>
+
+              <a-tab-pane key="all-tools" tab="全部工具">
+                <div class="all-tools-container">
+                  <div class="tools-grid">
+                    <template v-for="mcp in filteredMcps" :key="mcp.id">
+                      <div
+                        v-for="tool in getFilteredMcpTools(mcp)"
+                        :key="tool.id"
+                        :class="{
+                          selected: isToolSelected(mcp.id, tool.id),
+                          disabled: isToolDisabled(mcp.id, tool.id)
+                        }"
+                        class="tool-select-item"
+                        @click="toggleToolSelection(mcp.id, tool)"
+                      >
+                        <div class="tool-select-content">
+                          <div class="tool-select-header">
+                            <div class="tool-mcp-tag">{{ mcp.name }}</div>
+                            <div class="tool-select-name">
+                              <span class="tool-name-text">{{ tool.name }}</span>
+                              <a-tooltip :title="`ID：${tool.id}`">
+                                <InfoCircleOutlined class="tool-id-icon-small" />
+                              </a-tooltip>
+                            </div>
+                            <div class="tool-select-actions">
+                              <a-button
+                                v-if="tool.description && tool.description.length > 60"
+                                class="view-detail-btn"
+                                size="small"
+                                type="link"
+                                @click.stop="showToolDescription({ ...tool, mcpName: mcp.name })"
+                              >
+                                详情
+                              </a-button>
+                            </div>
+                            <div class="tool-select-indicator">
+                              <CheckCircleOutlined
+                                v-if="isToolSelected(mcp.id, tool.id)"
+                                class="selected-icon"
+                              />
+                              <PlusCircleOutlined
+                                v-else-if="!isToolDisabled(mcp.id, tool.id)"
+                                class="available-icon"
+                              />
+                              <MinusCircleOutlined v-else class="disabled-icon" />
+                            </div>
+                          </div>
+                          <div :title="tool.description" class="tool-select-description">
+                            {{ tool.description || '暂无描述' }}
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+                  </div>
+                </div>
+              </a-tab-pane>
+            </a-tabs>
+          </div>
+
+          <div v-if="filteredMcps.length === 0 && !mcpToolsSearchText" class="empty-search">
+            <SearchOutlined class="empty-search-icon" />
+            <div class="empty-search-text">未找到匹配的MCP或工具</div>
+          </div>
+        </div>
+
+        <div class="panel-footer">
+          <div class="footer-left">
+            <a-tag v-if="selectedTempTools.length > 0" color="blue">
+              已选 {{ selectedTempTools.length }} 个
+            </a-tag>
+            <span v-else class="selection-hint">选择工具添加到左侧</span>
+          </div>
+          <div class="footer-right">
+            <a-space>
+              <a-button :disabled="selectedTempTools.length === 0" @click="clearTempSelection">
+                清空
+              </a-button>
+              <a-button
+                :disabled="selectedTempTools.length === 0"
+                type="primary"
+                @click="addSelectedTools"
+              >
+                添加
+              </a-button>
+            </a-space>
+          </div>
+        </div>
+      </div>
+    </div>
+  </a-modal>
+
+  <a-modal
+    v-model:open="toolDetailModalOpen"
+    :footer="null"
+    :maskClosable="true"
+    :width="700"
+    centered
+    class="tool-detail-modal"
+    title="工具详情"
+  >
+    <div v-if="selectedToolDetail" class="tool-detail-content">
+      <div class="tool-detail-header">
+        <div class="tool-detail-title">
+          <span class="mcp-name">{{ selectedToolDetail.mcpName }}</span>
+          <span class="tool-separator">/</span>
+          <span class="tool-name">{{ selectedToolDetail.name }}</span>
+        </div>
+      </div>
+
+      <div class="tool-detail-main">
+        <!-- 描述部分 -->
+        <div class="tool-detail-section">
+          <div class="section-title">
+            <span class="title-text">描述</span>
+          </div>
+          <div class="description-content">
+            {{ selectedToolDetail.description || '暂无描述' }}
+          </div>
+        </div>
+
+        <!-- 参数部分 -->
+        <div class="tool-detail-section">
+          <div class="section-title">
+            <span class="title-text">参数</span>
+            <span v-if="selectedToolDetail.parameters" class="title-count"
+              >({{ selectedToolDetail.parameters.length }})</span
+            >
+          </div>
+
+          <!-- Loading 状态 -->
+          <div v-if="selectedToolDetail.loading" class="parameters-loading">
+            <a-spin size="small" />
+            <span class="loading-text">加载参数中...</span>
+          </div>
+
+          <!-- 有参数的情况 -->
+          <div
+            v-else-if="selectedToolDetail.parameters && selectedToolDetail.parameters.length > 0"
+            class="parameters-content"
+          >
+            <div class="parameters-table">
+              <div class="table-header">
+                <div class="header-cell param-name-cell">参数名</div>
+                <div class="header-cell param-type-cell">类型</div>
+                <div class="header-cell param-desc-cell">描述</div>
+              </div>
+              <div class="table-body">
+                <div
+                  v-for="(param, index) in selectedToolDetail.parameters"
+                  :key="index"
+                  class="table-row"
+                >
+                  <div class="row-cell param-name-cell">
+                    <span class="param-name">
+                      {{ param.name }}
+                      <span v-if="param.required" class="required-star">*</span>
+                    </span>
+                  </div>
+                  <div class="row-cell param-type-cell">
+                    <span class="type-tag">{{ param.type }}</span>
+                  </div>
+                  <div class="row-cell param-desc-cell">
+                    {{ param.description || '-' }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 没有参数的情况 -->
+          <div v-else class="no-parameters">此工具无需参数</div>
+        </div>
+      </div>
+
+      <div class="tool-detail-footer">
+        <a-button type="primary" @click="toolDetailModalOpen = false">关闭</a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import {
+  CheckCircleOutlined,
+  ClearOutlined,
+  CloseOutlined,
+  DeleteOutlined,
+  InfoCircleOutlined,
+  MinusCircleOutlined,
+  PlusCircleOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  SearchOutlined
+} from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
+import { useAgentStore } from '@/stores/agent'
+import { storeToRefs } from 'pinia'
+
+// Store 管理
+const agentStore = useAgentStore()
+const { availableMcps, selectedMcpToolsConfig, agentConfig } = storeToRefs(agentStore)
+
+// MCP工具相关状态
+const activeTab = ref('by-mcp')
+const mcpToolsSearchText = ref('')
+const selectedMcpTools = ref([])
+const selectedTempTools = ref([])
+const expandedMcpIds = ref([])
+const toolDetailModalOpen = ref(false)
+const selectedToolDetail = ref(null)
+const mcpsModalOpen = ref(false)
+const validMcps = ref([])
+
+// 显示工具详情（直接从工具对象获取数据）
+const showToolDescription = (tool) => {
+  selectedToolDetail.value = {
+    ...tool,
+    parameters: tool.parameters || [], // 直接从工具对象获取
+    loading: false // 无需 loading
+  }
+  toolDetailModalOpen.value = true
+}
+
+const props = defineProps({
+  agentId: {
+    type: String,
+    required: true
+  }
+})
+
+async function fetchValidMcps() {
+  try {
+    // 获取智能体配置中启用的 MCP 服务器 ID 列表
+    const configuredMcpIds = agentConfig.value?.mcps || []
+    
+    // 过滤：只保留配置中启用的 MCP 服务器
+    if (availableMcps.value && configuredMcpIds.length > 0) {
+      const filteredMcps = {}
+      Object.entries(availableMcps.value).forEach(([key, mcp]) => {
+        // 只保留配置中启用的 MCP
+        if (configuredMcpIds.includes(mcp.id)) {
+          filteredMcps[key] = mcp
+        }
+      })
+      validMcps.value = filteredMcps
+    } else {
+      // 如果没有配置任何 MCP，则显示空列表
+      validMcps.value = {}
+    }
+  } catch (err) {
+    console.error('Failed to fetch mcps:', err)
+    throw err
+  } finally {
+  }
+}
+
+// 获取过滤后的MCP工具（根据搜索文本）
+const getFilteredMcpTools = (mcp) => {
+  if (!mcp || !mcp.id) return []
+
+  // 直接从 mcp 的 tools 数组获取工具，不再需要加载
+  const tools = mcp.tools || []
+
+  // 如果没有搜索文本，返回所有工具
+  if (!mcpToolsSearchText.value) {
+    return tools
+  }
+
+  const searchLower = mcpToolsSearchText.value.toLowerCase()
+
+  // 过滤工具：按工具名称、描述、ID搜索
+  return tools.filter((tool) => {
+    return (
+      tool.name.toLowerCase().includes(searchLower) ||
+      tool.description?.toLowerCase().includes(searchLower) ||
+      tool.id.toLowerCase().includes(searchLower)
+    )
+  })
+}
+
+// 计算属性
+const filteredMcps = computed(() => {
+  const mcpsList = validMcps.value ? Object.values(validMcps.value) : []
+
+  // 如果没有搜索文本，直接返回所有MCP
+  if (!mcpToolsSearchText.value) {
+    return mcpsList
+  }
+
+  const searchLower = mcpToolsSearchText.value.toLowerCase()
+
+  // 返回过滤后的MCP列表
+  return mcpsList.filter((mcp) => {
+    // 1. 检查MCP本身是否匹配（名称或描述）
+    const mcpNameMatch = mcp.name.toLowerCase().includes(searchLower)
+    const mcpDescMatch = mcp.description?.toLowerCase().includes(searchLower)
+
+    // 2. 检查MCP下的工具是否匹配（无论工具是否已加载）
+    let toolMatch = false
+
+    // 如果有工具，检查工具是否匹配
+    if (mcp.tools) {
+      toolMatch = mcp.tools.some((tool) => {
+        return (
+          tool.name.toLowerCase().includes(searchLower) ||
+          tool.description?.toLowerCase().includes(searchLower) ||
+          tool.id.toLowerCase().includes(searchLower)
+        )
+      })
+    }
+
+    // 3. 只要有任何一个匹配条件满足，就保留这个MCP
+    return mcpNameMatch || mcpDescMatch || toolMatch
+  })
+})
+
+const enabledToolsCount = computed(() => {
+  return selectedMcpTools.value.filter((tool) => tool.enabled).length
+})
+
+// 获取MCP的工具（直接从mcp的tools数组获取，无需缓存）
+const getMcpTools = (mcp) => {
+  if (!mcp || !mcp.id) return []
+  return mcp.tools || []
+}
+
+const getMcpToolsCount = (mcp) => {
+  return getMcpTools(mcp).length
+}
+
+// 方法
+const isToolSelected = (mcpId, toolId) => {
+  return selectedTempTools.value.some((t) => t.mcpId === mcpId && t.toolId === toolId)
+}
+
+const isToolDisabled = (mcpId, toolId) => {
+  return selectedMcpTools.value.some((t) => t.mcpId === mcpId && t.toolId === toolId)
+}
+
+const toggleToolSelection = (mcpId, tool) => {
+  if (isToolDisabled(mcpId, tool.id)) {
+    // 已添加到左侧的工具不能再次选择
+    return
+  }
+
+  const existingIndex = selectedTempTools.value.findIndex(
+    (t) => t.mcpId === mcpId && t.toolId === tool.id
+  )
+
+  if (existingIndex > -1) {
+    // 取消选择
+    selectedTempTools.value.splice(existingIndex, 1)
+  } else {
+    // 添加选择（包含参数信息）
+    selectedTempTools.value.push({
+      mcpId,
+      mcpName: getMcpNameById(mcpId),
+      toolId: tool.id,
+      toolName: tool.name,
+      toolDescription: tool.description || '暂无描述',
+      parameters: tool.parameters || [], // 复制参数信息
+      enabled: true
+    })
+  }
+}
+
+const addSelectedTools = () => {
+  const newTools = [...selectedMcpTools.value]
+
+  selectedTempTools.value.forEach((newTool) => {
+    const exists = newTools.some(
+      (existingTool) =>
+        existingTool.mcpId === newTool.mcpId && existingTool.toolId === newTool.toolId
+    )
+
+    if (!exists) {
+      newTools.push({ ...newTool })
+    }
+  })
+
+  selectedMcpTools.value = newTools
+  selectedTempTools.value = []
+}
+
+const clearTempSelection = () => {
+  selectedTempTools.value = []
+}
+
+const removeSelectedMcpTool = (index) => {
+  selectedMcpTools.value.splice(index, 1)
+}
+
+const clearAllSelectedMcpTools = () => {
+  selectedMcpTools.value = []
+}
+
+const openMcpsModal = async () => {
+  try {
+    await fetchValidMcps()
+
+    // 获取有效的MCP服务器ID集合
+    const validMcpIds = new Set()
+    if (validMcps.value) {
+      Object.values(validMcps.value).forEach((mcp) => {
+        if (mcp && mcp.id) {
+          validMcpIds.add(mcp.id)
+        }
+      })
+    }
+
+    // 初始化已选择的MCP工具，同时过滤掉无效的MCP工具
+    const initialSelectedTools = selectedMcpToolsConfig.value
+      ? [...selectedMcpToolsConfig.value]
+      : []
+
+    // 过滤掉那些MCP不在有效列表中的工具
+    const filteredSelectedTools = initialSelectedTools
+      .filter((tool) => {
+        return tool.mcpId && validMcpIds.has(tool.mcpId)
+      })
+      .map((tool) => ({ ...tool }))
+
+    // 如果过滤后有变化，更新Vuex
+    if (filteredSelectedTools.length !== initialSelectedTools.length) {
+      // 更新Vuex中的配置
+      agentStore.updateMcpToolsConfig([...filteredSelectedTools])
+
+      // 可以给用户一个提示
+      const removedCount = initialSelectedTools.length - filteredSelectedTools.length
+      if (removedCount > 0) {
+        message.warning(`已移除 ${removedCount} 个无效的MCP工具，因为所属的MCP服务器已不可用`)
+      }
+    }
+
+    // 设置本地状态
+    selectedMcpTools.value = filteredSelectedTools
+
+    // 从validMcps中补充参数信息到已选择的工具
+    filteredSelectedTools.forEach((tool, index) => {
+      const mcp = validMcps.value[tool.mcpId]
+      if (mcp && mcp.tools) {
+        const mcpTool = mcp.tools.find((t) => t.id === tool.toolId)
+        if (mcpTool) {
+          // 从mcp补充 parameters
+          selectedMcpTools.value[index] = {
+            ...tool,
+            parameters: mcpTool.parameters || []
+          }
+        }
+      }
+    })
+
+    // 重置临时状态
+    selectedTempTools.value = []
+    mcpToolsSearchText.value = ''
+    expandedMcpIds.value = []
+    activeTab.value = 'by-mcp'
+
+    mcpsModalOpen.value = true
+  } catch (error) {
+    console.error('打开MCP工具管理弹窗失败:', error)
+    message.error('打开MCP工具管理弹窗失败')
+  }
+}
+
+const confirmMcpsSelection = () => {
+  agentStore.updateMcpToolsConfig([...selectedMcpTools.value])
+  mcpsModalOpen.value = false
+  resetMcpModal()
+}
+
+const cancelMcpsSelection = () => {
+  mcpsModalOpen.value = false
+  resetMcpModal()
+}
+
+const resetMcpModal = () => {
+  selectedMcpTools.value = []
+  selectedTempTools.value = []
+  mcpToolsSearchText.value = ''
+  expandedMcpIds.value = []
+  activeTab.value = 'by-mcp'
+}
+const getMcpNameById = (mcpId) => {
+  const mcpsList = validMcps.value ? Object.values(validMcps.value) : []
+  const mcp = mcpsList.find((t) => t.id === mcpId)
+  return mcp ? mcp.name : mcpId
+}
+
+const rightPanelCollapsed = ref(true)
+
+const toggleRightPanel = () => {
+  rightPanelCollapsed.value = !rightPanelCollapsed.value
+}
+
+// 刷新MCP工具（重新获取validMcps数据）
+const refreshMcpTools = async () => {
+  try {
+    await fetchValidMcps()
+    message.success('工具刷新成功')
+  } catch (error) {
+    console.error('刷新MCP工具失败:', error)
+    message.error('刷新工具失败')
+  }
+}
+
+// 使用 defineExpose 暴露方法给父组件
+defineExpose({
+  openMcpsModal,
+  confirmMcpsSelection,
+  cancelMcpsSelection,
+  getSelectedTools: () => [...selectedMcpTools.value]
+})
+</script>
+<style lang="less" scoped>
+.mcps-modal {
+  :deep(.ant-modal-content) {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :deep(.ant-modal-body) {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .mcps-modal-content {
+    display: flex;
+    gap: 16px;
+    height: 100%;
+    flex: 1;
+    overflow: hidden;
+
+    // 左侧面板：已选择的工具
+    .mcps-left-panel {
+      width: 55%;
+      display: flex;
+      flex-direction: column;
+      background: var(--gray-50);
+      border-radius: 8px;
+      border: 1px solid var(--gray-200);
+      transition: width 0.3s ease;
+      min-width: 250px;
+
+      &.full-width {
+        width: 100%;
+      }
+
+      .panel-header {
+        padding: 12px 16px;
+        border-bottom: 1px solid var(--gray-200);
+        background: var(--gray-0);
+        flex-shrink: 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        h3 {
+          margin: 0;
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--gray-900);
+        }
+
+        .panel-header-right {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .clear-btn {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            color: #ff4d4f;
+
+            .btn-icon {
+              font-size: 12px;
+            }
+
+            &:hover {
+              color: #ff7875 !important;
+              background-color: #fff2f0;
+            }
+          }
+
+          .toggle-right-panel-btn {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            color: var(--main-color);
+
+            .btn-icon {
+              font-size: 12px;
+            }
+
+            &:hover {
+              color: var(--main-color-dark);
+            }
+          }
+        }
+
+        .refresh-btn {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          color: var(--main-color);
+
+          &:hover {
+            color: var(--main-color-dark);
+          }
+        }
+      }
+      /* 新增：专门的滚动容器 */
+      .selected-tools-scroll-container {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+
+      .selected-tools-list {
+        padding: 16px;
+
+        .selected-tool-card {
+          background: var(--gray-0);
+          border: 1px solid var(--gray-200);
+          border-radius: 8px;
+          padding: 16px;
+          margin-bottom: 12px;
+          transition: all 0.2s ease;
+
+          &:hover {
+            border-color: var(--gray-300);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+          }
+
+          .tool-card-content {
+            .tool-card-header {
+              display: flex;
+              justify-content: space-between;
+              align-items: flex-start;
+              margin-bottom: 12px;
+
+              .tool-title {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                gap: 4px;
+                flex-wrap: wrap;
+
+                .mcp-name {
+                  font-size: 14px;
+                  font-weight: 600;
+                  color: var(--main-color);
+                  background: var(--main-50);
+                  padding: 2px 6px;
+                  border-radius: 4px;
+                }
+
+                .tool-separator {
+                  color: var(--gray-400);
+                  margin: 0 4px;
+                }
+
+                .tool-name {
+                  font-size: 14px;
+                  font-weight: 500;
+                  color: var(--gray-900);
+                }
+
+                .tool-id-icon {
+                  font-size: 12px;
+                  color: var(--gray-400);
+                  margin-left: 8px;
+                  cursor: help;
+
+                  &:hover {
+                    color: var(--gray-600);
+                  }
+                }
+              }
+
+              .tool-actions {
+                display: flex;
+                align-items: center;
+                gap: 16px;
+
+                .tool-status {
+                  display: flex;
+                  align-items: center;
+                  gap: 8px;
+
+                  .status-label {
+                    font-size: 12px;
+                    color: var(--gray-600);
+                    min-width: 32px;
+                  }
+                }
+              }
+            }
+
+            .tool-description-container {
+              margin-bottom: 8px;
+              position: relative;
+
+              .tool-description {
+                font-size: 13px;
+                color: var(--gray-600);
+                line-height: 1.4;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                margin-bottom: 4px;
+              }
+
+              .view-detail-btn {
+                padding: 0;
+                height: auto;
+                font-size: 12px;
+                color: var(--main-color);
+
+                &:hover {
+                  color: var(--main-color-dark);
+                }
+              }
+            }
+
+            .tool-meta {
+              display: flex;
+              flex-direction: column;
+              gap: 4px;
+              font-size: 11px;
+              color: var(--gray-500);
+              font-family: monospace;
+
+              .tool-id,
+              .tool-mcp-id {
+                background: var(--gray-100);
+                padding: 2px 6px;
+                border-radius: 4px;
+                display: inline-block;
+                max-width: fit-content;
+              }
+            }
+          }
+        }
+
+        .empty-state {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          color: var(--gray-400);
+          text-align: center;
+
+          .empty-icon {
+            font-size: 64px;
+            margin-bottom: 16px;
+            opacity: 0.6;
+          }
+
+          .empty-text {
+            font-size: 16px;
+            font-weight: 500;
+            color: var(--gray-500);
+            margin-bottom: 8px;
+          }
+
+          .empty-hint {
+            font-size: 14px;
+            color: var(--gray-400);
+          }
+        }
+      }
+
+      .panel-footer {
+        padding: 16px 20px;
+        border-top: 1px solid var(--gray-200);
+        background: var(--gray-0);
+        flex-shrink: 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .footer-left {
+          display: flex;
+          align-items: center;
+
+          .stats-total {
+            font-size: 14px;
+            color: var(--gray-700);
+            font-weight: 500;
+          }
+
+          .stats-enabled {
+            font-size: 14px;
+            color: var(--main-color);
+            font-weight: 500;
+            margin-left: 4px;
+          }
+
+          .selection-hint {
+            font-size: 14px;
+            color: var(--gray-400);
+          }
+        }
+
+        .footer-right {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+    // 右侧面板收起/展开按钮
+    .panel-toggle-btn {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 24px;
+      height: 60px;
+      background: var(--gray-100);
+      border: 1px solid var(--gray-200);
+      border-left: none;
+      border-radius: 0 8px 8px 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      z-index: 10;
+      color: var(--gray-600);
+      transition: all 0.2s ease;
+
+      &:hover {
+        background: var(--gray-200);
+        color: var(--gray-800);
+      }
+    }
+    // 右侧面板：工具选择器
+    .mcps-right-panel {
+      width: 45%;
+      display: flex;
+      flex-direction: column;
+      background: var(--gray-50);
+      border-radius: 8px;
+      border: 1px solid var(--gray-200);
+      transition: all 0.3s ease;
+      transform: translateX(0);
+      min-width: 0;
+
+      // 收起状态
+      &.collapsed {
+        width: 0;
+        opacity: 0;
+        transform: translateX(100%);
+        overflow: hidden;
+        border: none;
+      }
+      .panel-header {
+        padding: 12px 16px;
+        border-bottom: 1px solid var(--gray-200);
+        background: var(--gray-0);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-shrink: 0;
+
+        h3 {
+          margin: 0;
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--gray-900);
+        }
+
+        .refresh-btn {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          color: var(--main-color);
+
+          &:hover {
+            color: var(--main-color-dark);
+          }
+        }
+      }
+
+      .selector-search {
+        padding: 12px;
+        border-bottom: 1px solid var(--gray-200);
+        background: var(--gray-0);
+        flex-shrink: 0;
+
+        .search-input {
+          border-radius: 6px;
+          font-size: 14px;
+
+          .search-icon {
+            color: var(--gray-500);
+            font-size: 14px;
+          }
+        }
+      }
+
+      .mcps-selector {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background: var(--gray-0);
+
+        .empty-search {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          text-align: center;
+          width: 100%;
+          z-index: 10;
+
+          .empty-search-icon {
+            font-size: 48px;
+            color: var(--gray-400);
+            margin-bottom: 16px;
+          }
+
+          .empty-search-text {
+            font-size: 14px;
+            color: var(--gray-500);
+          }
+        }
+
+        .mcps-tabs {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          min-height: 0; /* 重要！ */
+
+          :deep(.mcp-tabs) {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+
+            .ant-tabs-nav {
+              margin: 0;
+              padding: 4px 20px !important;
+              min-height: 36px !important;
+              flex-shrink: 0;
+
+              .ant-tabs-tab {
+                padding: 4px 16px !important;
+                margin: 0 8px 0 0 !important;
+              }
+            }
+
+            .ant-tabs-content-holder {
+              flex: 1;
+              overflow: hidden;
+            }
+
+            .ant-tabs-content {
+              height: 100%;
+            }
+
+            .ant-tabs-tabpane {
+              height: 100%;
+              overflow: hidden;
+            }
+          }
+
+          .mcp-list-container {
+            height: 100%;
+            overflow-y: auto;
+            padding: 0 20px;
+            background: var(--gray-50);
+
+            .mcp-collapse {
+              :deep(.ant-collapse-item) {
+                border-bottom: 1px solid var(--gray-200);
+                // 自定义折叠面板标题样式
+                .custom-collapse-header {
+                  display: flex;
+                  align-items: center;
+                  gap: 12px;
+                  width: 100%;
+                  padding-right: 8px;
+
+                  .mcp-header-name {
+                    font-weight: 500;
+                    flex-shrink: 0;
+                    color: var(--main-color);
+                    background: var(--main-50);
+                    padding: 2px 6px;
+                    border-radius: 4px;
+                  }
+
+                  .mcp-header-desp {
+                    font-size: 13px;
+                    color: var(--gray-600);
+                    flex: 1;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    font-weight: normal;
+
+                    &:hover {
+                      color: var(--gray-700);
+                    }
+                  }
+                }
+                .ant-collapse-header {
+                  padding: 12px 0;
+                  font-weight: 500;
+                  font-size: 15px;
+                  display: flex;
+                  align-items: center;
+                  background-color: var(--gray-0);
+
+                  .mcp-tools-count {
+                    font-size: 12px;
+                    color: var(--gray-500);
+                    margin-left: auto;
+                    margin-right: 8px;
+                    font-weight: normal;
+                  }
+
+                  .mcp-tools-desp {
+                    font-size: 14px;
+                    color: var(--gray-500);
+                    margin-right: 8px;
+                    font-weight: normal;
+                  }
+                }
+
+                .ant-collapse-content-box {
+                  padding: 0;
+                }
+              }
+            }
+          }
+
+          .all-tools-container {
+            height: 100%;
+            overflow-y: auto;
+            padding: 0 20px;
+            background: var(--gray-50);
+
+            .tools-grid {
+              display: grid;
+              grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+              gap: 12px;
+              padding: 8px 0;
+            }
+          }
+
+          .mcp-info {
+            padding: 12px 16px;
+            background: var(--gray-50);
+            border-radius: 6px;
+            margin-bottom: 16px;
+
+            .mcp-description {
+              font-size: 13px;
+              color: var(--gray-700);
+              line-height: 1.4;
+              margin-bottom: 4px;
+            }
+          }
+
+          .loading-tools {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            color: var(--gray-500);
+
+            .loading-text {
+              margin-left: 8px;
+              font-size: 13px;
+            }
+          }
+
+          .loading-all-tools {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: var(--gray-500);
+
+            .loading-text {
+              margin-top: 12px;
+              font-size: 14px;
+            }
+          }
+
+          .tools-list {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 12px;
+            padding: 8px 0;
+          }
+
+          .tool-select-item {
+            padding: 12px;
+            border: 1px solid var(--gray-200);
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            background: var(--gray-0);
+
+            &:hover {
+              border-color: var(--main-color);
+              background: var(--gray-25);
+
+              .tool-select-content .tool-select-indicator .available-icon {
+                color: var(--main-color);
+              }
+            }
+
+            &.selected {
+              border-color: var(--main-color);
+              background: var(--main-10);
+
+              .tool-select-content {
+                .tool-select-name {
+                  color: var(--main-color);
+                  font-weight: 500;
+                }
+
+                .selected-icon {
+                  color: var(--main-color);
+                }
+              }
+            }
+
+            &.disabled {
+              opacity: 0.6;
+              cursor: not-allowed;
+              background: var(--gray-100);
+
+              &:hover {
+                border-color: var(--gray-300);
+                background: var(--gray-100);
+              }
+
+              .tool-select-content {
+                .tool-select-name {
+                  color: var(--gray-500);
+                }
+
+                .tool-mcp-tag {
+                  background: var(--gray-200);
+                  color: var(--gray-500);
+                }
+
+                .disabled-icon {
+                  color: var(--gray-400);
+                }
+              }
+            }
+
+            .tool-select-content {
+              .tool-select-header {
+                display: flex;
+                align-items: center;
+                margin-bottom: 8px;
+                gap: 8px;
+
+                .tool-mcp-tag {
+                  font-size: 11px;
+                  background: var(--gray-100);
+                  color: var(--gray-600);
+                  padding: 1px 6px;
+                  border-radius: 4px;
+                  font-weight: 500;
+                  flex-shrink: 0;
+                }
+
+                .tool-name-text {
+                  flex: 1;
+                  font-size: 14px;
+                  font-weight: 500;
+                  color: var(--gray-900);
+                  line-height: 1.3;
+                  min-width: 0; // 允许文本截断
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+
+                .tool-id-icon-small {
+                  font-size: 12px;
+                  color: var(--gray-400);
+                  margin-left: 6px;
+                  flex-shrink: 0;
+                  cursor: help;
+
+                  &:hover {
+                    color: var(--gray-600);
+                  }
+                }
+
+                .tool-select-indicator {
+                  font-size: 16px;
+                  flex-shrink: 0;
+
+                  .selected-icon {
+                    color: var(--main-color);
+                  }
+
+                  .available-icon {
+                    color: var(--gray-400);
+                  }
+
+                  .disabled-icon {
+                    color: var(--gray-400);
+                  }
+                }
+              }
+
+              .tool-select-description {
+                font-size: 12px;
+                color: var(--gray-600);
+                line-height: 1.4;
+                margin-bottom: 8px;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                min-height: 36px; // 保证两行高度
+              }
+
+              .tool-select-actions {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .view-detail-btn {
+                  padding: 0;
+                  height: auto;
+                  font-size: 11px;
+                  color: var(--main-color);
+
+                  &:hover {
+                    color: var(--main-color-dark);
+                  }
+                }
+              }
+            }
+          }
+
+          .no-tools {
+            padding: 24px 16px;
+            text-align: center;
+            background: var(--gray-50);
+            border-radius: 6px;
+
+            .no-tools-text {
+              font-size: 13px;
+              color: var(--gray-500);
+            }
+          }
+        }
+      }
+
+      .panel-footer {
+        padding: 16px 20px;
+        border-top: 1px solid var(--gray-200);
+        background: var(--gray-0);
+        flex-shrink: 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .footer-left {
+          display: flex;
+          align-items: center;
+        }
+
+        .footer-right {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
+}
+
+// 工具详情弹窗样式
+.tool-detail-modal {
+  .ant-modal-content {
+    border-radius: 12px;
+    overflow: hidden;
+  }
+
+  .ant-modal-header {
+    border-bottom: 1px solid var(--gray-200);
+    border-radius: 12px 12px 0 0;
+    padding: 20px 24px 16px;
+
+    .ant-modal-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--gray-900);
+    }
+  }
+
+  .ant-modal-body {
+    padding: 0;
+  }
+
+  .tool-detail-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .tool-detail-header {
+      padding: 0 12px;
+      margin-bottom: 20px;
+
+      .tool-detail-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 16px 0;
+        border-bottom: 1px solid var(--gray-200);
+
+        .mcp-name {
+          font-size: 16px;
+          font-weight: 500;
+          color: var(--main-color);
+        }
+
+        .tool-separator {
+          color: var(--gray-400);
+        }
+
+        .tool-name {
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--gray-900);
+        }
+      }
+    }
+
+    .tool-detail-main {
+      padding: 0 12px;
+      flex: 1;
+      overflow-y: visible;
+
+      .tool-detail-section {
+        margin-bottom: 24px;
+
+        .parameters-loading {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 40px;
+          background: var(--gray-0);
+          border-radius: 8px;
+          border: 1px solid var(--gray-200);
+          min-height: 100px;
+
+          .loading-text {
+            margin-left: 8px;
+            color: var(--gray-600);
+            font-size: 14px;
+          }
+
+          .ant-spin {
+            color: var(--main-color);
+          }
+        }
+
+        .section-title {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin-bottom: 12px;
+          font-weight: 600;
+          color: var(--gray-900);
+
+          .title-text {
+            font-size: 15px;
+          }
+
+          .title-count {
+            font-size: 13px;
+            color: var(--gray-500);
+            font-weight: normal;
+          }
+        }
+
+        .description-content {
+          font-size: 14px;
+          line-height: 1.7;
+          color: var(--gray-900);
+          padding: 16px;
+          background: var(--gray-0);
+          border: 1px solid var(--gray-200);
+          border-radius: 8px;
+          max-height: 260px;
+          overflow-y: auto;
+          white-space: pre-wrap;
+          word-break: break-word;
+        }
+
+        .no-parameters {
+          padding: 16px;
+          background: var(--gray-100);
+          border-radius: 8px;
+          border: 1px solid var(--gray-200);
+          text-align: center;
+          color: var(--gray-600);
+          font-size: 14px;
+        }
+
+        .parameters-content {
+          max-height: 260px;
+          overflow-y: auto;
+          border: 1px solid var(--gray-200);
+          border-radius: 8px;
+          background: var(--gray-0);
+
+          .parameters-table {
+            width: 100%;
+
+            .table-header {
+              display: flex;
+              background: var(--gray-100);
+              border-bottom: 1px solid var(--gray-200);
+              position: sticky;
+              top: 0;
+              z-index: 1;
+
+              .header-cell {
+                padding: 12px 16px;
+                font-size: 13px;
+                font-weight: 600;
+                color: var(--gray-700);
+                border-right: 1px solid var(--gray-200);
+
+                &:last-child {
+                  border-right: none;
+                }
+              }
+
+              .param-name-cell {
+                width: 28%;
+                min-width: 120px;
+              }
+
+              .param-type-cell {
+                width: 15%;
+                min-width: 80px;
+              }
+
+              .param-desc-cell {
+                flex: 1;
+              }
+            }
+
+            .table-body {
+              .table-row {
+                display: flex;
+                border-bottom: 1px solid var(--gray-200);
+
+                &:last-child {
+                  border-bottom: none;
+                }
+
+                &:hover {
+                  background: var(--gray-100);
+                }
+
+                .row-cell {
+                  padding: 12px 16px;
+                  font-size: 13px;
+                  color: var(--gray-900);
+                  border-right: 1px solid var(--gray-200);
+
+                  &:last-child {
+                    border-right: none;
+                  }
+                }
+
+                .param-name-cell {
+                  width: 28%;
+                  min-width: 120px;
+
+                  .param-name {
+                    font-weight: 500;
+                    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
+
+                    .required-star {
+                      color: #ff4d4f;
+                      margin-left: 2px;
+                    }
+                  }
+                }
+
+                .param-type-cell {
+                  width: 15%;
+                  min-width: 80px;
+
+                  .type-tag {
+                    display: inline-block;
+                    padding: 2px 8px;
+                    border-radius: 4px;
+                    background: var(--main-50);
+                    color: var(--main-color);
+                    font-size: 12px;
+                    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
+                  }
+                }
+
+                .param-desc-cell {
+                  flex: 1;
+                  line-height: 1.5;
+                  color: var(--gray-700);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .tool-detail-footer {
+      padding: 16px 24px;
+      border-top: 1px solid var(--gray-200);
+      text-align: right;
+      margin-top: 8px;
+
+      .ant-btn {
+        min-width: 80px;
+        height: 32px;
+        padding: 0 16px;
+        border-radius: 6px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/components/McpServerDetailModal.vue b/web/src/components/McpServerDetailModal.vue
index 631ca69d4..a742031ce 100644
--- a/web/src/components/McpServerDetailModal.vue
+++ b/web/src/components/McpServerDetailModal.vue
@@ -1,26 +1,26 @@
 <template>
   <a-modal
     v-model:open="modalVisible"
+    :footer="null"
     :title="server?.name || 'MCP 服务器详情'"
+    class="mcp-detail-modal"
     width="800px"
-    :footer="null"
     @cancel="handleClose"
-    class="mcp-detail-modal"
   >
-    <div class="detail-container" v-if="server">
+    <div v-if="server" class="detail-container">
       <!-- 头部状态 -->
       <div class="detail-header">
         <div class="server-info">
           <span class="server-icon">{{ server.icon || '🔌' }}</span>
           <div class="server-meta">
             <h3 class="server-name">{{ server.name }}</h3>
-            <span class="server-status" :class="{ enabled: server.enabled }">
+            <span :class="{ enabled: server.enabled }" class="server-status">
               {{ server.enabled ? '已启用' : '已禁用' }}
             </span>
           </div>
         </div>
         <div class="header-actions">
-          <a-button @click="handleTestConnection" :loading="testLoading">
+          <a-button :loading="testLoading" @click="handleTestConnection">
             <template #icon><ApiOutlined /></template>
             测试连接
           </a-button>
@@ -48,17 +48,17 @@
                   <span class="url-text">{{ server.url || '-' }}</span>
                 </div>
                 <div
-                  class="info-item"
                   v-if="server.headers && Object.keys(server.headers).length > 0"
+                  class="info-item"
                 >
                   <label>请求头</label>
                   <pre class="headers-pre">{{ JSON.stringify(server.headers, null, 2) }}</pre>
                 </div>
-                <div class="info-item" v-if="server.timeout">
+                <div v-if="server.timeout" class="info-item">
                   <label>HTTP 超时</label>
                   <span>{{ server.timeout }} 秒</span>
                 </div>
-                <div class="info-item" v-if="server.sse_read_timeout">
+                <div v-if="server.sse_read_timeout" class="info-item">
                   <label>SSE 读取超时</label>
                   <span>{{ server.sse_read_timeout }} 秒</span>
                 </div>
@@ -70,7 +70,7 @@
                   <label>命令</label>
                   <span class="command-text">{{ server.command || '-' }}</span>
                 </div>
-                <div class="info-item" v-if="server.args && server.args.length > 0">
+                <div v-if="server.args && server.args.length > 0" class="info-item">
                   <label>参数</label>
                   <span>
                     <a-tag v-for="(arg, index) in server.args" :key="index" size="small">
@@ -80,11 +80,11 @@
                 </div>
               </template>
 
-              <div class="info-item" v-if="server.description">
+              <div v-if="server.description" class="info-item">
                 <label>描述</label>
                 <span>{{ server.description }}</span>
               </div>
-              <div class="info-item" v-if="server.tags && server.tags.length > 0">
+              <div v-if="server.tags && server.tags.length > 0" class="info-item">
                 <label>标签</label>
                 <span>
                   <a-tag v-for="tag in server.tags" :key="tag">{{ tag }}</a-tag>
@@ -112,11 +112,11 @@
             <div class="tools-toolbar">
               <a-input-search
                 v-model:value="toolSearchText"
+                allowClear
                 placeholder="搜索工具..."
                 style="width: 240px"
-                allowClear
               />
-              <a-button @click="handleRefreshTools" :loading="toolsLoading">
+              <a-button :loading="toolsLoading" @click="handleRefreshTools">
                 <template #icon><ReloadOutlined /></template>
                 刷新工具
               </a-button>
@@ -131,8 +131,8 @@
                 <div
                   v-for="tool in filteredTools"
                   :key="tool.name"
-                  class="tool-card"
                   :class="{ disabled: !tool.enabled }"
+                  class="tool-card"
                 >
                   <div class="tool-header">
                     <div class="tool-info">
@@ -144,20 +144,28 @@
                     <div class="tool-actions">
                       <a-switch
                         :checked="tool.enabled"
-                        @change="handleToggleTool(tool)"
+                        :disabled="processingTools.has(tool.name)"
                         :loading="toggleToolLoading === tool.name"
                         size="small"
+                        @change="handleToggleTool(tool)"
                       />
                       <a-tooltip title="复制工具名称">
-                        <a-button type="text" size="small" @click="copyToolName(tool.name)">
+                        <a-button size="small" type="text" @click="copyToolName(tool.name)">
                           <CopyOutlined />
                         </a-button>
                       </a-tooltip>
                     </div>
                   </div>
-                  <div class="tool-description" v-if="tool.description">
-                    {{ tool.description }}
-                  </div>
+                  <a-tooltip
+                    v-if="tool.description"
+                    :title="tool.description.length > 100 ? tool.description : ''"
+                    overlayClassName="tool-description-tooltip"
+                    placement="topLeft"
+                  >
+                    <div class="tool-description">
+                      {{ tool.description }}
+                    </div>
+                  </a-tooltip>
                   <a-collapse
                     v-if="tool.parameters && Object.keys(tool.parameters).length > 0"
                     ghost
@@ -167,17 +175,34 @@
                         <div
                           v-for="(param, paramName) in tool.parameters"
                           :key="paramName"
-                          class="param-item"
+                          class="param-row-new"
                         >
-                          <div class="param-header">
-                            <span class="param-name">{{ paramName }}</span>
-                            <span class="param-required" v-if="tool.required?.includes(paramName)"
-                              >必填</span
+                          <div class="param-left">
+                            <span class="param-name-text">{{ paramName }}</span>
+                            <span
+                              v-if="tool.required?.includes(paramName)"
+                              class="param-required-mark"
+                              >*</span
                             >
-                            <span class="param-type">{{ param.type || 'any' }}</span>
                           </div>
-                          <div class="param-desc" v-if="param.description">
-                            {{ param.description }}
+                          <div class="param-right">
+                            <div class="param-type-line">
+                              <span
+                                :style="{ background: getTypeColor(param.type) }"
+                                class="type-dot"
+                              ></span>
+                              <span class="param-type-text">{{ param.type || 'any' }}</span>
+                            </div>
+                            <a-tooltip
+                              v-if="param.description"
+                              :title="param.description.length > 80 ? param.description : ''"
+                              overlayClassName="tool-description-tooltip"
+                              placement="topLeft"
+                            >
+                              <div class="param-desc-text">
+                                {{ param.description }}
+                              </div>
+                            </a-tooltip>
                           </div>
                         </div>
                       </div>
@@ -214,13 +239,13 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { notification } from 'ant-design-vue'
 import {
   ApiOutlined,
-  ReloadOutlined,
+  CopyOutlined,
   InfoCircleOutlined,
-  CopyOutlined
+  ReloadOutlined
 } from '@ant-design/icons-vue'
 import { mcpApi } from '@/apis/mcp_api'
 import { formatDateTime } from '@/utils/time'
@@ -236,7 +261,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['update:visible', 'update'])
+const emit = defineEmits(['update:visible', 'update', 'toolToggled'])
 
 // 状态
 const activeTab = ref('general')
@@ -263,11 +288,11 @@ const filteredTools = computed(() => {
   )
 })
 
-// 监听服务器变化，加载工具列表
+// 监听服务器变化，只有当真正切换服务器（Name 变化）时才加载工具列表
 watch(
-  () => props.server,
-  (newServer) => {
-    if (newServer) {
+  () => props.server?.name,
+  (newName, oldName) => {
+    if (newName && newName !== oldName) {
       activeTab.value = 'general'
       fetchTools()
     }
@@ -338,13 +363,26 @@ const handleTestConnection = async () => {
     testLoading.value = false
   }
 }
+// 使用 Reactive Set 存储处理状态，控制 UI 禁用
+const processingTools = reactive(new Set())
+// 使用原生 Set 作为逻辑同步锁（完全绕过 Vue 响应式系统，确保绝对同步拦截）
+const logicLock = new Set()
 
 // 切换工具启用状态
 const handleToggleTool = async (tool) => {
   if (!props.server) return
 
+  // 1. 逻辑同步锁拦截（最优先、最快、无开销）
+  if (logicLock.has(tool.name)) {
+    return
+  }
+
   try {
+    // 2. 上双重锁
+    logicLock.add(tool.name) // 立即生效的逻辑锁
+    processingTools.add(tool.name) // 触发 UI 更新的响应式锁
     toggleToolLoading.value = tool.name
+
     const result = await mcpApi.toggleMcpServerTool(props.server.name, tool.name)
     if (result.success) {
       notification.success({ message: result.message })
@@ -353,7 +391,12 @@ const handleToggleTool = async (tool) => {
       if (targetTool) {
         targetTool.enabled = result.enabled
       }
-      emit('update')
+      // 触发父组件更新
+      emit('toolToggled', {
+        serverName: props.server.name,
+        toolName: tool.name,
+        enabled: result.enabled
+      })
     } else {
       notification.error({ message: result.message || '操作失败' })
     }
@@ -361,7 +404,12 @@ const handleToggleTool = async (tool) => {
     console.error('切换工具状态失败:', err)
     notification.error({ message: err.message || '操作失败' })
   } finally {
-    toggleToolLoading.value = null
+    // 3. 强制冷却解锁（至少等待 300ms 确保 UI 稳定和防止极速连击）
+    setTimeout(() => {
+      logicLock.delete(tool.name)
+      processingTools.delete(tool.name)
+      toggleToolLoading.value = null
+    }, 300)
   }
 }
 
@@ -375,6 +423,24 @@ const copyToolName = async (name) => {
   }
 }
 
+// 根据参数类型返回对应的颜色
+const getTypeColor = (type) => {
+  if (!type) return '#8c8c8c' // 默认灰色
+
+  const typeMap = {
+    string: '#52c41a', // 绿色
+    number: '#1890ff', // 蓝色
+    integer: '#1890ff', // 蓝色
+    boolean: '#fa8c16', // 橙色
+    object: '#722ed1', // 紫色
+    array: '#f5222d', // 红色
+    null: '#8c8c8c', // 灰色
+    any: '#8c8c8c' // 灰色
+  }
+
+  return typeMap[type.toLowerCase()] || '#1890ff' // 默认蓝色
+}
+
 // 格式化时间
 const formatTime = (timeStr) => formatDateTime(timeStr)
 
@@ -575,8 +641,18 @@ const handleClose = () => {
         .tool-description {
           font-size: 13px;
           color: var(--gray-600);
-          line-height: 1.4;
+          line-height: 1.5;
           margin-bottom: 8px;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          cursor: help;
+
+          &:hover {
+            color: var(--gray-700);
+          }
         }
 
         :deep(.ant-collapse) {
@@ -599,46 +675,80 @@ const handleClose = () => {
           flex-direction: column;
           gap: 8px;
 
-          .param-item {
+          .param-row-new {
+            display: grid;
+            grid-template-columns: 180px 1fr;
+            gap: 24px;
+            padding: 12px 16px;
             background: var(--gray-50);
-            padding: 8px 12px;
-            border-radius: 4px;
+            border: 1px solid var(--gray-150);
+            border-radius: 6px;
 
-            .param-header {
+            .param-left {
               display: flex;
-              align-items: center;
-              gap: 8px;
-              margin-bottom: 4px;
+              align-items: flex-start;
+              gap: 4px;
+              padding-right: 24px;
+              border-right: 1px solid var(--gray-200);
 
-              .param-name {
+              .param-name-text {
                 font-weight: 500;
                 font-size: 13px;
                 color: var(--gray-900);
                 font-family: 'Monaco', 'Consolas', monospace;
               }
 
-              .param-required {
-                font-size: 11px;
+              .param-required-mark {
                 color: var(--color-error-500);
-                background: var(--color-error-50);
-                padding: 1px 6px;
-                border-radius: 3px;
+                font-size: 14px;
+                font-weight: 600;
               }
+            }
 
-              .param-type {
-                font-size: 11px;
-                color: var(--gray-500);
-                background: var(--gray-100);
-                padding: 1px 6px;
-                border-radius: 3px;
-                font-family: 'Monaco', 'Consolas', monospace;
+            .param-right {
+              display: flex;
+              flex-direction: column;
+              gap: 6px;
+
+              .param-type-line {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+
+                .type-dot {
+                  width: 8px;
+                  height: 8px;
+                  border-radius: 50%;
+                  flex-shrink: 0;
+                }
+
+                .param-type-text {
+                  font-size: 12px;
+                  color: var(--color-primary);
+                  font-family: 'Monaco', 'Consolas', monospace;
+                  font-weight: 500;
+                  padding: 2px 8px;
+                  background: var(--color-primary-50);
+                  border: 1px solid var(--color-primary-200);
+                  border-radius: 4px;
+                }
               }
-            }
 
-            .param-desc {
-              font-size: 12px;
-              color: var(--gray-600);
-              line-height: 1.4;
+              .param-desc-text {
+                font-size: 13px;
+                color: var(--gray-600);
+                line-height: 1.5;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                cursor: help;
+
+                &:hover {
+                  color: var(--gray-700);
+                }
+              }
             }
           }
         }
@@ -654,3 +764,18 @@ const handleClose = () => {
   }
 }
 </style>
+
+<style lang="less">
+// 工具描述 Tooltip 样式（不使用 scoped，因为 Tooltip 渲染在 body 下）
+.tool-description-tooltip {
+  max-width: 600px !important;
+
+  .ant-tooltip-inner {
+    max-width: 600px;
+    max-height: 400px;
+    overflow-y: auto;
+    text-align: left;
+    line-height: 1.6;
+  }
+}
+</style>
diff --git a/web/src/components/McpServersComponent.vue b/web/src/components/McpServersComponent.vue
index 479114253..09656f720 100644
--- a/web/src/components/McpServersComponent.vue
+++ b/web/src/components/McpServersComponent.vue
@@ -59,6 +59,7 @@
                   :checked="server.enabled"
                   @change="handleToggleServer(server)"
                   :loading="toggleLoading === server.name"
+                  :disabled="processingServers.has(server.name)"
                 />
               </div>
 
@@ -267,6 +268,7 @@
       v-model:visible="detailModalVisible"
       :server="selectedServer"
       @update="handleServerUpdate"
+      @toolToggled="handleToolToggled"
     />
   </div>
 </template>
@@ -480,10 +482,24 @@ const handleFormSubmit = async () => {
   }
 }
 
+// 使用 Reactive Set 存储处理状态，控制 UI 禁用
+const processingServers = reactive(new Set())
+// 原生逻辑锁
+const serverLogicLock = new Set()
+
 // 切换服务器启用状态
 const handleToggleServer = async (server) => {
+  // 1. 逻辑同步锁拦截
+  if (serverLogicLock.has(server.name)) {
+    return
+  }
+  
   try {
+    // 2. 上双重锁
+    serverLogicLock.add(server.name)
+    processingServers.add(server.name)
     toggleLoading.value = server.name
+    
     const result = await mcpApi.toggleMcpServer(server.name)
     if (result.success) {
       notification.success({ message: result.message })
@@ -495,7 +511,12 @@ const handleToggleServer = async (server) => {
     console.error('切换状态失败:', err)
     notification.error({ message: err.message || '操作失败' })
   } finally {
-    toggleLoading.value = null
+    // 3. 强制冷却解锁
+    setTimeout(() => {
+      serverLogicLock.delete(server.name)
+      processingServers.delete(server.name)
+      toggleLoading.value = null
+    }, 300)
   }
 }
 
@@ -556,6 +577,33 @@ const handleServerUpdate = () => {
   fetchServers()
 }
 
+// 处理工具切换（来自详情模态框）
+// NOTE: 只更新本地状态，避免重新获取整个服务器列表
+const handleToolToggled = ({ serverName, toolName, enabled }) => {
+  const server = servers.value.find(s => s.name === serverName)
+  if (server) {
+    // 更新 disabled_tools 列表
+    if (!server.disabled_tools) {
+      server.disabled_tools = []
+    }
+    
+    if (enabled) {
+      // 启用：从 disabled_tools 中移除
+      server.disabled_tools = server.disabled_tools.filter(t => t !== toolName)
+    } else {
+      // 禁用：添加到 disabled_tools
+      if (!server.disabled_tools.includes(toolName)) {
+        server.disabled_tools.push(toolName)
+      }
+    }
+    
+    // 更新 selectedServer（如果是当前选中的服务器）
+    if (selectedServer.value?.name === serverName) {
+      selectedServer.value.disabled_tools = [...server.disabled_tools]
+    }
+  }
+}
+
 // 格式化 JSON
 const formatJson = () => {
   try {
diff --git a/web/src/stores/agent.js b/web/src/stores/agent.js
index a501fcdb0..4bf3671e4 100644
--- a/web/src/stores/agent.js
+++ b/web/src/stores/agent.js
@@ -75,6 +75,18 @@ export const useAgentStore = defineStore(
       return configurableItems.value.tools?.options || []
     })
 
+    // MCP相关状态
+    const availableMcps = computed(() => {
+      return configurableItems.value.mcps?.options || []
+    })
+    const selectedMcpToolsConfig = ref([])
+
+    // 知识库相关状态
+    const availableKnowledges = computed(() => {
+      return configurableItems.value.knowledges?.options || []
+    })
+    const selectedKnowledgeToolsConfig = ref([])
+
     const hasConfigChanges = computed(
       () => JSON.stringify(agentConfig.value) !== JSON.stringify(originalAgentConfig.value)
     )
@@ -294,6 +306,20 @@ export const useAgentStore = defineStore(
       Object.assign(agentConfig.value, updates)
     }
 
+    /**
+     * 更新mcp 工具配置（支持批量更新）
+     */
+    function updateMcpToolsConfig(newConfig) {
+      selectedMcpToolsConfig.value = newConfig;
+    }
+
+    /**
+     * 更新知识库配置（支持批量更新）
+     */
+    function updateKnowledgeToolsConfig(newConfig) {
+      selectedKnowledgeToolsConfig.value = newConfig;
+    }
+
     /**
      * 清除错误状态
      */
@@ -317,6 +343,8 @@ export const useAgentStore = defineStore(
       error.value = null
       isInitialized.value = false
       isInitializing.value = false
+      selectedMcpToolsConfig.value = [] // 重置 MCP 工具配置
+      selectedKnowledgeToolsConfig.value = [] // 重置 知识库 配置
     }
 
     return {
@@ -342,6 +370,12 @@ export const useAgentStore = defineStore(
       availableTools,
       hasConfigChanges,
 
+      availableMcps,
+      availableKnowledges,
+
+      selectedMcpToolsConfig,
+      selectedKnowledgeToolsConfig,
+
       // 方法
       initialize,
       fetchAgents,
@@ -355,7 +389,9 @@ export const useAgentStore = defineStore(
       updateConfigItem,
       updateAgentConfig,
       clearError,
-      reset
+      reset,
+      updateMcpToolsConfig,
+      updateKnowledgeToolsConfig,
     }
   },
   {
@@ -363,7 +399,7 @@ export const useAgentStore = defineStore(
     persist: {
       key: 'agent-store',
       storage: localStorage,
-      pick: ['selectedAgentId']
+      pick: ['selectedAgentId', 'selectedMcpToolsConfig', 'selectedKnowledgeToolsConfig']
     }
   }
 )