beUI Pro

Guide · 8 min read · Updated

How to Build an AI Chat Interface in React

An AI chat interface looks simple, but most of the product lives in the details around the message list: how people write prompts, attach context, choose a model, see sources, answer follow-up questions, and understand what a request costs.

This guide builds those pieces in order. Pair them with any model provider or the Vercel AI SDK for streaming; the blocks handle the interface states.

What you will build

  • A prompt composer with attachments, model choice, and send or stop states
  • A sources panel that shows what the answer is based on
  • Clarifying questions the assistant can ask mid-conversation
  • Voice mode and usage indicators for paid AI products

Step 1

Build the composer first

The composer is where users spend their effort, so it deserves the most care. It needs a growing text area, attachments, a model or mode selector, and a primary button that switches between send, stop, and voice.

Handle the async states explicitly: disabled while empty, a stop action while streaming, and an error state that keeps the user's text so they can retry.

Step 2

Show what answers are based on

For research or knowledge products, trust depends on sources. Let users pick which sources the assistant can use, search them, and see the selected context as removable chips before sending.

Step 3

Let the assistant ask clarifying questions

Some requests are ambiguous. Instead of guessing, an agent can pause and ask a few structured questions with suggested answers. Support single and multiple choice, free text, keyboard shortcuts, and skipping.

Step 4

Add voice mode

Voice is now an expected mode for assistants. Show a clear state for listening, thinking, and speaking, and keep the control in a consistent place so users can switch between typing and talking without hunting for it.

Step 5

Make usage and limits visible

Paid AI products need to show what requests cost and how much budget is left. Break usage down by category or workflow, and warn before a limit is reached rather than after.

Install the blocks from this guide

With a beUI Pro token configured, each command adds the block's source to your project through the shadcn CLI. You own the files and can edit them like any other component.

ShellTerminal
npx shadcn add @beui-pro/agent-chat-pill
npx shadcn add @beui-pro/agent-chat-creative
npx shadcn add @beui-pro/questionnaire-guided-questions
npx shadcn add @beui-pro/voice-agent-dock
npx shadcn add @beui-pro/credit-usage
Set up the registrySee plans

Launch checklist

  • The composer keeps text after an error
  • Send switches to stop while a response streams
  • Attachments and selected sources are visible before sending
  • Clarifying questions work with the keyboard
  • Voice states are distinguishable without color alone
  • Users see remaining usage before they hit a limit

Frequently asked questions

Do these blocks include an AI backend?
No. They are interface blocks. Connect them to your model provider, the Vercel AI SDK, or your own API, and pass streaming text and states into the components.
Can I use them with the Vercel AI SDK useChat hook?
Yes. Map the hook's input, status, and stop function to the composer's props, and render the messages with your own message list.
How should an AI chat handle errors?
Keep the user's prompt, show a short message with a retry action, and avoid clearing attachments. Rate-limit and quota errors should explain when the user can try again.
Is there a full AI landing page template too?
Yes. beUI Pro includes AI-focused landing and workspace templates alongside the individual AI interface blocks.

Keep building

CollectionAI chat interfacesCompose an AI chat interface with React inputs, voice UI, artifacts, research sources, and usage controls. Explore editable blocks and live previews.GuideHow to Build a React Dashboard in Next.jsBuild a React dashboard in Next.js: app shell and sidebar, KPI cards, charts, data tables, notifications, and empty states, using installable animated blocks.GuideHow to Build an Animated SaaS Landing Page in Next.jsA step-by-step guide to structuring, building, and animating a SaaS landing page in Next.js with React blocks, Tailwind CSS, and Motion.GuideHow to Build a User Onboarding Flow in ReactBuild a React onboarding flow from sign-up to first value: auth screens, step forms, team invites, setup checklists, and empty states, with installable blocks.