A full-stack web application for running OpenCode in local processes, controllable via a modern web interface. Designed to allow users to run and control OpenCode from their phone or any device with a web browser.

• Multi-Repository Support - Clone and manage multiple git repos/worktrees in local workspaces
• Private Repository Support - GitHub PAT configuration for cloning private repos
• Worktree Support - Create and manage Git worktrees for working on multiple branches

• Git Diff Viewer - View file changes with unified diff, line numbers, and addition/deletion counts
• Git Status Panel - See all uncommitted changes (modified, added, deleted, renamed, untracked)
• Branch Switching - Switch between branches via dropdown
• Branch/Worktree Creation - Create new branch workspaces from any repository
• Ahead/Behind Tracking - Shows commits ahead/behind remote
• Push PRs to GitHub - Create and push pull requests directly from your phone

• Directory Navigation - Browse files and folders with tree view
• File Search - Search files within directories
• Syntax Highlighting - Code preview with syntax highlighting
• File Operations - Create files/folders, rename, delete
• Drag-and-Drop Upload - Upload files by dragging into the browser
• Large File Support - Virtualization for large files

• Slash Commands - Built-in commands (/help, /new, /models, /export, /compact, etc.)
• Custom Commands - Create custom slash commands with templates
• File Mentions - Reference files with @filename autocomplete
• Plan/Build Mode Toggle - Switch between read-only and file-change modes
• Session Management - Create, search, delete, and bulk delete sessions
• Real-time Streaming - Live message streaming with SSE

• Model Selection - Browse and select from available AI models with filtering
• Provider Management - Configure multiple AI providers with API keys
• Context Usage Indicator - Visual progress bar showing token usage
• Agent Configuration - Create custom agents with system prompts and tool permissions

• MCP Server Configuration - Add local (command-based) or remote (HTTP) MCP servers
• Server Templates - Pre-built templates for common MCP servers
• Enable/Disable Servers - Toggle servers on/off with auto-restart

• Theme Selection - Dark, Light, or System theme
• Keyboard Shortcuts - Customizable keyboard shortcuts
• OpenCode Config Editor - Raw JSON editor for advanced configuration

• Mobile-First Design - Responsive UI optimized for mobile use
• PWA Support - Installable as Progressive Web App
• iOS Keyboard Support - Proper keyboard handling on iOS

• AI Message Playback - Listen to assistant responses with TTS
• OpenAI-Compatible - Works with any OpenAI-compatible TTS endpoint
• Voice & Speed Controls - Configurable voice selection and playback speed
• Custom Endpoints - Connect to local or self-hosted TTS services

# Clone the repository
git clone https://github.com/yourusername/opencode-webui.git
cd opencode-webui

# Start with Docker Compose (single container)
docker compose up -d

# Access the application at http://127.0.0.1:5003

The Docker setup automatically:

• Installs pinned Bun/OpenCode toolchains during image build
• Builds and serves frontend from backend
• Sets up persistent volumes for workspace and database
• Publishes the API to loopback by default and uses readiness-based health checks

Docker Commands:

# Start container
docker compose up -d

# Stop and remove container
docker compose down

# Rebuild image
docker compose build

# View logs
docker compose logs -f

# Restart container
docker compose restart

# Access container shell
docker exec -it opencode-web sh

# Clone the repository
git clone https://github.com/yourusername/opencode-webui.git
cd opencode-webui

# Install dependencies (uses pnpm workspaces)
pnpm install --frozen-lockfile

# Copy environment configuration
cp .env.example .env

# Set a shared bearer token before exposing the app anywhere real
export AUTH_TOKEN=replace-this-with-a-long-random-token

# Start development servers (backend + frontend)
pnpm dev

Useful validation commands:

pnpm lint
pnpm test
pnpm build
pnpm validate

Sensitive control-plane routes now require a shared bearer token, while health endpoints stay public for diagnostics.

• Set AUTH_TOKEN to a long random shared secret.
• Leave CORS_ORIGIN empty for same-origin production deployments, or set it to an explicit comma-separated allowlist when a browser must call the API cross-origin.
• Direct runtime defaults bind the backend to 127.0.0.1 in production. Development still defaults to 0.0.0.0 for easier local testing.
• The container publishes 127.0.0.1:5003 by default. Override HOST_BIND_ADDRESS=0.0.0.0 only when you intentionally want LAN exposure.
• Browser clients can either set VITE_API_AUTH_TOKEN ahead of time or enter the token once when prompted; the browser caches it in localStorage and re-prompts automatically if a cached token is rejected.
• API clients and automation can send Authorization: Bearer <AUTH_TOKEN>. Headerless browser transports such as EventSource and raw file/media URLs automatically fall back to ?access_token=....
• /api/health/live is liveness-only, /api/health/ready is the deploy/readiness gate, and /api/health/build now returns build provenance including git ref plus pinned toolchain versions.