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

入门指南

先决条件

• Node.js 20+
• Thesys API密钥（在 安慰thesys.dev)

安装

1. 克隆仓库

1. 安装依赖项：

\\\bash npm 安装 \\\

1. 复制环境变量：

\\\bash cp.env.emple.env.local \\\

1. 将您的Thesys API密钥添加到 .env.local:

\\\ THESYS_API_KEY=您的_API_KEY_here \\\

1. 运行开发服务器：

\\\bash npm 运行开发 \\\

1. 打开 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

1. 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#此文件 \\\

环境变量

备注：只有在运行单独的后端服务时才需要代理终结点。对于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）

资源

• C1文件
• CopilotKit AG-UI文档
• 技术协议指南
• 多代理架构
• 后端设置指南

许可证

麻省理工学院

支持

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