OpenCodeUI 让你随时随地 AI Coding

作者:三金得鑫日期:2026/3/21

Hi,大家好,我是三金~

自从用了 OpenCode + OMO 之后,写起代码来如沐春风,特别得劲!(除了比较烧 token)

但是 TUI 用久了之后吧,又有了一点别的想法:

  • 能不能远程链接?让我随时随地都能 AI Coding。
  • Web 界面要“看着顺眼、点起来顺手”

所以当我在 L 站看到有佬友开源 OpenCodeUI 的时候,第一反应就是:许愿许成功了?

OpenCodeUI 是 OpenCode 的第三方 Web 前端界面。它和 OpenCode 的客户端有点像,整体风格偏简约风,看着很舒服,它的后端引擎就是 OpenCode。

给大家先瞅瞅它的界面:

  • 左边是工作区、会话区和上下文展示区。
  • 中间是主区域,也支持展示 OMO。还可以创建 terminal,非常 nice~
  • 右边可以展示当前目录下的文件、修改的文件、Skills、MCP 以及 Worktrees。

OpenCodeUI 支持 docker 部署,接下来我们一起来安装一下。

Github 地址:github.com/lehhair/Ope…

目前项目还在快速迭代中,大家可以多 star 支持哦~

安装

你想用 OpenCodeUI,只需要准备两样东西就够了:

  1. OpenCode 后端:能跑 opencode serve(默认端口 4096)。
  2. OpenCodeUI 前端:托管版 / Docker / 本地开发任选其一。

下面三条路线大家根据自身情况可以直接对号入座:

方式 A:最快体验(不用部署 OpenCodeUI)

你只需要本地启动 OpenCode 后端,并放行 GitHub Pages 的 CORS:

1opencode serve --cors "https://lehhair.github.io"
2

然后打开:https://lehhair.github.io/OpenCodeUI/ 即可

这条路的好处就是:你先确认“UI 手感是不是你想要的”。

方式 B:Docker(纯前端)——你已经有 OpenCode 后端

这条路适合两类人:

  • 你后端已经在本机跑着(或者在别的服务器跑着)
  • 你不想折腾全家桶,就想要一个 UI

先做连通性检查:在本机跑一下这个,确保后端活着:

1curl -sS http://127.0.0.1:4096/global/health
2
3# 正常情况下会输出
4{"healthy":true,"version":"1.2.24"}%
5

能返回东西就说明后端可用。如果这里都不通,记得先把后端跑起来再说。

然后起前端容器

1git clone https://github.com/lehhair/OpenCodeUI.git
2cd OpenCodeUI
3
4docker compose -f docker-compose.standalone.yml up -d
5

默认访问:http://localhost:3000

如果你后端在远程(比如 10.0.0.8:4096),那就这样起:

1BACKEND_URL=10.0.0.8:4096 PORT=3000 \
2docker compose -f docker-compose.standalone.yml up -d
3

Tips:BACKEND_URL 这里不要带 http://,就写 host:port

另外如果你是 Linux,host.docker.internal 有时候会“看心情”。所以建议这里直接改 BACKEND_URL 成你宿主机的内网 IP 就完事了。

方式 C:Docker(全家桶)——网关 + 前端 + 后端一起跑(更适合长期用)

你要是准备长期用、或者准备上服务器,我更推荐这条。

1git clone https://github.com/lehhair/OpenCodeUI.git
2cd OpenCodeUI
3
4cp .env.example .env
5

一定要记得配置 .env:很多人 cp 完了不改,直接就跑 docker,结果就是:界面能打开,但模型没法用。你至少要填一个你要用的 provider key(比如 OpenAI/Anthropic/Gemini 之类)。

比如你可以先把你用得到的那一项填上(示例,不用全填):

1ANTHROPIC_API_KEY=
2OPENAI_API_KEY=
3GEMINI_API_KEY=
4DEEPSEEK_API_KEY=
5

然后再 docker compose up -d,默认访问:http://localhost:6658。这套的好处是:

  • 有网关统一入口(反代 API / SSE / router)
  • 有 router 做动态端口预览
  • 也更利于咱们做公网部署 + 认证

这里给个端口参照表,哪里有问题一看就知道:

  • 6658:主入口
  • 6659:预览端口(给开发服务用)
  • 4096:OpenCode 后端(API)

❗️公网部署提示:如果你要暴露到公网,别忘了把 OPENCODE_SERVER_USERNAME / OPENCODE_SERVER_PASSWORD 配上做 Basic Auth,千万别裸奔。 全家桶的 compose 默认把端口绑在 127.0.0.1 上,这是作者在帮你"默认自保",对外开放时记得同时把认证、反代、以及暴露策略一起想清楚。

