"AI components for React" can mean three different things: a styled prompt box, a message runtime that understands streaming and tools, or a complete product surface. Choosing the wrong layer is how a small assistant feature turns into a framework migration.
The useful way to choose is by responsibility. Start with the interface state you need, then decide whether you need a component, a runtime, or both.
The six components an AI surface actually needs
A composer. It handles a growing prompt, keyboard submission, attachments, a model or mode picker, and the switch from Send to Stop. v0 AI Chat by kokonutd is a compact assembled example; AI Chat Input by preetsuthar17 is easier to place inside an existing shell.
A transcript. A normal list is not enough once the last item changes several times a second. Chat Message List by jakobhoeg gives you the scrolling structure, but your application still has to preserve scroll position when the reader moves away from the newest answer.
Tool-call rows. Search, code execution, file reads, and API calls need a visible pending state, a result, and an error that belongs to the tool rather than to the whole answer. This is where a generic chat bubble stops being an AI component.
Citations. A citation is part of the answer, not decoration after it. Give it a stable link, a readable source label, and a place that does not move when more tokens arrive.
Artifacts. Generated code, images, tables, and documents need their own surface with actions that match the output. AI Chat Image Generation by gonzalo chalé shows why an image result needs a different layout from prose.
Voice controls. Voice adds recording, listening, speaking, interruption, and permission states. AI Assistant Interface by Rafael Porto is useful as a visual reference, but microphone permission and audio cancellation still live outside the component.
Component, runtime, or kit
A presentational component owns markup and local interaction. It is the right choice when AI is one feature inside a larger product and the surface should use the product's existing state, routing, and design tokens.
A message runtime owns the conversation model: message ids, partial assistant output, tool parts, attachments, cancellation, and regeneration. Use one when chat is a primary surface and those states would otherwise be rebuilt in several components.
A kit combines the two. It gets a coherent interface running quickly, but its message shape and composition rules become application architecture. That is a good trade when the AI surface is the product and an expensive one when it is a panel inside an existing dashboard.
| Layer | It should own | It should not own |
|---|---|---|
| React component | Markup, styling, focus, local controls | Provider calls, secrets, persistence |
| Message runtime | Streaming state, message parts, tool lifecycle | Product layout and business permissions |
| Application backend | Authentication, models, tools, storage, limits | Visual state that belongs in the browser |
The states to design before the happy path
The completed answer is the easiest state and the least useful test. Design these first:
Waiting for the first token. Keep the user's message visible and put the pending state where the assistant answer will appear. An overlay makes the whole product look blocked.
Streaming while the reader scrolls. Follow the bottom only while the reader is already there. Once they scroll up, stop moving the viewport and show a jump-to-latest action.
Stopped. Keep the partial answer and mark it as stopped. A person often presses Stop because the useful part has already arrived.
Tool failed. The failed search or API call should be retryable without discarding the rest of the answer.
Connection failed. Keep the user's prompt in the transcript and preserve the draft or attachment state. Vanishing input is worse than an explicit error.
Refused. A refusal is a valid model outcome, not a red application failure with a generic Retry button.
How to choose a React AI component
Read the component's boundary before its screenshot.
- Check whether it accepts your message data or brings its own store.
- Check whether streaming updates only the active message or re-renders the whole transcript.
- Check keyboard composition, focus-visible states, and a sentence-level live-region strategy.
- Check how it behaves without hover and with reduced motion.
- Check whether tool calls, attachments, and citations are real data slots or hardcoded demo rows.
- Check the files and dependencies the install writes before keeping them.
That last step matters with copy-owned components. The benefit is that the source becomes yours; the cost is that upgrades and accessibility fixes become yours too.
Where to start
| Source | Best when | Trade-off |
|---|---|---|
| AI SDK and AI Elements | You want streaming, structured message parts, and React UI built around the same model | The message model becomes a stack choice |
| assistant-ui | Chat is a primary product surface and you want a ready conversation runtime | It owns more of the interaction architecture |
| shadcn/ui | You need the primitive layer underneath the AI surface | It deliberately has no model runtime |
| 21st | You want to compare and install individual React AI components with source | Components are presentational, so preview and review each one |
If the product is mostly chat, start from a runtime and adapt the visuals. If AI is one feature inside an existing product, keep the product's state model and take the individual components you need.
Taking one
Every component page has a live preview and the source. Installing goes through the shadcn CLI against the 21st registry:
The key comes from your 21st account and installs need a membership. The 21st MCP can search and install the same catalogue from Claude, Cursor, or Codex.
Frequently asked
- What are AI components for React?
- They are interface pieces shaped around model interactions: prompt composers, streaming transcripts, tool-call rows, citations, generated artifacts, voice controls, and the loading, stopped, refused, and failed states around them. They do not replace the model runtime or API call.
- Do React AI components include the backend?
- Usually not. A catalogue component gives you markup, styling, and local interaction. A runtime library can manage messages and streaming. Authentication, rate limits, persistence, tool execution, and provider calls still belong to the application backend.
- Should I start with a full AI UI kit or individual components?
- Use a kit when chat is the product and you want one message model across the composer, transcript, tools, and attachments. Use individual components when AI is one feature inside an existing product and the new surface has to inherit that product's layout and tokens.
- What should I test before shipping a React AI interface?
- Test slow first-token latency, cancellation, a dropped connection, long code blocks, attachments, keyboard-only input, screen-reader announcements, and a reader scrolling upward while a response streams. Those states expose more problems than the completed-answer screenshot.