Introduction

Agent Interface is OpenUI's optional React SDK for teams that want a complete chat surface instead of integrating the renderer into assistant-ui, CopilotKit, or a custom message UI.

It provides conversation layout, threads, streaming messages, tool activity, and generated OpenUI components in one customizable interface. OpenUI Lang remains the interchange format, and you can connect Agent Interface to your existing agent backend.

When to use Agent Interface

Choose Agent Interface when you want OpenUI to provide the complete agent UI shell. If an application already has a conversation framework, follow the Build Agents guides to add the OpenUI Lang renderer instead.

The integration boundary

<AgentInterface /> receives an llm transport, an optional conversation storage adapter, and your OpenUI component library. The transport streams agent events; Agent Interface manages the chat experience; the renderer turns OpenUI Lang into application components.

import {
  AgentInterface,
  fetchLLM,
  openAIConversationMessageFormat,
  openAIResponsesAdapter,
} from "@openuidev/react-ui";

const llm = fetchLLM({
  url: "/api/chat",
  messageFormat: openAIConversationMessageFormat,
  streamAdapter: openAIResponsesAdapter(),
});

export function Agent() {
  return <AgentInterface llm={llm} componentLibrary={componentLibrary} />;
}

The /api/chat route connects to your agent backend and returns a supported stream. Continue with the Quickstart or review the available adapters and formats.