Chat - Agentic code assistant

Streaming tool calls (Bash, Read, Edit, Write, Glob), reasoning, step boundaries, and an interactive approval flow — driven entirely by the adapter API.

Fix test failures

pnpm test: 3 failing

You

The unit tests are failing after the recent refactor. Can you fix them?

Claude

Reasoning

I need to locate the failing test files and trace which imports changed during the refactor. The error is most likely a path issue — components were probably moved to a subdirectory.

I'll start by locating all test files in the project.

glob

Completed

Output

{
  "files": [
    "src/Button.test.ts",
    "src/Input.test.ts",
    "src/Form.test.ts"
  ]
}

Found 3 test files. Reading the one with the broken imports…

read_file

Completed

Output

{
  "content": "import { Button } from './Button';\nimport { render } from '@testing-library/react';\n\ntest('renders', () => render(<Button>Click</Button>));"
}

edit_file

Completed

Output

{
  "patched": true
}

bash

Completed

Output

{
  "stdout": "✓ Button.test.ts (3)\n✓ Input.test.ts (5)\n✓ Form.test.ts (2)\n\nAll tests passed.",
  "exit_code": 0
}

All 3 test files are now passing. The import path was wrong after the refactor — components moved from src/ to src/components/.

How it works

The demo has three pre-populated conversations, each showcasing a different aspect of the agentic loop:

Fix test failures — a complete multi-step task: glob finds the files, read_file inspects the broken import, edit_file patches it, and bash confirms the tests pass.
Add dark mode toggle — read_file inspects the existing component, write_file creates a new one, then bash verifies the build.
Clean build artifacts — a bash command in the approval-requested state. Click Approve or Deny to see the state transition live.

Send any new message in any conversation to watch the scripted agentic stream play out from scratch: reasoning → text → tool input streaming → tool output → next tool → final summary.

Streaming tool calls

The adapter's sendMessage method returns a ReadableStream of typed chunks. Tool calls flow through a state machine driven by those chunks:

// 1. Tool starts — input streams in as JSON deltas
{ type: 'tool-input-start', toolCallId, toolName: 'glob', dynamic: true }
{ type: 'tool-input-delta', toolCallId, inputTextDelta: '{"pattern":' }
{ type: 'tool-input-delta', toolCallId, inputTextDelta: '"src/**/*.ts"}' }
{ type: 'tool-input-available', toolCallId, toolName: 'glob', input: { pattern: 'src/**/*.ts' } }

// 2. Tool finishes — output arrives as a single chunk
{ type: 'tool-output-available', toolCallId, output: { files: ['src/api.ts', ...] } }

The component renders each state automatically: a spinner during input-streaming, the formatted input once input-available, and the output once output-available.

When the adapter emits a tool-approval-request chunk (or a message is pre-populated with state: 'approval-requested'), the built-in ToolPart renders Approve and Deny buttons. Clicking either calls adapter.addToolApprovalResponse({ id, approved }).

The adapter then updates the tool's state to output-available or output-denied, which the component reflects immediately:

const adapter: ChatAdapter = {
  async addToolApprovalResponse({ id, approved }) {
    // Update the tool invocation state in your message store
  },
};

Reasoning parts

Before the first tool call the model emits a reasoning chunk sequence:

{ type: 'reasoning-start', id }
{ type: 'reasoning-delta', id, delta: 'Let me explore...' }
{ type: 'reasoning-end', id }

This produces a collapsible ReasoningPart in the message — collapsed by default so it doesn't dominate the conversation but still inspectable.

Step boundaries

{ type: 'start-step' } marks the beginning of a new agentic iteration. The corresponding step-start part in the rendered message visually separates reasoning loops, making it clear where one planning cycle ends and the next begins.

Tool slot overrides

Both slots and slotProps on the built-in ToolPart renderer are fully customizable. Pass them through slotProps.messageContent.partProps['dynamic-tool'] on ChatBox.

Icon styles

Five variations of the icon slot — from the default first-letter monogram to emoji, coloured circles, terminal squares, and Unicode symbols. Each icon receives ownerState.toolName so a single component can branch on the tool type.

Fix test failures

pnpm test: 3 failing

You

The unit tests are failing after the recent refactor. Can you fix them?

Claude

Reasoning

I need to locate the failing test files and trace which imports changed during the refactor. The error is most likely a path issue — components were probably moved to a subdirectory.

I'll start by locating all test files in the project.

glob

Completed

Output

{
  "files": [
    "src/Button.test.ts",
    "src/Input.test.ts",
    "src/Form.test.ts"
  ]
}

Found 3 test files. Reading the one with the broken imports…

read_file

Completed

Output

{
  "content": "import { Button } from './Button';\nimport { render } from '@testing-library/react';\n\ntest('renders', () => render(<Button>Click</Button>));"
}

edit_file

Completed

Output

{
  "patched": true
}

bash

Completed

Output

{
  "stdout": "✓ Button.test.ts (3)\n✓ Input.test.ts (5)\n✓ Form.test.ts (2)\n\nAll tests passed.",
  "exit_code": 0
}

All 3 test files are now passing. The import path was wrong after the refactor — components moved from src/ to src/components/.

Block themes

Five color themes, all built on toolSlotProps — per-tool overrides that style the header, icon, title, state chip, and root border without touching the global slots. This keeps collapse/expand and all other built-in behaviors intact while giving each tool its own distinct accent: Colorful (gradient + circular icon), Pastel (light fills), Vivid (solid saturated header, white text), Outlined (transparent fill, colored border), and Dark (dark background with glowing accents).

Fix test failures

pnpm test: 3 failing

You

The unit tests are failing after the recent refactor. Can you fix them?

Claude

Reasoning

I need to locate the failing test files and trace which imports changed during the refactor. The error is most likely a path issue — components were probably moved to a subdirectory.

I'll start by locating all test files in the project.

glob

Completed

Output

{
  "files": [
    "src/Button.test.ts",
    "src/Input.test.ts",
    "src/Form.test.ts"
  ]
}

Found 3 test files. Reading the one with the broken imports…

read_file

Completed

Output

{
  "content": "import { Button } from './Button';\nimport { render } from '@testing-library/react';\n\ntest('renders', () => render(<Button>Click</Button>));"
}

edit_file

Completed

Output

{
  "patched": true
}

bash

Completed

Output

{
  "stdout": "✓ Button.test.ts (3)\n✓ Input.test.ts (5)\n✓ Form.test.ts (2)\n\nAll tests passed.",
  "exit_code": 0
}

All 3 test files are now passing. The import path was wrong after the refactor — components moved from src/ to src/components/.

Custom renderer

Replace the tool block entirely by providing a custom root slot component via toolSlots. The component receives ownerState.toolName and ownerState.state from the slot system — no default markup, no expand/collapse. Here each call renders as a single-line process trace: tool name, a dotted rule, and a state badge.

Fix test failures

pnpm test: 3 failing

You

The unit tests are failing after the recent refactor. Can you fix them?

Claude

Reasoning

I need to locate the failing test files and trace which imports changed during the refactor. The error is most likely a path issue — components were probably moved to a subdirectory.

I'll start by locating all test files in the project.

glob✓done

Found 3 test files. Reading the one with the broken imports…

read_file✓done

edit_file✓done

bash✓done

All 3 test files are now passing. The import path was wrong after the refactor — components moved from src/ to src/components/.

API

ChatRoot

Chat - Agentic code assistant

How it works

Streaming tool calls

Tool approval flow

Reasoning parts

Step boundaries

Tool slot overrides

Icon styles

Block themes

Custom renderer

See also

API