使用

部署好之后,你就可以远程控制使用你的 opencode 了,这也是最有价值的地方!

首先,登录!

然后,我们可以通过点击左侧菜单中的「Global - Add project」来添加工作目录:

这里有个问题,我安装 omo 之后,容易卡住。可能是因为 omo 太重了,先从插件中去掉了。

右侧部分我们可以看到当前工作目录下的文件、更新内容、MCP、Skills 以及 Worktrees:

在左下角,点击之后还可以看到模型的消耗情况:

这里我接入的是第三方的 API,没有设置上下文,所以看到的是 0,改成智普的套餐后就正常了。

测试一下,既然 omo 有点重,那让 opencode 装个 oh-my-opencode-slim:

很丝滑~,而且该有的交互一点都没少!

唯一有一些不方便的就是,如果我们需要变更 opencode 配置,比如:模型、MCP、Skills 啥的,都得重启一下后端服务,不然无法重载。

重启后端服务,再刷新页面以后我们就可以看到安装好的 omos 的 Agent 了:

排坑

下面是三金在部署时遇到的一些坑,放在这里供大家快速定位解决问题。

1)SSE 被缓冲

使用时发现一种很诡异的现象:

  • 后端明明是流式
  • 但前端要么不动,要么一坨一坨蹦出来

排查了一下发现是 Nginx 反向代理把 SSE 缓冲了。其实在项目的 README 里有提示,但是没细看给漏掉了:

2)Linux 下 host.docker.internal 不好使

standalone 模式默认会用 host.docker.internal 去找宿主机,有些环境里它就是不通。

解决方式也简单粗暴:

3)公网部署别裸奔

这点我再重复一遍:别裸奔。

最起码把用户名/密码配上,入口只暴露网关,别把后端端口直接开出去。

有一个细节是在全家桶方式中,compose 默认会把端口绑在 127.0.0.1 上。这其实是作者在帮咱们“默认自保”。你要是真准备对外开放,记得同时把认证、反代、以及暴露策略一起想清楚。


OK,到这里给大家就介绍结束了,感兴趣的小伙伴可以抓紧去试试。

哦对了,OpenCodeUI 还给大家提供了客户端应用,这为不想折腾的小伙伴非常友好,目前支持:

  • 桌面应用**:** Windows (.exe), macOS (.dmg),Linux (.deb, .AppImage)
  • 移动端安卓应用:Android (.apk) — arm64, armeabi-v7a

下载地址:github.com/lehhair/Ope…

IOS 不支持哈,有需要可以上 Github 提 issue。 再贴一次 Github 地址,大家可以尽情 star:github.com/lehhair/Ope…

写作不易,如果小伙伴们都看到了这里,请点个赞和在看,分享给更多的朋友;为确保您能收到每一篇文章,点个关注并在主页右上角设置星标。


OpenCodeUI 让你随时随地 AI Coding》 是转载文章,点击查看原文


相关推荐


电商企微机器人:从自动欢迎语到订单转化,打造私域闭环
2501_941982052026/3/13

能力介绍 电商私域机器人不仅是客服工具,更是 24 小时在线的虚拟导购。通过 API 联动电商平台的商品库与促销引擎,机器人可以根据用户的咨询轨迹自动发送商品卡片、优惠券及限时秒杀信息。它支持精准的关键词触发与定时任务,帮助企业在不增加人工成本的前提下,提升私域社群的活跃度与复购率。 10分钟接入 Demo 首句自动响应:配置好友申请回调,用户通过后秒级发送包含“新人礼包”的欢迎语。 关键词转单:设置机器人监控特定关键词(如“怎么买”、“多少钱”),自动回复带参数的商品小程序路径。


redis stream用作消息队列极速入门
ChesterZhang2026/3/5

背景 最近做了几个需求都用了redis stream用作消息队列,感觉redis stream相当大轻量化,易于上手,且功能强大,为此特意实现了了一个极简但实用的 redis stream 的示例 redis stream 的三个概念 stream, consumer group , consumer 要想学会如何使用 redis stream, 最重要的就是理解 stream, consumer group , consumer 三者的关系。 简单来说: stream 为消息流, 类似于传


React Native 开发环境准备
zh_xuan2026/2/24

一、环境准备 我的环境: 二、建立独立RN工程 1、初始化创建工程 npx react-native init RNApp --version 0.73.4 --skip-install 这个命令提示: ��️ The `init` command is deprecated. E:\android\projects\RNDemo4>cd RNApp - Switch to npx @react-native-community/cli init f


