feat(mcp): 添加 MCP 服务器管理功能

- 新增 Server MCP API 路由 (/api/mcp/*)
  - GET /servers - 获取所有服务器状态
  - POST /servers/:name/connect|disconnect|enable|disable
  - GET /tools - 获取所有 MCP 工具
  - GET /config - 获取 MCP 配置

- 新增 UI MCPPanel 组件
  - 显示服务器列表和状态指示灯
  - 支持连接/断开/启用/禁用操作
  - 展开查看服务器配置和工具列表
  - 响应式设计支持移动端

- 集成到 Web 和 Desktop
  - 添加 Plug 图标按钮到工具栏
  - 点击打开 MCP 管理面板
This commit is contained in:
2025-12-12 20:41:49 +08:00
parent 5a482f78ff
commit bad7bfcc36
11 changed files with 1225 additions and 5 deletions
+6
View File
@@ -8,6 +8,7 @@ import {
FileBrowser,
ConfigPanel,
CommandPanel,
MCPPanel,
Toaster,
listSessions,
createSession,
@@ -21,6 +22,7 @@ export function App() {
const [showFileBrowser, setShowFileBrowser] = useState(false);
const [showConfig, setShowConfig] = useState(false);
const [showCommands, setShowCommands] = useState(false);
const [showMCP, setShowMCP] = useState(false);
const [sessionTitleUpdate, setSessionTitleUpdate] = useState<{ sessionId: string; name: string } | null>(null);
// 初始化:加载或创建会话
@@ -92,6 +94,7 @@ export function App() {
onToggleFileBrowser={() => setShowFileBrowser(!showFileBrowser)}
onOpenConfig={() => setShowConfig(true)}
onOpenCommands={() => setShowCommands(true)}
onOpenMCP={() => setShowMCP(true)}
/>
) : (
<div className="flex-1 flex items-center justify-center h-full">
@@ -118,6 +121,9 @@ export function App() {
{/* 命令面板 */}
{showCommands && <CommandPanel onClose={() => setShowCommands(false)} />}
{/* MCP 面板 */}
{showMCP && <MCPPanel onClose={() => setShowMCP(false)} />}
{/* Toast 通知 */}
<Toaster />
</div>
+17 -2
View File
@@ -3,7 +3,7 @@
*/
import { useEffect, useRef } from 'react';
import { WifiOff, MessageSquare, Settings, FolderOpen, Terminal } from 'lucide-react';
import { WifiOff, MessageSquare, Settings, FolderOpen, Terminal, Plug } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import {
useChat,
@@ -21,6 +21,7 @@ interface ChatPageProps {
onToggleFileBrowser?: () => void;
onOpenConfig?: () => void;
onOpenCommands?: () => void;
onOpenMCP?: () => void;
}
export function ChatPage({
@@ -30,6 +31,7 @@ export function ChatPage({
onToggleFileBrowser,
onOpenConfig,
onOpenCommands,
onOpenMCP,
}: ChatPageProps) {
const {
messages,
@@ -123,8 +125,21 @@ export function ChatPage({
<ConnectionStatus />
{/* 工具栏按钮 */}
{(onOpenConfig || onToggleFileBrowser || onOpenCommands) && (
{(onOpenConfig || onToggleFileBrowser || onOpenCommands || onOpenMCP) && (
<div className="flex items-center gap-1.5 border-l border-gray-600 pl-3">
{/* MCP 按钮 */}
{onOpenMCP && (
<motion.button
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
onClick={onOpenMCP}
className="p-1.5 rounded-lg text-gray-400 hover:text-gray-200 hover:bg-gray-700 transition-colors"
title="MCP Servers"
>
<Plug size={20} />
</motion.button>
)}
{/* 命令按钮 */}
{onOpenCommands && (
<motion.button