WebUI

A browser-based interface that syncs in real-time with the terminal. Chat, switch modes, reference files, and configure settings — all from your browser.

Quick Start

# Start the WebUI
xibecode ui --open

# Or start chat (WebUI opens automatically)
xibecode chat

# WebUI runs at http://localhost:3847

Screenshots

Main Interface

Modern v0.dev-inspired interface with activity bar, chat panel, code editor, and terminal.

File Explorer

Browse and open files with recursive directory tree.

Chat Interface

Interactive AI chat with streaming responses and markdown rendering.

Git Panel

Git integration with commit history, staging, and diffs.

Settings Panel

Comprehensive settings modal with multiple configuration categories.

AI Provider Settings

Configure AI models, API keys, and provider settings.

MCP Servers Editor

Edit MCP server configuration with Monaco editor and syntax highlighting.

Terminal View

Fully interactive terminal with PTY support, colors, and tab completion.

New in v0.5.0

• Interactive Plan Mode - Plan mode asks questions, searches the web, generates implementations.md, and has "Build" to auto-execute
• Chat History - Persistent conversations with per-project storage, History panel in activity bar
• Environment Variables Editor - Visual .env editor with auto-detection, secret masking, live editing
• Media Preview - Images, videos, audio render as proper previews instead of binary
• Thinking Animation - Loading spinner while AI processes requests
• Improved Tool Rendering - Icons, status badges, and progress indicators for tool calls
• Smart Scroll - No more forced scrolling when reading earlier messages
• Donate Button - Support XibeCode from the activity bar

Previous (v0.4.x)

• TUI-WebUI bidirectional sync
• Slash commands for mode switching
• @ file references
• Custom model/endpoint support
• Tool execution display
• Minimalistic terminal design

TUI-WebUI Sync

When you run xibecode chat, both the terminal and browser interfaces are connected in real-time:

From TUI to WebUI:

• Messages appear with "(TUI)" label
• Streaming responses show live
• Tool calls display in real-time

From WebUI to TUI:

• Messages processed by TUI agent
• Full tool access and execution
• Responses stream to both interfaces

Slash Commands

Type / in the input to open the command palette. Use arrow keys to navigate and Enter to select.

Agent Modes in WebUI

File References

Type @ in the input to browse and reference project files:

• Shows files and folders in your project
• Type after @ to filter (e.g., @src/)
• Use arrow keys to navigate, Enter to select
• Selected file path is inserted into your message

Fix the bug in @src/utils/helpers.ts

Settings Panel

Click the Settings button in the activity bar to configure:

AI Provider:

• Provider — Anthropic, OpenAI, or Custom
• Model — Select from available models
• Custom Model ID — For local/custom LLMs
• API Key — Your provider API key
• Base URL — Custom API endpoint

Session Info:

• Working Directory — Current project path
• Git Branch — Current branch name
• Session ID — Current session identifier

Features

• Real-time Streaming — See AI responses as they're generated
• Tool Execution Display — Live status indicators: running, done, or failed
• Markdown Rendering — Rich text with code blocks, bold, italic, lists, links
• Thinking Indicator — Spinner animation during AI processing
• Minimalistic Design — Clean, dark theme with monospace fonts
• Responsive Layout — Works on desktop and mobile

Keyboard Shortcuts

Multi-Model Support

Anthropic: Claude Sonnet 4.5, Claude Opus 4.5, Claude Haiku 4.5

OpenAI: GPT-4o, GPT-4o Mini, GPT-4 Turbo, GPT-3.5 Turbo

Custom: Any OpenAI-compatible API, Local LLMs (Ollama, LM Studio), Custom model IDs

API Reference

WebSocket Connection

// Connect in bridge mode
const ws = new WebSocket("ws://localhost:3847?mode=bridge");

// Send message to TUI
ws.send(JSON.stringify({ type: "message", content: "Hello" }));

// Receive events
ws.onmessage = (e) => {
  const data = JSON.parse(e.data);
  // Types: user_message, stream_start, stream_text, stream_end,
  //        tool_call, tool_result, thinking, error
};