Agent Panel

A configurable agent side panel: docked or floating, left or right, card, page or glass surface, three entrance motions, and chat/voice modes.

Installation

pnpm dlx shadcn@latest add @jds/agent-panel

Usage

import {
  AgentPanel,
  AgentPanelBody,
  AgentPanelFooter,
  AgentPanelHeader,
  AgentPanelVoiceButton,
  AgentPanelVoiceExit,
} from "@/components/ai/agent-panel"

<AgentPanel open={open} onOpenChange={setOpen} variant="floating" surface="glass">
  <AgentPanelHeader title="Agent" icon="orb" />
  <AgentPanelBody
    chat={<Conversation>…</Conversation>}
    voice={<><VoiceOrb … /><AgentPanelVoiceExit /></>}
  />
  <AgentPanelFooter>
    <PromptInput>
      <PromptInputTextarea />
      <PromptInputToolbar>
        <PromptInputTools />
        <AgentPanelVoiceButton />
        <PromptInputSubmit />
      </PromptInputToolbar>
    </PromptInput>
  </AgentPanelFooter>
</AgentPanel>

API Reference

AgentPanel

Prop	Type	Default
`open`	boolean	–
`onOpenChange` Enables the close button.	(open: boolean) => void	–
`side`	"left" \| "right"	"right"
`variant` Docked runs full height on an edge; floating is inset and rounded.	"docked" \| "floating"	"docked"
`surface` Glass blurs what is behind it.	"card" \| "background" \| "glass"	"card"
`width` In px, capped to the available space.	number	400
`inset` Edge gap when floating, in px.	number	12
`motion` Entrance and exit.	"slide" \| "fade" \| "spring"	"spring"
`contained` Position inside the nearest positioned ancestor instead of the viewport.	boolean	false
`mode` Controlled mode. Or defaultMode with onModeChange.	"chat" \| "voice"	–

AgentPanelHeader

Prop	Type	Default
`title`	string	"Agent"
`icon` "orb" shows a small live Voice Orb.	"sparkle" \| "orb" \| "none"	"sparkle"
`modes` Shows a chat/voice switch when there is more than one.	("chat" \| "voice")[]	–
`showClose`	boolean	true

AgentPanelVoiceButton

Prop	Type	Default
`…Button props` Enters voice mode. Put it in the composer toolbar, next to send: the usual place, since people choose voice when they'd otherwise type.	ButtonProps	–

AgentPanelVoiceExit

Prop	Type	Default
`children` Returns to chat. Put it in the voice view.	ReactNode	"End voice"

AgentPanelBody

Prop	Type	Default
`chat` Shown in chat mode.	ReactNode	–
`voice` Shown in voice mode. The footer hides in voice mode.	ReactNode	–

Contributing Agent Steps