HomeDocsComponentsBlocksChartsThemes
Introduction
  • Introduction
  • Installation
  • Themes
  • llms.txt
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Amount
  • Aspect Ratio
  • Audio Player
  • Avatar
  • Avatar Upload
  • Badge
  • Banner
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Block
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy Button
  • Countdown
  • Data Grid
  • Data Table
  • Date Picker
  • Date Range Picker
  • Description List
  • Device Mockup
  • Dialog
  • Direction
  • Dot Loader
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • File Upload
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kanban
  • Kbd
  • Label
  • Menubar
  • Meter
  • Multi Select
  • Native Select
  • Navigation Menu
  • Number Field
  • Pagination
  • Password Strength
  • Phone Input
  • Popover
  • Progress
  • Progress Circle
  • Radio Group
  • Rating
  • Resizable
  • Responsive Dialog
  • Rich Text Editor
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Spinner
  • Stat
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Terminal
  • Textarea
  • Time Field
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
  • Typography
  • Video Player
  • Window Mockup
AI
  • Message Scroller
  • Message
  • Bubble
  • Marker
  • Attachment
  • Questionnaire
  • Composer
  • Reasoning
  • Tool Call
  • Approval Card
  • Citations
Blocks
  • Airtable
  • Airtable Kanban
  • ClickUp List
  • ClickUp Kanban
  • Repeatable Group
  • Command Palette
  • Sign In and Sign Up
  • Availability Scheduler
  • AI Chat
  • Action Bar
  • Notion
  • Banking
  • Lineup Builder
  • Sports Score
  • Strava
  • Sheets
  • Notices
  • Settings
  • Billing
Utilities
  • motion
  • sounds
  • scroll-fade
  • shimmer
Another UI. Built on shadcn/ui with Phosphor icons.

AI Chat

PreviousNext

A full chat app with a chat list, reasoning, tool calls, approvals, cited answers and the Composer, built from Another UI components.

Today

Yesterday

Last 7 days

Sonnet 5.5
Which invoices are overdue right now?

Three invoices are overdue for $5,225 in total. Northwind Traders is the largest at $2,400, now 12 days late. Harbour Coffee owes $1,825 and Fraser Valley Rentals owes $1,000. No card payouts came in since Monday, so a reminder today makes sense. Want me to draft one?

Source 1: Open invoices, OctoberSource 2: INV-1031 Northwind Traders.pdfSource 3: Card payouts, last 7 days
Invoices assistant
1,240 of 2,000 credits left
Enter to send, Shift Enter for a new line

Installation#

pnpm dlx shadcn@latest add https://anotherui.dev/r/ai-chat.json

Features#

  • Chat list. New chat, search, and chats grouped by Pinned, Today, Yesterday and Last 7 days. Each chat has a menu to rename, pin or delete it, and a deleted chat comes back with Undo. On phones the list opens in a sheet from the header.
  • Header. The chat title renames in place, the current model shows beside it, and Share copies a link.
  • Empty state. A new chat offers four suggestions that send a prompt in one tap.
  • Reasoning. Each turn opens with a thinking trace that streams its steps, counts the time and folds away when it finishes.
  • Tool calls. Tools run one after another as cards you can open to see the input and output.
  • Approvals. A risky action, such as a refund, waits on an Approval Card. The turn only carries on once someone approves, and a denial gets the five second Undo before the answer moves on.
  • Streaming answers. The answer streams in word by word with a soft blur, numbered Citations open their source, and a sources list sits below.
  • Message actions. Copy, Regenerate, and thumbs up or down under each answer. They show on hover, and stay visible on touch screens.
  • Stop. While a turn runs, Send turns into Stop and the turn ends where it is.
  • Scroll. The conversation follows new text while you are at the bottom. Scroll up and a button appears to jump back down.
  • Sounds. Sending, switching chats, pinning, copying, feedback and approvals play Cuelume cues. Tool errors and disclosures play theirs through the components.

Usage#

import { AIChat, type Chat } from "@/components/blocks/ai-chat"
 
const chats: Chat[] = [
  {
    id: "c1",
    title: "Overdue invoices",
    group: "Today",
    messages: [],
  },
]
 
<AIChat initialChats={chats} />

The demo plays scripted turns so it works without a network. To connect a model, replace the play function inside the block with your own stream and write each part into the assistant turn as it arrives: reasoning, tools, approval, then text with shown counting the words that have streamed in.

Parts#

  • AIChat. The frame, chat list, header, conversation and Composer. Takes initialChats and className.
  • Chat. id, title, group ("Today", "Yesterday" or "Last 7 days"), pinned and messages.
  • ChatMessage. A user message with text, or an assistant message with the prompt it answers and its turn.
  • AssistantTurn. reasoning, tools, approval, text, shown, sources, done, stopped and feedback.
  • Built from. Composer, Reasoning, Tool Call, Approval Card, Citations, Message Scroller, Message, Bubble, Sheet, Dropdown Menu, Empty, Input Group, Tooltip and Badge.
Availability SchedulerAction Bar

On This Page

InstallationFeaturesUsageParts