CodeBuddy Code provides a built-in Web UI that offers a complete interactive interface in the browser. The Web UI is automatically available when you start in serve mode or enable remote control.
Overview
The Web UI provides the same core capabilities as the terminal interface, with visual layout optimized for browsers:
Conversation: Send messages, view conversations, and monitor tool execution in real time.
Terminal: An embedded terminal that supports split-screen layouts (up to 4 panes).
Workers: Manage CLI Worker processes and Daemon processes.
Logs: A standalone log viewer that supports multiple log types and keyword search.
Remote Control: Connect WeChat and WeCom channels.
Monitoring: System resource metrics and per-Worker process-level memory/runtime metrics.
Tasks: Browse task templates and create scheduled tasks.
Plugins: Manage plugin installation and the plugin marketplace.
Settings: Configure themes, languages, models, and permission modes.
Docs: Browse CLI documentation with full-text search support.
API Docs: View the interactive Swagger UI to facilitate HTTP API exploration.
Accessing the Web UI
Method 1: Serve Mode
Start CodeBuddy Code with the --serve flag:
codebuddy --serve --port 7890
Then open it in the browser:
Method 2: Remote Control
Start Gateway in an existing CodeBuddy Code session:
The terminal displays a QR code and a URL. Scan the QR code with your phone or open the URL in a browser. For details, see the Remote Control documentation. Authentication Method
The Web UI supports two authentication modes:
|
Password authentication (default) | --auth password / CODEBUDDY_GATEWAY_AUTH=password
| Default behavior of --serve. On startup, the terminal prints the password and a clickable link with the password embedded. |
No authentication | --auth none / CODEBUDDY_GATEWAY_AUTH=none
| Explicitly disables authentication and prints a warning on startup. Any process on the same machine can run commands and read or write files through this service. Use it only in isolated environments or CI. |
Authentication methods (any of the following):
URL Parameter: ?password=xxx — Automatically logs in and issues a Cookie when the Web UI homepage is opened (valid only for the homepage, not for /api/v1/* endpoints).
Login page: Enter the password displayed in the terminal.
Bearer Token: Authorization: Bearer <password>, used for API access.
Cookie: gateway_session, automatically carried by the browser after login, valid for 30 days.
Configure in ~/.codebuddy/settings.json:
{
"gateway.auth": "none"
}
Feature Details
Conversation View
Default view for interacting with the Agent. Core features:
Rich Text Message Rendering: Markdown, syntax-highlighted code blocks, tables, and images.
Tool Execution Display: View tool calls, parameters, and results inline.
Permission Management: Approve or deny tool permissions directly in the browser.
Q&A Panel: Answer the Agent's multiple-choice questions.
Task Progress: Monitor background tasks and Team progress in real time.
Session Management: Create a new conversation, browse history, and switch sessions.
Working Directory Management: Add or remove additional working directories to expand the Agent's file access scope (stacked icon in the bottom toolbar).
Terminal View
Embedded terminal based on xterm.js:
Split-Screen Layout: Supports horizontal and vertical split screens, with up to 4 panes.
Independent Sessions: Each pane has an independent PTY session.
Persistent Connection: Terminal sessions are maintained after a page refresh.
Adaptive Resizing: Panes are automatically resized when the window size changes.
Document View
Browse CLI documentation directly in the Web UI:
Full-Text Search: Search all documents based on MiniSearch.
Multilingual: Automatically follows the UI language setting (Chinese/English).
Directory Navigation: Automatically generated based on document titles, with scroll tracking.
Internal Navigation: Document links navigate within the viewer (SPA mode).
API Docs: Quickly links to the interactive Swagger UI at /api/docs.
Instance Management
Manage multiple CodeBuddy Code instances:
Instance List: View all running instances along with their working directories and statuses.
Quick Switch: Switch instances with one click.
Add Manually: Add a remote instance by URL.
Tunnel Support: Access instances through Cloudflare Tunnel.
Settings
Theme: Light, dark, or follow system (auto-detected).
Language: Chinese, English, or follow system (auto-detected).
Model: Select an AI model from the available options.
Permission Mode: Default, Accept Edits, Skip Permissions, or Plan Mode.
API documentation
When the HTTP service is running, you can access the interactive API explorer at the following address:
http://127.0.0.1:{PORT}/api/docs
Swagger UI provides the following features:
Browse all available REST API endpoints.
View the request/response Schema.
Test API calls directly in the browser.
Download the OpenAPI 3.1 specification from /api/openapi.json.
Mobile Support
The Web UI is fully responsive and supports mobile devices:
Sidebar: Collapses into a slide-out drawer on small screens.
PWA Support: Add to the home screen for a native app-like experience.
Touch Optimization: All interactions are optimized for touch operations.
Scan to Access: Scan the QR code in the terminal to open it on your phone.
Shortcut Keys
|
Enter
| Sending messages |
Shift+Enter
| Entering a line break |
Escape
| Stopping the running Agent |
Technical Details
Framework: React 18 + Zustand state management.
Communication: ACP protocol, based on HTTP/SSE (not WebSocket).
Styling: Tailwind CSS + CSS variable theming.
Terminal: xterm.js + fit addon.
Search: MiniSearch client-side full-text search.
Markdown: react-markdown + remark-gfm + syntax highlighting.
References
HTTP API — Complete REST API documentation.