Pre-built Components

Drop-in components with built-in theming, A2UI rendering, HITL, suggestions, and hooks.

Props

primaryColor

positiongreetingassistantNamedefaultThemeshowThemeTogglesuggestions

Conversation

persist

Usage · tsx

<ChatProvider baseUrl="https://agent-api.zenku.app">
  <ChatBubble
    primaryColor="#667eea"
    position="bottom-right"
    greeting="Hi! I can help you with your shopping."
    assistantName="Assistant"
    defaultTheme="system"
    showThemeToggle={true}
    suggestions={true}
    isOpen={isOpen}
    onOpenChange={setIsOpen}
  />
</ChatProvider>

This is the host page. The ChatBubble widget floats over it.

Try asking: "What's in my cart?" or "Show me a notification"

Shared State (useChatReadable)

shoppingCart: 2 items, $105.97

1x Wireless Headphones ($79.99)

2x USB-C Cable ($12.99)

Registered Actions (useChatAction)

showNotification(title, message, type)

addToCart(productId, productName, price, quantity?)

Custom Tool Renderer (useRenderToolCall)

search_knowledge_base → custom card UI

Authentication

The demos above use public auth. For production use with user identity, pass a JWT auth configuration.

Public Auth · tsx

// Public auth (no authentication)
<ChatProvider baseUrl="https://agent-api.example.com">
  <ChatBubble />
</ChatProvider>

JWT Auth (PocketBase) · tsx

// JWT auth (authenticated users)
import PocketBase from "pocketbase";

const pb = new PocketBase("https://auth.example.com");

<ChatProvider
  baseUrl="https://agent-api.example.com"
  auth={{
    type: "jwt",
    getToken: () => pb.authStore.token,
    tenantId: "tenant_abc123",
    accountId: pb.authStore.record?.id,
  }}
>
  <ChatBubble />
</ChatProvider>