brainless

brainless is an open-source shadcn/ui component registry built by Ben Swerdlow that recreates the terminal interfaces of Claude Code, OpenAI Codex, and Grok as accessible React components. It is licensed under MIT and hosted on GitHub, making it free to use, modify, and distribute.

What It Is

brainless lets developers drop pixel-faithful coding-agent terminal UIs into their own docs, demos, marketing pages, and product interfaces — without relying on screenshots or iframes. Components are built for fidelity against real terminal captures (ANSI/HTML/text frames from actual CLI sessions) and shipped as copy-pasteable shadcn registry items. The project covers three agent families — Claude, Codex, and Grok — each with a matching set of sub-components.

Component Coverage

The registry is organized by agent family and block type:

• Claude: header, message, thinking, tool call, diff, permission, prompt, slash menu, todo list
• Codex: header, message, working, exec, diff, permissions, prompt, slash menu
• Grok: status, header, message, thinking, thought, tool, write, turn end, prompt, slash menu, and more
• Blocks: claude-session, codex-session, grok-session, grok-session-active — full assembled session views

How Installation Works

brainless integrates with the standard shadcn CLI. The recommended path registers a namespace once in components.json, then individual components or full session blocks can be added with a single command. Three install paths are supported:

• Namespace: register @brainless pointing to the registry URL, then bunx shadcn@latest add @brainless/claude-session
• URL: bunx shadcn@latest add https://brainless.swerdlow.dev/r/claude-session.json
• GitHub shorthand: bunx shadcn@latest add theswerd/brainless/claude-session

After install, components are imported from @/components/brainless/... (e.g., ClaudeSession, CodexHeader, GrokThinking).

Capture Harness and Fidelity Approach

Fidelity starts from real terminal output. The repo includes a capture harness under tools/capture/ that drives agents inside tmux, dumps frames as ANSI, HTML, and plain text, and stores them in references/captures/ for side-by-side review during component development. This approach means the components reflect actual CLI behavior rather than approximations.

Repo Architecture

The repository is structured as a monorepo combining the component registry and a Next.js documentation site:

• registry/brainless/ — TypeScript source components (claude / codex / grok / blocks / ui)
• public/r/ — built registry JSON consumed by shadcn add
• references/captures/ — ANSI/HTML/text frames from real CLI sessions
• tools/capture/ — tmux capture harness
• app/ — Next.js docs site with component previews and block catalog

Current Status

The project was created in July 2026 and has accumulated 132 stars and 5 forks on GitHub as of mid-July 2026. It is actively maintained with zero open issues. The homepage includes a prompt that can be sent directly to Claude Code or Codex to bootstrap usage in a project, and the site provides live previews at /components and /blocks.