Skip to content

Chat Components

The Chat module provides full-featured components for building conversational agent interfaces. These components handle message rendering, user input, streaming responses, plan visualization, and grounding display.

Components

Component Description
AgentChat Single-agent chat interface with streaming, plan steps, execution details, and grounding panels
AgentConsole Multi-agent switchable console that wraps AgentChat with agent selection and connection settings
ConversationList Sidebar list for managing multiple conversations with create, select, and delete actions
ConversationPanel Complete conversation interface combining ConversationList with a chat area and trace links

Architecture

The chat components are layered:

graph TD
    AC[AgentConsole] --> ACH[AgentChat]
    CP[ConversationPanel] --> CL[ConversationList]
    CP --> UCH[useConversations hook]
    ACH --> UACH[useAgentChat hook]
    ACH --> PS[AgentPlanSteps]
    ACH --> ED[AgentExecutionDetails]
    ACH --> RS[AgentRetrievedSources]
    ACH --> AD[AgentAttachedDocuments]
    ACH --> GP[AgentGroundingPolicy]

AgentChat is the primary chat component. It uses the useAgentChat hook internally and renders sub-components for plan steps, execution details, and grounding information. AgentConsole wraps AgentChat with agent selection and optional connection settings.

For multi-turn conversation persistence, use ConversationPanel which pairs ConversationList with the useConversations hook backed by a ConversationBackend.

Quick Example

import {
  AgentChat,
  createSseAgentBackend,
} from "@modernpath/agent-ui-react";

const backend = createSseAgentBackend({
  baseUrl: "/api",
});

function ChatPage() {
  return (
    <AgentChat
      backend={backend}
      auditingId={42}
      agentType="qa-chat"
      title="Knowledge Assistant"
      stream
    />
  );
}