Component registry

Pick a layout, run betteragent add, and you own the code. Theming inherits from your shadcn tokens — restyle anything without forking a package.

Available components

Every container composes the same shared pieces — messages, input, header, suggested prompts. Install one and you get them all.

Component	Layout
`sidebar`	Right-side panel, always visible alongside your app.
`chat-popup`	Floating bottom-right button that opens a chat panel.
`cmd-k`	⌘K command-palette overlay for power users.
`inline-bar`	Embedded input bar that sits inside the page.


# Install one (or pass no name for an interactive picker)
npx betteragent add sidebar

Getting started

Install the packages


npm i betteragent-react betteragent-next betteragent-cli

Add a chat component


npx betteragent add sidebar

Import theming + wrap your app


// globals.css
@import "./components/chat/styles/betteragent.css";
 
// app/layout.tsx
import { BetterAgentProvider } from "betteragent-react";
 
<BetterAgentProvider
  clientKey={process.env.NEXT_PUBLIC_BETTERAGENT_CLIENT_KEY!}
  endUserId={currentUser.id}
  actions={{ openSettings: ({ tab }) => router.push(`/settings?tab=${tab}`) }}
>
  {children}
</BetterAgentProvider>

Drop in the component


import { ChatSidebar } from "@/components/chat/sidebar";
 
// Inside your layout:
<div className="flex h-screen">
  <MainContent />
  <ChatSidebar
    title="Your agent"
    greeting="Hi — how can I help?"
    suggestedPrompts={[
      { label: "Show me recent activity", prompt: "What happened in the last 7 days?" },
    ]}
  />
</div>

Attribution footer

Every container shows a small “powered by betteragent” link by default. It’s fully configurable through the attribution prop — available on ChatSidebar, ChatPopup, ChatCmdk, ChatInlineBar, and ChatDrawer.

Remove it


// Pass null to remove the attribution entirely
<ChatSidebar attribution={null} />

Rebrand it


import { ChatAttribution } from "@/components/chat";
 
// Replace it with your own label and link
<ChatPopup
  attribution={
    <ChatAttribution label="powered by Acme" href="https://acme.com" />
  }
/>

Default


// Omit the prop to show the default "powered by betteragent" link
<ChatDrawer />

ChatAttribution accepts:

Prop	Default	Description
`label`	`"powered by betteragent"`	The attribution text.
`href`	`"https://betteragent.dev"`	Link target (opens in a new tab).
`inline`	`false`	Render a bare link with no footer bar, for embedding inside an existing footer.
`className`	—	Extra classes, merged via `tailwind-merge`.

The components are copied into your project, so you own the attribution markup too — the attribution prop is the quickest switch, but you can edit chat-attribution.tsx directly for anything custom.

Theming through CSS variables

Components inherit your shadcn tokens by default. Override any --ba-* variable in your own globals to retheme without touching component source.

Defaults (shadcn fallbacks)


:root {
  /* Surfaces */
  --ba-bg:          var(--background);
  --ba-fg:          var(--foreground);
  --ba-panel-bg:    var(--card);
  --ba-muted:       var(--muted);
  --ba-muted-fg:    var(--muted-foreground);
  --ba-border:      var(--border);
 
  /* Brand */
  --ba-primary:     var(--primary);
  --ba-primary-fg:  var(--primary-foreground);
 
  /* Messages */
  --ba-msg-user-bg:  var(--ba-primary);
  --ba-msg-user-fg:  var(--ba-primary-fg);
  --ba-msg-agent-bg: var(--ba-muted);
  --ba-msg-agent-fg: var(--ba-fg);
 
  /* Shape */
  --ba-radius:      0;
  --ba-radius-msg:  0.5rem;
  --ba-font-sans:   var(--font-sans);
  --ba-font-mono:   var(--font-mono);
}

The CSS file is copied into your project by betteragent add — you own it and can edit it directly.