claude-code-kit

Build Claude Code-quality terminal apps with React components and a headless agent framework.

Why this exists

Ink is effectively unmaintained. Claude Code has the best terminal UI in the industry. We extracted its rendering engine, rewrote all the components from scratch, and built an open agent framework on top.

Feature highlights

17 built-in tools aligned with Claude Code (Bash, Read, Edit, Grep, WebSearch, LSP, and more)
MCP client for dynamic tool discovery from any MCP server (stdio + HTTP)
Parallel tool execution -- read-only tools run concurrently
React component model with Flexbox layout via a pure-TS Yoga engine
Provider-agnostic -- Anthropic, OpenAI, Ollama, DeepSeek, Groq, or any OpenAI-compatible baseURL
498 tests across 20 test files

Quick Start

UI only

pnpm add @claude-code-kit/ui react

import { render, Box } from "@claude-code-kit/ink-renderer";
import { REPL, type Message } from "@claude-code-kit/ui";
import { useState, useCallback } from "react";

function App() {
  const [messages, setMessages] = useState<Message[]>([]);
  const handleSubmit = useCallback(async (text: string) => {
    setMessages((prev) => [...prev, { id: Date.now().toString(), role: "user", content: text }]);
    const response = await callYourApi(text);
    setMessages((prev) => [
      ...prev,
      { id: (Date.now() + 1).toString(), role: "assistant", content: response },
    ]);
  }, []);

  return (
    <Box padding={1} flexDirection="column" flexGrow={1}>
      <REPL messages={messages} onSubmit={handleSubmit} placeholder="Ask anything..." />
    </Box>
  );
}

await render(<App />);

Agent

pnpm add @claude-code-kit/agent @claude-code-kit/tools

import { Agent, AnthropicProvider, createPermissionHandler } from "@claude-code-kit/agent";
import { bashTool, readTool, editTool, globTool, grepTool } from "@claude-code-kit/tools";

const agent = new Agent({
  provider: new AnthropicProvider({ apiKey: process.env.ANTHROPIC_API_KEY }),
  model: "claude-sonnet-4-20250514",
  tools: [bashTool, readTool, editTool, globTool, grepTool],
  permissionHandler: createPermissionHandler({ autoApproveReadOnly: true }),
});

const result = await agent.chat("What files are in src/?");
console.log(result);

Connect to a terminal UI in one line:

import { render } from "@claude-code-kit/ink-renderer";
import { AgentREPL } from "@claude-code-kit/ui";

await render(<AgentREPL agent={agent} placeholder="Ask me about your codebase..." />);

Packages

Package	Description
`@claude-code-kit/shared`	Yoga layout engine (pure TS), text measurement, ANSI utilities
`@claude-code-kit/ink-renderer`	Terminal rendering engine -- React reconciler, layout, diffed output
`@claude-code-kit/ui`	30+ components -- REPL, Select, Spinner, AgentREPL, AuthFlow, etc.
`@claude-code-kit/agent`	Headless agent -- providers, MCP client, permissions, sessions
`@claude-code-kit/tools`	17 built-in tools with security marks and Claude Code-style descriptions

Tools

Tool	Type	Description
Bash	write	Shell execution with timeout, background, sandbox
Read	read	File reading with line limits, PDF pages, image base64
Edit	write	String replacement with `replace_all` for global edits
Write	write	Create or overwrite files
Glob	read	File pattern matching, sorted by modification time
Grep	read	Regex search with context, head_limit, multiline, type filter
WebFetch	read	HTTP fetch with HTML-to-Markdown, HTTPS upgrade, caching
WebSearch	read	DuckDuckGo search with domain allow/block lists
Agent	write	Spawn child agents with timeout and abort propagation
NotebookEdit	write	Jupyter cell insert/replace/delete
TaskCreate	write	Create tasks with owner and dependency tracking
TaskUpdate	write	Update task status, blocks/blockedBy
TaskGet	read	Retrieve a single task by ID
TaskList	read	List/filter tasks
EnterWorktree	write	Create and enter a git worktree
ExitWorktree	write	Clean up and exit a git worktree
LSP	read	Language Server Protocol queries (factory pattern)

Comparison

	claude-code-kit	Ink	Aider	Goose
Terminal UI components	30+ React components	10+ (unmaintained)	--	--
Flexbox layout	Pure TS Yoga	Native Yoga binding	--	--
Headless agent	Yes (provider-agnostic)	--	Yes (Python)	Yes (Python)
Built-in tools	17	--	~10	~10
MCP client	Yes	--	--	Yes
Parallel tool execution	Yes	--	--	--
Language	TypeScript	TypeScript	Python	Python
UI + Agent in one package	Yes	--	--	--

Examples

Example	Description
`agent-cli`	Mini coding assistant with auth, tools, and permission prompts
`hello-world`	Interactive component showcase (Select, Spinner, Markdown, etc.)
`alt-screen-dashboard`	System monitoring dashboard in alternate screen buffer

pnpm --filter agent-cli-example start

Development

pnpm install && pnpm build && pnpm test

Provenance

The rendering engine (@claude-code-kit/ink-renderer) is extracted from Claude Code's terminal UI layer and adapted for standalone use. The Yoga layout engine (@claude-code-kit/shared) is a pure TypeScript port with no native bindings.

All UI components (@claude-code-kit/ui) and the agent framework (@claude-code-kit/agent, @claude-code-kit/tools) are original implementations written for this toolkit.

This is an independent community project. It is not affiliated with or endorsed by Anthropic.

License

MIT