Skip to content

AgentPlanSteps

AgentPlanSteps renders a numbered list of plan steps generated by an agent before execution. Each step displays a title and an optional description. The component is used inside AgentChat and can also be used standalone in custom layouts.

Import

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

Props

Name Type Required Default Description
plan { steps: Array<{ title: string; description?: string }> } Yes -- Plan object containing an array of steps. Each step must have a title and may include a description with additional detail.

Features

Numbered Steps

Steps are rendered as a numbered list with a styled step indicator (circled number). Each step shows the title prominently and the description in a smaller, muted font below.

Empty State

If the steps array is empty or the plan object is null/undefined, the component renders nothing.

Compact Layout

The component uses a compact vertical layout designed to fit within chat message panels without excessive spacing.

Usage

Basic Plan Display

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

const plan = {
  steps: [
    {
      title: "Search knowledge base",
      description: "Query the RAG store for relevant documents about HVAC systems",
    },
    {
      title: "Retrieve telemetry data",
      description: "Fetch the last 24 hours of temperature readings from the building",
    },
    {
      title: "Analyze and respond",
      description: "Cross-reference documents with telemetry to form a recommendation",
    },
  ],
};

function PlanView() {
  return <AgentPlanSteps plan={plan} />;
}

Conditional Rendering

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

function MessageDetail({ data }: { data: any }) {
  return (
    <div>
      {data.plan?.steps?.length > 0 && (
        <AgentPlanSteps plan={data.plan} />
      )}
      <p>{data.answer}</p>
    </div>
  );
}

Inside a Custom Chat Layout

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

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

function CustomChat() {
  const { messages, input, setInput, send } = useAgentChat({
    backend,
    auditingId: 1,
    agentType: "qa-chat",
    stream: true,
  });

  return (
    <div>
      {messages.map((msg, i) => (
        <div key={i}>
          <strong>{msg.role}:</strong> {msg.content}
          {msg.role === "assistant" && msg.data?.plan && (
            <AgentPlanSteps plan={msg.data.plan} />
          )}
        </div>
      ))}
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={(e) => e.key === "Enter" && send()}
      />
    </div>
  );
}