Run the Sidekick with different models (#367)

Related to https://github.com/fixie-ai/fixie/pull/1883.

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

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

@@ -78,7 +78,7 @@ export function present(conversationElement: ConversationMessage) {
 export function getNextConversationStep(
   messages: ConversationMessage[],
   fullConversation: ConversationMessage[],
-  tools: UseToolsProps['tools']
+  tools?: UseToolsProps['tools']
 ) {
   const shrinkableConversation = getShrinkableConversation(messages, fullConversation);
   const lastMessage = messages[messages.length - 1];
@@ -101,7 +101,7 @@ export function getNextConversationStep(
         />
       );
       // If we are using a tool based on redacted functions, we don't want to redact it further
-      if (!(name in tools)) {
+      if (tools && !(name in tools)) {
         return executedFunction;
       }
       // Function responses can potentially be very large. In that case, we need
@@ -121,7 +121,9 @@ export function getNextConversationStep(
     case 'functionResponse':
       return (
         <RepairMdxInConversation>
-          <ChatCompletion functionDefinitions={updatedTools}>{shrinkableConversation}</ChatCompletion>
+          <ChatCompletion functionDefinitions={tools ? updatedTools : undefined}>
+            {shrinkableConversation}
+          </ChatCompletion>
         </RepairMdxInConversation>
       );
     default:

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

@@ -1,44 +1,11 @@
 import { present } from './conversation.js';
 import { UseTools } from './use-tools-eject.js';
 import { SidekickSystemMessage } from './system-message.js';
-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';
-export type ChatModel = OpenAIChatModel;
-
-/**
- * This is not as type safe as it could be, but I'm fine with that because the type safety would have to be enforced
- * at the API layer (e.g. req.body()), and even after we did that, I'm not convinceed we could actually assert to TS
- * that we've validated the types.
- *
- * If the user passes a modelProvider that doesn't match the model, AI.JSX will throw an error at completion time.
- */
-export function ModelProvider({
-  children,
-  modelProvider,
-  model,
-}: {
-  children: AI.Node;
-  modelProvider: ModelProvider;
-  model: ChatModel;
-}) {
-  switch (modelProvider) {
-    case 'openai':
-      return (
-        <OpenAI chatModel={model as OpenAIChatModel} temperature={0}>
-          {children}
-        </OpenAI>
-      );
-    default:
-      throw new Error(`Unknown model provider: ${modelProvider}`);
-  }
-}
-
 interface UniversalSidekickProps {
   tools?: UseToolsProps['tools'];
   systemMessage?: AI.Node;
@@ -109,20 +76,18 @@ export type SidekickProps = UniversalSidekickProps & OutputFormatSidekickProps;
 
 export function Sidekick(props: SidekickProps) {
   return (
-    <ModelProvider model="gpt-4-32k" modelProvider="openai">
-      <ShowConversation present={present}>
-        <UseTools tools={props.tools ?? {}} showSteps>
-          <SidekickSystemMessage
-            timeZone="America/Los_Angeles"
-            includeNextStepsRecommendations={props.includeNextStepsRecommendations ?? true}
-            outputFormat={props.outputFormat ?? 'text/mdx'}
-            userProvidedGenUIUsageExamples={props.genUIExamples}
-            userProvidedGenUIComponentNames={props.genUIComponentNames}
-          />
-          <ConversationHistory />
-          {props.systemMessage}
-        </UseTools>
-      </ShowConversation>
-    </ModelProvider>
+    <ShowConversation present={present}>
+      <UseTools tools={props.tools ?? undefined} showSteps>
+        <SidekickSystemMessage
+          timeZone="America/Los_Angeles"
+          includeNextStepsRecommendations={props.includeNextStepsRecommendations ?? true}
+          outputFormat={props.outputFormat ?? 'text/mdx'}
+          userProvidedGenUIUsageExamples={props.genUIExamples}
+          userProvidedGenUIComponentNames={props.genUIComponentNames}
+        />
+        <ConversationHistory />
+        {props.systemMessage}
+      </UseTools>
+    </ShowConversation>
   );
 }

packages/ai-jsx/src/batteries/sidekick/platform/use-tools-eject.tsx

@@ -1,8 +1,9 @@
 import { getNextConversationStep } from './conversation.js';
 import { Converse } from '../../../core/conversation.js';
 import { UseToolsProps } from '../../use-tools.js';
+import { SetOptional } from 'type-fest';
 
-export function UseTools(props: UseToolsProps) {
+export function UseTools(props: SetOptional<UseToolsProps, 'tools'>) {
   return (
     <Converse reply={(messages, fullConversation) => getNextConversationStep(messages, fullConversation, props.tools)}>
       {props.children}

packages/ai-jsx/src/lib/anthropic.tsx

@@ -93,7 +93,7 @@ export async function* AnthropicChatModel(
   props: AnthropicChatModelProps,
   { render, getContext, logger, memo }: AI.ComponentContext
 ): AI.RenderableStream {
-  if ('functionDefinitions' in props) {
+  if ('functionDefinitions' in props && props.functionDefinitions) {
     throw new AIJSXError(
       'Anthropic does not support function calling, but function definitions were provided.',
       ErrorCode.ChatModelDoesNotSupportFunctions,

packages/docs/docs/changelog.md

@@ -1,6 +1,12 @@
 # Changelog
 
-## 0.20.0
+## 0.21.0
+
+- `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.
+- Fix bug in Anthropic's `ChatCompletion` where it was too aggressive in checking that `tools` don't exist.
+
+## [0.20.0](https://github.com/fixie-ai/ai-jsx/commit/96e2e4e7ccca7d9bec7c417da42fb3eca26d2037)
 
 - Remove `finalSystemMessageBeforeResponse` from `Sidekick` component. The `systemMessage` is now always given to the model as the last part of the context window.
 - Remove other cruft from the built-in Sidekick system message.

packages/sidekick-github/package.json

@@ -17,6 +17,7 @@
     "deploy": "fixie deploy"
   },
   "dependencies": {
+    "@types/node": "^20.8.2",
     "ai-jsx": "*"
   },
   "files": [

yarn.lock

@@ -6602,6 +6602,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^20.8.2":
+  version: 20.8.2
+  resolution: "@types/node@npm:20.8.2"
+  checksum: 3da73e25d821bfcdb7de98589027e08bb4848e55408671c4a83ec0341e124b5313a0b20e1e4b4eff1168ea17a86f622ad73fcb04b761abd77496b9a27cbd5de5
+  languageName: node
+  linkType: hard
+
 "@types/parse-json@npm:^4.0.0":
   version: 4.0.0
   resolution: "@types/parse-json@npm:4.0.0"
@@ -22995,6 +23002,7 @@ __metadata:
   dependencies:
     "@fixieai/sdk": "*"
     "@tsconfig/node18": ^2.0.1
+    "@types/node": ^20.8.2
     ai-jsx: "*"
     typescript: ^5.1.3
   languageName: unknown