# 模型服务快速使用指南

## 🚀 快速开始

### 1. 启动应用

```bash
cd /Users/gavin/xhs/mcp-client-vue
npm run dev
```

访问: http://localhost:5173

### 2. 添加模型服务

#### OpenAI 配置
```
服务名称: OpenAI
服务类型: OpenAI
服务地址: https://api.openai.com/v1
API Key: sk-your-openai-api-key
```

#### Claude 配置
```
服务名称: Claude
服务类型: Claude
服务地址: https://api.anthropic.com/v1
API Key: sk-ant-your-claude-api-key
```

#### 本地 Ollama 配置
```
服务名称: 本地 Ollama
服务类型: 本地模型
服务地址: http://localhost:11434/v1
API Key: ollama
```

### 3. 测试连接

点击"连接"按钮，系统将：
- ✅ 验证 API 密钥
- ✅ 获取可用模型列表
- ✅ 显示连接状态

### 4. 查看结果

**成功示例**:
```
✅ 连接成功
服务响应正常，已获取到 5 个可用模型

可用模型:
- gpt-4
- gpt-4-turbo
- gpt-3.5-turbo
- gpt-3.5-turbo-16k
- gpt-4-vision-preview
```

**失败示例**:
```
❌ 连接失败
HTTP 401: Unauthorized

可能的原因:
- API密钥无效或已过期
- 服务地址不正确
- 网络连接问题或CORS限制
- 服务暂时不可用
```

## 🔧 故障排查

### 问题1: 连接超时

**解决方案**:
1. 检查网络连接
2. 验证 URL 格式是否正确
3. 确认服务器是否在线

### 问题2: API密钥错误

**解决方案**:
1. 重新生成 API 密钥
2. 检查密钥格式（包括前缀）
3. 确认密钥权限

### 问题3: CORS 错误

**解决方案**:
1. 使用本地代理服务器
2. 配置浏览器允许 CORS
3. 检查 API 服务商是否支持浏览器直接访问

## 📊 功能验证

### 验证步骤
1. ✅ 添加服务成功
2. ✅ 保存配置成功
3. ✅ 测试连接成功
4. ✅ 获取模型列表
5. ✅ 显示状态正常

### 预期结果
- 服务卡片显示绿色"已连接"标签
- 显示可用模型数量
- 显示模型标签列表
- 上次使用时间更新

## 🎯 下一步

完成模型服务配置后，你可以：
1. 在聊天页面使用模型
2. 执行 MCP 工具调用
3. 查看使用统计
4. 管理多个服务

---

**享受使用 MCP Client Vue！** 🎉