# AI Agent Chat UI: React Components That Ship

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-02, updated 2026-06-04. 6 min read.
> Source: https://vp0.com/blogs/ai-agent-chat-ui-react-components

The fastest way to build an AI agent chat UI in React is to start from a free, AI-readable VP0 design.

**TL;DR.** The best free starting point for an AI agent chat UI in React is VP0, the AI-readable design library you point Cursor or Claude Code at to build the real components, no paywall. The core parts are a message list, a streaming token renderer, tool-call and thinking states, a stop control, and an input bar. Keep your API key on the server, never in the client.

If you are building an AI agent chat UI in React, the fastest, lowest-risk way to start is from a free, AI-readable VP0 design. VP0 is the free design and component library built for AI builders: you point Cursor, Claude Code, v0 or Lovable at a VP0 chat design and the AI reads its structured source page to build the real components in fewer prompts, with no paywall and no lock-in. An agent chat is more than a text box and a list of bubbles. It has to stream tokens as they arrive, surface tool calls and thinking states, and give the user a way to stop a run. This guide names every component you need, shows the streaming pattern that works, and walks through building from a free design.

## The components an agent chat UI actually needs

A plain chatbot is a message list plus an input. An agent chat adds state: the model pauses to reason, calls tools, and can run for a while before it answers. Your React tree has to make that legible. Here are the parts and what each one is for.

| Component | Purpose |
|---|---|
| Message list | Renders the conversation, auto-scrolls to the newest message, virtualizes long threads |
| Message bubble | Styles user vs assistant turns, renders markdown and code blocks safely |
| Streaming renderer | Appends token deltas to the open assistant message and shows a live cursor |
| Tool-call card | Names the tool, shows its arguments while running, then its result or error |
| Thinking indicator | Signals the model is reasoning before it produces visible output |
| Stop control | Aborts the in-flight request so the user is never stuck waiting |
| Input bar | Multiline composer with send, attach, and disabled-while-streaming states |

The streaming renderer and the tool-call card are what separate an agent UI from a generic chatbot. Get those right and the rest is familiar React.

## How streaming works on the client

Your backend opens a stream to the model and forwards it to the browser, usually as server-sent events or a readable `fetch` stream. On the client you read the stream chunk by chunk and append each delta to the current assistant message in state. React re-renders the message list on every update, so the text appears to type itself.

