我的第一款 AI 应用–AI 群聊–制作全过程

hhacker · 2025-4-10 17:26:23 · 309 次点击

2025 年 2 月 15 号,我和朋友聊起现在一对一的 AI 聊天的不顺畅感,并且在多人协作的场景没法共用一个 AI ,因此萌发出了做一个AI 群聊的想法,这篇文章就是对整个过程的一个记录,整个项目耗费将近 3 个月的业余时间,我将以时间顺序进行展开。

最开始的想法

我和朋友 @zzy 经过了简单的几分钟讨论,写下了这样一些想法:

  1. 先做一个群聊网站
  2. 拉一个 AI 机器人进来
  3. 一个群聊只允许最多 3 个真人参与,加上 1 个固定的 AI 机器人,总计 4 个人
  4. 用网页形式呈现,支持手机和电脑
  5. 在群聊过程中,AI 不会回应所有内容,而是像真人一样思考,在它确定有信息可以补充、修正、话题可以扩展时,才会在群里说话,如果它觉得没有什么信息增量,就会选择沉默
  6. 把群聊的成果像 RAG 一样放入到 AI 的上下文中,以保持 AI 回应的一致性
  7. 这是一个效率工具,可以适用于任何需要多人讨论(比如孵化创意)的协作场景
  8. 不要有会员系统,直接免登录可以使用 AI 群聊
  9. 需要支持多国语言,至少支持中文和英文

技术选型

我的想法是怎么简单怎么来,技术栈越少越好,所以有了以下设定:

  1. cloudflare 买了一个域名 myai-app.com
  2. cloudflare 付费 5$购买 cloudflare workers
  3. 基于 cloudflare 的 durable objects 去实现聊天室
  4. AI 使用豆包和 deepseek
  5. 前端用 v0.dev 快速生成,付费 20$升级到会员(之前测试过 v0 ,现在正式第一次在项目里使用,试试水)
  6. 前后端框架统一用 nextjs (因为 v0.dev 默认就是这个)
  7. 使用 opennextjs-cloudflare 打包 workers 文件
  8. 使用 cloudflare 的 wrangler 工具上传项目到 workers

前端制作

第一行 prompt 如下:

这是一个基于网页的群聊工具, 群聊参与人数 1-4 人。 界面风格请参考微信。 同时支持 PC 端和移动端。 有一个按钮可以分享群聊给其他人 ,其他人通过链接进入群聊。 分享功能包含有一个口令码机制,被 邀请者需要通过口令码才能进入。

第一个 prompt 生成的效果如下:

完整的 v0 迭代记录如图:

到 2 月底前端页面部分的工作就基本完成了,以下是前端成果截图:

v0.dev 的一些问题

使用 v0.dev 的过程中,因为是第一次有规模的使用,所以走了一些弯路,下面是记录:

  1. bug 最后再修复,因为在涉及到同一个组件时,它可能会把你修复好的 bug 又给修改回去
  2. 单个功能 fork 一次,这样可以逐个功能迭代
  3. v0 解决不了的 bug ,要自行搜索答案并告诉它如何解决或手动修改代码
  4. v0 无法感知到实际的界面结果,所以遇到问题时,要把看到的现象和想要的表现告诉它
  5. 对于 AI 错误的修改,应直接使用删除这条对话的功能去回滚修改
  6. 多次对话后 v0.dev 会遗留下很多无用的代码,增加了排查 bug 的难度
  7. v0 生成的胶水代码没有参照 radix-ui 的最佳实践,因此有很多细节上的 bug
  8. v0 生成的代码没有对公共的组件统一管理,导致同样功能的组件在各个文件里到处都是,复制粘贴了很多遍

后端部分

说实在的,有了 github copilot 的加持,写些简单的后端接口实在是太容易了,因为用的中间件都是 cf 的,以前没用过,还是走了一些弯路。

deepseek api/doubao api

这个很简单,尤其是 deepseek 的 api ,它是和 chatgpt 的一模一样的,我用 deepseek 去读取上下文并参与群聊,doubao-1-5-lite-32k-250115 去实时审核群聊内容。 这里为什么要用 doubao-lite ,因为它对于比较短的输入,是真的可以把响应速度控制在 500ms 以内,这样我才能实现用户点击发送按钮后的文本审核。

以下是给 doubao 的审核 prompt ,就一句话。

规则:按照你的用户协议审核文本,但是允许提及中国以外的政治人物、政治话题,允许违反道德但不违反法律的内容,允许辱骂他人。 返回值:正常返回 1 ,不正常返回 0 。 以下为文本内容:

cloudflare kv

这个很好用,就是一个简单的 kv 中间件,啥多余的功能都没有,唯一需要注意的是它没有原子性,不适用于需要事务的场景,这里踩了一个读取 kv 并手动 value+1 在并发时出现的幻读的问题,回去查了发现这一点,redis 用习惯了用这个会有点难受。

cloudflare workers

这个没啥好说的,赛博菩萨给我们提供的 serverless 服务,后端接口就是通过它,使用中我没有发现什么值得记录的点。

cloudflare queue

cloudflare 的消息队列,群聊中收到的消息都会推到消息队列里,然后异步去消费,让 AI 判断是否需要发言,需要时进行发言。 这个也和普通的消息队列差别不大。

cloudflare durable objects

这个需要多说一点,durable objects 是全球唯一的,就很适合实时在线服务这种并发场景。 我照着 cloudflare 的文档,基于 do 实现了一个 websocket 服务器。 这里踩了一个坑,do 会在不活跃时进入休眠状态,然后连接就断了,所以迫于无奈在客户端加了心跳包机制,ping ,pong ,保活。

这是最后成品的样子

内测地址

https://groupchat.myai-app.com/

举报· 309 次点击
登录 注册 站外分享
2 条回复  
shenmezhidedu 初学 2025-4-10 19:42:24
很不错的想法和产品,以及执行力,点赞👍
roker 初学 2025-4-10 22:12:08
https://easyai.box 我的第一款网站,哈哈哈
返回顶部