1. 项目定位与用途
OpenCodeUI 是 OpenCode AI 编程助手的第三方 Web 前端界面，由 AI 辅助编程完整开发。它作为 OpenCode 生态的增强型前端，提供完整的用户界面和交互体验，包括聊天对话、终端操作、文件浏览等功能。项目定位为开源学习交流用途，处于早期阶段，旨在展示 AI 驱动开发的可能性，并为 OpenCode 用户提供更多前端选择。界面设计注重用户体验，支持多平台部署，从 Web 到桌面应用全覆盖。
项目档案应用项目
lehhair/OpenCodeUI 是什么？用途、安装与使用指南
OpenCodeUI 是为 OpenCode AI 编程助手打造的第三方 Web 前端界面，提供完整聊天交互、内置终端、文件管理等功能。支持 Docker 容器化部署、Tauri 原生桌面应用及 PWA 移动端安装。本页涵盖项目介绍、安装指南、使用说明及技术架构详情。
AI 总结
OpenCodeUI 是专为 OpenCode AI 编程助手设计的第三方 Web 前端界面，提供完整的聊天交互、内置终端、文件管理等功能，支持 Docker 部署与 Tauri 桌面应用，增强 AI 编程体验。
中文项目介绍
OpenCodeUI 是一个专为 OpenCode AI 编程助手打造的第三方 Web 前端界面项目。该项目完全由 AI 辅助编程（Vibe Coding）完成，从第一行代码到最终发布均通过与 AI 对话驱动开发。
项目旨在为 OpenCode 提供一个功能丰富、可定制、跨平台的前端界面，弥补官方前端可能缺失的功能或提供替代方案，从而增强 AI 编程助手的可用性和部署灵活性。
适用场景广泛：开发者可在本地连接 OpenCode 后端进行 AI 辅助编程；团队可内部部署 OpenCode 服务并使用统一前端界面；支持作为桌面应用在 macOS/Linux/Windows 上通过 Tauri 运行；移动端可通过 PWA 方式访问 AI 编程助手。
技术栈现代且全面：前端基于 React 19 和 TypeScript，使用 Vite 7 构建，样式采用 Tailwind CSS v4；核心功能包括基于 xterm.js 的 Web 终端（支持 WebGL 渲染）、Shiki 代码高亮、react-markdown Markdown 渲染；支持多套主题系统、浏览器通知、@ 提及与斜杠命令；部署方式灵活，提供 Docker 容器化方案和 Tauri 原生桌面客户端。
详细信息与使用说明
2. 解决的问题
OpenCodeUI 主要解决 OpenCode 官方前端可能功能有限或定制性不足的问题。它通过第三方实现提供更丰富的界面特性，如完整的 Chat 界面（消息流、Markdown 渲染、代码高亮）、内置 Web 终端、文件 Diff 对比等。同时解决部署灵活性需求：支持纯前端 Docker 部署连接现有后端，也提供全栈 Docker 方案；支持 PWA 移动端访问和 Tauri 桌面应用。此外，项目本身作为 AI 辅助编程的实践案例，探索了 Vibe Coding 在完整项目开发中的可行性。
3. 适用场景
该界面适用于多种使用场景：个人开发者在本地运行 OpenCode 后端时，可通过托管版或本地部署的前端进行 AI 编程；团队内部可统一部署 OpenCode 服务，使用 OpenCodeUI 作为标准前端界面；需要桌面应用体验的用户可通过 Tauri 构建原生客户端（支持 macOS/Linux/Windows）；移动端用户可通过 PWA 安装使用，享受触摸优化和响应式布局。此外，该项目也适合作为学习材料，研究 React 现代化技术栈、Docker 多服务部署、AI 工具集成等实践。
4. 安装方式
安装方式多样，满足不同需求。最简单的是直接使用托管版：启动 OpenCode 后端后访问 https://lehhair.github.io/OpenCodeUI/。本地部署推荐 Docker 方式：克隆仓库后复制 .env.example 为 .env，至少配置一个 LLM API Key（如 ANTHROPIC_API_KEY 或 OPENAI_API_KEY），然后运行 docker compose up -d 启动完整栈（网关、前端、后端、路由）。若已有 OpenCode 后端运行，可使用 docker-compose.standalone.yml 仅启动前端容器，通过 BACKEND_URL 环境变量指定后端地址。开发环境则需 npm install 安装依赖后运行 npm run dev。
5. 使用方式
使用前需确保 OpenCode 后端正在运行（例如执行 opencode serve --cors "https://lehhair.github.io"）。访问前端界面后，可在聊天界面与 AI 对话，使用 @ 提及引用文件，用 / 斜杠命令执行操作。内置终端基于 xterm.js，支持 WebGL 渲染，可直接在浏览器中操作命令行。文件浏览功能允许查看工作区内容，Diff 视图支持多文件对比。主题系统提供三套内置主题（Eucalyptus/Claude/Breeze），支持明暗模式切换和自定义 CSS。浏览器通知会在 AI 回复完成时推送。快捷键可自定义配置。
6. 补充说明与实现特点
项目采用模块化架构，按功能域划分 feature 模块（chat、message、attachment、mention），组件库独立维护。状态管理使用 React Context 提供全局状态（目录、会话、导航等），避免 prop drilling。构建优化方面，Vite 配置手动分块，分离大型依赖（xterm、shiki、streamdown、tauri）以减少初始加载体积。开发环境通过 Vite 代理将 /api 请求转发到后端（默认 4096 端口），Tauri 模式下则直接通过插件请求。国际化集成 i18next 实现多语言支持并自动检测语言。后端服务使用 Rust 编写（src-router），提供高性能路由和端口扫描功能。
思维导图
OpenCodeUI
项目概述
第三方前端
AI 辅助开发
开源学习
核心功能
聊天界面
内置终端
文件浏览与 Diff
主题系统
PWA 支持
移动适配
浏览器通知
@提及与斜杠命令
技术栈
React 19
TypeScript
Vite 7
Tailwind CSS v4
xterm.js
Shiki
Tauri 2
Docker
部署方式
Docker 完整栈
Docker 纯前端
Tauri 桌面应用
PWA 安装
开发架构
模块化设计
React Context 状态管理
Vite 手动分块
开发代理
国际化 i18next
平台支持
Web 浏览器
macOS
Linux
Windows
移动端 iOS/Android
常见问题
OpenCodeUI 与 OpenCode 官方前端有什么区别？
OpenCodeUI 是第三方实现，提供更丰富的界面特性如完整聊天体验、内置终端、多文件 Diff 对比等，且支持更多部署方式（Docker、Tauri、PWA）。项目由 AI 辅助编程完成，定位为开源学习交流用途，与官方前端形成互补。
如何快速体验 OpenCodeUI？
最快方式是访问托管版 https://lehhair.github.io/OpenCodeUI/，但需先本地启动 OpenCode 后端并配置 CORS。本地部署可克隆仓库后运行 docker compose up -d 启动完整栈，或使用 docker-compose.standalone.yml 仅启动前端容器连接已有后端。
是否需要配置 LLM API Key？
是的，至少需要配置一个 LLM API Key（如 ANTHROPIC_API_KEY 或 OPENAI_API_KEY）到 .env 文件中，AI 对话功能才能正常工作。后端服务会使用这些密钥调用大语言模型，这是使用 AI 编程助手功能的必要条件。
支持哪些部署方式？
支持三种主要方式：Docker 完整栈部署（一键启动网关、前端、后端、路由服务）；Docker 纯前端部署（连接已有 OpenCode 后端）；Tauri 桌面应用（需本地构建）。此外还提供 PWA 版本可安装到移动设备，满足不同场景需求。
开发环境如何运行？
克隆仓库后运行 npm install 安装依赖，然后 npm run dev 启动开发服务器。前端会自动代理 /api 请求到本地 4096 端口的 OpenCode 后端。确保后端已运行且 CORS 配置允许开发服务器地址，即可进行前端开发调试。