# 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+）

### 快速开始
```bash
# 克隆项目
git clone [repository-url]
cd mcp-client-vue

# 安装依赖
cd web && npm install

# 启动开发服务器
npm run dev

# 访问应用
open http://localhost:5173
```

### 生产构建
```bash
# 构建项目
npm run build

# 预览构建
npm run preview
```

---

## 支持和反馈

- 📖 [完整文档](./README.md)
- 📋 [更新日志](./CHANGELOG.md) 
- 🐛 [问题报告](./CURRENT_STATUS.md)
- 📚 [开发指南](./DEVELOPMENT_GUIDE.md)

**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升级）

### 📦 发布内容

```bash
# 安装和启动
cd web && npm install
npm run dev
```

### 🔧 配置要求

#### HTTP服务器
```json
{
  "name": "HTTP服务器",
  "url": "http://localhost:3100",
  "type": "http"
}
```

#### SSE服务器  
```json
{
  "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.arguments` JSON 字符串
- 返回完整的工具调用数组

**消息格式支持**
```typescript
// 工具调用消息
{
  role: 'assistant',
  content: '',
  tool_calls: [{
    id: '...',
    type: 'function',
    function: { name: '...', arguments: '{}' }
  }]
}

// 工具结果消息
{
  tool_call_id: '...',
  role: 'tool',
  name: 'tool_name',
  content: '{...}'
}
```

#### 📦 使用方式

1. **配置 AI 服务** - 在"模型服务"中添加支持函数调用的 AI
2. **连接 MCP 服务器** - 在"MCP 设置"中添加工具服务器
3. **选择模型和 MCP** - 在对话界面选择
4. **开始对话** - 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

#### 🎯 设计亮点

1. **无缝集成** - 不改变现有对话流程
2. **错误恢复** - 工具调用失败不影响对话继续
3. **类型安全** - 完整的 TypeScript 类型定义
4. **性能优化** - 流式处理保持响应速度
5. **用户友好** - 清晰的进度提示

#### ⚙️ 配置要求

**AI 服务要求**
- 支持 OpenAI Function Calling 格式
- 推荐：OpenAI GPT-3.5+, GPT-4+
- 兼容：火山引擎、阿里云等 OpenAI 兼容服务

**MCP 服务器要求**
- 实现 `tools/list` 接口
- 实现 `tools/call` 接口
- 提供标准的 inputSchema (JSON Schema)

### 📚 相关文档

- [完整文档](./README.md)
- [更新日志](./CHANGELOG.md)
- [故障排除](./CURRENT_STATUS.md)

### 🚀 升级指南

```bash
# 拉取最新代码
git pull origin main

# 安装依赖（如有更新）
cd web && npm install

# 启动开发服务器
npm run dev
```

### 🔜 下一步计划

- 工具调用历史记录
- 工具执行超时控制
- 批量工具调用优化
- 工具调用权限管理
- 工具调用性能监控

**v1.0.2 - AI + MCP 工具调用，让对话更智能！** 🚀🔧