Whaly — Claudeck mascot

Claudeck

The browser UI for Claude Code

Chat, agents, workflows, cost tracking — all from your browser. Zero framework. No build step.

Get Started GitHub
$ npx claudeck
-- stars v--
0 frameworks
6 dependencies
0 build steps
macOS Linux Windows PWA
Features

Everything you need.
Nothing you don't.

A complete development environment built on vanilla JS. No framework baggage, no build complexity.

◇

Real-time Chat

WebSocket streaming with session persistence. Parallel 2×2 mode for running 4 conversations at once. Background sessions that keep running when you switch away.

> review the auth middleware
▸ Reading src/middleware/auth.js
▸ Analyzing 3 security patterns...
✓ Found 2 improvements
streaming parallel mode background sessions voice input
$

Cost Visibility

Per-session cost tracking, daily timeline charts, input/output token breakdowns, and error pattern analysis.

per-session 30-day charts
📂

Files & Git

Lazy-loaded file explorer with syntax preview. Git panel with branch switching, staging, commit, and log.

tree view git panel
⚙

Autonomous Agents

4 built-in agents with chains, DAGs, and an orchestrator that auto-decomposes complex tasks.

single agents chains DAGs orchestrator
🧠

Persistent Memory

Claude remembers across sessions. Auto-captures conventions, decisions, and warnings with FTS5 search.

cross-session auto-capture FTS5 search AI optimize
🔌

Plugin System

Full-stack Tab SDK with hot reload. Marketplace UI for enabling, disabling, and reordering plugins.

tab SDK marketplace
🌐

Works Everywhere

Installable as a PWA. Mobile responsive. Telegram bot for AFK tool approval from your phone.

PWA mobile Telegram
Agent Orchestration

From single agent
to full orchestra.

Four levels of agent autonomy. Start simple, scale to complex multi-agent workflows with visual dependency graphs.

◉

Single Agent

Give it a goal.
It runs autonomously.

→

Chain

Sequential pipeline.
Context flows forward.

◈

DAG

Visual dependency graph.
Parallel execution.

★

Orchestrator

Describe a task.
It auto-delegates.

Quick Start

One command. That's it.

No config files. No environment variables. No build process. Just run it.

Terminal
~ ❯ npx claudeck
Need to install the following packages:
  claudeck@1.0.7
Ok to proceed? (y) y
 
✓ Claudeck running on port 9009
✓ Open http://localhost:9009
 
~ ❯
56 Features

Batteries included.

Everything a developer needs, organized by what you're doing.

◇
Chat & Sessions 10
WebSocket streaming with reconnect
Parallel mode (2×2 grid)
Background sessions
Session search, pin, rename
Voice input (Web Speech API)
Image & file attachments
AI-generated session summaries
Code diff viewer (LCS-based)
Mermaid diagram rendering
Export to Markdown / HTML
⚙
Agents & Orchestration 8
4 built-in agents
Sequential chains with context
Visual DAG editor
Auto-decompose orchestrator
Agent monitor dashboard
4 multi-step workflows
Custom agent definitions
Shared context (SQLite-backed)
📂
Code & Files 8
Lazy-loaded file explorer
Syntax-highlighted preview
Git branch, stage, commit, log
Repos manager with groups
Drag-to-chat file attachment
MCP server management
Project commands & skills
Per-project system prompts
$
Analytics & Cost 7
Per-session cost tracking
Daily timeline charts (30-day)
Token breakdown (in/out/cache)
Error pattern analysis (9 categories)
Tool usage stats
Context gauge (token usage bar)
Streaming token counter
🔌
Integrations 6
Telegram (two-way AFK approval)
Linear issue tracking
Push notifications (web-push)
16 prompt templates
40+ slash commands
Notification sound chime
🧠
Persistent Memory 7
Cross-session memory persistence
Auto-capture from assistant output
4 categories: convention, decision, discovery, warning
FTS5 full-text search
AI-powered memory optimization
Relevance decay & maintenance
/remember command for manual saves
✨
UI & Experience 10
Dark + light theme
Installable as PWA
Mobile responsive
Plugin marketplace
Welcome screen + guided tour
Keyboard shortcuts
VS Code-style status bar
Tab SDK for extensions
4 permission modes
Floating assistant bot
Extensible

Build your own.
No fork needed.

Drop files in ~/.claudeck/plugins/ and you're live. Hot reload included.

1

Register a tab

One function call creates your tab button, panel, and lifecycle hooks.

2

Add server routes

Optional server.js auto-mounts at /api/plugins/<name>/. Plugins get access to the event bus, reactive store, and all REST APIs via the Tab SDK context.

3

Let Claude scaffold it

Install the Claudeck skills via skills.sh:

npx skills add https://github.com/hamedafarag/claudeck-skills

Then ask Claude to create a plugin:

/claudeck-plugin-create <plugin-name> <short description of what the plugin does>

Claude generates client.js, server.js, and CSS for you automatically.

client.js
import { registerTab } from '/js/ui/tab-sdk.js'; registerTab({ id: 'my-widget', title: 'My Widget', icon: '★', init(ctx) { // ctx: event bus, store, API, badges const root = document.createElement('div'); root.innerHTML = '<h2>Hello!</h2>'; return root; // must return HTMLElement } });
📋 Tasks
🔗 Linear
📁 Repos
✎ Claude Editor
⚡ Event Stream
🎮 Sudoku
✖ Tic-Tac-Toe
Architecture

Radically simple.

No React. No Webpack. No build step. Just ES modules, Express, and SQLite.

Browser
→
WebSocket
→
Express
→
Claude Code SDK
Node.js 18+
Vanilla JS
Express 4
SQLite (WAL)
WebSocket (ws 8)
6 dependencies
Get Started

Three steps. Two minutes.

01

Run one command

No install needed. NPX handles everything.

npx claudeck
02

Pick a port

Default 9009. Saved to ~/.claudeck/.env for next time.

03

Start building

Chat, agents, workflows, cost tracking — all ready to go.

Whaly

Ready to try Claudeck?

One command. Zero config. MIT licensed.

npx claudeck View on GitHub