Opencode Chat WebUI

Simple, Concurrent, Multi-Agent Chat Interface for Opencode
English | 中文 | 日本語

---

🇬🇧 English

Opencode Chat WebUI is a lightweight, static web application designed to orchestrate multi-agent conversations using the Opencode backend. It simulates realistic group chat dynamics with concurrent responses and customizable personas.

Features

• Zero Build: Pure Vanilla JS (ES Modules) + Tailwind CSS (CDN). No Webpack/Vite required.
• Concurrent Conversations: Agents reply simultaneously with human-like delays, simulating a real "group chat".
• Agent Personas: Easily configure Agent personalities via backend Markdown files (e.g., Frieren).
• Auto-Loop: Set automatic conversation loops by count or time duration.
• Multi-Language: Supports English, Chinese, and Japanese (auto-detects browser language).

Quick Start

1. Clone & Run Frontend:

   git clone https://github.com/Darkstarrd-dev/opencode-chat-webui.git
   cd opencode-chat-webui
   # Start a local static server (required for ES Modules)
   python -m http.server 5173

   Visit http://localhost:5173.

2. Start Opencode Backend: Ensure Opencode Server is running with CORS enabled:

   opencode-server --host 127.0.0.1 --port 4096 --cors "*"

3. Connect: Click the "Connect" button in the top right corner.

Configuration

• Customize Agents: Create ~/.opencode/agent/*.md files on your backend machine to define Agent personas.
• Concurrent Mode: Use the bottom-left panel to set loop counts and cool-down times.

---

🇨🇳 中文

Opencode Chat WebUI 是一个轻量级的静态 Web 应用，专为 Opencode 后端设计的多 Agent 协作对话界面。它通过并发响应和可自定义的人设，模拟真实的群聊动态。

功能特点

• 零构建: 纯原生 JS (ES Modules) + Tailwind CSS (CDN)。无需 Webpack/Vite。
• 并发对话: 多个 Agent 同时思考并回复，带有拟人化的延迟，还原真实的“群聊抢答”体验。
• Agent 人设: 通过后端 Markdown 文件轻松配置 Agent 性格（如：芙莉莲）。
• 自动循环: 支持按次数或时间设置自动对话循环。
• 多语言支持: 内置中、英、日三种语言（自动检测浏览器设置）。

快速开始

1. 克隆并运行前端:

   git clone https://github.com/Darkstarrd-dev/opencode-chat-webui.git
   cd opencode-chat-webui
   # 启动本地静态服务器 (ES Modules 需要)
   python -m http.server 5173

   浏览器访问 http://localhost:5173。

2. 启动 Opencode 后端: 确保 Opencode Server 正在运行并开启了 CORS：

   opencode-server --host 127.0.0.1 --port 4096 --cors "*"

3. 连接: 点击右上角的“连接”按钮。

配置指南

• 自定义 Agent: 在后端机器的 ~/.opencode/agent/ 目录下创建 *.md 文件定义人设。
• 并发模式: 使用左下角的控制面板设置循环次数和冷却时间。

---

🇯🇵 日本語

Opencode Chat WebUIは、Opencode バックエンド向けに設計された、軽量な静的Webアプリケーションです。複数のエージェントが同時に応答し、カスタマイズ可能な人格を持つことで、リアルなグループチャットのダイナミクスをシミュレートします。

特徴

• ビルド不要: 純粋なVanilla JS (ES Modules) + Tailwind CSS (CDN)。WebpackやViteは不要です。
• 並行会話: 複数のエージェントが人間らしい遅延を持って同時に思考・返信し、リアルな「グループチャット」を再現します。
• エージェント人格: バックエンドのMarkdownファイルでエージェントの性格を簡単に設定できます（例：フリーレン）。
• 自動ループ: 回数または時間で自動会話ループを設定可能です。
• 多言語対応: 英語、中国語、日本語に対応（ブラウザ設定を自動検出）。

クイックスタート

1. フロントエンドの実行:

   git clone https://github.com/Darkstarrd-dev/opencode-chat-webui.git
   cd opencode-chat-webui
   # ローカル静的サーバーを起動 (ES Modulesに必要)
   python -m http.server 5173

   ブラウザで http://localhost:5173 にアクセスします。

2. Opencode バックエンドの起動: CORSを有効にしてOpencode Serverを起動してください：

   opencode-server --host 127.0.0.1 --port 4096 --cors "*"

3. 接続: 右上の「接続」ボタンをクリックします。

設定

• エージェントのカスタマイズ: バックエンドマシンの ~/.opencode/agent/ ディレクトリに *.md ファイルを作成して人格を定義します。
• 並行モード: 左下のコントロールパネルを使用して、ループ回数や冷却時間を設定します。

---

License

MIT License. See LICENSE file.