GitHub Copilot CLI AI助手

一个基于 GitHub Copilot SDK 的全栈 AI 助手应用程序，支持文件上传、图片处理和交互式对话。

截图展示

功能特性

• 🤖 AI 驱动: 使用 GitHub Copilot SDK 提供智能对话支持
• 📁 文件上传: 支持多种格式文件作为上下文
• 🖼️ 图片分析: 支持上传图片进行视觉识别与处理
• 💬 流式对话: 实时流式响应，提供流畅的交互体验
• 🔄 模型选择: 支持多种 AI 模型，首次消息后锁定
• 📱 现代界面: 响应式设计，支持 Markdown 渲染

项目结构

demo-cli-dataanalysis/
├── backend/                 # Node.js 后端
│   ├── src/
│   │   ├── index.ts        # 入口文件 (Express + WebSocket)
│   │   ├── copilot-service.ts  # Copilot SDK 封装
│   │   └── types.ts        # 类型定义
│   └── package.json
├── frontend/               # Next.js 前端
│   ├── app/               # App Router 页面
│   ├── components/        # React 组件
│   ├── hooks/             # 自定义 Hooks
│   ├── types/             # TypeScript 类型
│   └── package.json
└── development_plan.md    # 开发计划文档

技术实现细节

Copilot SDK 事件处理与前端通信机制

系统采用了精细的事件监听机制来确保流式响应的稳定性和完整性，解决了流式输出与完整响应之间的同步问题。

1. 后端监听 (Copilot Service):

   • assistant.message_delta: 监听流式增量内容。收到后立即通过 WebSocket 发送 type: "content" 事件给前端，并累积到内存 buffer 中。
   • assistant.message: 监听消息节点完成。此事件用于通过日志验证消息完整性，并更新 buffer（如果节点内容比累积内容更完整），但不作为会话结束信号，以防止在多步骤推理或工具调用中过早截断。
   • session.idle: 监听会话空闲。作为唯一的最终完成信号。触发时，通过 WebSocket 发送 type: "done" 事件，携带最终完整内容。
   • session.error: 监听错误。触发 type: "error" 事件。

2. 前端反馈 (WebSocket):

   • 实时渲染: 收到 type: "content" 时，实时追加到 UI 的最后一条消息中，提供打字机效果。
   • 最终确认: 收到 type: "done" 时，结束加载状态（Loading Indicator）。如果在此之前的流式过程由于网络原因未收到任何内容，则使用 done 事件中携带的完整内容更新 UI，作为兜底机制。

前置条件

1. Node.js: v18 或更高版本
2. GitHub Copilot CLI: 需要安装后登录(或使用PAT)

   npm install -g @github/copilot

快速开始

1. 安装依赖

# 后端
cd backend
npm install

# 前端
cd ../frontend
npm install

2. 启动后端

cd backend
npm run dev

后端将在 http://localhost:3001 启动。

3. 启动前端

cd frontend
npm run dev

前端将在 http://localhost:3000 启动。

4. 访问应用

打开浏览器访问 http://localhost:3000

API 端点

REST API

方法	端点	描述
GET	/health	健康检查
GET	/api/models	获取可用模型列表
POST	/api/chat	发送聊天消息
DELETE	/api/sessions/:id	关闭会话

WebSocket

连接地址: ws://localhost:3001/ws

客户端消息:

• { type: "chat", sessionId?, modelId?, message, attachments? }
• { type: "close_session", sessionId }

服务端消息:

• { type: "session", sessionId, modelId } - 会话创建
• { type: "content", content } - 流式内容
• { type: "done" } - 消息完成
• { type: "error", error } - 错误

使用说明

1. 新建对话: 点击侧边栏的"新建对话"按钮
2. 选择模型: 在顶部下拉菜单选择 AI 模型（发送第一条消息后将锁定）
3. 上传文件: 点击附件按钮上传数据文件或图片
4. 发送消息: 输入问题并按 Enter 或点击发送按钮
5. 查看分析: AI 将以流式方式返回分析结果

支持的文件类型

• 图片: PNG, JPEG, GIF, WebP
• 数据: CSV, JSON, TXT
• 文档: PDF, Excel (XLSX, XLS)

技术栈

后端

• Node.js + TypeScript
• Express.js
• WebSocket (ws)

前端

• Next.js 14 (App Router)
• React 18
• Tailwind CSS
• TypeScript