AI代码评审CodeReview第19节:开源AI Hub工具源码搭建介绍

新闻

作者：微信文章
持续内容输出，点击蓝字关注我吧

01

前言

来看一段AI大模型对它的介绍
之前的文章中，我分享了基于TypeScript实现的代码评审项目，经过一些铺垫，此时大家的TypeScript的熟悉程度应该有所提高，同时之前的文章中也分享过我们可以使用开源的AI Hub工具来访问AI大模型，最近几篇文章开始分享基于AI Hub这个开源工具来进行源码大家与二次开发，希望通过二开的实践，让大家每个人都能开发出属于自己的AI大模型客户端、AI大模型代码评审工具，同时具备初步的跨端软件的开发能力。

在分享之前我们来回顾下这个软件：

AIHub的Github的地址为：https://github.com/classfang/AIHub

AIHub 是一个基于 Electron 构建的跨平台桌面 AI 助手应用程序,可为与多个 AI 模型提供商进行交互提供统一的接口。它作为一套全面的人工智能工具包,提供聊天功能、知识库管理、人工智能绘图、翻译服务以及可扩展的插件架构。

目前这个项目主页截图如下：



通过介绍可以知道:

它是一款集合多家大模型能力的客户端。拥有丰富的个性化功能。现已支持：OpenAI，Ollama，谷歌 Gemini，讯飞星火，百度文心，阿里通义，天工，月之暗面，智谱，阶跃星辰，DeepSeek。



通过这个软件我们可以非常方便进行二开，同时加强自己的TS技术的应用。

最近几篇文章，我们会分享如何基于这个软件进行二次开发，同时最终的目标我们是要开发如下这个界面：



这个界面是目前我开发的一个用于MergeRequest的AI代码评审的工具界面，通过这个界面，可以指定Gitlab的项目ID与MR ID信息，然后选择大模型，然后对文件范围进行过滤后进行代码评审。

同时在设置界面中，我们可以自定义Gitlab仓库的地址、访问令牌、大模型的API地址、大模型的访问Key、以及飞书消息通知的机器人地址，以及提示词等等，如下所示:



现在开始分享。
07高峰论坛会02

正文

下面先分享分享这个语言的东西，可以仔细看看。
接下来我们开始实现本篇文章我的分享。

1、首先我们还是要提前准备好NodeJS的环境，然后使用NVM工具切换到21的版本，然后从下载页面下载源码：https://github.com/classfang/AIHub/releases/tag/v1.8.9，截图如下所示：



2、接下来有了这个源码后，我们解压到磁盘上，然后导入到VS Code中，如下所示：



接下来我们在命令行中执行npm install命令安装依赖，安装成功后的日志如下所示:
➜  AIHub-1.8.9-CodeReview npm install> aihub@1.8.9 postinstall> electron-builder install-app-deps  • electron-builder  version=24.13.3  • loaded configuration  file=/develop/gitlab/AIHub-1.8.9-CodeReview/electron-builder.ymladded 900 packages in 2m153 packages are looking for funding  run `npm fund` for details
这个软件的主要的技术栈如下：

接下来我们启动下当前项目，在当前命令行中输入：
npm run dev
运行之后，可以看到界面如下所示：



这样我们的源码环境就搭建成功了。

接下来我们介绍下当前项目的技术栈。

4、对于这种前端项目的熟悉，我们可以首先快速看下package.json文件，从而知道这样项目都用了什么，首先我们看下dependencies，这个是项目在未来打包后的必要的依赖，这里面用到了langchain、office文件解析、pdf文件解析、redis等等，对于我们的代码评审来说暂时用不上。



这里我们关注下devDependencies节点，在这里面我们可以看到如下核心的组件：
"vite": "^5.2.12","vue": "^3.4.26","typescript": "^5.4.5","electron": "^30.0.9","axios": "^1.7.2","@arco-design/web-vue": "^2.55.2",
这里我们需要关注@arco-design/web-vue，这个是一个UI库，是字节的前端UI库，这个是需要我们去熟悉的，官网如下所示：https://arco.design/



对于我们使用的vue的文档为：https://arco.design/vue/docs/start

后续我们设计界面时，会参考这个文档来进行设计。感兴趣的可以详细阅读了解下。

5、接下来我们分析下这个AI Hub的主界面的设计：



在这个软件的主界面中，主界面可以分成两部分， 左侧是导航区域，右侧是内容区域，左侧单机切换了不同的右侧区域的显示和隐藏。

接下来我们找到这个界面在哪里？

