AI Assistant Chat

A premium, interactive LLM chat interface featuring conversation history management, real-time typing indicators, editable chat titles, and a full prompt composer — a + menu for files and @Mention tools, a rocket upload indicator, a model picker, a Faster ↔ Smarter effort slider, and voice dictation with a live waveform.

Every preview is live — send a prompt to see the simulated stream, rename a thread, or hit New Chat. Try the composer too: press + and pick Photos & files (or drop a file on the bar) and watch the rocket carry it to 100%, pick Documents or Mail to drop an @Documents mention into the prompt, switch the model, slide effort up to Max for the glowing prompt bar, or tap the mic and talk. variant changes the shell only — compact also drops the history sidebar — and everything else behaves identically in all four.

AI assistant

PasschatHistory: as { id, title, date }[] — the date string is what the sidebar groups threads by.
initialMessages: seeds the conversation with { id, role, content, time }[], where role is "ai" or "user".
variant"default": is the default shell — a thread sidebar beside the conversation, collapsing on narrow screens.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Two builds, same props and file — install one.

Install AI Chat

npx shadcn@latest add @algorize-ui/ai-chat

components/custom/blocks/Ai-chat.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs these for you. Run them yourself only if you are adding AI Chat to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

ui-liquid-glass is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add @algorize-ui/ui-liquid-glass

gsap is an npm package.

npm install gsap

Examples

Compact

Setvariant"compact": for no history sidebar. While nothing has been said it is a hero — heroTitle over the prompt bar, no header, no messages. The first message you send swaps it for the conversation view, and New chat in that view brings the hero back.
heroTitle: and heroSubtitle set the copy above the bar. Seed initialMessages instead and it opens on the conversation directly.
showSidebarfalse: does the same to any other variant, so a glass panel can open on its hero too.

Wired to your backend

PassuploadFile: as (file, onProgress, signal) => Promise<void> to replace the simulated upload — the rocket follows whatever percentage you report, and the chip turns green when the promise resolves or red when it rejects.
onSend: receives { content, attachments, model, effort } every time a prompt goes out, so the endpoint gets the model id, the effort id and the finished uploads in one call.
models: fills the picker with your own { id, name, description?, badge?, pro?, premium? }[]; defaultModelId chooses the initial one.

Minimal

Setvariant"minimal": to strip the borders, shadows and dividers so the assistant blends into a surrounding surface.

Glass

Setvariant"glass": for translucent panels with backdrop blur — it needs a colourful backdrop behind it to read.
color"#8b5cf6": tints the accents so they hold up against your own backdrop.

Liquid Glass

Setvariant"liquid-glass": for authentic liquid glass refraction using SVG displacement mapping, multi-layer specular highlights, and fluid reflections.
color"#8b5cf6": tints the accents so they hold up against your own backdrop.

The composer

Everything under the prompt is built in and works without any props:

The + menu — six rows by default: Photos & files opens the file picker; Web search, Sales data, Documents, Mail and Calendar each write @Label into the prompt at the caret (once — picking it again just refocuses). Supply your own rows with tools; the ones a prompt names arrive in onSend as tools, in the order they appear.
Attachments — from the + menu, and files can also be dropped anywhere on the composer. Each file becomes a chip with a rocket that launches from the left, rides the progress track with a flickering exhaust, then blasts off the end as a check bursts in at 100%. Images show a thumbnail; the send button waits until every upload has landed. Uploads are simulated until you pass uploadFile.
Model picker — a popover listing models (four demo models by default). The chosen model is stamped on each reply's timestamp. A model with pro: true wears a blue Pro badge; switching to it turns the pill blue as a bolt strikes in, the pill flickers and throws off sparks, and the prompt bar's edge draws itself out from the centre, flickers like a live wire and glows from within while a scan line rises through it. A model with premium: true wears a gold Premium badge after its name; switching to it turns the pill gold with a crown, pings a ring and a glint across the pill, and sends two gold beams once around the prompt bar's edge while a sheen crosses it — a single play, unlike Max effort's standing glow.
Effort — a Faster ↔ Smarter slider with one stop per level. At the highest level the pill switches to a sparkle and the prompt bar glows with a scatter of twinkling specks. The simulated reply also takes a little longer the higher you go.
Dictation — the mic opens the microphone and drives a 22-bar waveform from the live audio level, while the Web Speech API writes what you say into the prompt. Without mic permission the wave runs an idle animation; without speech recognition the wave still shows so the button visibly responds. Tap again (or press Escape) to stop.

