Production-ready chat UI for AI agents. Start with prebuilt layouts for fast integration, then drop down to headless hooks when you need full control over behavior and rendering.
Choose the surface that matches your product and customize from there.
The SDK handles the stateful parts so you can focus on UX, product logic, and polish.
Handles text deltas, optimistic updates, loading states, and partial responses.
Save and restore conversation history with straightforward API contracts.
Use the same primitives across prebuilt layouts and fully custom chat surfaces.
Use the same chat primitives without the prebuilt layouts when you need a fully custom surface.
The `useChat` hook gives you message state, append helpers, and loading semantics without locking you into a specific UI.
import { useChat } from '@openuidev/react';
function CustomChat() {
const { messages, append, isLoading } = useChat();
return (
<div>
{messages.map(m => (
<div key={m.id}>
{m.content}
</div>
))}
<input
onChange={e => append(e.target.value)}
/>
</div>
);
}