Does Features AI Demo 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.

Features AI Demo

Try-it-now block: visitors pick a prompt and watch the product stream its answer.

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

About Features AI Demo

Features AI Demo lets visitors try your product without signing up. They pick a prompt chip, the request appears in an input, and the answer streams in below like the real thing.

It is a full-width features 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 Features AI Demo

AI writing and summarising tools.
Assistants and copilots.
Prompt and image tools.
Any AI feature that is easier shown than described.

How it is built

Prompts are label, prompt and output, the answer uses Streaming Text and restarts whenever a new chip is picked, and it keeps line breaks for lists.

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

Goes well with Features AI Demo

Features AI Demo is part of 3 full templates, so you can see it in a finished page.

Quill template: Ask your data, get answers.
Lattice template: Generate, keep, sell.
Tessera template: Every meeting, already written up.
Features Grid: A React features grid of six cards with a pointer spotlight and staggered reveal
Features Bento: A React bento features section where every tile is a working component
Features Alternating: A free React alternating features section: image and text rows that slide in
Features Tabs: React feature tabs that auto-advance with a progress bar and swap visuals
Streaming Text: React streaming text: model output resolves word by word through a blur

Install Features AI Demo

npx shadcn@latest add @charcoal/features-ai-demo

Features AI Demo 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 Features AI Demo 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

Streaming Text: Model output that resolves word by word through a soft blur; works with a growing string from a stream.

Features AI Demo as Markdown