Components Overview

AgentsKit ships headless components that render semantic HTML with data-ak-* attributes. Import the default theme for instant styling, or target the attributes with your own CSS.

Available Components

Component	Purpose
ChatContainer	Scrollable chat layout with auto-scroll
Message	Chat bubble with streaming support
Markdown	Text/markdown renderer
CodeBlock	Syntax-highlighted code with copy button
ToolCallView	Expandable tool invocation display
ThinkingIndicator	Animated thinking/loading state
InputBar	Text input with send button

Headless Philosophy

Components render minimal HTML with data-ak-* attributes:

<div data-ak-message data-ak-role="user" data-ak-status="complete">
  <div data-ak-content>Hello!</div>
</div>

Style with attribute selectors:

[data-ak-role="user"] [data-ak-content] {
  background: blue;
  color: white;
}

Or import the default theme:

import '@agentskit/react/theme'