@uitoolbar/provider-claude-code

Claude Code integration provider for UiToolbar. Uses the Anthropic Claude Agent SDK to enable AI-powered code modifications based on selected elements.

Features

• Claude Agent SDK - Uses @anthropic-ai/claude-agent-sdk for agent interactions
• SSE Streaming - Real-time streaming of agent responses
• Session Management - Resume conversations with session IDs
• Undo Support - Per-session git state snapshots for reliable undo
• Local History - Edit history stored in .uitoolbar/history.ndjson
• Monorepo Support - Searches packages/ directories for file resolution

Installation

pnpm add @uitoolbar/provider-claude-code

Requirements

• Claude Code CLI (claude) installed and on PATH
• UITOOLBAR_CWD environment variable set to your workspace directory

Usage

Starting the Server

# Via CLI
pnpm exec uitoolbar-claude-code

# Or programmatically
import { startServer } from '@uitoolbar/provider-claude-code/server'
startServer(4567)

API Endpoints

GET /health

Check server status and agent availability.

{
  "status": "ok",
  "provider": "claude-code",
  "version": "0.0.1",
  "agentInstalled": true
}

POST /agent

Send a prompt to the Claude Code agent. Returns SSE stream.

// Request
{
  content: string      // Element context (HTML, etc.)
  prompt: string       // User instruction
  options?: {
    model?: string     // Model override
    workspace?: string // Working directory
  }
  sessionId?: string   // Resume existing session
}

// SSE Events
event: status
data: "Thinking…"

event: status
data: "Completed successfully"

event: error
data: "Error message"

event: done
data: ""

POST /abort/:sessionId

Abort an in-progress agent session.

POST /undo/:sessionId

Undo changes from a specific session.

POST /undo

Undo the last agent change (uses last session).

GET /history?elementId=...&limit=...

Retrieve edit history for a specific element.

Client Usage

import { createClaudeCodeClient } from '@uitoolbar/provider-claude-code/client'

const client = createClaudeCodeClient('http://localhost:4567')

// Check connection
const isConnected = await client.checkHealth()

// Send prompt with streaming
for await (const message of client.sendPrompt({
  content: '<button>Click me</button>',
  prompt: 'Make this button red'
})) {
  console.log(message.type, message.content)
}

Configuration

| Option | Default | Description | |--------|---------|-------------| | port | 4567 | Server port | | model | (agent default) | Override AI model | | workspace | process.cwd() | Working directory |

Environment Variables

• UITOOLBAR_CWD - Default workspace path

How It Works

1. Extension sends element context + prompt to server
2. Server uses @anthropic-ai/claude-agent-sdk to query Claude Code
3. Agent output is parsed and streamed back as SSE events
4. Git state is snapshotted before/after for undo support
5. File changes are tracked and reported via __FILES__: SSE events

Development

# Run server in dev mode
pnpm dev

# Run tests
pnpm test

# Build
pnpm build