Skip to content

UI Components

The @modernpath/agent-ui-react package provides a complete set of React components, hooks, and backend factories for building AI agent interfaces. All components ship with inline CSS -- no external CSS framework or stylesheet imports required.

Installation

npm install @modernpath/agent-ui-react

Requirements

Requirement Minimum Version
React 18.0+
ReactDOM 18.0+
TypeScript 5.0+ (recommended)

Component Categories

  • Chat

    Full-featured chat interfaces with streaming support, message history, and plan visualization. Use AgentChat for a single-agent view or AgentConsole for a multi-agent switchable interface.

    Chat Components

  • Plan & Execution

    Visualize agent planning steps and execution results. AgentPlanSteps renders the agent's numbered plan, while AgentExecutionDetails shows expandable step-by-step results with status indicators.

    Plan & Execution

  • Grounding

    Display RAG retrieval results, attached canonical documents, grounding policy badges, and research details. These components render the grounding context returned by the agent backend.

    Grounding

  • Traces

    Explore and debug agent executions with TraceExplorer for paginated trace lists, TraceTimeline for span waterfalls, and TraceSpanDetail for inspecting individual span inputs and outputs.

    Traces

  • Admin

    Administration interfaces for managing knowledge base stores and documents. KnowledgeBaseManager provides a full CRUD interface for document ingestion and ground truth management.

    Admin

  • Hooks

    Low-level React hooks for building custom layouts. useAgentChat, useTraceExplorer, useTraceDetail, and useConversations provide the same state management used by the built-in components.

    Hooks

Backend Factory Pattern

UI components do not hardcode HTTP endpoints. Instead, they accept a backend object that abstracts communication with your server. You create backends using factory functions:

import {
  createHttpAgentBackend,
  createSseAgentBackend,
  createHttpTraceBackend,
  createHttpConversationBackend,
} from "@modernpath/agent-ui-react";

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

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

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

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

Backend Factories Reference

Styling

All components use inline CSS. There are no external stylesheets to import and no CSS-in-JS runtime dependency. Components are designed with a neutral, professional appearance that works in both light and dark contexts.

No CSS framework required

The package does not depend on Tailwind, Emotion, styled-components, or any other CSS framework. Styles are scoped to each component via inline style attributes.

Quick Example

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

const backend = createSseAgentBackend({
  baseUrl: "/api",
  getHeaders: () => ({
    Authorization: `Bearer ${localStorage.getItem("token")}`,
  }),
});

export function App() {
  return (
    <AgentChat
      backend={backend}
      auditingId={1}
      agentType="qa-chat"
      title="Support Assistant"
      placeholder="Ask a question..."
      stream
    />
  );
}

TypeScript Types

All components, hooks, and backend factories are fully typed. See the TypeScript Types Reference for complete interface definitions.

Next Steps