Sidekick: Show citations (#373)

Previously, this was hardcoded in. Now it's configurable.

packages/ai-jsx/package.json

@@ -4,7 +4,7 @@
   "repository": "fixie-ai/ai-jsx",
   "bugs": "https://github.com/fixie-ai/ai-jsx/issues",
   "homepage": "https://ai-jsx.com",
-  "version": "0.21.0",
+  "version": "0.21.1",
   "volta": {
     "extends": "../../package.json"
   },

packages/ai-jsx/src/batteries/sidekick/platform/gen-ui.tsx

@@ -1,7 +1,7 @@
 import { SidekickProps } from './sidekick.js';
 
 // prettier-ignore
-export function MdxUsageExamples({includeNextStepsRecommendations}: Pick<SidekickProps, 'includeNextStepsRecommendations'>) {
+export function MdxUsageExamples({includeNextStepsRecommendations, useCitationCard}: Pick<SidekickProps, 'includeNextStepsRecommendations' | 'useCitationCard'>) {
   return <>
   Respond concisely, using MDX formatting to make your response
   more readable and structured.
@@ -11,8 +11,10 @@ export function MdxUsageExamples({includeNextStepsRecommendations}: Pick<Sidekic
   When you show the user a link, only show them links that you found from
   searching the knowledge base. Do not make links up.
 
-  When you show users links to knowledge base, use the {'<Citation />'} component. Its props are:
-  {' interface CitationProps { title: string; href: string } '}
+  {useCitationCard && <>
+    When you show users links to knowledge base, use the {'<Citation />'} component. Its props are:
+    {' interface CitationProps { title: string; href: string } '}
+  </>}
 
   {includeNextStepsRecommendations && <>
     You may suggest follow-up ideas to the user, if they fall within the scope of

packages/ai-jsx/src/batteries/sidekick/platform/sidekick.tsx

@@ -29,21 +29,17 @@ type OutputFormatSidekickProps = MergeExclusive<
      * A set of examples to the Sidekick instructing it how to emit MDX responses, when
      * `outputFormat` is `text/mdx`.
      *
-     * By default, the Sidekick will only be able to use the default set of
-     * MDX components in its vocabulary: `Citation` and `NextStepsButton`.
-     * If you wish to support additional MDX components, you must provide examples
-     * of how to use them here.
+     * Separately from that's passed here, the Sidekick will emit MDX components if the
+     * `includeNextStepsRecommendations` and `useCitationCard` props are set.
      */
     genUIExamples?: AI.Node;
 
     /**
      * A set of component names that the Sidekick should be able to use in its
      * MDX output, when `outputFormat` is `text/mdx`.
      *
-     * By default, the Sidekick will only be able to use the default set of
-     * MDX components in its vocabulary: `Citation` and `NextStepsButton`.
-     * If you wish to support additional MDX components, you must provide their
-     * names here.
+     * Separately from that's passed here, the Sidekick will emit MDX components if the
+     * `includeNextStepsRecommendations` and `useCitationCard` props are set.
      */
     genUIComponentNames?: string[];
 
@@ -61,6 +57,13 @@ type OutputFormatSidekickProps = MergeExclusive<
      * Defaults to true.
      */
     includeNextStepsRecommendations?: boolean;
+
+    /**
+     * If true, the Sidekick will emit a `Citation` component when it wants to cite a source. For example:
+     *
+     *   <Citation title='How to cancel an order' href='https://docs.example.com/how-to-cancel-order' />
+     */
+    useCitationCard?: boolean;
   },
   {
     /**
@@ -81,6 +84,7 @@ export function Sidekick(props: SidekickProps) {
         <SidekickSystemMessage
           timeZone="America/Los_Angeles"
           includeNextStepsRecommendations={props.includeNextStepsRecommendations ?? true}
+          useCitationCard={props.useCitationCard ?? true}
           outputFormat={props.outputFormat ?? 'text/mdx'}
           userProvidedGenUIUsageExamples={props.genUIExamples}
           userProvidedGenUIComponentNames={props.genUIComponentNames}

packages/ai-jsx/src/batteries/sidekick/platform/system-message.tsx

@@ -5,7 +5,7 @@ import { Node } from '../../../index.js';
 import { SidekickProps } from './sidekick.js';
 
 export interface SidekickSystemMessageProps
-  extends Pick<SidekickProps, 'outputFormat' | 'includeNextStepsRecommendations'> {
+  extends Pick<SidekickProps, 'outputFormat' | 'includeNextStepsRecommendations' | 'useCitationCard'> {
   timeZone: string;
   userProvidedGenUIUsageExamples?: Node;
   userProvidedGenUIComponentNames?: string[];
@@ -16,6 +16,7 @@ export function SidekickSystemMessage({
   userProvidedGenUIUsageExamples,
   userProvidedGenUIComponentNames,
   includeNextStepsRecommendations,
+  useCitationCard,
   outputFormat,
 }: SidekickSystemMessageProps) {
   const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
@@ -37,23 +38,48 @@ export function SidekickSystemMessage({
     </SystemMessage>
   );
 
-  const baseComponentNames = ['Citation'];
+  const baseComponentNames = [];
   if (includeNextStepsRecommendations) {
     baseComponentNames.push('NextStepsButton');
   }
+  if (useCitationCard) {
+    baseComponentNames.push('Citation');
+  }
+
+  const allComponents = [...baseComponentNames, ...(userProvidedGenUIComponentNames ?? [])];
+
+  if (allComponents.length && outputFormat !== 'text/mdx') {
+    throw new Error(
+      `If you specify components for the Sidekick to use, you must set outputFormat to text/mdx. You specified components "${allComponents.join(
+        '", "'
+      )}", and outputFormat "${outputFormat}`
+    );
+  }
+
+  /**
+   * If the user passed text/mdx but did not pass any config that results in components being
+   * available, we'll set the outputFormat to text/markdown instead, so we can omit the MDX
+   * system message.
+   */
+  let outputFormatToUse = outputFormat;
+  if (!allComponents.length && outputFormat === 'text/mdx') {
+    outputFormatToUse = 'text/markdown';
+  }
 
   return (
     <>
       {dateTimeSystemMessage}
       {responseFramingSystemMessage}
-      {outputFormat === 'text/plain' && <SystemMessage>Respond with plain text, without any markup.</SystemMessage>}
-      {outputFormat === 'text/markdown' && <SystemMessage>Respond with Markdown.</SystemMessage>}
-      {outputFormat === 'text/mdx' && (
+      {outputFormatToUse === 'text/markdown' && <SystemMessage>Respond with Markdown.</SystemMessage>}
+      {outputFormatToUse === 'text/mdx' && (
         <MdxSystemMessage
-          componentNames={[...baseComponentNames, ...(userProvidedGenUIComponentNames ?? [])]}
+          componentNames={allComponents}
           usageExamples={
             <>
-              <MdxUsageExamples includeNextStepsRecommendations={includeNextStepsRecommendations} />
+              <MdxUsageExamples
+                includeNextStepsRecommendations={includeNextStepsRecommendations}
+                useCitationCard={useCitationCard}
+              />
               {userProvidedGenUIUsageExamples}
             </>
           }

packages/docs/docs/changelog.md

@@ -1,6 +1,10 @@
 # Changelog
 
-## 0.21.0
+## 0.21.1
+
+- `Sidekick` now accepts a `useCitationCard` prop, which controls whether it will emit `<Citation />` MDX components.
+
+## [0.21.0](https://github.com/fixie-ai/ai-jsx/commit/7e1bba39f37300363216e564448b640a12de8db1)
 
 - `Sidekick` is no longer locked to GPT-4-32k. Now, it'll run with whatever model is set by the AI.JSX context.
   - If you pass tools, make sure that the model supports native function calling, or you'll get an error.