Chat MCP Demo

聊天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 install

2.环境设置

复制环境模板并添加您的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_here

3.运行开发服务器

npm run dev

打开 http://localhost:3000 观看演示。

用法

1. 开始对话：应用程序会自动创建新的聊天会话
2. 选择提供商：在Cerebras、OpenAI或Anthropic之间进行选择
3. 询问旅行问题：尝试以下查询：

- “我需要在巴黎住两晚，预算200美元/晚” - “在东京为一个四口之家寻找活动” - “推荐圣托里尼的浪漫之旅”

1. 比较性能：使用指标面板查看响应时间和成功率
2. 交换机提供商：使用不同的提供程序测试相同的查询以进行比较

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服务器（而不是模拟数据）：

1. 获取Expedia API密钥：参观 Expedia合作伙伴中心
2. 遵循安装指南：参见 docs/EXPEDIA-MCP-SETUP.md
3. 测试连接：运行 node scripts/test-expedia-mcp.js
4. 更新环境：添加 EXPEDIA_API_KEY=your_key_here 到 .env.local

真正的整合提供了实际的酒店价格、可用性和预订信息！

性能指标

应用程序跟踪：

• 延迟：每个提供商的平均响应时间
• 成功率：成功请求的百分比
• 工具调用成功：MCP工具执行的成功率
• 令牌使用：每个请求消耗的平均令牌

部署

Vercel（推荐）

1. 连接存储库：将您的GitHub存储库链接到Vercel
2. 设置环境变量：在Vercel仪表板中添加API键
3. 部署：一键部署，自动构建

手动部署

npm run build
npm start

API终点

• 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)

添加新提供商

1. 在中添加提供程序配置 lib/llm-providers.ts
2. 更新提供程序选择器组件
3. 将API密钥添加到环境变量

添加新的MCP工具

1. 在中定义工具架构 lib/mcp-client.ts
2. 将工具添加到 mcpTools 出口
3. 更新聊天API路由以包含该工具

贡献

1. 分叉存储库
2. 创建要素分支
3. 进行更改
4. 如果适用，添加测试
5. 提交拉取请求

许可证

此项目根据MIT许可证获得许可-有关详细信息，请参阅许可证文件。

致谢

• Vercel AI SDK 对于聊天框架
• 模型上下文协议 用于工具集成
• Expedia MCP服务器 旅行工具灵感
• 大脑 快速推理能力