Provide option to omit genUI (#322)

Previously, the Sidekick would always emit GenUI components (e.g.
`<Card>`). This can present a challenge for integrators, because using
this output requires you to do MDX compilation.

Now, we introduce three options:
* GenUI
* Plain Markdown
* Plain text

The latter option offers the lowest barrier to entry for integrators.

Also adds option to disable recommended next steps

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.18.0",
+  "version": "0.18.1",
   "volta": {
     "extends": "../../package.json"
   },

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

@@ -1,5 +1,8 @@
+import { SidekickProps } from './sidekick.js';
+
 // prettier-ignore
-export const mdxUsageExamples = <>
+export function MdxUsageExamples({includeNextStepsRecommendations}: Pick<SidekickProps, 'includeNextStepsRecommendations'>) {
+  return <>
   Respond concisely, using MDX formatting to make your response
   more readable and structured.
 
@@ -29,15 +32,17 @@ export const mdxUsageExamples = <>
   When you show users links to knowledge base, use the {'<Citation />'} component. Its props are:
   {' interface CitationProps { title: string; href: string } '}
 
-  You may suggest follow-up ideas to the user, if they fall within the scope of
-  what you are able to do.
+  {includeNextStepsRecommendations && <>
+    You may suggest follow-up ideas to the user, if they fall within the scope of
+    what you are able to do.
 
-  To give the user a canned reply to respond to you with, use the {'<NextStepsButton />'} component. Here is the interface for its props:
-  {`
-  interface NextStepsButtonProps {
-    prompt: string
-  }
-  `}
+    To give the user a canned reply to respond to you with, use the {'<NextStepsButton />'} component. Here is the interface for its props:
+    {`
+    interface NextStepsButtonProps {
+      prompt: string
+    }
+    `}
+  </>}
 
   When you emit MDX, be sure to use the proper quote type so quote characters in the string do not break the syntax. For instance:
 
@@ -55,3 +60,4 @@ export const mdxUsageExamples = <>
   Example 1: The handlebars template language looks like: \`\{'{'}\{'{'}foo\{'}'}\{'}'}\`
   Example 2: The handlebars template language looks like: `{'{{'}foo{'}}'}`
 </>;
+}

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

@@ -5,6 +5,7 @@ import { OpenAI } from '../../../lib/openai.js';
 import { UseToolsProps } from '../../use-tools.js';
 import * as AI from '../../../index.js';
 import { ConversationHistory, ShowConversation } from '../../../core/conversation.js';
+import { MergeExclusive } from 'type-fest';
 
 export type OpenAIChatModel = Exclude<Parameters<typeof OpenAI>[0]['chatModel'], undefined>;
 export type ModelProvider = 'openai';
@@ -38,19 +39,53 @@ export function ModelProvider({
   }
 }
 
-export interface SidekickProps {
+interface UniversalSidekickProps {
   tools?: UseToolsProps['tools'];
   systemMessage?: AI.Node;
   finalSystemMessageBeforeResponse?: AI.Node;
-  genUIExamples?: AI.Node;
-  genUIComponentNames?: string[];
 
   /**
-   * The role the model should take, like "a customer service agent for Help Scout".
+   * The role the model should take, like "a customer service agent for my_company_name".
    */
   role: string;
 }
 
+type OutputFormatSidekickProps = MergeExclusive<
+  {
+    /**
+     * Pass `text/gen-ui`, or omit this field, to get a Gen UI response.
+     * To render this, you'll need an MDX compiler that's aware of the Gen UI components.
+     */
+    outputFormat?: 'text/mdx' | undefined;
+
+    genUIExamples?: AI.Node;
+    genUIComponentNames?: string[];
+
+    /**
+     * If true, the Sidekick will emit next steps recommendations, such as:
+     *
+     *    ...and that's some detail about your most recent order.
+     *
+     *    <NextStepsButton prompt='What other orders are there?' />
+     *    <NextStepsButton prompt='How do I cancel the order?' />
+     *    <NextStepsButton prompt='How do I resubmit the order?' />
+     *
+     * Defaults to true.
+     */
+    includeNextStepsRecommendations?: boolean;
+  },
+  {
+    /**
+     * Pass `text/markdown` to get a Markdown response. To render this, you'll need a Markdown compiler.
+     *
+     * Pass `text/plain` to get a plain text response.
+     */
+    outputFormat: 'text/markdown' | 'text/plain';
+  }
+>;
+
+export type SidekickProps = UniversalSidekickProps & OutputFormatSidekickProps;
+
 export function Sidekick(props: SidekickProps) {
   return (
     <ModelProvider model="gpt-4-32k" modelProvider="openai">
@@ -64,6 +99,8 @@ export function Sidekick(props: SidekickProps) {
             timeZone="America/Los_Angeles"
             timeZoneOffset="420"
             role={props.role}
+            includeNextStepsRecommendations={props.includeNextStepsRecommendations ?? true}
+            outputFormat={props.outputFormat ?? 'text/mdx'}
             userProvidedGenUIUsageExamples={props.genUIExamples}
             userProvidedGenUIComponentNames={props.genUIComponentNames}
           />

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

@@ -1,10 +1,12 @@
 import { SystemMessage } from '../../../core/conversation.js';
 import { MdxSystemMessage } from '../../../react/jit-ui/mdx.js';
 import { Prompt } from '../../prompts.js';
-import { mdxUsageExamples } from './gen-ui.js';
+import { MdxUsageExamples } from './gen-ui.js';
 import { Node } from '../../../index.js';
+import { SidekickProps } from './sidekick.js';
 
-export interface SidekickSystemMessageProps {
+export interface SidekickSystemMessageProps
+  extends Pick<SidekickProps, 'outputFormat' | 'includeNextStepsRecommendations'> {
   timeZone: string;
   timeZoneOffset: string;
   userProvidedGenUIUsageExamples?: Node;
@@ -17,6 +19,8 @@ export function SidekickSystemMessage({
   timeZoneOffset,
   userProvidedGenUIUsageExamples,
   userProvidedGenUIComponentNames,
+  includeNextStepsRecommendations,
+  outputFormat,
   role,
 }: SidekickSystemMessageProps) {
   const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
@@ -39,6 +43,11 @@ export function SidekickSystemMessage({
     </SystemMessage>
   );
 
+  const baseComponentNames = ['Card', 'Citation'];
+  if (includeNextStepsRecommendations) {
+    baseComponentNames.push('NextStepsButton');
+  }
+
   return (
     <>
       {dateTimeSystemMessage}
@@ -51,15 +60,18 @@ export function SidekickSystemMessage({
         If the user asks something that is impossible, tell them **up-front** it is impossible. You can still write
         relevant helpful comments, but do not lead the user to think something can be done when it cannot be.
       </SystemMessage>
-      <MdxSystemMessage
-        componentNames={['Card', 'Citation', 'NextStepsButton', ...(userProvidedGenUIComponentNames ?? [])]}
-        usageExamples={
-          <>
-            {mdxUsageExamples}
-            {userProvidedGenUIUsageExamples}
-          </>
-        }
-      />
+      {outputFormat === 'text/markdown' && <SystemMessage>Respond with Markdown.</SystemMessage>}
+      {outputFormat === 'text/mdx' && (
+        <MdxSystemMessage
+          componentNames={[...baseComponentNames, ...(userProvidedGenUIComponentNames ?? [])]}
+          usageExamples={
+            <>
+              <MdxUsageExamples includeNextStepsRecommendations={includeNextStepsRecommendations} />
+              {userProvidedGenUIUsageExamples}
+            </>
+          }
+        />
+      )}
     </>
   );
 }

packages/docs/docs/changelog.md

@@ -1,13 +1,19 @@
 # Changelog
 
-## 0.18.0
+## 0.18.1
+
+- Modified `Sidekick` to add the following options:
+  - `outputFormat`: `text/mdx`, `text/markdown`, `text/plain`
+  - `includeNextStepsRecommendations`: `boolean`
+
+## [0.18.0](https://github.com/fixie-ai/ai-jsx/commit/36b9f02c866df9df761017fd9f8785d876d15ab8)
 
 - Added components for Automatic Speech Recognition (ASR) in `lib/asr/asr.tsx`.
 - Addec components for Text-to-Speech (TTS) in `lib/tts/tts.tsx`.
 - ASR providers include Deepgram, Speechmatics, Assembly AI, Rev AI, Soniox, and Gladia.
 - TTS providers include Google Cloud, AWS, Azure, and ElevenLabs.
 
-## 0.17.4
+## [0.17.4](https://github.com/fixie-ai/ai-jsx/commit/b002c00d3926e03769438b01443c1bb715ade496)
 
 - Fixed a bug where passing an empty `functionDefinitions` prop to `<OpenAIChatModel>` would cause an error.
 

packages/examples/package.json

@@ -36,6 +36,7 @@
     "demo:context": "yarn build && node dist/src/context.js",
     "demo:multi-model": "yarn build && node dist/src/multi-model.js",
     "demo:opentelemetry": "yarn build && node dist/src/opentelemetry.js",
+    "demo:sidekick-output-format": "yarn build && node dist/src/sidekick-output-format.js",
     "demo:wandb": "yarn build && node dist/src/wandb.js",
     "demo:helloworld": "yarn build && node dist/src/helloworld.js",
     "demo:inline-chat": "yarn build && node dist/src/inline-chat.js",

packages/examples/src/sidekick-output-format.tsx

@@ -0,0 +1,63 @@
+import * as AI from 'ai-jsx';
+import { Sidekick, SidekickProps } from 'ai-jsx/sidekick';
+import { ConversationHistoryContext, SystemMessage, UserMessage } from 'ai-jsx/core/conversation';
+
+const mySystemMessage = (
+  <SystemMessage>
+    You can do anything a flight assistant can do, including looking up user information and booking new flights. Here
+    is information about the user's upcoming flight:
+    {`{
+    "flightNumber": "UA 123",
+    "departureTime": "2021-10-31T12:00:00Z",
+    "arrivalTime": "2021-10-31T13:00:00Z",
+    "departureAirport": "SFO",
+    "arrivalAirport": "LAX"
+  }`}
+  </SystemMessage>
+);
+
+function MySidekick({
+  contentType,
+  includeNextStepsRecommendations,
+}: {
+  contentType: SidekickProps['outputFormat'];
+  includeNextStepsRecommendations?: boolean;
+}) {
+  return (
+    // I don't feel like making the types line up.
+    // @ts-expect-error
+    <Sidekick
+      role="Flight assistant"
+      outputFormat={contentType}
+      systemMessage={mySystemMessage}
+      includeNextStepsRecommendations={includeNextStepsRecommendations}
+    />
+  );
+}
+
+const conversation = [
+  <UserMessage>Tell me about my flight. Also, give me a list of cities near my destination.</UserMessage>,
+];
+
+console.log(
+  await AI.createRenderContext().render(
+    <>
+      <ConversationHistoryContext.Provider value={conversation}>
+        {/* Unfortunately, I couldn't get this to actually output next steps buttons, but I confirmed that the prompt
+          is being passed.
+         */}
+        GenUI output:{'\n'}
+        <MySidekick contentType="text/mdx" />
+        {'\n\n'}
+        GenUI output no next steps:{'\n'}
+        <MySidekick contentType="text/mdx" includeNextStepsRecommendations={false} />
+        {'\n\n'}
+        Markdown output:{'\n'}
+        <MySidekick contentType="text/markdown" />
+        {'\n\n'}
+        Plain text output:{'\n'}
+        <MySidekick contentType="text/plain" />
+      </ConversationHistoryContext.Provider>
+    </>
+  )
+);