Building Custom UI

This guide shows the typical headless composition:

ThreadSidebar from useThreadList()
MessageList from useThread()
Composer using processMessage() and cancelMessage()

import { ChatProvider, useThread, useThreadList } from "@openuidev/react-headless";

function CustomChat() {
  const { messages, processMessage, isRunning } = useThread();
  const { threads, selectThread } = useThreadList();

  // Render your own layout here
  return null;
}

export default function App() {
  return (
    <ChatProvider apiUrl="/api/chat" threadApiUrl="/api/threads">
      <CustomChat />
    </ChatProvider>
  );
}

Start simple, then layer in:

custom rendering
optimistic UI
auth-aware backend calls with processMessage