AI导哈

PR描述生成工具

PR Agent是一个基于Vite + React + TypeScript的轻量级MCP客户端，通过Hugging Face API与大型语言模型交互，自动生成Pull Request描述。适用于开发团队快速生成PR文档。

  • by vi-cat
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 vi-cat/pr-agent

使用说明

公关代理（MCP 客户端演示）

概述

PR Agent 是一个基于 Vite + React + TypeScript 的应用程序，展示了轻量级的特性 模型上下文协议（MCP） 与（某系统/服务）交互的客户端 大型语言模型（LLM） 通过Hugging Face API生成拉取请求描述。它是作为 3小时带回家挑战 以展示架构设计、大型语言模型（LLM）集成以及清晰的工程实践。

技术栈： React + Vite + TypeScript + Bulma + Vitest（可翻译为）：React（框架）+ Vite（构建工具）+ TypeScript（类型脚本语言）+ Bulma（CSS框架）+ Vitest（测试框架）

快速入门/设置

要求： Node.js 18+ 和 npm。

  1. 克隆仓库并安装依赖项：

    npm install

  2. 创建一个 .env 在项目根目录中使用您的Hugging Face API令牌创建文件：

    VITE_HF_TOKEN=your_huggingface_api_token_here

  3. 启动开发服务器：

    npm run dev

  4. 打开您的浏览器，访问 http://localhost:5173 使用这个应用程序。

架构概述

该应用程序在前端完全模拟了一个简单的MCP客户端管道：

  • **React 用户界面（UI）**收集用户输入（工单、差异文件和备注）并显示由大型语言模型（LLM）生成的拉取请求（PR）描述。
  • 代理服务对用户输入进行消毒（即清理）和验证，构建系统提示，并管理加载状态和错误状态。
  • MCP 客户端向Hugging Face的Zephyr模型发送结构化提示并处理其响应。

数据流：
User Input → Agent Service (Prompt Construction) → MCP Client → LLM → Response Rendered

它是如何运作的

  1. 用户将工单描述、git diff 和/或备注粘贴到文本框中。
  2. 这个（或“该”） 代理服务 对输入进行消毒处理并构建结构化提示。
  3. 该 MCP 客户端 使用Zephyr-7B调用Hugging Face API生成Markdown PR描述。
  4. 格式化后的响应显示在界面上。

测试

该项目采用 Vitest 并且 React 测试库 验证：

  • 组件渲染和用户交互。
  • 输入净化逻辑及边缘情况处理（例如，空输入或格式错误的输入）。
  • API调用结构（模拟网络层）。

测试的故障场景：

  • 空输入或无效输入（已优雅处理）。
  • API超时或非200响应（显示用户反馈）。
  • 消毒错误或模型响应未定义（已提供回退消息）。

未来测试改进方向：

  • 添加带有模拟MCP响应的集成测试。
  • 扩大异步错误处理和用户反馈的覆盖范围。

安全考虑因素

  • API令牌处理： 代币存储在 .env 并且在代码库中从未暴露过。
  • XSS 保护： 用户输入在渲染或发送给大型语言模型（LLM）之前会经过净化处理。增加额外的净化层可以进一步降低所有组件中的跨站脚本（XSS）风险。
  • 网络安全： 通过Hugging Face API强制实施HTTPS。
  • 未来强化/加固：
    • 将大型语言模型（LLM）调用移至服务器端以完全隐藏令牌。
    • 如果公开暴露，应实施速率限制或滥用检测。

性能与可扩展性

  • 异步设计： API请求通过async/await处理，以保持用户界面的响应性。
  • 轻量级架构： 完全静态的前端；无后端依赖。
  • 扩展时的考虑因素：
    • 可以集成用于大型输出的流式响应。
    • 对于重复的提示，引入缓存或结果持久化机制。

注意事项与易犯错误

  • 这个应用程序是无状态的——它不会保存之前的对话历史或上下文信息。
  • 免费版的Hugging Face API会引入延迟和速率限制。
  • 浏览器端密钥存储（通过 .env) 在生产环境中不安全，应通过代理访问。

未来的改进方向

技术增强

  • 将直接的API调用替换为合适的MCP后端。
  • 用实时集成的票务系统（如Jira、ClickUp）和GitHub仓库替换手动文本字段，自动获取工单详情和用于生成PR的差异文件。
  • 增加对多个大型语言模型（LLM）提供商（OpenAI、Anthropic、本地模型）的支持。
  • 实时反馈流模型输出。
  • 实现内存缓存和重试逻辑。

开发者体验

  • 为代码质量添加 lint-staged 钩子。
  • 改进输入验证，并优化用户界面中的错误提示。

用户体验

  • 添加持久的PR（拉取请求/变更请求）历史记录。
  • 显示模型延迟指标和响应置信度。
  • 在用户粘贴时立即对输入内容进行消毒处理，以提升用户体验并减少提交时的不必要重复处理。

许可证/致谢

由……提供动力/驱动 Hugging Face API。
作为编码评估的一部分构建，展示了MCP客户端设计原则的实际应用。

相关 MCP