https://github.com/DevAgentForge/claude-code-webui
https://github.com/DevAgentForge/claude-code-webui
Last synced: 19 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/DevAgentForge/claude-code-webui
- Owner: DevAgentForge
- Created: 2026-01-09T06:49:06.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-01-12T02:19:16.000Z (about 1 month ago)
- Last Synced: 2026-01-12T07:45:28.139Z (30 days ago)
- Language: TypeScript
- Size: 380 KB
- Stars: 155
- Watchers: 2
- Forks: 17
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-claude-code - **claude-code-webui** - A web-based Claude Code that runs on desktop, mobile phones, and iPads. (๐ฅ๏ธ Clients & GUIs)
README
[็ฎไฝไธญๆ](README_ZH.md)
# Claude Code WebUI
**Claude Code โ now in your browser. Anywhere.**
A **web-based Claude Code** that runs on **desktop, mobile phones, and iPads**,
while **sharing the exact same configuration as your local Claude Code**.
> No cloud rewrite.
> No vendor lock-in.
> Just Claude Code โ everywhere.
---
## โจ Why Claude Code WebUI?
Claude Code is powerful โ but itโs **terminal-bound**.
That means:
- โ Not usable on mobile or iPad
- โ Hard to access remotely
- โ Awkward for demos, monitoring, or quick edits
**Claude Code WebUI solves this by:**
- ๐ Running Claude Code **in your browser**
- ๐ฑ Supporting **mobile & iPad**
- ๐ Reusing your **existing `~/.claude/settings.json`**
- ๐ง Staying **100% compatible** with local Claude Code
If Claude Code works on your machine โ
**it works here.**
---
## ๐ Quick Start (10 seconds)
### 1. Prerequisites
Make sure you have **Bun** and **Claude Code** installed.
```bash
# Install Bun
curl -fsSL https://bun.sh/install | bash
# Install Claude Code
npm install -g @anthropic-ai/claude-code
````
---
### 2. Run Claude Code WebUI
```bash
bunx @devagentforge/claude-code-webui@latest
```
Open your browser:
```text
http://localhost:10086
```
โ
Thatโs it.
---
### Change Port (Optional)
```bash
PORT=3000 bunx @devagentforge/claude-code-webui@latest
```
---
## ๐ง Core Capabilities
### ๐ค Claude Code โ in the Browser
* Natural language interaction with Claude Code
* **Real-time streaming output** (word-by-word)
* Markdown + syntax-highlighted code rendering
* Clean, Claude-style UI
---
### ๐ Session & Workspace Management
* Create sessions with **custom working directories**
* Resume any previous conversation
* Full local session history (SQLite-backed)
* Safe deletion & automatic persistence
---
### ๐ Tool Permission Control
* Explicit approval for tool execution
* Allow / deny per tool
* Bulk permission policies
* Manual handling for AskUserQuestion flows
---
### ๐ฑ Mobile-First UI
* Fully responsive (desktop / phone / iPad)
* Claude-style light theme
* Fast session switching
* Touch-friendly interactions
---
## ๐ Fully Compatible with Local Claude Code
Claude Code WebUI **does not reinvent configuration**.
It directly reuses:
```text
~/.claude/settings.json
```
Which means:
* Same API keys
* Same base URL
* Same models
* Same behavior
> Configure Claude Code once โ use it everywhere.
---
## ๐งฉ Architecture Overview
### Frontend
* React 19 + TypeScript
* Tailwind CSS 4
* Radix UI
* Zustand
* Markdown + syntax highlighting
* Streaming-first rendering
### Backend
* Bun runtime
* Hono web framework
* WebSocket-based streaming
* SQLite (WAL mode)
* Claude Agent SDK
---
## ๐ Run from Source
```bash
git clone https://github.com/DevAgentForge/claude-code-webui.git
cd claude-code-webui
bun install
bun run build
bun run start
```
---
## โ๏ธ Environment Variables
```bash
PORT=10086
DB_PATH=./webui.db
CORS_ORIGIN=*
```
Claude-related config is shared with Claude Code:
* `ANTHROPIC_AUTH_TOKEN`
* `ANTHROPIC_BASE_URL`
* `ANTHROPIC_MODEL`
* `ANTHROPIC_DEFAULT_SONNET_MODEL`
* `ANTHROPIC_DEFAULT_OPUS_MODEL`
* `ANTHROPIC_DEFAULT_HAIKU_MODEL`
* `API_TIMEOUT_MS`
* `CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC`
---
## ๐บ Roadmap
Planned features:
* ๐ Web-based configuration for Base URL & API Key
* ๐ Use **GitHub repositories as working directories**
* ๐ง Partial replacement of Claude Code Web
* ๐ฅ Multi-session & multi-agent improvements
* ๐ง More coming soon
---
## ๐ค Contributing
PRs are welcome.
1. Fork this repository
2. Create your feature branch
3. Commit your changes
4. Open a Pull Request
---
## โญ Final Note
If youโve ever wanted:
* Claude Code on your phone
* Claude Code on an iPad
* Claude Code without a terminal
This project is for you.
๐ **Star it if it helps you.**