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.
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'Components reference
All headless components across @agentskit/react and @agentskit/ink. Components emit data-ak-* attributes (React) or use Ink terminal primitives (Ink) — they carry no opinion about visual styling.
Contribute
AgentsKit is built in the open. Here's how to help — from filing an issue to shipping a new adapter.