7.4 KiB
7.4 KiB
MCP Client Vue - 版本发布记录
v1.0.0
重构时间: 2025-10-12
🎯 初始发布
核心特性
- MCP客户端基础功能 - 支持Model Context Protocol
- 双传输协议 - HTTP和SSE(Server-Sent Events)传输
- Vue 3 + TypeScript - 现代化前端技术栈
- Naive UI组件库 - 美观的用户界面
- Pinia状态管理 - 响应式数据流
基础功能
- 服务器连接管理
- 工具调用执行
- 资源获取支持
- 提示词管理
- 基本的错误处理
技术实现
- 前后端分离架构
- RESTful API设计
- 实时双向通信
- 模块化组件设计
- TypeScript类型安全
📋 项目结构
mcp-client-vue/
├── src/ # 后端服务
│ ├── server/ # Express服务器
│ └── types/ # TypeScript类型
├── web/ # Vue前端应用
│ ├── src/ # Vue组件和服务
│ ├── public/ # 静态资源
│ └── dist/ # 构建输出
└── docs/ # 项目文档
🎯 设计理念
- 用户友好 - 直观的操作界面
- 开发者友好 - 清晰的代码结构
- 可扩展性 - 模块化架构设计
- 跨平台 - 基于Web技术实现
下载和安装
系统要求
- Node.js 18.0+
- 现代浏览器（Chrome 90+, Firefox 88+, Safari 14+）
快速开始
# 克隆项目
git clone [repository-url]
cd mcp-client-vue
# 安装依赖
cd web && npm install
# 启动开发服务器
npm run dev
# 访问应用
open http://localhost:5173
生产构建
# 构建项目
npm run build
# 预览构建
npm run preview
支持和反馈
MCP Client Vue - 让MCP集成变得简单高效 🚀
v1.0.1
重构时间: 2025-10-14
🎉 重大改进
基于v1.0.0的深度优化版本，全面提升了用户体验和系统稳定性。
🚀 核心功能
- 完善的服务器管理系统
- 支持HTTP和SSE双传输协议
- 可视化连接状态管理
- 自动重连机制（页面刷新恢复连接）
- 智能URL地址转换（0.0.0.0 → localhost）
🛠️ 主要修复
- ✅ 编辑按钮响应 - 修复点击无响应问题
- ✅ 连接协议 - 修复HTTP 406和SSE 404错误
- ✅ 界面显示 - 修复模态框空白页问题
- ✅ 表单数据 - 修复字段不填充问题
- ✅ 状态持久化 - 修复页面刷新断连问题
🎨 用户体验
- 优化模态框尺寸（90vw宽度，最大1200px）
- 改进表单验证和错误提示
- 实时连接状态指示
- 详细的操作日志和调试信息
🏗️ 技术栈升级
- Vue 3.4.15
- TypeScript 5.3.3
- Naive UI 2.43.1
- vue-tsc 2.0.6（从1.8.25升级）
📦 发布内容
# 安装和启动
cd web && npm install
npm run dev
🔧 配置要求
HTTP服务器
{
"name": "HTTP服务器",
"url": "http://localhost:3100",
"type": "http"
}
SSE服务器
{
"name": "SSE服务器",
"url": "http://localhost:3200/sse",
"type": "sse"
}
⚠️ 已知问题
- TypeScript类型错误47个（不影响功能）
- 使用
npm run build:skip-check跳过类型检查
v1.0.2
发布时间: 2025-10-14
🎯 重大功能：MCP 工具调用集成
本版本实现了完整的 MCP 工具调用功能，AI 可以智能调用 MCP 服务器提供的工具并整合结果。
✨ 核心功能
🔧 智能工具调用
- AI 自动识别何时需要调用工具
- 支持 OpenAI Function Calling 协议
- 兼容多个 AI 服务商（OpenAI、火山引擎、阿里云等）
- 完整的多轮对话支持（AI → Tool → AI）
🔄 流式工具执行
- 实时显示工具调用进度
- 流式体验不中断
- 友好的状态提示：
- 🔧 正在调用工具: [工具名]...
- ✅ 工具执行完成
- ❌ 工具执行失败: [错误信息]
- 🤖 正在生成回复...
📋 工具格式转换
- MCP 工具 → OpenAI Function 格式
- 自动提取 inputSchema 作为 parameters
- 支持完整的 JSON Schema 定义
🛠️ 技术实现
服务层改进
MCPClientService.getTools()- 获取工具列表chatService.convertToolsToOpenAIFormat()- 格式转换chatService.executeToolCalls()- 工具执行逻辑modelServiceManager.sendChatRequestStream()- 增强工具参数支持
流式解析增强
- SSE 流中检测
tool_calls - 累积多个流片段中的工具调用数据
- 正确拼接
function.argumentsJSON 字符串 - 返回完整的工具调用数组
消息格式支持
// 工具调用消息
{
role: 'assistant',
content: '',
tool_calls: [{
id: '...',
type: 'function',
function: { name: '...', arguments: '{}' }
}]
}
// 工具结果消息
{
tool_call_id: '...',
role: 'tool',
name: 'tool_name',
content: '{...}'
}
📦 使用方式
- 配置 AI 服务 - 在"模型服务"中添加支持函数调用的 AI
- 连接 MCP 服务器 - 在"MCP 设置"中添加工具服务器
- 选择模型和 MCP - 在对话界面选择
- 开始对话 - AI 会自动调用相关工具
💡 使用示例
用户: "查询今天北京的天气"
系统: 🔧 正在调用工具: get_weather...
✅ 工具执行完成
🤖 正在生成回复...
AI: "根据天气数据，今天北京晴天，温度 15-25°C，
空气质量良好，适合户外活动。"
🐛 Bug 修复
- ✅ 修复 MCPClientService 类型导入问题
- ✅ 修复 types.ts 和 types/index.ts 路径冲突
- ✅ 修复 modelServiceManager 返回类型
- ✅ 修复未使用变量警告
🔧 技术细节
修改的文件
/web/src/services/chatService.ts- 工具调用主逻辑/web/src/services/modelServiceManager.ts- 工具参数支持/web/src/services/MCPClientService.ts- 工具列表获取
新增方法
MCPClientService.getTools(serverId)- 获取服务器工具chatService.convertToolsToOpenAIFormat()- 格式转换chatService.executeToolCalls()- 执行工具调用
改进方法
modelServiceManager.sendChatRequestStream()- 支持 tools 参数modelServiceManager.makeChatRequestStream()- 检测和收集 tool_calls
🎯 设计亮点
- 无缝集成 - 不改变现有对话流程
- 错误恢复 - 工具调用失败不影响对话继续
- 类型安全 - 完整的 TypeScript 类型定义
- 性能优化 - 流式处理保持响应速度
- 用户友好 - 清晰的进度提示
⚙️ 配置要求
AI 服务要求
- 支持 OpenAI Function Calling 格式
- 推荐：OpenAI GPT-3.5+, GPT-4+
- 兼容：火山引擎、阿里云等 OpenAI 兼容服务
MCP 服务器要求
- 实现
tools/list接口 - 实现
tools/call接口 - 提供标准的 inputSchema (JSON Schema)
📚 相关文档
🚀 升级指南
# 拉取最新代码
git pull origin main
# 安装依赖（如有更新）
cd web && npm install
# 启动开发服务器
npm run dev
🔜 下一步计划
- 工具调用历史记录
- 工具执行超时控制
- 批量工具调用优化
- 工具调用权限管理
- 工具调用性能监控
v1.0.2 - AI + MCP 工具调用，让对话更智能！ 🚀🔧