Skip to content

AgentGroundingPolicy

AgentGroundingPolicy renders a color-coded badge indicating the grounding mode used by the agent for a particular response. The badge communicates whether the agent used RAG retrieval, canonical documents only, both, or no grounding.

Import

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

Props

Name Type Required Default Description
data any Yes -- Agent response data object. The component reads data.groundingContext.decision to extract the grounding policy information.

Expected Data Path

The component accesses data.groundingContext.decision, which conforms to the GroundingContextDecision type:

interface GroundingContextDecision {
  /** Grounding mode applied */
  mode: "rag_and_attachments" | "attachments_only" | "rag_only" | "none";
  /** Human-readable explanation of why this mode was selected */
  reasoning?: string;
  /** Whether RAG chunks were included in the LLM prompt */
  ragIncluded: boolean;
  /** Whether canonical documents were included */
  attachmentsIncluded: boolean;
}

Features

Color-Coded Badge

The badge color and label correspond to the grounding mode:

Mode Badge Color Label
rag_and_attachments Green RAG + Attachments
attachments_only Blue Attachments Only
rag_only Teal RAG Only
none Gray No Grounding

Tooltip

Hovering over the badge displays a tooltip with the reasoning field, explaining why the grounding mode was selected (e.g., "Grounding policy set to attachments_only; RAG chunks excluded from prompt").

Empty State

If data.groundingContext.decision is null or undefined, the component renders nothing.

Usage

Basic Grounding Policy Badge

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

const responseData = {
  groundingContext: {
    decision: {
      mode: "attachments_only",
      reasoning: "GROUNDING_MODE is set to attachments_only",
      ragIncluded: false,
      attachmentsIncluded: true,
    },
  },
};

function PolicyBadge() {
  return <AgentGroundingPolicy data={responseData} />;
}

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

function MessageFooter({ message }: { message: AgentChatMessage }) {
  return (
    <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
      <AgentGroundingPolicy data={message.data} />
      <span style={{ fontSize: 12, color: "#888" }}>
        {new Date(message.timestamp).toLocaleTimeString()}
      </span>
    </div>
  );
}