# AI side panel

An assistant docked beside a page that streams answers, pulls context chips from it, and applies changes with a highlight.

- ID: `ai-side-panel`
- Import: `animui/ai-side-panel`
- Category: block
- Runtime exports: `AiSidePanel`
- Declaration: `types/pro/ai-side-panel.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: ai-chat, ai-composer, agent-run

```tsx
import { AiSidePanel } from 'animui/ai-side-panel';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info ai-side-panel` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface AiSidePanelProps {
  defaultPage?: string | number | boolean | ReactNode;
  onPageChange?: () => void;
  onAsk?: () => void;
  prompts?: string | number | boolean | ReactNode;
  defaultMode?: string | number | boolean | ReactNode;
  className?: string;
}

export declare const AiSidePanel: ComponentType<AiSidePanelProps>;

export default AiSidePanel;
```