Advanced Search Tier Feature: Generative Answers are only available on the Advanced Search tier. Check out the Search Tiers reference doc to learn more about the features available in each tier.

Generative Answers are AI-generated summaries of search results displayed at the top of the page. Generative Answers synthesizes information from different top search results to help users quickly find relevant information without having to sift through multiple results, improving efficiency and reducing friction in the search experience.

Google and many other generative AI chatbots do this today. For example, here are the results for the Google query "What does Yext do?"

We mimic this feature in Yext Search, using the results of your Search experience (and thus the data pulled from your Knowledge Graph). The <GenerativeDirectAnswer /> component displays a generative answer for a query.

Basic Example

Make sure to first enable Generative Answers in the backend config. See instructions to do so here.

Once you've enabled Generative Answers, you can use the <GenerativeDirectAnswer /> component like so:

import {
  GenerativeDirectAnswer,
  SearchBar,
  VerticalResults,
} from "@yext/search-ui-react";

import KnowledgeCard from "./Components/KnowledgeCard";

const App = (): JSX.Element => {
  return (
    <div className="flex justify-center px-4 py-6">
      <div className="w-full max-w-5xl">
        <SearchBar />
        <GenerativeDirectAnswer />
        <VerticalResults CardComponent={KnowledgeCard} />
      </div>
    </div>
  );
};

export default App;

The resulting Generative Answer will look like the following:

Customizations

Like the rest of our components, you can customize the elements of Generative Answers using the customCssClasses prop.

You can customize the styling and behavior of the sources/citations cards by taking advantage of the CitationsCard component prop.

For example:

<GenerativeDirectAnswer CitationCard={SourceCard} />

import { CitationProps } from "@yext/search-ui-react";

interface RawData {
  landingPageUrl?: string;
  c_primaryCTA?: {
    link?: string;
  };
}

const SourceCard = (props: CitationProps) => {
  let rawData: RawData = props.searchResult.rawData;
  let link =
    rawData?.landingPageUrl ||
    rawData?.c_primaryCTA?.link ||
    "";
  const name = props.searchResult?.name;

  return (
    <div className="your css heree">
      {link ? (
        <a href={link} className="hover:text-indigo-500">
          {name}
        </a>
      ) : (
        <p>
          {name} <span className="text-xs">(no link available)</span>
        </p>
      )}
    </div>
  );
};

export default SourceCard;

Component API

Check out the component properties in the Search UI React Github repo.