【C++】模拟实现 红黑树(RBTree)
yuuki2332332026/2/16

前言: 在掌握 AVL 树的严格平衡机制后,我们发现其虽能将树高严格控制在 O(logN),但「高度差≤1」的强约束也带来了明显代价:插入 / 删除操作中频繁的旋转(最多两次双旋)大幅增加了写操作的开销,且每个节点需额外存储平衡因子和父指针,空间利用率较低。 为解决这一问题,红黑树(Red-Black Tree)作为一种近似平衡的二叉搜索树应运而生 —— 它放弃了 AVL 树 “严格平衡” 的要求,转而通过「节点颜色标记 + 5 条核心规则」实现 “黑高一致” 的弱平衡,将任意根到叶子的路径


Git常用操作指令
stu_kk2026/2/7

最近给公司小伙伴安排了一下git培训,写了个常用指令,记录一下 一、配置与初始化(首次使用/新建仓库) 指令 功能说明 git config --global user.name "你的姓名" 配置全局用户名(会显示在提交记录中) git config --global user.email "你的公司邮箱" 配置全局用户邮箱 `git config --list 查看配置


Prometheus+Grafana构建云原生分布式监控系统(十)_prometheus的服务发现机制(一)
牛奶咖啡132026/1/29

Prometheus+Grafana构建云原生分布式监控系统(九)_pushgateway的使用https://blog.csdn.net/xiaochenXIHUA/article/details/157392956 一、prometheus的服务发现机制  1.1、prometheus的服务发现机制概述         prometheus是基于拉(pull)模式抓取监控数据,首先要能够发现需要监控的目标对象target,那么prometheus如何获监控目标呢?有两种方式【静态手动配


Polyfill方式解决前端兼容性问题:core-js包结构与各种配置策略
漂流瓶jz2026/1/20

简介 在之前我介绍过Babel:解锁Babel核心功能:从转义语法到插件开发,Babel是一个使用AST转义JavaScript语法,提高代码在浏览器兼容性的工具。但有些ECMAScript并不是新的语法,而是一些新对象,新方法等等,这些并不能使用AST抽象语法树来转义。因此Babel利用core-js实现这些代码的兼容性。 core-js是一个知名的前端工具库,里面包含了ECMAScript标准中提供的新对象/新方法等,而且是使用旧版本支持的语法来实现这些新的API。这样即使浏览器没有实现标准


一文搞懂机器学习中的特征降维!
aicoting2026/1/12

推荐直接网站在线阅读:aicoting AI算法面试学习在线网站 特征工程(Feature Engineering) 是机器学习流程中将原始数据转换为适合模型学习的特征的关键步骤。它直接决定了模型能否高效捕捉数据中的规律。好的特征可以显著提升模型性能,而差的特征即使模型再复杂也难以取得好效果。 特征工程的核心目标是: 提取有效信息:将原始数据中有价值的信号转化为模型可以理解的特征; 减少冗余与噪声:去掉无关或多余的特征,使模型更简洁、更泛化; 增强表达能力:通过构造、组合或降维生成新的特征,


Day 12:Git配置详解:用户信息、编辑器、颜色等配置
CNRio2026/1/4

“你有没有遇到过这样的尴尬:提交代码时,Git显示’Author: Unknown’,然后你发现是自己写的代码,却不知道是谁提交的?别担心,这就像你写了一封信,却没写署名一样!” 🌟 为什么说Git配置是"代码身份证"? 想象一下,你正在写一本小说,每章都署名"匿名作者"。读者会怎么想?他们可能会怀疑这本书是不是真的由你写的。Git配置就是你的"代码身份证",它告诉世界"这代码是我写的"。 正如《Pro Git》中所说: “Git的配置系统是分层的,有三个层次:系统级、全局级和本地级。系统


LeetCode 热题100 --- 双指针专区
谎言西西里2025/12/26

283. 移动零 - 力扣(LeetCode) 题目分析: 题目要求将数组 nums 中所有 0 移动至数组末尾,同时保持其他非零元素的相对顺序不变,并且要求在原数组上进行操作。 核心要求: 0 要移动至数组末尾 非零元素相对位置不变 在原数组上进行操作 解法一(暴力使用数组方法) 遍历数组将其中所有为 0 的数直接使用splice删除并且记录 0 的个数,最后通过push填入“移动”的 0 var moveZeroes = function(nums) { let n = 0;

首页编辑器站点地图

本站内容在 CC BY-SA 4.0 协议下发布

Copyright © 2026 XYZ博客