用过 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 助手、想接特定模型做垂直场景、或者想在对话系统上加点自定义功能，完全可以照这个架构来。代码结构清楚，每个模块都能单独替换和扩展。
技术不该是黑箱。自己搭一遍，那些产品背后的逻辑你就全明白了。