affectUI › Guides

React components for AI chat interfaces

A good AI chat interface needs more than a message list: a composer with attachments and model choice, an answer that streams with sources, a visible thinking state, readable tool calls, and actions under every reply. affectUI has a React component for each of these – one file each, no dependencies, installable with the shadcn CLI.

The parts of an AI chat UI

Most chat UIs start as a text field and a list of bubbles. What makes an AI product feel finished are the states in between: the moment the model is thinking, the moment it calls a tool, the moment a long answer streams in, and what people can do with an answer afterwards.

  • Composer – multi-line input, attachments, model picker, a clear send and stop button
  • Streaming answer – text that arrives in pieces without jumping, with sources people can check
  • Thinking state – a calm sign that the model is working, ideally with what it is doing
  • Tool calls – which tool ran, with what input, how long it took and what came back
  • Message actions – copy, regenerate, feedback and read aloud under each reply
  • Empty state – prompt ideas, so the first message isn't a blank page

Composer

The composer is where people spend the most time. It should grow with the text, keep the send button reachable, and let people switch models or modes without leaving the field. Enter sends, Shift+Enter adds a line. affectUI's Chat Composer brings a model picker, voice input and app connections; the Model Picker shows speed, quality and cost per model, and the Prompt Library keeps reusable prompts with variables.

  • Chat Composer – Prompt composer with model picker, voice input, app connections and approval request
  • Model Picker – The model menu of an AI chat – point at a model and its speed, quality and cost bars fill, switch on extended thinking and its effort unfolds, while the tray rolls the first-token time and price
  • Prompt Library – Saved prompt templates with variables – type straight into the sentence, watch the finished prompt assemble below, and use it once every variable is filled

Answers with sources

Long answers should stream into a layout that doesn't shift, so people can start reading before the end arrives. When the model used sources – documents, web pages, tools – show them as small cards next to the answer and link each claim to its source with a numbered citation.

  • AI Answer – Streamed answer with source cards, citation chips that preview their source, copy, regenerate, feedback and follow-ups
  • Cited Answer – An AI answer wired to its sources – point at a citation to light up its sentence and source, click to unfold the quoted passage with the matching words marked

Thinking and progress

A spinner says nothing. A thinking state can say what the model is doing – searching, reading, comparing – and how long it has been at it. For short waits a small loader is enough; for longer reasoning, a panel with the steps keeps people from wondering whether anything is happening.

  • Thinking State – AI working panel with a live timer, searched sources and thinking steps that appear one by one
  • Thinking Loader – A small working pill for AI replies – an eight-ray spinner and a shimmering label that rolls through phases and settles on a check
  • Context Window – What fills the model's context, as a field of cells – hover a part to light it up, remove files, and compact the conversation while its cells shimmer and clear

Tool calls

When an agent calls tools, show each call in one line – name, status, time – and let people open it to see the arguments and the result. Failed calls need a visible error and a retry, not a silent gap in the conversation.

  • Tool Call Card – An agent's tool call in one line – live timer, status and summary, folds open to highlighted arguments and result with copy, retry on errors and a group that sums them up

Actions under every reply

Copy, regenerate, thumbs up or down and read aloud belong under each answer – quiet until people need them. Regenerating should keep the earlier versions so people can switch back.

  • Message Actions – The quiet bar under an AI message – copy turns into a check, regenerate spins and unfolds a version switcher, thumbs pop and ask why, read aloud becomes a tiny equalizer

Install

Every component is a single .tsx file with its styles inside – no Tailwind, no animation library. Add it with the shadcn CLI and import it from components/ui. The components are UI only and take plain props, so you can connect any backend – the Vercel AI SDK, LangChain or your own API.

npx shadcn@latest add https://www.affectui.com/r/message-actions.json

Questions

Do these components need Tailwind CSS?

No. Each affectUI component carries its own styles and only needs React 19. It works in projects with or without Tailwind.

Can I use them with the Vercel AI SDK?

Yes. The components only render UI and take props such as the message text, status and sources, so you pass in whatever your AI SDK, LangChain chain or own API returns.

Are they accessible?

Status changes such as thinking or writing are announced to screen readers, every action is a real button with a label, focus is visible, and motion respects the reduced-motion setting.

Which ones are free?

Message Actions, Thinking Loader and Tool Call Card are among the free, MIT-licensed components. Chat Composer, AI Answer and Thinking State are part of affectUI Pro.

Updated 2026-10-29