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

import { AISummary } from 'ml-fasttrack';
const response = {
  summary: "There have been multiple **cybercrimes** reported in **San Francisco** in the past month.[1][2]",
  sources: [
    { id: "/doc1.json", title: "[1] - Cybercrime at 268 Bay Boulevard" },
    { id: "/doc3.json", title: "[2] - Cybercrime at 226 Meadow Avenue" }
  ]
};
//...
<AISummary
  data={response}
  title={<h4>AI Response</h4>}
  summaryPath={{
    path: "summary"
  }}
  sourcesPath={{
    path: 'sources'
  }}
  SourceListProps={{
    idPath: {
      path: 'id'
    },
    labelPath: {
      path: 'title'
    },
    onClick: (e, src) => console.log("Source clicked: ", src),
    style: {
      color: 'blue',
      cursor: 'pointer'
    }
  }}
  noResponseMessage="No response returned."
/>

The code:

• defines paths to the summary output and source information in the data payload (using PathConfig objects).

• handles source clicks.

• provides messaging when there is no response payload.

For more examples and information about the AISummary widget, see FastTrack Storybook.