Features

Explore the Ai-Chat interface features, including message streaming, typing indicators, and seamless integration with AI models.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Prop	Type	Default	Description
`chatHistory`	`ChatThread[]`	`[]`	Array of objects containing `id`, `title`, and string `date` group ("Today", etc) for the sidebar.
`initialMessages`	`Message[]`	`[]`	Array of initial message objects (`id`, `role`, `content`, `time`) to populate the active chat window. Optional `attachments`, `model` and `effort` render file chips in the bubble and a model tag on the timestamp.
`variant`	`"default" \| "minimal" \| "glass" \| "compact" \| "liquid-glass"`	`"default"`	Applies overarching structural and aesthetic layout styling. `"compact"` is the default shell without the history sidebar, and `"liquid-glass"` delivers high-refraction specular liquid glass physics.
`showSidebar`	`boolean`	`variant !== "compact"`	Renders the thread history beside the conversation. Pass `false` to remove it from any variant; an empty thread then shows the hero, and a `New chat` button appears in the conversation header.
`heroTitle`	`string`	`"What can I help you with?"`	Title above the prompt bar in the hero state (sidebar-less, nothing said yet).
`heroSubtitle`	`string`	—	Optional line under the hero title.
`color`	`"primary" \| "indigo" \| "rose" \| "emerald" \| "zinc" \| string`	`"primary"`	Applies global color themes to the active states, buttons, gradients, and send icons. `"primary"` follows your theme tokens; a hex string (e.g. `"#8b5cf6"`) is injected as CSS variables. Unrecognised names fall back to `"primary"`.
`models`	`ChatModel[]`	four sample models	Models offered in the composer's picker: `{ id, name, description?, badge?, pro?, premium? }`. `pro` adds a blue Pro badge and `premium` a gold Premium one; each plays its own one-off flourish when the model is chosen (`premium` wins if both are set).
`defaultModelId`	`string`	first model	Which model is selected on mount.
`onModelChange`	`(model: ChatModel) => void`	—	Fires when a model is picked.
`efforts`	`EffortOption[]`	Low, Medium, High, Max	Stops on the effort slider: `{ id, label, description?, level }` with `level` from 1 upward. The highest level lights the prompt bar.
`defaultEffort`	`"low" \| "medium" \| "high" \| "max" \| string`	`"medium"`	Which effort is selected on mount.
`onEffortChange`	`(effort: EffortOption) => void`	—	Fires as the slider moves.
`onSend`	`(payload: SendPayload) => void`	—	Called with `{ content, attachments, model, effort, tools }` whenever a prompt is sent — the hook for your own endpoint.
`uploadFile`	`UploadHandler`	simulated	`(file, onProgress, signal) => Promise<void>`. Report 0–100 through `onProgress`; resolve when stored, reject to mark the chip failed. `signal` aborts when the chip is removed mid-upload.
`tools`	`ComposerTool[]`	a sample upload row and mentions	Rows of the + menu: `{ id, label, description?, icon?, action? }`. `action: "upload"` opens the picker; the default, `"mention"`, inserts `@Label` into the prompt.
`accept`	`string`	any file	Forwarded to the file input, e.g. `"image/*,.pdf"`.
`maxFiles`	`number`	`6`	Maximum attachments on one message; the paperclip disables at the cap.