Skip to content

AgentConsole

AgentConsole provides a multi-agent interface where users can switch between different agent types from a dropdown. It wraps AgentChat and optionally exposes connection settings (transport, base URL, headers) for development and debugging scenarios.

Import

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

Props

Name Type Required Default Description
agents AgentConsoleAgentDefinition[] Yes -- Array of agent definitions. Each entry defines an agent's id, display label, and agentType.
auditingId number Yes -- Auditing context identifier passed through to AgentChat.
initialAgentId string No First agent in array The id of the agent to select initially.
backend AgentBackend No -- Pre-configured backend. When provided, the console uses this backend directly and ignores transport, baseUrl, getHeaders, buildExecutePath, and buildStreamPath.
transport "http" \| "sse" No "sse" Transport protocol used when no explicit backend is provided. "http" creates an HTTP backend; "sse" creates an SSE streaming backend.
baseUrl string No "" Base URL for the auto-created backend when no explicit backend is provided.
getHeaders () => Record<string, string> No -- Header factory for the auto-created backend.
buildExecutePath (auditingId: number) => string No -- Custom path builder for HTTP execute requests.
buildStreamPath (auditingId: number) => string No -- Custom path builder for SSE stream requests.
showConnectionSettings boolean No true Show the connection settings panel (transport selector, base URL input). Useful during development; hide in production.
...AgentChat props -- No -- All optional AgentChat props (title, placeholder, maxHistoryMessages, stream, showPlan, showExecutionDetails, showRetrievedSources, showAttachedDocuments, showGroundingPolicy, renderAssistantMeta, assistantMetaMode) are passed through to the inner AgentChat instance.

AgentConsoleAgentDefinition

interface AgentConsoleAgentDefinition {
  /** Unique identifier for this agent entry */
  id: string;

  /** Display label shown in the agent selector dropdown */
  label: string;

  /** Agent type string sent in the execute request */
  agentType: string;
}

Features

Agent Selector

A dropdown at the top of the console lets users switch between agents. Changing the agent resets the chat history. The dropdown displays the label from each AgentConsoleAgentDefinition.

Connection Settings Panel

When showConnectionSettings is true, an expandable settings panel appears below the agent selector. It provides:

  • Transport toggle -- switch between "http" and "sse"
  • Base URL input -- override the backend URL at runtime

This is primarily useful for development and testing. In production deployments, pass a pre-configured backend prop and set showConnectionSettings={false}.

Backend Auto-Creation

When no backend prop is provided, the console automatically creates a backend based on the transport prop:

  • "http" creates a backend via createHttpAgentBackend
  • "sse" creates a backend via createSseAgentBackend

The backend is recreated when transport, baseUrl, or getHeaders change.

Usage

Basic Multi-Agent Console

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

const agents = [
  { id: "qa",       label: "Q&A Assistant",     agentType: "qa-chat" },
  { id: "incident", label: "Incident Resolver",  agentType: "incident-resolver" },
  { id: "research", label: "Web Researcher",     agentType: "web-research" },
];

function DevConsole() {
  return (
    <AgentConsole
      agents={agents}
      auditingId={1}
      initialAgentId="qa"
      baseUrl="http://localhost:3001"
      transport="sse"
      stream
    />
  );
}

Production Console with Pre-Configured Backend

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

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

const agents = [
  { id: "support", label: "Support Agent", agentType: "qa-chat" },
  { id: "docs",    label: "Docs Search",   agentType: "doc-search" },
];

function ProductionConsole() {
  return (
    <AgentConsole
      agents={agents}
      auditingId={currentUser.id}
      backend={backend}
      showConnectionSettings={false}
      stream
      title="Help Center"
    />
  );
}

Custom Path Builders

function CustomPathConsole() {
  return (
    <AgentConsole
      agents={agents}
      auditingId={1}
      baseUrl="https://api.example.com"
      transport="sse"
      buildExecutePath={(auditingId) =>
        `/v2/agents/${auditingId}/run`
      }
      buildStreamPath={(auditingId) =>
        `/v2/agents/${auditingId}/run/stream`
      }
      stream
    />
  );
}