聊天MCP演示-使用Cerebras快速推理
演示应用程序展示了像Cerebras这样的快速推理平台如何使用模型上下文协议（MCP）服务器加速代理应用程序。该演示比较了Cerebras、OpenAI和Anthropic提供商在使用MCP工具进行旅行推荐时的性能。
特性
- 🚀 快速推理比较：将Cerebras Llama 3.3 70B与OpenAI GPT-5和拟人克劳德十四行诗4.5进行比较
- 🔧 MCP服务器集成：通过MCP服务器提供多种旅行推荐工具
- 📋 MCP服务器概述：显示所有可用MCP集成的综合仪表板
- 🔑 统一的API密钥管理：所有提供商和MCP服务器的集中配置
- 💬 持续聊天：使用AI SDK 5实现消息持久化
- 📊 实时度量：性能遥测和比较仪表板
- 🎯 代理循环控制：多步骤工具调用和对话管理
- 🌐 Vercel部署：一键部署，环境变量管理
建筑
此演示使用：
- 前端：Next.js 15，带有AI SDK 5和React
- 后端：Vercel边缘功能与AI SDK
- MCP集成：用于工具调用的模型上下文协议
- 提供商：大脑（Llama 3.3 70B）、OpenAI（GPT-5）、人类视觉（Claude Sonnet 4.5）
- 遥测：自定义性能指标集合
快速开始
1.克隆和安装
git clone
cd ChatMCPDemo
npm install2.环境设置
复制环境模板并添加您的API密钥：
cp env.example .env.local编辑 .env.local 使用API密钥：
OPENAI_API_KEY=your_openai_api_key_here
ANTHROPIC_API_KEY=your_anthropic_api_key_here
CEREBRAS_API_KEY=your_cerebras_api_key_here3.运行开发服务器
npm run dev打开 http://localhost:3000 观看演示。
用法
- 开始对话：应用程序会自动创建新的聊天会话
- 选择提供商：在Cerebras、OpenAI或Anthropic之间进行选择
- 询问旅行问题：尝试以下查询：
- “我需要在巴黎住两晚，预算200美元/晚” - “在东京为一个四口之家寻找活动” - “推荐圣托里尼的浪漫之旅”
- 比较性能：使用指标面板查看响应时间和成功率
- 交换机提供商：使用不同的提供程序测试相同的查询以进行比较
MCP服务器
该演示与多个MCP服务器集成，提供全面的旅行协助：
✈️ 土耳其航空MCP
- 需要API密钥：是（需要Miles&Smiles帐户）
- 特性：航班搜索、实时状态、预订管理、Miles&Smiles积分
- 工具：13个强大的航班信息、预订详情和会员服务工具
- 文档: 土耳其航空MCP服务器
🌍 Expedia旅行推荐
- 需要API密钥：是的(在这里拿钥匙)
- 特性：酒店搜索、航班推荐、活动建议、汽车租赁
- 文档:
⛴️ 费里霍珀渡轮航线
- 需要API密钥：否（免费使用）
- 特性：实时渡轮时刻表、路线规划、预订重定向
- 覆盖：33个国家，190多家渡轮运营商
- 文档: Ferryhopper MCP文档
🏠 Airbnb房源
- 需要API密钥：否（免费使用）
- 特性：房产搜索、详细房源、谷歌地图集成
- 文档:
📋 MCP服务器仪表板
通过设置面板访问全面的MCP服务器概述，以：
- 查看所有可用的集成
- 检查服务器状态和配置
- 管理所需服务的API密钥
- 访问文档和设置指南
🔗 真正的Expedia整合
要使用真实的Expedia MCP服务器（而不是模拟数据）：
- 获取Expedia API密钥：参观 Expedia合作伙伴中心
- 遵循安装指南：参见 docs/EXPEDIA-MCP-SETUP.md
- 测试连接：运行
node scripts/test-expedia-mcp.js - 更新环境：添加
EXPEDIA_API_KEY=your_key_here到.env.local
真正的整合提供了实际的酒店价格、可用性和预订信息！
性能指标
应用程序跟踪：
- 延迟：每个提供商的平均响应时间
- 成功率：成功请求的百分比
- 工具调用成功：MCP工具执行的成功率
- 令牌使用：每个请求消耗的平均令牌
部署
Vercel（推荐）
- 连接存储库：将您的GitHub存储库链接到Vercel
- 设置环境变量：在Vercel仪表板中添加API键
- 部署：一键部署，自动构建
手动部署
npm run build
npm startAPI终点
POST /api/chat-使用MCP工具完成聊天GET /api/metrics-性能指标DELETE /api/metrics-清晰的指标数据
发展
项目结构
├── app/ # Next.js app directory
│ ├── api/ # API routes
│ ├── chat/[id]/ # Chat pages
│ └── globals.css # Global styles
├── components/ # React components
│ ├── chat-interface.tsx # Main chat UI
│ ├── message-list.tsx # Message display
│ ├── message-input.tsx # Input component
│ ├── provider-selector.tsx # Provider selection
│ └── metrics-panel.tsx # Performance metrics
├── lib/ # Utilities
│ ├── chat-store.ts # Message persistence
│ ├── mcp-client.ts # MCP integration
│ ├── llm-providers.ts # Provider configuration
│ ├── telemetry.ts # Metrics collection
│ └── utils.ts # Helper functions
└── .chats/ # Chat storage (local)添加新提供商
- 在中添加提供程序配置
lib/llm-providers.ts - 更新提供程序选择器组件
- 将API密钥添加到环境变量
添加新的MCP工具
- 在中定义工具架构
lib/mcp-client.ts - 将工具添加到
mcpTools出口 - 更新聊天API路由以包含该工具
贡献
- 分叉存储库
- 创建要素分支
- 进行更改
- 如果适用，添加测试
- 提交拉取请求
许可证
此项目根据MIT许可证获得许可-有关详细信息，请参阅许可证文件。
致谢
- Vercel AI SDK 对于聊天框架
- 模型上下文协议 用于工具集成
- Expedia MCP服务器 旅行工具灵感
- 大脑 快速推理能力