AI Assistant Panel

A 420 px wide slide-over Sheet panel for embedding an AI chat assistant alongside any page content. Supports a configurable title, a scrollable content area, an optional footer slot, and both left and right anchor positions.

import { AIAssistantPanel } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add ai-assistant-panel

Import

import.tsx

import { AIAssistantPanel } from "@aetherstack/blocks"

Usage

ai-assistant-panel.tsx

"use client"

import * as React from "react"
import { AIAssistantPanel } from "@aetherstack/blocks"
import { Button } from "@aetherstack/ui"
import { PromptInput } from "@aetherstack/ui"

export function PageWithAssistant() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open AI Assistant</Button>

      <AIAssistantPanel
        open={open}
        onOpenChange={setOpen}
        title="AI Assistant"
        footer={
          <PromptInput
            value=""
            onChange={() => {}}
            onSubmit={() => {}}
            placeholder="Ask me anything…"
          />
        }
      >
        {/* render conversation thread here */}
      </AIAssistantPanel>
    </>
  )
}

Props

Prop	Type	Default	Description
open	boolean	—	Controlled open state. Omit to use uncontrolled.
onOpenChange	(open: boolean) => void	—	Called when the Sheet open state changes.
title	string	"AI Assistant"	Heading displayed in the panel header.
children	ReactNode	—	Scrollable body content — typically a conversation thread.
footer	ReactNode	—	Fixed footer slot — typically a prompt input.
side	"right" \| "left"	"right"	Which edge of the viewport the panel slides in from.
className	string	—	Additional classes on the SheetContent element.

* Required

Accessibility

→Built on the Sheet primitive which uses role='dialog' with an aria-labelledby pointing to the panel title.
→Focus is trapped inside the panel while it is open.
→Pressing Escape closes the panel.
→The close button in the header is keyboard-focusable.