Plan & Execution¶

The Plan & Execution components visualize the internal planning and execution steps of an agent. These components are rendered automatically inside AgentChat when the agent response includes plan or execution data, but they can also be used standalone in custom layouts.

Components¶

How It Works¶

Many agents follow a plan-then-execute pattern:

1. The agent analyzes the user prompt and generates a plan -- an ordered list of steps it intends to follow.
2. The agent executes each step, producing results, timing data, and status indicators.
3. The agent synthesizes a final response from the execution results.

The AgentChat component renders both the plan and the execution details as expandable panels below each assistant message. If you are building a custom layout, you can use AgentPlanSteps and AgentExecutionDetails independently.

Data Structure¶

Both components read from the agent's response data. The plan is expected to have a steps array, and execution details are expected to contain step results with status and timing information.

// Plan structure
{
  steps: [
    { title: "Retrieve knowledge base documents", description: "..." },
    { title: "Analyze telemetry data", description: "..." },
    { title: "Generate recommendation", description: "..." },
  ]
}

// Execution details structure
{
  steps: [
    {
      title: "Retrieve knowledge base documents",
      status: "completed",
      durationMs: 1200,
      result: { ... },
    },
    {
      title: "Analyze telemetry data",
      status: "completed",
      durationMs: 3400,
      result: { ... },
    },
  ]
}

Quick Example¶

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

function CustomResultView({ agentResponse }: { agentResponse: any }) {
  return (
    <div>
      {agentResponse.plan && (
        <AgentPlanSteps plan={agentResponse.plan} />
      )}
      {agentResponse.executionDetails && (
        <AgentExecutionDetails data={agentResponse.executionDetails} />
      )}
      <div>{agentResponse.answer}</div>
    </div>
  );
}

Related Pages¶

• AgentChat -- uses these components internally for plan and execution display
• Grounding -- grounding components that complement plan and execution views