AI Chat Interface

A conversational FAQ display styled like a chat interface: each question appears as a right-aligned user bubble and each answer as a left-aligned assistant bubble with a small bot icon, all statically visible with no real input.

By Staaarter Team

FAQ

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/ai-chat-interface.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/faq/faq37.tsx instead.

Usage

The file also exports faq37Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Faq37, faq37Demo } from "@/components/blocks/faq/faq37";

export default function Page() {
  return <Faq37 {...faq37Demo} />;
}

Props

Prop	Type	Default	Description
badge	string	none	Small label shown above the heading.
heading	string	none	Section heading.
description	string	none	Supporting copy under the heading.
assistantName	string	"Assistant"	Name label shown above each assistant reply.
items	ChatFaqItem[]	none	List of question/answer pairs rendered as chat bubbles.
className	string	none	Extra classes for the outer section element.

Types

interface ChatFaqItem {
  question: string;
  answer: string;
}

Behavior notes

Plain server component; this is a static transcript, not a real chat, there's no input field and no message can be sent.
User bubbles are right-aligned with bg-primary/text-primary-foreground, assistant bubbles are left-aligned with bg-muted and a small Bot icon avatar, all always visible at once.

More FAQ Blocks

View all →

collapsible-accordion

Collapsible Accordion

Stacked cards with expandable sections, for full-length answers in a compact format.

open-list-layout

Open List Layout

Questions with answers displayed directly below in a simple always-open list.

three-column-grid

Three Column Grid

Q&A pairs arranged in a responsive grid layout, always open.

tabbed-categories

Tabbed Categories

Sidebar navigation with category tabs and an accordion of that category's questions.

searchable-accordion

Searchable Accordion

Search input that filters accordion items in real-time by question and answer text.

grouped-sections

Grouped Sections

FAQs organized into titled sections, each with its own independent accordion below it.