AISummary

The AISummary widget displays a response returned by an AI model and optionally shows citations or sources corresponding to that response. The widget supports Markdown formatting and customizable source display.

AISummary widget features

• Renders Markdown-formatted summary text using react-markdown and remark-gfm.

• Optionally displays a list of sources/citations below the summary.

• Offers customizable title and container styling.

• Handles empty responses gracefully.

AISummary example rendering

AISummary example configuration

The following example uses the default field names that the SourceList component expects (sourceId and sourceLabel). No idPath or labelPath configuration is required in this case:

import { AISummary } from 'ml-fasttrack';

const response = {
  summary: "There have been multiple **cybercrimes** reported in **San Francisco** in the past month.[1][2]",
  sources: [
    { sourceId: "/doc1.json", sourceLabel: "[1] - Cybercrime at 268 Bay Boulevard" },
    { sourceId: "/doc2.json", sourceLabel: "[2] - Cybercrime at 226 Meadow Avenue" }
  ]
};

<AISummary
  data={response}
  title={<h4>AI Response</h4>}
  sourcesPath={{ path: 'sources' }}
  SourceListProps={{
    onClick: (e, src) => console.log("Source clicked: ", src),
    style: { color: 'blue', cursor: 'pointer' }
  }}
  noResponseMessage="No response returned."
/>

If the response object uses different field names, use summaryPath, idPath, and labelPath to map to the correct fields:

const response = {
  text: "There have been multiple **cybercrimes** reported in **San Francisco**.[1][2]",
  citations: [
    { citationId: "/doc1.json", citationLabel: "[1] - Cybercrime at 268 Bay Boulevard" },
    { citationId: "/doc2.json", citationLabel: "[2] - Cybercrime at 226 Meadow Avenue" }
  ]
};

<AISummary
  data={response}
  title={<h4>AI Response</h4>}
  summaryPath={{ path: 'text' }}
  sourcesPath={{ path: 'citations' }}
  SourceListProps={{
    idPath: { path: 'citationId' },
    labelPath: { path: 'citationLabel' },
    onClick: (e, src) => console.log("Source clicked: ", src),
    style: { color: 'blue', cursor: 'pointer' }
  }}
/>

Code explanation

• data is the AI response object. When data is empty or null, the widget displays noResponseMessage instead of the summary.

• summaryPath specifies the path within data to the summary text (using a PathConfig object). If omitted, the component reads data.summary by default.

• sourcesPath specifies the path within data to the sources array. If omitted, no source list is rendered.

• SourceListProps configures the source citation list. Use idPath and labelPath to map custom field names within each source object. If omitted, the source list reads sourceId and sourceLabel from each entry.

• title accepts any ReactNode. If omitted, the widget renders a default "AI Summary" heading with a sparkle icon.

AISummary API

SourceListProps API