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. Fork any conversation to explore alternatives. Recall previous messages with ↑ or the history button.

> 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, log, and worktree isolation.

tree view git panel worktrees
⚙

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
⚡

Skills Marketplace NEW

Browse and install agent skills from SkillsMP — the registry with 500K+ skills. Keyword and AI semantic search. One-click install to global or project scope. Skills auto-register as / slash commands. "Skill used" indicators in chat so you always know what's active.

search code review
▸ code-review by imvanzen — 97% match
▸ pr-reviewer by whyashthakker — 94% match
✓ Installed code-review to .claude/skills/
⚡ Skill used: code-review
SkillsMP registry AI search one-click install global & project scope enable / disable
🔌

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
🔒

Secure Remote Access

Token-based authentication for Cloudflare Tunnel or reverse proxy setups. One flag to enable. Localhost bypasses auth by default.

--auth flag HttpOnly cookie WebSocket auth
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 build process. Just run it. Add --auth for remote access.

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
 
~ ❯
71 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
Session branching (fork conversations)
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 9
Lazy-loaded file explorer
Syntax-highlighted preview
Git branch, stage, commit, log
Git worktree isolation
Repos manager with groups
Drag-to-chat file attachment
MCP server management
Project commands & skills
Per-project system prompts
⚡
Skills Marketplace 9
SkillsMP registry integration
Keyword & AI semantic search
One-click install from GitHub
Global & project scope
Enable / disable toggle
"Skill used" chat indicators
Token-gated activation
Duplicate detection
Toast notifications
$
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 7
Notification bell with history
Telegram (two-way AFK approval)
Linear issue tracking
Push notifications (web-push)
16 prompt templates
40+ slash commands (incl. /skills)
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 11
Token-based authentication
Dark + light theme
Installable as PWA
Mobile responsive
Plugin marketplace
Welcome screen + guided tour
Keyboard shortcuts
Message recall (input history)
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