MCP聊天代理模板
一个完整的模板，用于构建具有模型上下文协议（MCP）集成和Groq用于智能聊天体验的超快速推理的AI助手。
现场演示
概述
此应用程序演示了如何构建智能AI代理，这些代理利用MCP服务器增强功能，同时保持亚秒级的响应时间。构建为一个完整的端到端模板，您可以分叉、定制和部署。
主要特点：
- 智能聊天界面：保持上下文的实时对话
- MCP集成：连接到多个远程MCP服务器以增强AI功能
- 可视化：显示代理处理流程的交互式图表
- 多模型支持：从针对不同用例优化的各种Groq型号中进行选择
- 工具集成：MCP工具调用的可视化调试和监控
- Groq提供的亚秒级响应时间、高效的并发请求处理和生产级性能
建筑
技术栈：
- 前端： 使用TypeScript的Svelte 5
- UI组件： 顺风CSS，Bits UI，Lucide图标
- 流程图： Svelte Flow用于交互式可视化
- 人工智能基础设施： Groq API与MCP服务器集成
- 部署： Cloudflare Workers（牧马人）
快速开始
先决条件
- Node.js 18+和npm/pnpm
- Groq API密钥(创建免费GroqCloud帐户并在此处生成API密钥)
设置
- 克隆仓库
git clone https://github.com/build-with-groq/groq-mcp-chat-template
cd groq-mcp-chat-template- 安装依赖项
npm install
# or
pnpm install- 启动开发服务器
npm run dev:vite
# or
pnpm dev:vite- 配置Groq API密钥
- 在浏览器中打开应用程序 - 在界面中点击“添加API密钥” - 输入Groq API密钥
- 设置MCP服务器（可选）
- 点击“MCP服务器”以配置外部工具集成 - 启用预配置的服务器，如 塔维利 （网络搜索）， 火爬 （网络抓取），或添加自定义服务器
定制
此模板旨在作为您开始使用的基础。定制的关键领域：
- 型号选择： 在AI模型下拉列表中更新Groq模型配置（支持GPT、LLaMA、Qwen等）
- MCP服务器： 在中配置自定义MCP服务器
src/shared/stores/mcpStore.ts - UI/造型： 在中自定义主题和组件
src/shared/components/ui/ - 系统提示： 通过可编辑的系统提示自定义AI行为
详细功能
聊天界面
- 使用Groq的快速推理与AI进行实时对话
- 完整的对话历史记录，并保留上下文
- MCP工具集成以增强功能
- 带有流程图和配置选项的技术视图
- 工具调用可视化和调试
MCP集成
- 与流行服务（Tavily、Firecrawl、Hugging Face等）的预配置集成
- 支持自定义MCP服务器配置
- 实时服务器状态监控
- 可配置的工具审批工作流程
后续步骤
对于开发者
- 创建您的免费GroqCloud帐户： 通过访问API官方文档、实验场地和更多资源 Groq控制台
- 构建和自定义： 分叉此仓库并开始定制以构建自己的应用程序
- 获得支持： 与基于Groq的其他开发人员联系，与我们的团队聊天，并在我们的 Groq开发者论坛
创始人和商业领袖
- 查看企业能力： 此模板展示了可以处理实时业务工作负载的生产就绪AI
- 讨论您的需求： 联系我们的团队 探索Groq如何加速您的人工智能计划
许可证
此项目根据MIT许可证获得许可-有关详细信息，请参阅许可证文件。
鸣谢
由...创建 朱利安·弗朗西斯科.