AI导哈

多代理管理系统

一个由C1和AG-UI技术支持的多代理管理系统，支持实时事件流和生成式UI组件，适用于团队协作和任务自动化。

  • by alchimie-di-circe
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 alchimie-di-circe/v0.2_MULTI-AGENT_frontend

使用说明

多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图标 -图标系统

入门指南

先决条件

安装

  1. 克隆仓库

  2. 安装依赖项： ```bash npm 安装 ```

  3. 复制环境变量： ```bash cp.env.emple.env.local ```

  4. 将您的Thesys API密钥添加到 .env.local: ``` THESYS_API_KEY=您的_API_KEY_here ```

  5. 运行开发服务器： ```bash npm 运行开发 ```

  6. 打开 http://localhost:3000

建筑

多框架后端支持

此应用程序支持 异构代理后端 -每个代理可以使用不同的框架：

  • 代理人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 了解架构细节。

协议集成

此应用程序使用 双协议架构:

  1. C1（网关LLM模式）

    • 所有用户请求的主要入口点
    • 通过C1 DSL生成结构化UI组件
    • 型号： c1/anthropic/claude-sonnet-4/v-20250815
    • 端点： https://api.thesys.dev/v1/embed

  2. 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组件：

  • 数据表 对于结构化数据
  • 图表 用于可视化
  • 表单 供用户输入
  • 卡 用于摘要
  • 按钮 行动

集成

  1. 点击 设置 在侧边栏中
  2. 导航到 集成 标签
  3. 点击 连接 适用于任何服务（Notion、Google Drive、Shopify、Klaviyo）
  4. 出现提示时输入凭据
  5. 通过齿轮图标管理连接

MCP服务器

  1. 点击 主控程序 代理标题中的按钮
  2. 添加MCP服务器配置
  3. 打开/关闭单个工具
  4. 每个代理可以有不同的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

  1. 检查 THESYS_API_KEY 有效
  2. 验证端点： https://api.thesys.dev/v1/embed
  3. 检查浏览器控制台是否有错误
  4. 确保 @thesysai/genui-sdk 已安装

AG-UI未流式传输

  1. 验证 /api/copilot 路线是可访问的
  2. 检查CopilotKit提供商是否包装了应用程序
  3. 确保 runtimeUrl="/api/copilot" 是正确的

移动侧边栏未打开

  1. 检查z索引冲突
  2. 确认汉堡包按钮可见（手机右上角）
  3. 在实际设备上进行测试（不仅仅是浏览器DevTools）

资源

许可证

麻省理工学院

支持

对于问题或疑问，请打开GitHub问题或联系开发团队。

相关 MCP