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.

React components

Import from @agentskit/react:

import {
  ChatContainer,
  Message,
  InputBar,
  Markdown,
  CodeBlock,
  ToolCallView,
  ThinkingIndicator,
} from '@agentskit/react'

`ChatContainer`

Scrollable wrapper. Attaches a MutationObserver and auto-scrolls to the bottom whenever children change.

<ChatContainer className="my-chat">
  {/* messages, indicators */}
</ChatContainer>

Prop	Type	Default	Description
`children`	`ReactNode`	—	Required. Message list and other content.
`className`	`string`	—	Extra CSS class.

Emits: data-ak-chat-container

`Message`

Renders a single Message object from chat.messages.

<Message
  message={msg}
  avatar={<img src={userAvatar} alt="User" />}
  actions={<button onClick={() => copy(msg.content)}>Copy</button>}
/>

Prop	Type	Description
`message`	`MessageType`	Required. The message to render.
`avatar`	`ReactNode`	Optional avatar shown beside the bubble.
`actions`	`ReactNode`	Optional action row below the content.

Emits: data-ak-message, data-ak-role, data-ak-status, data-ak-content, data-ak-avatar, data-ak-actions

`InputBar`

Textarea + send button wired to a ChatReturn object. Sends on Enter, inserts newline on Shift+Enter.

<InputBar
  chat={chat}
  placeholder="Ask anything..."
  disabled={false}
/>

Prop	Type	Default	Description
`chat`	`ChatReturn`	—	Required. Return value from `useChat`.
`placeholder`	`string`	`'Type a message...'`	Textarea placeholder.
`disabled`	`boolean`	`false`	Disables input and button.

Emits: data-ak-input-bar, data-ak-input, data-ak-send

`Markdown`

Lightweight wrapper for markdown content. Add your own renderer (e.g. react-markdown) inside or replace this component entirely.

<Markdown content={msg.content} streaming={msg.status === 'streaming'} />

Prop	Type	Default	Description
`content`	`string`	—	Required. Markdown string to display.
`streaming`	`boolean`	`false`	Adds `data-ak-streaming="true"` while streaming.

Emits: data-ak-markdown, data-ak-streaming

`CodeBlock`

Renders a code snippet with an optional copy button.

<CodeBlock code="npm install @agentskit/react" language="bash" copyable />

Prop	Type	Default	Description
`code`	`string`	—	Required. Source code to display.
`language`	`string`	—	Language hint (e.g. `'tsx'`, `'bash'`).
`copyable`	`boolean`	`false`	Shows a Copy button that writes to the clipboard.

Emits: data-ak-code-block, data-ak-language, data-ak-copy

`ToolCallView`

Expandable view for a single tool call. Clicking the tool name toggles args and result visibility.

{msg.toolCalls?.map(tc => (
  <ToolCallView key={tc.id} toolCall={tc} />
))}

Prop	Type	Description
`toolCall`	`ToolCall`	Required. The tool call object from `@agentskit/core`.

Emits: data-ak-tool-call, data-ak-tool-status, data-ak-tool-toggle, data-ak-tool-details, data-ak-tool-args, data-ak-tool-result

`ThinkingIndicator`

Three animated dots with a label. Renders nothing when visible is false.

<ThinkingIndicator visible={chat.status === 'streaming'} label="Thinking..." />

Prop	Type	Default	Description
`visible`	`boolean`	—	Required. Show or hide the indicator.
`label`	`string`	`'Thinking...'`	Accessible label next to the dots.

Emits: data-ak-thinking, data-ak-thinking-dots, data-ak-thinking-label

Ink components

Import from @agentskit/ink:

import {
  ChatContainer,
  Message,
  InputBar,
  ToolCallView,
  ThinkingIndicator,
} from '@agentskit/ink'

`ChatContainer` (Ink)

Wraps children in an Ink <Box flexDirection="column" gap={1}>.

<ChatContainer>
  {chat.messages.map(msg => <Message key={msg.id} message={msg} />)}
</ChatContainer>

Prop	Type	Description
`children`	`ReactNode`	Required.

`Message` (Ink)

Renders the role label in a role-specific terminal colour, then the message content below it.

<Message message={msg} />

Prop	Type	Description
`message`	`MessageType`	Required.

Role colours: assistant → cyan, user → green, system → yellow, tool → magenta.

`InputBar` (Ink)

Captures keyboard input via Ink's useInput. Sends on Enter, deletes on Backspace/Delete. Disabled while streaming.

<InputBar chat={chat} placeholder="Type and press Enter..." />

Prop	Type	Default	Description
`chat`	`ChatReturn`	—	Required.
`placeholder`	`string`	`'Type a message...'`	Shown above the input line.
`disabled`	`boolean`	`false`	Prevents input.

`ToolCallView` (Ink)

Renders a rounded border box with the tool name, status, and optionally the args and result.

<ToolCallView toolCall={tc} expanded />

Prop	Type	Default	Description
`toolCall`	`ToolCall`	—	Required.
`expanded`	`boolean`	`false`	Show args and result inline.

`ThinkingIndicator` (Ink)

Single-line yellow text. Renders nothing when visible is false.

<ThinkingIndicator visible={chat.status === 'streaming'} label="Thinking..." />

Prop	Type	Default	Description
`visible`	`boolean`	—	Required.
`label`	`string`	`'Thinking...'`	Text to display.

Component availability

Component	`@agentskit/react`	`@agentskit/ink`
`ChatContainer`	Yes	Yes
`Message`	Yes	Yes
`InputBar`	Yes	Yes
`ToolCallView`	Yes	Yes
`ThinkingIndicator`	Yes	Yes
`Markdown`	Yes	No
`CodeBlock`	Yes	No

React components​

ChatContainer​

Message​

InputBar​

Markdown​

CodeBlock​

ToolCallView​

ThinkingIndicator​

Ink components​

ChatContainer (Ink)​

Message (Ink)​

InputBar (Ink)​

ToolCallView (Ink)​

ThinkingIndicator (Ink)​

Component availability​

Related​