claude-agent-ui-ts

Claude Agent UI (TypeScript)

Add a web UI to your Claude Agent SDK agents. Includes real-time WebSocket communication, interactive tool approval, and SQLite persistence for chat history.

Prerequisites

• Node.js 18+
• Claude Agent SDK configured (see claude-agent-sdk-ts skill for setup)

Quick Start

1. Copy the snippets to your project:

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

2. Install dependencies:

   npm install express cors ws @anthropic-ai/claude-agent-sdk better-sqlite3 react react-dom
   npm install -D @types/better-sqlite3 @types/express @types/cors @types/ws
   

3. Edit the server CONFIG section (workingDirectory, model, allowedTools, dbPath)

4. Start server: npx tsx server.ts

5. Add client.tsx to your React app and open in browser

Architecture

React Client <--WebSocket--> Express Server <--SDK--> Claude Agent
(client.tsx)                 (server.ts)
                                   |
                                   v
                              SQLite DB
                              (chat.db)

Flow:

1. User types message in React UI
2. Message sent via WebSocket to server
3. Server persists message to SQLite and forwards to Claude Agent SDK
4. When agent wants to use a tool, server sends approval request to client
5. User approves or rejects in UI
6. Server continues or blocks tool based on response
7. Agent responses persisted to SQLite and streamed back to UI

Snippets

Snippet	Source	Description
client.tsx	This skill	React chat UI with WebSocket and tool approval buttons
websocket-server-sqlite.ts	claude-agent-sdk-ts	Express + WebSocket + SQLite server with SDK integration
websocket-types.ts	claude-agent-sdk-ts	Shared TypeScript types for messages

Configuration

Edit the CONFIG object in the server:

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