map-client-vue/MODEL_SERVICE_QUICK_START.md

模型服务快速使用指南

🚀 快速开始

1. 启动应用

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！ 🎉