Skip to content

AgentChat

AgentChat is the primary chat component for interacting with a single agent. It renders a dark header bar, a scrollable message area with auto-scroll, a user input field, and expandable panels for plan steps, execution details, retrieved sources, attached documents, and grounding policy.

Import

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

Props

Name Type Required Default Description
backend AgentBackend Yes -- Backend instance created by createHttpAgentBackend or createSseAgentBackend. Provides execute and optionally executeStream methods.
auditingId number Yes -- Numeric identifier for the auditing context. Passed to the backend on every request.
agentType string Yes -- Agent type identifier sent in the execute request (e.g., "qa-chat", "incident-resolver").
title string No "Agent Chat" Text displayed in the dark header bar at the top of the chat window.
placeholder string No "Type a message..." Placeholder text for the message input field.
maxHistoryMessages number No 50 Maximum number of previous messages included in the chat history sent to the backend. Older messages are trimmed from the beginning.
stream boolean No false When true, uses backend.executeStream for Server-Sent Events streaming. The backend must be created with createSseAgentBackend or provide an executeStream method.
showPlan boolean No true Show the AgentPlanSteps panel when the response contains a plan.
showExecutionDetails boolean No true Show the AgentExecutionDetails panel when the response contains execution step results.
showRetrievedSources boolean No true Show the AgentRetrievedSources panel when the response contains RAG retrieval chunks.
showAttachedDocuments boolean No true Show the AgentAttachedDocuments panel when the response contains canonical documents.
showGroundingPolicy boolean No true Show the AgentGroundingPolicy badge when the response contains a grounding decision.
renderAssistantMeta (message: AgentChatMessage) => React.ReactNode No -- Custom render function for additional metadata below each assistant message. Receives the full message object including execution data.
assistantMetaMode "inline" \| "expandable" No "expandable" Controls how assistant metadata (plan, execution, grounding) is displayed. "inline" renders panels directly; "expandable" wraps them in collapsible sections.

Features

Dark Header Bar

The component renders a fixed dark header with the title prop. The header uses a dark background (#1a1a2e) with white text and includes a subtle bottom border.

Auto-Scroll

The message area automatically scrolls to the bottom when new messages arrive or when streaming content updates. If the user has scrolled up to review history, auto-scroll pauses until they scroll back to the bottom.

Streaming Support

When stream is true, the component calls backend.executeStream() and renders tokens incrementally as they arrive via Server-Sent Events. A typing indicator appears while the stream is active.

Grounding Panels

Each assistant message can include expandable panels for:

  • Plan Steps -- numbered plan generated by the agent before execution
  • Execution Details -- step-by-step results with status, timing, and errors
  • Retrieved Sources -- RAG chunks with relevance scores
  • Attached Documents -- canonical documents with MIME type icons
  • Grounding Policy -- color-coded badge showing the active grounding mode

Each panel can be individually toggled via the show* props.

Usage

Basic HTTP Chat

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

const backend = createHttpAgentBackend({
  baseUrl: "https://api.example.com",
  getHeaders: () => ({
    Authorization: `Bearer ${getToken()}`,
  }),
});

function SupportChat() {
  return (
    <AgentChat
      backend={backend}
      auditingId={1}
      agentType="qa-chat"
      title="Support Assistant"
      placeholder="Describe your issue..."
    />
  );
}

Streaming Chat

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

const backend = createSseAgentBackend({
  baseUrl: "https://api.example.com",
  getHeaders: () => ({
    Authorization: `Bearer ${getToken()}`,
  }),
});

function StreamingChat() {
  return (
    <AgentChat
      backend={backend}
      auditingId={1}
      agentType="qa-chat"
      title="AI Assistant"
      stream
      maxHistoryMessages={20}
    />
  );
}

Custom Assistant Metadata

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

function ChatWithMeta() {
  return (
    <AgentChat
      backend={backend}
      auditingId={1}
      agentType="incident-resolver"
      title="Incident Resolver"
      stream
      renderAssistantMeta={(message: AgentChatMessage) => (
        <div style={{ fontSize: 12, color: "#888", marginTop: 4 }}>
          Tokens: {message.data?.statistics?.totalTokens ?? "N/A"}
        </div>
      )}
    />
  );
}

Minimal Chat (No Grounding Panels)

function MinimalChat() {
  return (
    <AgentChat
      backend={backend}
      auditingId={1}
      agentType="qa-chat"
      title="Simple Chat"
      showPlan={false}
      showExecutionDetails={false}
      showRetrievedSources={false}
      showAttachedDocuments={false}
      showGroundingPolicy={false}
    />
  );
}