Skip to content

AgentGroundingPreparation

AgentGroundingPreparation is a high-level component that renders a consolidated view of the entire grounding context. It combines the grounding policy badge, canonical documents, RAG chunks, and document composition information into a single organized panel.

Import

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

Props

Name Type Required Default Description
groundingContext GroundingContext Yes -- The full grounding context object from the agent response. Unlike the individual grounding components that read from data.groundingContext, this component accepts the groundingContext directly.

Grounding Context Structure

interface GroundingContext {
  /** RAG retrieval chunks */
  ragChunks?: GroundingContextRagChunks;

  /** Canonical documents */
  canonicalDocuments?: GroundingContextCanonicalDocuments;

  /** Document composition details */
  composition?: GroundingContextComposition;

  /** Grounding decision */
  decision?: GroundingContextDecision;
}

Features

Sections

The component renders the following sections in order, each only when data is present:

  1. Grounding Policy -- the color-coded mode badge with reasoning
  2. Canonical Documents -- document cards with MIME icons, sizes, and source badges
  3. Document Composition -- bundle details showing which documents were included, skipped, or merged
  4. RAG Chunks -- retrieval results with relevance scores

Composition Details

When composition data is present, the component shows:

  • Bundles -- named groups of documents composed for the prompt
  • Included documents -- documents that made it into the final prompt
  • Skipped documents -- documents excluded from the prompt (with reason)
interface GroundingContextComposition {
  bundles: Array<{
    name: string;
    includes: Array<{
      documentName: string;
      charCount: number;
    }>;
    skipped: Array<{
      documentName: string;
      reason: string;
    }>;
  }>;
}

Empty State

If the groundingContext object has no populated fields, the component renders nothing.

Usage

Basic Grounding Preparation

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

const groundingContext = {
  decision: {
    mode: "rag_and_attachments" as const,
    reasoning: "Full grounding enabled",
    ragIncluded: true,
    attachmentsIncluded: true,
  },
  canonicalDocuments: {
    documents: [
      {
        name: "Operations Manual.pdf",
        mimeType: "application/pdf",
        sizeBytes: 3_200_000,
        source: "kb-operations",
        sourceType: "knowledge-base" as const,
      },
    ],
  },
  ragChunks: {
    chunks: [
      {
        text: "Section 4.2: Temperature setpoint adjustment procedure...",
        score: 0.91,
        source: { title: "Operations Manual.pdf" },
      },
    ],
    totalRetrieved: 8,
  },
  composition: {
    bundles: [
      {
        name: "primary",
        includes: [
          { documentName: "Operations Manual.pdf", charCount: 12400 },
        ],
        skipped: [
          { documentName: "Archived Guide.pdf", reason: "Token limit exceeded" },
        ],
      },
    ],
  },
};

function GroundingView() {
  return <AgentGroundingPreparation groundingContext={groundingContext} />;
}

From Agent Response Data

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

function ResponseDetails({ responseData }: { responseData: any }) {
  if (!responseData.groundingContext) return null;

  return (
    <div>
      <h3>Grounding Preparation</h3>
      <AgentGroundingPreparation
        groundingContext={responseData.groundingContext}
      />
    </div>
  );
}