# Build React agent chat interfaces with assistant-ui

> Use assistant-ui to build production React chat interfaces with reusable threads, runtimes, message components, and model/provider adapters.

- Skill: `agentskillexchange/build-react-agent-chat-interfaces-with-assistant-ui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add agentskillexchange/build-react-agent-chat-interfaces-with-assistant-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/agentskillexchange/build-react-agent-chat-interfaces-with-assistant-ui/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: agentskillexchange (https://skillmd.com/u/agentskillexchange)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/agentskillexchange/build-react-agent-chat-interfaces-with-assistant-ui

---


# Build React agent chat interfaces with assistant-ui

Use assistant-ui to build production React chat interfaces with reusable threads, runtimes, message components, and model/provider adapters.

## Prerequisites

React application, @assistant-ui/react, runtime adapter such as @assistant-ui/react-ai-sdk, backend model or agent endpoint

## Installation

Use the upstream install or setup path that matches your environment:
- npx assistant-ui@latest create # new project
- npx assistant-ui@latest init # add to existing project
- npm install @assistant-ui/react @assistant-ui/react-ai-sdk

Basic usage or getting-started notes:
- The fastest path is the CLI, which scaffolds a Next.js app or adds the styled components to an existing project:
- bash
- Or install the packages directly:

- Source: https://github.com/assistant-ui/assistant-ui
- Extracted from upstream docs: https://raw.githubusercontent.com/assistant-ui/assistant-ui/HEAD/README.md

## Documentation

- https://www.assistant-ui.com

## Source

- [Agent Skill Exchange](https://agentskillexchange.com/skills/build-react-agent-chat-interfaces-with-assistant-ui/)