CopilotKit/react-vite-built-in-agent

# 智能事件响应 https://github.com/user-attachments/assets/e53d0245-f5f5-41a4-a46a-5a80a625ec22 一个基于 React、TypeScript 和 [CopilotKit](https://github.com/CopilotKit/CopilotKit) 构建的事件响应平台。通过 AI 助手跟踪、分类和解决安全及运营事件，该助手可以读取数据、更新状态、生成分析并渲染图表 —— 所有操作均可从聊天侧边栏完成。 ## 主要功能 - **事件跟踪** — 跨生命周期（Open → Investigating → Mitigated → Resolved）报告、过滤、搜索和管理事件，支持 P0–P4 严重级别。 - **仪表盘** — 实时活跃事件、MTTR 和近期解决情况的指标。跨事件活动时间线。 - **详情视图** — 三选项卡事件模态窗口（Overview、Timeline、Analysis），包含状态更新、评论和服务影响跟踪。 - **安全分析** — 按需风险评分、安全事件日志、受影响资产映射、相关事件关联以及分步 runbook。 - **图表** — 严重程度分布、状态细分、事件时间线和服务影响可视化 (Recharts)。 - **AI 助手** — CopilotKit 侧边栏，可通过自然语言解决事件、更改状态、添加评论、创建新事件、运行分析和生成图表。 ## 技术栈 **Frontend:** React 18, TypeScript, Vite, CopilotKit, Recharts **Backend:** Express, CopilotKit Runtime, OpenAI API ## 前置条件 - Node.js 20.19+ 或 22.12+ - pnpm - [OpenAI API key](https://platform.openai.com/api-keys) ## 设置 ``` pnpm install ``` 创建 `.env` 文件： ``` OPENAI_API_KEY=your_key_here ``` ## 运行 ``` pnpm dev:all ``` Frontend 运行在 `http://localhost:5173`，backend 运行在 `http://localhost:4000`。 若需分别运行： ``` pnpm dev:server # backend pnpm dev # frontend ``` ## CopilotKit 如何集成 应用将其 UI 封装在连接到自托管 Express runtime (`server.js`) 的 `CopilotKit` provider 中。具体如下： - **`useCopilotReadable`** 将事件列表、指标和选定事件暴露给 AI，使其拥有完整的上下文。 - **`useFrontendTool`** 注册了六项 AI 可调用的操作：解决事件、更新状态、添加评论、报告新事件、运行安全分析和生成图表。 - **`CopilotSidebar`** 提供聊天界面，并针对常见任务提供建议 prompt。 Backend 是一个轻量级 Express 服务器，通过 `CopilotRuntime` 将请求代理到 OpenAI。 ## 项目结构 ``` src/ ├── App.tsx # Layout, state, filtering, CopilotKit setup ├── components/ │ ├── CounterController.tsx # AI tool definitions │ ├── IncidentForm.tsx # Report incident form │ ├── IncidentsList.tsx # Filterable incident list │ ├── IncidentDetail.tsx # Detail modal (overview/timeline/analysis) │ ├── AnalysisPanel.tsx # Security analysis display │ ├── CrossIncidentTimeline.tsx # Cross-incident activity feed │ └── charts/IncidentCharts.tsx # Recharts visualizations ├── types/ # Incident and analysis types ├── data/ # Seed data and mock analysis generators ├── services/ # In-memory DB and mock API layer └── style.css server.js # Express + CopilotKit runtime ```

标签：AI安全助手, ChatOps, CopilotKit, Express, Incident Response, LLM Agent, MTTR, Mutation, OpenAI API, Petitpotam, React, Recharts, SecOps, Syscalls, TypeScript, Vite, 事件响应平台, 事件跟踪, 云安全架构, 仪表盘, 可视化, 大语言模型应用, 威胁管理, 安全工单, 安全插件, 安全运营, 扫描框架, 自动化攻击, 自动化运维, 风险评分