Does it call a real model?

No. It replays the turns you pass in, so it is fast, free and predictable on a marketing page.

Does Hero Chat work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Hero Chat

Split hero with an assistant conversation that streams its own answers, turn by turn.

Type: Hero section
Styles: Dark, Futuristic
Licence: Charcoal UI Pro

About Hero Chat

Hero Chat sells an AI product by letting visitors watch it work. Questions appear, the assistant shows a typing indicator, then streams a real answer word by word and moves to the next question on its own. Prompt chips let visitors jump to any turn.

It is a full-width hero section for React and Tailwind CSS 4, in a dark and futuristic style. Preview it at any width above, then install it with one command.

When to use Hero Chat

AI analysts, copilots and agents.
Customer support automation.
Internal knowledge assistants.
Any product where the demo is the pitch.

How it is built

Turns are plain data, the answer uses Streaming Text and Typing Indicator, and the conversation auto-advances only after each answer finishes streaming. Buttons, status line and note are props.

It is composed from Button, Streaming Text, Typing Indicator, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Hero Chat

Hero Chat is part of 2 full templates, so you can see it in a finished page.

Quill template: Ask your data, get answers.
Halcyon template: Support that answers in seconds.
Hero Ember: A dark React hero section with drifting embers, an announcement pill and two CTAs
Hero Split: A split React hero: copy on the left, a live product window with stats and a chart
Hero Rotating: A React hero with a rotating headline word, email capture and avatar proof
Hero Terminal: A developer React hero with light beams on a grid and a typing terminal
Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Streaming Text: React streaming text: model output resolves word by word through a blur
Typing Indicator: A React typing indicator: a bubble with rippling dots that tells screen readers who is typing

Install Hero Chat

npx shadcn@latest add @charcoal/hero-chat

Hero Chat is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does it call a real model?: No. It replays the turns you pass in, so it is fast, free and predictable on a marketing page.
Does Hero Chat work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
Streaming Text: Model output that resolves word by word through a soft blur; works with a growing string from a stream.
Typing Indicator: A chat bubble that pops in with three dots rippling in a wave, and tells screen readers who is typing.

Hero Chat as Markdown