Agent UI Components Kit

Production-ready chat interface with streaming, tool call visualization, and reasoning steps.

Agent Chat
Send a message to see the AI agent UI components in action.
Try: "What are the latest quantum computing developments?"

Display Options

Components Used

<ChatPanel />

<StreamingMessage />

<ToolCallViewer />

<ReasoningSteps />

<TokenMetrics />

Integration Code

import {
  ChatPanel,
  StreamingMessage,
  ToolCallViewer,
  ReasoningSteps,
  TokenMetrics,
} from 'agent-tools-kit/ui'

function AgentChat() {
  const { messages, send, isStreaming } = useAgentChat({
    endpoint: '/api/agent',
    onToolCall: (call) => console.log('Tool:', call.name),
  })

  return (
    <ChatPanel messages={messages} onSend={send} streaming={isStreaming}>
      {(message) => (
        <>
          {message.reasoning && (
            <ReasoningSteps steps={message.reasoning} />
          )}
          {message.toolCalls?.map((tc) => (
            <ToolCallViewer key={tc.id} call={tc} />
          ))}
          <StreamingMessage content={message.content} />
          <TokenMetrics tokens={message.tokens} latency={message.latencyMs} />
        </>
      )}
    </ChatPanel>
  )
}