AgentPanel

AgentPanel wraps AgentChat in a fixed-position slide-in drawer. Use it when you want a side panel that opens and closes without building the layout yourself.

Usage

import { useState } from 'react';
import { AgentProvider, AgentPanel } from '@kapaai/agent-react';

function App() {
  const [open, setOpen] = useState(false);

  return (
    <AgentProvider {...agentConfig}>
      <button onClick={() => setOpen(true)}>Open Agent</button>

      <AgentPanel
        open={open}
        onClose={() => setOpen(false)}
        width={480}
        top={60}
        branding={{
          title: 'Support Agent',
        }}
      />
    </AgentProvider>
  );
}

Props

All AgentChat props are supported and passed through. Additional panel-specific props:

Prop	Type	Default	Description
open	boolean	—	Whether the panel is visible.
onClose	() => void	—	Called when the user clicks the close button. Also passed to AgentChat.
width	number	476	Panel width in pixels.
top	number | string	0	CSS top offset. Use this when your page has a fixed navbar (e.g. top={60} or top="var(--navbar-height)").
branding	AgentChatBranding	—	Passed through to AgentChat.
headerActions	ReactNode	—	Passed through to AgentChat.
maxContentWidth	number	820	Passed through to AgentChat.

When to use AgentChat vs AgentPanel

Use case	Component
Chat embedded in the page (fills a container)	AgentChat
Slide-in drawer from the right	AgentPanel
Custom layout (modal, popover, iframe)	AgentChat inside your own container