agentskit.js
Examples

Customer Support Bot

Quick replies, typing indicators, escalation flows. Build production support experiences with AgentsKit's headless components.

Quick replies, typing indicators, escalation flows. Build production support experiences with AgentsKit's headless components.

Hi — I can take a reservation, look up an order, or hand you to a human. What do you need?

#With AgentsKit

import { useChat, ChatContainer, Message, InputBar, ThinkingIndicator } from '@agentskit/react'

function SupportChat() {
  const chat = useChat({
    adapter: myAdapter,
    initialMessages: [{ id: '1', role: 'assistant', content: 'How can I help?', status: 'complete', createdAt: new Date() }],
  })
  return (
    <ChatContainer>
      {chat.messages.map(msg => <Message key={msg.id} message={msg} />)}
      <ThinkingIndicator visible={chat.status === 'streaming'} label="Typing..." />
      <InputBar chat={chat} />
    </ChatContainer>
  )
}

Explore nearby

✎ Edit this page on GitHub·Found a problem? Open an issue →·How to contribute →
Edit on GitHub

Code Assistant

Streaming code with syntax highlighting. AgentsKit's CodeBlock component renders code beautifully as it streams in.

RAG Chat

Retrieval-Augmented Generation — chat with your documents. Show citations, source references, and document context alongside AI responses.

On this page

With AgentsKit