Skip to content

AgentRetrievedSources

AgentRetrievedSources renders the RAG (Retrieval-Augmented Generation) chunks returned by the agent's knowledge base retrieval step. Each chunk is displayed as a card with the source document title, a text excerpt, and a relevance score indicator.

Import

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

Props

Name Type Required Default Description
data any Yes -- Agent response data object. The component reads data.groundingContext.ragChunks to extract retrieval results.

Expected Data Path

The component accesses data.groundingContext.ragChunks, which conforms to the GroundingContextRagChunks type:

interface GroundingContextRagChunks {
  /** Array of retrieved chunks */
  chunks: Array<{
    /** Text content of the chunk */
    text: string;
    /** Relevance score (0.0 to 1.0) */
    score: number;
    /** Source metadata */
    source: {
      /** Source document title */
      title: string;
      /** Source document URI or identifier */
      uri?: string;
    };
  }>;
  /** Total number of chunks before filtering */
  totalRetrieved?: number;
}

Features

Document Cards

Each retrieved chunk is rendered as a card containing:

  • Document title -- from source.title
  • Text excerpt -- the chunk text, truncated if longer than a few lines
  • Relevance score -- displayed as a colored bar and percentage (e.g., 92%)

Score Visualization

Relevance scores are displayed with a color gradient:

Score Range Color Label
0.8 -- 1.0 Green High relevance
0.5 -- 0.79 Yellow Medium relevance
0.0 -- 0.49 Red Low relevance

Empty State

If data.groundingContext.ragChunks is null, undefined, or contains no chunks, the component renders nothing.

Usage

Basic Retrieved Sources Display

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

const responseData = {
  groundingContext: {
    ragChunks: {
      chunks: [
        {
          text: "The recommended indoor temperature for office buildings is 21-23 degrees Celsius...",
          score: 0.95,
          source: {
            title: "HVAC Best Practices Guide",
            uri: "gs://kb-bucket/hvac-guide.pdf",
          },
        },
        {
          text: "Energy consumption increases by approximately 3% for each degree below the setpoint...",
          score: 0.82,
          source: {
            title: "Energy Optimization Manual",
            uri: "gs://kb-bucket/energy-manual.pdf",
          },
        },
      ],
      totalRetrieved: 5,
    },
  },
};

function SourcesView() {
  return <AgentRetrievedSources data={responseData} />;
}

Inside a Custom Chat Message

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

function AssistantMessage({ message }: { message: AgentChatMessage }) {
  return (
    <div>
      <p>{message.content}</p>
      {message.data?.groundingContext?.ragChunks && (
        <details>
          <summary>Retrieved Sources</summary>
          <AgentRetrievedSources data={message.data} />
        </details>
      )}
    </div>
  );
}