Skip to content

AgentResearchDetails

AgentResearchDetails renders web research references and associated grounding metadata returned by agents that perform web research as part of their grounding pipeline. It displays clickable source links, snippets, and metadata about the research process.

Import

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

Props

Name Type Required Default Description
data any Yes -- Agent response data object. The component reads research-related fields from the response, including web references and grounding metadata.

Expected Data Structure

The component extracts research details from the agent response. The exact path depends on the agent implementation, but a typical structure includes:

interface ResearchData {
  /** Web research references */
  references?: Array<{
    /** Page title */
    title: string;
    /** URL of the source */
    url: string;
    /** Text snippet from the page */
    snippet?: string;
    /** Relevance score (0.0 to 1.0) */
    score?: number;
  }>;

  /** Research metadata */
  metadata?: {
    /** Number of queries performed */
    queriesCount?: number;
    /** Number of pages fetched */
    pagesFetched?: number;
    /** Total research duration in milliseconds */
    durationMs?: number;
    /** Search queries used */
    queries?: string[];
  };
}

Features

Reference Cards

Each web reference is rendered as a card with:

  • Title -- clickable link that opens the source URL in a new tab
  • URL -- displayed below the title in a muted font
  • Snippet -- text excerpt from the referenced page
  • Score -- relevance score shown as a percentage badge (when available)

Research Metadata

When metadata is present, a summary section displays:

  • Number of search queries performed
  • Number of pages fetched
  • Total research duration
  • List of search queries used

Empty State

If the response data contains no research references or metadata, the component renders nothing.

Usage

Basic Research Details

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

const responseData = {
  researchDetails: {
    references: [
      {
        title: "ASHRAE Standard 55 - Thermal Comfort",
        url: "https://www.ashrae.org/technical-resources/standards/standard-55",
        snippet: "ASHRAE Standard 55 defines conditions for acceptable thermal comfort...",
        score: 0.94,
      },
      {
        title: "Energy Star Building Guidelines",
        url: "https://www.energystar.gov/buildings",
        snippet: "Guidelines for energy-efficient building operations...",
        score: 0.87,
      },
    ],
    metadata: {
      queriesCount: 3,
      pagesFetched: 8,
      durationMs: 4500,
      queries: [
        "HVAC thermal comfort standards",
        "indoor temperature regulations commercial buildings",
        "energy efficient temperature setpoints",
      ],
    },
  },
};

function ResearchView() {
  return <AgentResearchDetails data={responseData} />;
}

Conditional Rendering in Chat

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

function AssistantMessage({ message }: { message: AgentChatMessage }) {
  const hasResearch = message.data?.researchDetails?.references?.length > 0;

  return (
    <div>
      <p>{message.content}</p>
      {hasResearch && (
        <details>
          <summary>Web Research Sources</summary>
          <AgentResearchDetails data={message.data} />
        </details>
      )}
    </div>
  );
}