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

真实痛点

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

text 复制代码

前端网页悬浮客服 ↓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来实现这个功能。想要多个项目各用各的，无非就是启动多个opencode serve的实例，各个项目各自建设自己的skill和mcp即可。

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

TraeWork操作过程

先让trae根据设计文档实现

md 复制代码

# 设计文档

编写这样的一个网页项目。
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 就能接。

复用到新项目的模式：

css 复制代码

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

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