shadcn.io
ComponentsTemplateTheme GeneratorEasingsColorsBlocksAwesome
Ai

AI Conversation

A conversation is a component that wraps messages and automatically scrolls to the bottom. Also includes a scroll button that appears when not at the bottom.

Powered by

use-stick-to-bottom

use-stick-to-bottom

Installation

shadcn
npx shadcn@latest add https://www.shadcn.io/registry/ai.json

Features

  • Automatic scrolling to the bottom when new messages are added
  • Smooth scrolling behavior with configurable animation
  • Scroll button that appears when not at the bottom
  • Responsive design with customizable padding and spacing
  • Flexible content layout with consistent message spacing
  • Accessible with proper ARIA roles for screen readers
  • Customizable styling through className prop
  • Support for any number of child message components

AI Branch

Manages multiple versions of AI messages, allowing users to navigate between different response branches.

AI Input

An input is a component that allows a user to send a message to a large language model.

On this page

Installation
Features