claude-agent-terminal-ts

Claude Agent Terminal UI

A retro terminal-inspired chat interface for Claude Agent SDK agents.

Features

• Dark monospace theme (VS Code-inspired colors)
• Input history with arrow key navigation
• Collapsible tool call blocks with status badges
• Inline tool approval prompts (Approve/Reject)
• Auto-scroll to latest message
• SQLite persistence for chat history
• SDK session resumption across page reloads

Prerequisites

• Node.js 18+
• Claude Agent SDK (@anthropic-ai/claude-agent-sdk)
• Claude Code authentication (claude login)

Quick Start

1. Install Dependencies

# Server dependencies
npm install express cors ws @anthropic-ai/claude-agent-sdk better-sqlite3
npm install -D @types/better-sqlite3 @types/express @types/cors @types/ws tsx typescript

# Client dependencies
npm install react react-dom @mantine/core @mantine/hooks @tabler/icons-react

2. Copy Snippets

Copy these files to your project:

• client.tsx and styles.css from this skill
• websocket-server-sqlite.ts and websocket-types.ts from claude-agent-sdk-ts skill

your-project/
  src/
    client.tsx      # Terminal React component (this skill)
    styles.css      # Terminal theme (this skill)
    server.ts       # WebSocket server (from claude-agent-sdk-ts)
    types.ts        # Shared types (from claude-agent-sdk-ts)

3. Configure Server

Edit the server CONFIG section:

const CONFIG = {
  port: 3001,
  workingDirectory: process.cwd(),
  model: "sonnet",  // opus, sonnet, or haiku
  allowedTools: ["Bash", "Read", "Write", "Edit", "Glob", "Grep"],
  systemPrompt: "You are a helpful AI assistant.",
  dbPath: "./chat.db",
};

4. Start Server

npx tsx server.ts

5. Use Component

import { TerminalChat } from './client';
import './styles.css';

function App() {
  return (
    <div style={{ height: '100vh' }}>
      <TerminalChat wsEndpoint="ws://localhost:3001/ws" />
    </div>
  );
}

Architecture