用TraeWork制作应用 —— 从 0 到 1 · 手把手搭建 opencode 网页对话网关

用TraeWork制作应用 —— 从 0 到 1 · 手把手搭建 opencode 网页对话网关并不只看表面做法，关键还要理解相关条件、限制和后续影响。

真实痛点

如果领导想要给网站上放一个小机器人图标，点开就是个问答类型的助手，不接入第三方，纯自研，我们该怎么弄？ 豆包的回答是这样的：

前端网页悬浮客服 ↓HTTP└── Controller 接口层（接收用户提问，返回回答）↓Service业务层├─ Session会话管理：保存用户多轮对话历史├─ AI袋里服务：调用大模型API(豆包/通义等)└─ RAG检索服务【可选】：检索业务知识库FAQ↓存储层├─ MySQL：会话基础信息、用户、历史记录└─ Redis：缓存会话上下文（多轮对话，高性能）└─ 向量库【RAG用】Milvus/Chroma：知识库向量

AI袋里服务怎么建，使用langchain或者langgraph一步一步搭建出来，再接入网站中吗？ 如果有大量相似的项目想要复用难道要一个个组建吗？ 现在都讲究智能体Agent，而平时上班用的最多的不要钱的智能体就是opencode。这里阅读了opencode的官方文档，借助opencode支持skill+mcp 的形式，再加上opencode自己带有的serve功能的api来实现这个功能。 想要多个项目各用各的，无非就是启动多个opencodeserve的实例，各个项目各自建设自己的skill和mcp即可。

这里让它帮我设计并制作了一个纯对话类型的项目，嵌入到原始网页的弹出窗口无非就是个形式问题。

TraeWork操作过程

先让trae根据设计文档实现

# 设计文档编写这样的一个网页项目。opencode serve命令可以启动一个web形式的opencode界面，而它在opencode的文档中有大量api接口。你可以参考https://opencode.ai/docs/zh-cn/server/#api，/doc接口我已经下载下来了，就是doc.json。我们需要设计这样一个网站，用户通过对话的形式询问，网站转向对应的opencode来获取结果，用户不用关心opencode的具体配置。## 技术架构python的fastapi后端+普通html、js、css。数据库使用sqlite。## 用户管理### 管理员功能设置一个默认的管理员，与普通用户不同，他只能配置项目和管理用户。配置项目主要配置项目的英文名称、中文名称、opencode后台的ip或域名、端口、用户（可选配置）、密码（用户不填它也不能填，用户填了它也是可选的）额外配置一些导航条上的链接按钮，参考项目的链接按钮图标较少，需要扩展，所有链接和按钮在配置中配置。没有配置就不显示。管理用户是封禁用户登录和重置用户密码的功能。为保证数据不冲突，用户不可删除。### 普通用户需要先有用户注册和登录界面，普通用户注册时先选择在哪个项目中。## 对话界面对话界面计划采用类似豆包的功能，用户可以建立新对话、置顶对话、删除对话。左侧面是所属用户的历史对话记录，每一条对应opencode的一个session。主界面 默认展示用户最后一次使用的session的对话记录，如果是新用户则默认启动一个新session。主界面上的快捷锚点：豆包使用的时候不方便的地方就是每次用户的输入不能快速跳转，这次我们需要对用户的每次输入都记录下来，在界面顶部可以有个浮动的小型右侧边栏，展开后点击可以快速跳转到某个位置上。这个界面最关键，请一定要好好设计实现，特别是主界面展示opencode的答复的时候的效果。包括用户在撤回消息时的操作等。要能模拟opencode的多类操作，并映射到后台实际的session中。## 操作记录用户的对话记录、撤回操作、撤回后的恢复操作等，都要记录日志。## 环境wsl环境使用，请自行调试和设置初始环境。我们本质上是想做一个调用skill和mcp的资料查询类agent，或许可以默认设置opencode.json的只读启动？这样多个session间也不会冲突。如果有更好的session冲突解决方案也是可以的。初始项目名为test/测试，opencode在wsl的启动你可以自行处理。

启动trae任务的对话

再根据效果进行微调

trae会自己打开页面调试功能，但有时候效果还不太满意。要微调下效果，当然代码也还是有点bug，持续鞭策

此处省略多轮对话。

最后让它给文档补充点图片

落地成果

一个基于opencode serve实例作为载体的对话型项目，GitHub地址：github.com/Amor122/ope…

实现文档较大，完整文档发布于：juejin.cn/post/767122…

主要对话功能的界面

此时trae work正在监控定位元素

登录界面

注册界面

多项目管理配置

复用经验

本项目本质是验证了一件事：opencode 自带 serve 能力，完全可以当企业内的 AI 后端中台来用。它把"让 AI 干活"统一成 REST + SSE，前端随便换（网页、小程序、桌面端），只要会写 HTTP 就能接。

复用到新项目的模式：

新项目 A ─┐新项目 B ─┼─► 各自的 FastAPI 网关 ──► 各自的 opencode serve 实例新项目 C ─┘││├─ 各自工作区SQLite/MySQL├─ 各自 skill └─ 各自 mcp

1. 多项目隔离 = 多实例：每个项目启动一个 opencode serve，工作目录、skill、mcp 各自独立，互不干扰
2. 共用一套壳：本项目（用户/权限/会话/SSE 转发）这套网关逻辑可以直接复制，只改数据库和 UI
3. 接入第三方 LLM：opencode 底层接哪个模型与业务无关，换 provider 不影响上层