多Agent管理系统
黑暗的未来野兽派多智能体应用程序由 C1由Theys （生成UI）和 AG-UI由CopilotKit提供 （实时事件流）。
特性
- 9个AI代理 具有单独的聊天界面
- C1生成UI -根据代理响应自动生成UI组件
- AG-UI协议 -实时流媒体和多代理编排
- 黑暗野蛮主义设计 -深黑色背景上的翡翠色调
- 可折叠侧边栏 具有项目管理、日程安排和设置
- 移动响应 -完全支持iPhone和移动设备
- 集成就绪 -Notion、Google Drive、Shopify、Klaviyo的一键连接
- MCP服务器管理 -为每个代理控制和配置MCP工具
技术栈
- Next.js 16 （应用路由器，React 19）
- C1由Theys -生成型UI API
- 复印机套件 -AG-UI协议实施
- TypeScript -全型安全
- 顺风CSS v4 -使用设计符号进行造型
- shadcn/ui -UI组件库
- Lucide图标 -图标系统
入门指南
先决条件
- Node.js 20+
- Thesys API密钥（在 安慰thesys.dev)
安装
- 克隆仓库
- 安装依赖项：
\\\bash npm 安装 \\\
- 复制环境变量：
\\\bash cp.env.emple.env.local \\\
- 将您的Thesys API密钥添加到
.env.local:
\\\ THESYS_API_KEY=您的_API_KEY_here \\\
- 运行开发服务器：
\\\bash npm 运行开发 \\\
建筑
多框架后端支持
此应用程序支持 异构代理后端 -每个代理可以使用不同的框架：
- 代理人1-3：LangGraph（Python）-用于研究和数据分析
- 代理人4-6：CrewAI（Python）-用于基于团队的协作
- 代理人7-9：自定义框架（Go/Rust/Node.js）-用于特殊任务
看 BACKEND_SETUP_GUIDE.md 有关详细的设置说明。
当前实施情况
MVP模式：目前所有代理都直接使用C1网关（不需要单独的后端）。这非常适合：
- 快速原型制作
- 测试生成式UI功能
- 单代理用例
生产模式：部署单独的代理后端并启用动态路由。看 MULTI_AGENT_ARCHITECTURE.md 了解架构细节。
协议集成
此应用程序使用 双协议架构:
- C1（网关LLM模式）
- 所有用户请求的主要入口点 - 通过C1 DSL生成结构化UI组件 - 型号： c1/anthropic/claude-sonnet-4/v-20250815 - 端点： https://api.thesys.dev/v1/embed
- AG-UI（事件流）
- 实时令牌流式传输 - 多代理状态管理 - 人在环（HITL）支持 - 跨组件共享状态
看 AGENT_PROTOCOLS_GUIDE.md 有关协议集成、最佳实践和故障排除的全面文档。
项目结构
\\\ ├── app/ │ ├── api/copilot/route.ts#CopilotKit运行时与C1集成 │ ├── layout.tsx#带提供者的根布局 │ ├── page.tsx#带侧边栏的主应用程序 │ └── globals.css#设计标记和样式 ├── 组件/ │ ├── agent-chat.tsx#带C1Component的聊天界面 │ ├── sidebar.tsx#可折叠侧边栏 │ ├── project-manager.tsx#文件/文件夹管理 │ ├── integration-settings.tsx#API密钥和OAuth连接 │ ├── mcp-manager.tsx#mcp服务器控件 │ └── upload-manager.tsx#文件上传控件 ├── AGENT_PROTOCOLS_GUIDE.md#LLM/代理技术指南 ├── MULTI_AGENT_ARCHITECT.md#多代理编排架构 ├── BACKEND_SETUP_GUIDE.md#逐步设置后端代理 └── README.md#此文件 \\\
环境变量
| 变量 | 必填 | 描述 | 默认值 |
|---|---|---|---|
THESYS_API_KEY | 是 | 你的论文C1 API密钥 | - |
COPILOT_CLOUD_API_KEY | 否 | CopilotKit云密钥 | - |
AGENT_1_ENDPOINT | 否 | LangGraph代理1 URL | http://localhost:8000/agent1 |
AGENT_2_ENDPOINT | 否 | LangGraph代理2 URL | http://localhost:8000/agent2 |
AGENT_3_ENDPOINT | 否 | LangGraph代理3 URL | http://localhost:8000/agent3 |
AGENT_4_ENDPOINT | 否 | CrewAI代理4 URL | http://localhost:8001/agent4 |
AGENT_5_ENDPOINT | 否 | CrewAI代理5 URL | http://localhost:8001/agent5 |
AGENT_6_ENDPOINT | 否 | CrewAI代理6 URL | http://localhost:8001/agent6 |
AGENT_7_ENDPOINT | 否 | 自定义代理7 URL | http://localhost:8002/agent7 |
AGENT_8_ENDPOINT | 否 | 自定义代理8 URL | http://localhost:8002/agent8 |
AGENT_9_ENDPOINT | 否 | 自定义代理9 URL | http://localhost:8002/agent9 |
VERCEL_AI_GATEWAY_KEY | 否 | Vercel AI网关密钥 | - |
备注：只有在运行单独的后端服务时才需要代理终结点。对于MVP，只需设置 THESYS_API_KEY.
用法
切换代理
单击侧栏中的任何代理按钮（agent_01到agent_09）以在代理之间切换。每个代理都维护自己的对话历史。
使用生成式UI
只需与客服聊天。C1根据对话上下文自动生成交互式UI组件：
- 数据表 对于结构化数据
- 图表 用于可视化
- 表单 供用户输入
- 卡 用于摘要
- 按钮 行动
集成
- 点击 设置 在侧边栏中
- 导航到 集成 标签
- 点击 连接 适用于任何服务（Notion、Google Drive、Shopify、Klaviyo）
- 出现提示时输入凭据
- 通过齿轮图标管理连接
MCP服务器
- 点击 主控程序 代理标题中的按钮
- 添加MCP服务器配置
- 打开/关闭单个工具
- 每个代理可以有不同的MCP工具访问权限
发展
添加自定义C1组件
C1使用声明性UI库。要添加自定义组件，请参阅 C1自定义组件指南.
扩展AG-UI
要添加新的AG-UI事件处理程序或多代理编排：
\\\`tsx 从“@copilotkit/react-core”导入{useCopilotChat}
const{messages，appendMessage，isLoading，state，setState}=useCopilotChat（）
//跨代理共享状态 setState（“选定产品”，产品）
//从任何组件访问 const product=state.selected产品 \\\`
故障排除
C1未生成UI
- 检查
THESYS_API_KEY有效 - 验证端点：
https://api.thesys.dev/v1/embed - 检查浏览器控制台是否有错误
- 确保
@thesysai/genui-sdk已安装
AG-UI未流式传输
- 验证
/api/copilot路线是可访问的 - 检查CopilotKit提供商是否包装了应用程序
- 确保
runtimeUrl="/api/copilot"是正确的
移动侧边栏未打开
- 检查z索引冲突
- 确认汉堡包按钮可见（手机右上角）
- 在实际设备上进行测试（不仅仅是浏览器DevTools）
资源
许可证
麻省理工学院
支持
对于问题或疑问，请打开GitHub问题或联系开发团队。