用过 ChatGPT 的朋友，多半都动过这个念头：这玩意儿，能不能自己做一个？

不是那种简单调个接口就完事的，而是真正像模像样——有侧边栏管理历史对话、能自由切换模型、看得见 AI 的“思考过程”、代码还能高亮。我就这么干了，前后端加起来不到两千行代码。这篇文章，就把从想法到落地的完整过程拆开来讲。

先说为什么非得自己造

市面上的 AI 对话产品，一抓一把。但之所以要自己搭，图的无非是三点。

第一是数据。所有对话都保存在自己的数据库里，不用担心哪天被拿去训练或者泄露。第二是模型自由。接入了阿里云百炼的六个模型——Qwen3.7、DeepSeek V4、GLM-5.2、kimi-k2.7-code 这些，哪个顺手就切哪个。第三是定制。想要什么功能自己说了算，这是给团队搭内部助手、做垂直场景最看重的一点。

说白了，就是把对话控制权握在自己手里。

想清楚再动手

动工之前，先列了一张清单，把“像 ChatGPT”拆成了几个具体功能：左边能新建、改名、删除历史对话；AI 回答要一个字一个字蹦出来；推理模型得把“思考”和“回答”分开显示；AI 写的代码要有语法高亮；顶部下拉框随时切换模型；晚上用着不刺眼。

单个看，哪个都不难。合到一起，就得好好安排架构了。

技术栈：不追新，选稳的

系统分前后端两层，中间用 SSE 做流式通信。后端用 FastAPI，Python 里写接口最快的框架，异步流式支持也到位。数据库用 SQLite，零配置，将来想换 PostgreSQL 同样无缝。前端用 Next.js 配 Tailwind，状态管理选了 Zustand，比 Redux 轻巧太多。AI 接入走阿里云百炼，它兼容 OpenAI 的格式，一套代码能调多个模型，切换就改个模型 ID。

选型思路其实就一句话：成熟稳定优先，没必要为炫技去碰冷门技术。

六个阶段，一层层往上搭

开发拆成了六步，每做完一步都能看到实际产出。

先把后端骨架搭起来。会话、消息两张表和增删改查接口写好，这时用 curl 就能创建会话、发消息了，虽然还没界面。接着接入 AI 模型——这是关键环节：后端拿到用户消息，拼上历史对话，调百炼接口，再用 SSE 把结果一个 token 一个 token 推给前端。推理模型要特别处理，它的“思考过程”和正式回答是分开返回的，得拆成两种事件。

然后搭前端，侧边栏、顶部模型选择、聊天区、输入框，四个区域。最花心思的是解析 SSE 流的那个 Hook，它得区分思考事件和回答事件，逐字拼出来渲染。再往后是 Markdown 渲染、会话管理、细节打磨——空状态有引导卡片，网络出错能重试，深浅主题切换，移动端侧边栏能折叠。

这一步做完，一个能用的产品就基本成型了。

几个印象深刻的坑

过程自然不是一帆风顺的。踩了几个坑。

React 18 严格模式下，状态更新回调会跑两次。在流结束的回调里存消息，结果每条 AI 回复存了两份，最后用 ref 同步追内容才绕过去。判断“是不是首次对话”的时机也搞错过——先存消息再计数，永远显示“非首次”，标题自然就生成不了。还有推理模型的历史消息，假如把上次的“思考过程”也塞回给模型，回答质量会明显下滑，后来只传正式回答，思考过程只留给前端展示。

这东西做出来能干嘛

成品的样子：左边一列历史会话，点一下就能切换；顶部下拉选模型，推理模型带个标记；发完消息 AI 逐字输出，推理模型先弹一段可折叠的“思考过程”；代码块自动高亮、一键复制；深浅主题和移动端都照顾到了。结构和 ChatGPT 官方版基本对齐，上手零门槛。

如果正想给团队搭个内部 AI 助手、想接特定模型做垂直场景、或者想在对话系统上加点自定义功能，完全可以照着这个架构来。代码结构清楚，每个模块都能单独替换和扩展。

技术不该是黑箱。自己搭一遍，那些产品背后的逻辑就全明白了。