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.
npx skills add agentskillexchange/skills --skill build-react-agent-chat-interfaces-with-assistant-ui
Use assistant-ui when an operator needs a repeatable way to build a polished React chat surface for an AI or agent application. The workflow is to install the assistant-ui React packages, choose the runtime adapter, wrap the application with the assistant runtime provider, compose the thread and message components, and connect the UI to the selected model, agent, or AI SDK backend.
What this skill actually does
Invoke this instead of hand-building chat primitives when the product needs streaming messages, reusable thread UX, tool or action displays, and a maintainable React component boundary around the agent conversation. The scope boundary is chat-interface implementation for agent apps; it is not a general React component library, standalone assistant product, or model orchestration framework.
Inputs are a React application, @assistant-ui/react packages, a runtime adapter such as the AI SDK integration, backend chat or agent endpoint, and message/action rendering requirements. Outputs are a working chat UI, thread runtime wiring, reusable message components, and a frontend integration point for agent responses.