Custom Chat UI

This guide assumes the application already has a working chat interface that renders text or Markdown, and that the backend already returns streamed OpenUI Lang. The message list, composer, conversation state, and transport remain unchanged.

Render OpenUI Lang

In the assistant-message component, render the streamed response with <Renderer /> instead of the Markdown renderer:

import { Renderer } from "@openuidev/react-lang";
import { library } from "@/lib/openui";

export function AssistantMessage({ content, isStreaming }) {
  return <Renderer response={content} library={library} isStreaming={isStreaming} />;
}

content is the accumulated agent response. Keep isStreaming true until the response stream closes so the renderer can display the interface progressively.

Continue with The Renderer for the complete API.