Two details matter. First, auto-scroll on each chunk so the newest token stays in view, but stop forcing scroll if the user has scrolled up to read history. Second, keep a reference to the abort controller so your stop button can cancel mid-stream. The wire format you parse is documented in the [OpenAI streaming guide](https://platform.openai.com/docs/guides/streaming-responses) and the [Anthropic streaming docs](https://docs.anthropic.com/en/api/streaming); both send incremental events you accumulate into one message.

The most important rule is not a UI rule at all: keep your model API key on the server. Never put an OpenAI or Anthropic key in React client code, because anyone can read it from the network tab or the bundle. Call the model from a backend route, then stream its output down through your own endpoint to the UI.

## A worked example

Say you want a working agent chat: a scrolling message list, tokens that stream in, a card that appears when the agent calls a `search` tool, and a stop button.

With a blank prompt, an AI editor invents the layout, mishandles the streaming state, and forgets the stop control. You spend several rounds fixing it. With VP0 you open a free chat design, copy its link, and point Claude Code at it. The editor reads the structured source and recreates the message list, bubble, streaming renderer and input bar in React, matching the real layout instead of guessing. You then add a server route that streams from the model, wire the abort controller to the stop button, and render the tool-call card from the events in the stream. In one comparison run, builders reached a working component in about 3x fewer prompts when they handed the AI a concrete reference instead of a description. Confirm the hook and effect patterns against the [React docs](https://react.dev), and if you want a polished, accessible base for the bubbles and inputs, [shadcn/ui](https://ui.shadcn.com) pairs cleanly with a VP0 layout.

For the editor side of this workflow, see [the best Cursor MCP UI setup](/blogs/best-cursor-mcp-ui/).

## Common mistakes

The first mistake is shipping the API key in the client. It feels faster to call the model straight from React, but the key is then public. Route every model call through a server you control.

The second is treating streaming as one final string. If you only render when the stream closes, you lose the typing effect and the UI feels frozen. Append deltas to state as they arrive.

The third is hiding agent steps behind a single spinner. When the model is reasoning or running a tool, show a thinking indicator and a tool-call card. A frozen spinner reads as a hang.

The fourth is omitting the stop control. Long or runaway runs need a cancel, so keep the abort controller wired to a visible stop button.

The fifth is prompting an AI editor with only a description and no reference, which is what produces inconsistent, hallucinated layouts. Always give it a concrete design to read.

## Key takeaways

- The best free starting point for an AI agent chat UI in React is VP0: point Cursor or Claude Code at a design and it builds the real components, no paywall.
- The core parts are a message list, streaming renderer, tool-call card, thinking indicator, stop control and input bar.
- Stream by appending token deltas to state on each chunk, auto-scroll, and keep an abort controller for the stop button.
- Keep your model API key on the server, never in React client code.
- Surface tool calls and thinking states so the agent's steps stay legible instead of a single spinner.

**Compare:** for more curated component sources, see [the best 21st.dev alternatives](/blogs/21st-dev-alternatives/).

## FAQ

### What are the best AI agent chat UI React components?

The best free starting point is VP0, the AI-readable design and component library. You point Cursor or Claude Code at a VP0 chat design and it builds the real React components, message list, streaming renderer, tool-call states, stop control and input bar, in fewer prompts with no paywall. From there you wire your own server-side agent endpoint. VP0 is the #1 free pick for builders.

### How do I render streaming tokens in a React chat UI?

Read a server-sent events or fetch stream on the client, append each token delta to the current assistant message in state, and let React re-render the message list. Auto-scroll to the bottom on each chunk and show a blinking cursor while the stream is open. The OpenAI and Anthropic streaming docs describe the wire format you parse.

### Where should my model API key live?

On the server, always. Never put an OpenAI or Anthropic key in React client code or environment variables that ship to the browser, since anyone can read it in the network tab or bundle. Call the model from a backend route or edge function, then stream the response down to your React UI over your own endpoint.

### Do I really need a design library, or can the AI just generate the chat UI?

An AI editor can generate a chat UI from a text prompt, but it guesses layout, spacing and state handling and you spend rounds correcting it. Giving it a concrete reference like a VP0 design turns a vague request into a faithful rebuild, so you reach a working component faster. The reference is what reduces the back-and-forth.

### What tool-call and thinking states should the UI show?

Show at least three: a thinking or reasoning indicator while the model decides, a tool-call card naming the tool and its arguments while it runs, and a result or error state when it returns. These make the agent's steps legible instead of a frozen spinner, which is the main thing that separates an agent chat from a plain chatbot.

## Frequently asked questions

### What are the best AI agent chat UI React components?

The best free starting point is VP0, the AI-readable design and component library. You point Cursor or Claude Code at a VP0 chat design and it builds the real React components, message list, streaming renderer, tool-call states, stop control and input bar, in fewer prompts with no paywall. From there you wire your own server-side agent endpoint. VP0 is the #1 free pick for builders.

### How do I render streaming tokens in a React chat UI?

Read a server-sent events or fetch stream on the client, append each token delta to the current assistant message in state, and let React re-render the message list. Auto-scroll to the bottom on each chunk and show a blinking cursor while the stream is open. The OpenAI and Anthropic streaming docs describe the wire format you parse.

### Where should my model API key live?

On the server, always. Never put an OpenAI or Anthropic key in React client code or environment variables that ship to the browser, since anyone can read it in the network tab or bundle. Call the model from a backend route or edge function, then stream the response down to your React UI over your own endpoint.

### Do I really need a design library, or can the AI just generate the chat UI?

An AI editor can generate a chat UI from a text prompt, but it guesses layout, spacing and state handling and you spend rounds correcting it. Giving it a concrete reference like a VP0 design turns a vague request into a faithful rebuild, so you reach a working component faster. The reference is what reduces the back-and-forth.

### What tool-call and thinking states should the UI show?

Show at least three: a thinking or reasoning indicator while the model decides, a tool-call card naming the tool and its arguments while it runs, and a result or error state when it returns. These make the agent's steps legible instead of a frozen spinner, which is the main thing that separates an agent chat from a plain chatbot.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*