真实痛点

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

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

说得更直接一点，AI 袋里服务到底该怎么落地？常见做法当然是基于 langchain 或者 langgraph，一步步把能力搭起来，再接进网站里。

但问题也随之而来：如果手头有大量相似项目需要复用，难道真要一个一个重新组装？现在业内更看重的是智能体 Agent，而日常工作里最常被拿来直接用、而且不花钱的智能体，其实就是 opencode。

这里的思路，就是参考 opencode 的官方文档，利用它支持的 skill + mcp 组合方式，再配合 opencode 自带的 serve 功能 API，把这套能力真正跑起来。

至于多个项目想彼此独立使用，办法也不复杂。启动多个 opencode serve 实例，让每个项目分别维护自己的 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

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