Claude Code, Codex, and Grok interfaces as shadcn components.

Site: brainless.swerdlow.dev · Repo: github.com/theswerd/brainless

brainless is a shadcn/ui registry of accessible React components that recreate the terminal UIs of coding agents — Claude Code, OpenAI Codex, and Grok — so you can drop them into docs, demos, marketing pages, and product UI without screenshots or iframes.

Components are built for fidelity against real terminal captures, then shipped as copy-pasteable registry items.

bunx shadcn@latest registry add @brainless=https://brainless.swerdlow.dev/r/{name}.json
bunx shadcn@latest add @brainless/claude-session
bunx shadcn@latest add @brainless/codex-session
bunx shadcn@latest add @brainless/grok-session

Or add the registry manually in components.json:

{
  "registries": {
    "@brainless": "https://brainless.swerdlow.dev/r/{name}.json"
  }
}

bunx shadcn@latest add https://brainless.swerdlow.dev
bunx shadcn@latest add https://brainless.swerdlow.dev/r/claude-session.json

bunx shadcn@latest add theswerd/brainless/claude-session

Browse individual pieces on components and blocks.

registry/brainless/   # source components (claude / codex / grok / blocks / ui)
public/r/             # built registry JSON for shadcn add
references/captures/  # ANSI / HTML / text frames from real CLIs
tools/capture/        # tmux capture harness
app/                  # docs site (Next.js)
docs/screenshots/     # README screenshots

Fidelity starts from real terminal output. The capture tools under tools/capture/ drive agents in tmux, dump frames as ANSI / HTML / text, and land them in references/captures/ for side-by-side review.

bun install
bun run registry:build   # writes public/r/*.json
bun run dev

bun run build runs the registry build, then Next.js.

MIT