找到截图中的App.vue文件，这个文件就是这个主界面的入口，如下所示：



在这个入口中配置了sidebarConfig这个属性，来维护左侧导航栏的数据，因此我们可以在里面再增加一个用于AI代码评审的导航设计，如下所示：



有了这个后，我们找到下方的内容区域:



在截图中的地方添加如下代码：
<div        v-if="alivePages.includes('codereview')"        v-show="systemStore.isThisPage('codereview')"        class="app-body"      >        <h1>我是AI代码评审的自定义内容HelloWorld</h1>      </div>
我们这样改完后，再看下运行的效果：



可以看到我们在左侧增加了一个代码评审的导航图标，同时在右侧区域显示了我们的自定义的内容。
自动化未来01秋季疾病预防秋季是呼吸道疾病的高发季节，如感冒、咳嗽、支气管炎等。这是因为气温的变化使得人体的呼吸道黏膜抵抗力下降，病毒和细菌更容易侵入。02胃肠道疾病秋季是胃肠道疾病的多发期。经过炎热的夏季，人们的脾胃功能相对较弱，再加上气温适宜，细菌繁殖加快，食物容易变质。03心脑血管疾病秋季早晚温差较大，血管收缩和舒张的变化较为明显，容易导致血压波动，从而增加心脑血管疾病的发病风险。07高峰论坛会03

总结

本文分享了基于AI Hub这个开源客户端的源码构建与基础的HelloWorld流程演示。 有了这个体验之后，后续我们就可以自己进行二开了，相信在未来的几篇文章后，小伙伴都可以开发出属于自己的AI客户端软件。

最近也看到有人问如何学习AI，这里分享几个资料如下：

1、通往AGI之路的知识库飞书云文档:

https://waytoagi.feishu.cn/wiki/QPe5w5g7UisbEkkow8XcDmOpn8e

2、掘金的AI知识库的飞书云文档

https://agijuejin.feishu.cn/wiki/UvJPwhfkiitMzhkhEfycUnS9nAm?table=blk3RfZtR7Nh73tO

3、极客时间的AI知识库的飞书云文档

https://geek-agi.feishu.cn/wiki/B9rYwwg6xidZYJkbrlscxTQFnOc

4、LangGPT社区的飞书云文档（结构化提示词等等）：
https://langgptai.feishu.cn/wiki/RXdbwRyASiShtDky381ciwFEnpe
5、一站式AI产品经理飞书知识库:

https://v11enp9ok1h.feishu.cn/wiki/KiIvwdFOciiqqNkwKzTcmn88ndL

喜欢本文的，可以关注、收藏、点赞、转发、分享到朋友圈哦。

本专题系列文章：

AI代码评审CodeReview教程第1节：基本介绍

AI代码评审CodeReview教程第2节：私有化部署开源AI大模型

AI代码评审CodeReview教程第3节：智普AI申请与代码评审体验

AI代码评审CodeReview教程第4节：AI大模型API接口的基本格式

AI代码评审CodeReview教程第5节：企业级Gitlab环境安装与CI环境配置

AI代码评审CodeReview教程第6节：基于Gitlab API与CI的AI代码评审实现

AI代码评审CodeReview教程第7节：基于MergeRequest变更代码AI评审实现

AI代码评审CodeReview教程第8节：项目的思考与Gitlab CI的内容分离

AI代码评审CodeReview教程第9节：Gitlab提交API的评审实现与飞书消息通知

AI代码评审CodeReview教程第10节：集成DeepSeekR1实现AI评审代码

AI代码评审CodeReview教程第11节：手写TypeScript的AI大模型接口对接

AI代码评审CodeReview教程第12节：TypeScript的Gitlab仓库代码评审设计实现

AI代码评审CodeReview教程第13节：部署OneAPI统一调用大模型

AI代码评审CodeReview教程第14节：评审消息飞书卡片对接设计实现

AI代码评审CodeReview教程第15节：Gitlab行级评论审查的对接设计

AI代码评审CodeReview第16节：评审提示词模板的设计实现与优化

AI代码评审CodeReview第17节：提升评审结果质量的16个想法

AI代码评审CodeReview第18节：代码评审的上下文的设计实现

- END -

喜欢的可以加入我的免费知识星球：觉醒的新世界程序员，或者我的付费知识星球：AI技术&MCP落地实践，随时与我沟通，交流技术与想法。



喜欢的也可以关注我的公众号：无处不在的技术，与我一起学习成长、共同进步，在技术的道路上越走越远。

喜欢就点个 在看 呗 👇