游乐游手机版
首页/AI教程/文章详情

OpenCodeUI在线编程工具让你随时随地高效实现AI编码

时间:2026-06-06 16:51
自从OpenCode+OMO这套组合拳亮相以来,写代码的体验确实是上了一个台阶——丝般顺滑,就是token烧得有点心疼。但TUI用久了,难免会冒出点新念头:能不能远程连接?能不能随时随地掏出设备就AI Coding?而且要Web界面,界面得看着顺眼,操作得点着顺手。所以当L站上有开发者开源了Open

自从OpenCode+OMO这套组合拳亮相以来,写代码的体验确实是上了一个台阶——丝般顺滑,就是token烧得有点心疼。

但TUI用久了,难免会冒出点新念头:能不能远程连接?能不能随时随地掏出设备就AI Coding?而且要Web界面,界面得看着顺眼,操作得点着顺手。

所以当L站上有开发者开源了OpenCodeUI的时候,第一反应就是:许愿成功了?

OpenCodeUI是OpenCode的第三方Web前端界面,整体风格和OpenCode客户端一脉相承,简约清爽。它的后端引擎就是OpenCode,相当于给OpenCode套了一个现代化的Web壳。

先看界面布局:左侧是工作区、会话区和上下文展示区;中间主区域也支持OMO展示,还能创建终端,非常实用;右侧则展示当前目录下的文件、修改的文件、Skills、MCP以及Worktrees。

OpenCodeUI支持Docker部署,下面直接上手安装。

安装

想用OpenCodeUI,只需要准备两样东西:OpenCode后端(能跑opencode serve,默认端口4096),以及OpenCodeUI前端。前端托管版、Docker、本地开发,三种方式任选。

三条路线,直接对号入座:

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

本地启动OpenCode后端,放行GitHub Pages的CORS:

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

然后打开https://lehhair.github.io/OpenCodeUI/即可。这条路径的好处是:先确认UI手感是不是你想要的,再决定要不要折腾。

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

适合两类人:后端已在本地或远程跑着;只想装个UI,不折腾全家桶。先做连通性检查:

curl -sS https://127.0.0.1:4096/global/health

正常情况下会返回{"healthy":true,"version":"1.2.24"}。如果有返回,说明后端可用;不通的话优先检查后端是否启动。

然后启动前端容器:

git clone https://github.com/lehhair/OpenCodeUI.git
cd OpenCodeUI
docker compose -f docker-compose.standalone.yml up -d

默认访问https://localhost:3000。如果后端在远程(比如10.0.0.8:4096),这样启动:

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

注意:BACKEND_URL不要带https://,直接写host:port。Linux环境下host.docker.internal有时不太好使,建议直接改成宿主机内网IP。

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

长期使用或上服务器,更推荐这条:

git clone https://github.com/lehhair/OpenCodeUI.git
cd OpenCodeUI
cp .env.example .env

务必先配置.env。很多人拷贝完不改就直接跑Docker,结果是界面能打开,模型不可用。至少填一个要用到的provider key(如OpenAI/Anthropic/Gemini等):

ANTHROPIC_API_KEY=
OPENAI_API_KEY=
GEMINI_API_KEY=
DEEPSEEK_API_KEY=

然后docker compose up -d,默认访问https://localhost:6658。这套方案的好处:有网关统一入口(反代API/SSE/router),有router做动态端口预览,也利于公网部署和认证。端口参照表:6658主入口,6659预览端口(开发服务用),4096OpenCode后端API。

使用

部署好后,就可以远程控制OpenCode了,这本身就是最有价值的地方。首先登录,然后通过左侧菜单「Global - Add project」添加工作目录。右侧可以看到当前工作目录下的文件、更新内容、MCP、Skills以及Worktrees。左下角还能查看模型消耗情况。

实测了一下,既然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找宿主机,某些环境不通。解决方法很直接:把BACKEND_URL改成宿主机内网IP,先用curl https:///global/health验证连通性。

3)公网部署别裸奔

再强调一遍:务必配置用户名/密码,入口只暴露网关,别把后端端口直接开出去。全家桶方式中,compose默认把端口绑在127.0.0.1上,这是作者在帮“默认自保”。如果真准备对外开放,认证、反代、暴露策略必须一并想清楚。

OpenCodeUI还提供了桌面应用和移动端应用。桌面应用支持Windows(.exe)、macOS(.dmg)、Linux(.deb, .AppImage);移动端支持Android(.apk),包括arm64和armeabi-v7a架构。

来源:https://juejin.cn/post/7619254214457098266
上一篇前端开发接入AI能力的环境搭建与基础配置 下一篇Warp终端突然爆火开源仅一天便收获四万星标
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
Flowise插件安装配置:浏览器、编辑器与扩展市场全流程
AI教程 · 2026-07-15

Flowise插件安装配置:浏览器、编辑器与扩展市场全流程

Flowise适合用可视化方式搭建AI工作流。插件配置通常涉及浏览器访问、编辑器开发环境和扩展市场组件启用,新手应先确认版本、权限、密钥与运行环境,再按步骤安装并测试。

Flowise API Key配置:账号注册与国内网络设置
AI教程 · 2026-07-15

Flowise API Key配置:账号注册与国内网络设置

Flowise可通过可视化方式搭建AI工作流,配置APIKey前需完成账号注册、密钥创建、环境变量设置与国内网络连通性检查,并做好权限、额度和日志安全管理。

Haystack新手安装教程:从下载到首次运行的保姆级指南
AI教程 · 2026-07-15

Haystack新手安装教程:从下载到首次运行的保姆级指南

Haystack适合搭建检索问答、知识库搜索和RAG应用。新手安装建议先准备Python虚拟环境,再安装haystack-ai,通过内存检索示例完成首次运行,并注意版本、依赖、数据安全与排错方法。

Haystack本地模型运行:下载、路径设置与性能优化指南
AI教程 · 2026-07-15

Haystack本地模型运行:下载、路径设置与性能优化指南

围绕Haystack本地模型部署,梳理环境准备、模型下载、路径配置、检索管线搭建、性能优化、故障排查与安全边界,适合希望离线运行AI检索应用的用户参考。

Flowise Docker一键部署教程:镜像拉取、端口映射与数据目录
AI教程 · 2026-07-15

Flowise Docker一键部署教程:镜像拉取、端口映射与数据目录

Flowise可通过Docker快速部署为可视化AI工作流平台,关键在于选择稳定镜像版本、正确映射3000端口、挂载持久化数据目录,并配置账号口令与升级备份策略。