AI Chat

Blocks & Slices

A presentational AI-chat block: a scrollable user/assistant transcript with avatars and timestamps, an animated typing-dots indicator, and an auto-growing composer that streams a canned reply in character-chunks (Enter sends, Shift+Enter newline). Respects prefers-reduced-motion by dropping the dot bounce and caret and appending replies whole with no character stream.

Inspired by Cult Pro — AI chat interfaces (pattern, UI only) — independently built, not affiliated. Attribution policy

Parable AI

Online

Parable AI

Hi! I'm your Parable assistant. Ask me anything about installing or composing registry components.

You

How do I drop a component into my app?

Parable AI

Copy the single file into your ui/ folder, keep the `cn` import, and you're set — every component is self-contained. Want the exact path?

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/ai-chat.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/ai-chat.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="w-full max-w-sm mx-auto"><AiChat className="h-[26rem]" title="Parable AI" placeholder="Ask about a component…" /></div>

Props

AiChatProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">

Prop	Type	Default	Description
initialMessages	AiChatMessage[]	—	Seed transcript. Defaults to a short populated conversation.
onSend	(text: string) => Promise<string> \| string	—	Resolve a reply for the user's text. May be sync or async; the returned string is streamed into an assistant bubble. Defaults to a canned echo so the block feels alive with no backend.
title	string	"Assistant"	Heading shown in the header.
placeholder	string	"Send a message…"	Composer placeholder.
className	string	—	Extra classes on the outer card.

npm dependencies

motion
lucide-react