Align the chat request options for useChat across all frameworks (#859)

Co-authored-by: Lars Grammel <lgrammel@Larss-MBP.fritz.box>

.changeset/brown-tigers-destroy.md

@@ -0,0 +1,5 @@
+---
+'ai': patch
+---
+
+ai/solid: add chat request options to useChat

.changeset/thirty-tips-smash.md

@@ -0,0 +1,5 @@
+---
+'ai': patch
+---
+
+ai/vue: add chat request options to useChat

docs/pages/docs/api-reference/use-chat.mdx

@@ -151,8 +151,9 @@ The `useChat` hook returns an object containing several helper methods and varia
     ],
     [
       'handleSubmit',
-      '(e: React.FormEvent<HTMLFormElement>) => void',
-      'Form submission handler that automatically resets the input field and appends a user message.',
+      '(e: React.FormEvent<HTMLFormElement>, chatRequestOptions?: ChatRequestOptions) => void',
+      'Form submission handler that automatically resets the input field and appends a user message. ' +
+        'You can use the `options` parameter to send additional data, headers and more to the server.',
     ],
     [
       'isLoading',
@@ -444,4 +445,3 @@ The `useChat` function returns an object containing several helper methods and v
 
 </Tab>
 </FrameworkTabs>
-```

examples/nuxt-openai/pages/vision/index.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useChat } from 'ai/vue';
+
+const { messages, input, handleSubmit } = useChat({
+  api: '/api/chat-with-vision',
+});
+</script>
+
+<template>
+  <div class="flex flex-col w-full max-w-md py-24 mx-auto stretch">
+    <div v-for="m in messages" key="m.id" class="whitespace-pre-wrap">
+      {{ m.role === 'user' ? 'User: ' : 'AI: ' }}
+      {{ m.content }}
+    </div>
+
+    <form
+      @submit="
+        e =>
+          handleSubmit(e, {
+            data: {
+              imageUrl:
+                'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Field_sparrow_in_CP_%2841484%29_%28cropped%29.jpg/733px-Field_sparrow_in_CP_%2841484%29_%28cropped%29.jpg',
+            },
+          })
+      "
+    >
+      <input
+        class="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
+        v-model="input"
+        placeholder="Say something..."
+      />
+    </form>
+  </div>
+</template>

examples/nuxt-openai/server/api/chat-with-vision.ts

@@ -0,0 +1,46 @@
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+import OpenAI from 'openai';
+
+export default defineLazyEventHandler(async () => {
+  const apiKey = useRuntimeConfig().openaiApiKey;
+  if (!apiKey) throw new Error('Missing OpenAI API key');
+  const openai = new OpenAI({
+    apiKey: apiKey,
+  });
+
+  return defineEventHandler(async (event: any) => {
+    // Extract the `prompt` from the body of the request
+    const { messages, data } = await readBody(event);
+
+    const initialMessages = messages.slice(0, -1);
+    const currentMessage = messages[messages.length - 1];
+
+    // Ask OpenAI for a streaming chat completion given the prompt
+    const response = await openai.chat.completions.create({
+      model: 'gpt-4-vision-preview',
+      stream: true,
+      max_tokens: 150,
+      messages: [
+        ...initialMessages,
+        {
+          ...currentMessage,
+          content: [
+            { type: 'text', text: currentMessage.content },
+
+            // forward the image information to OpenAI:
+            {
+              type: 'image_url',
+              image_url: data.imageUrl,
+            },
+          ],
+        },
+      ],
+    });
+
+    // Convert the response into a friendly text-stream
+    const stream = OpenAIStream(response);
+
+    // Respond with the stream
+    return new StreamingTextResponse(stream);
+  });
+});

examples/solidstart-openai/src/routes/api/chat-with-vision/index.ts

@@ -0,0 +1,43 @@
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+import OpenAI from 'openai';
+import { APIEvent } from 'solid-start/api';
+
+// Create an OpenAI API client
+const openai = new OpenAI({
+  apiKey: process.env['OPENAI_API_KEY'] || '',
+});
+
+export const POST = async (event: APIEvent) => {
+  // 'data' contains the additional data that you have sent:
+  const { messages, data } = await event.request.json();
+
+  const initialMessages = messages.slice(0, -1);
+  const currentMessage = messages[messages.length - 1];
+
+  // Ask OpenAI for a streaming chat completion given the prompt
+  const response = await openai.chat.completions.create({
+    model: 'gpt-4-vision-preview',
+    stream: true,
+    max_tokens: 150,
+    messages: [
+      ...initialMessages,
+      {
+        ...currentMessage,
+        content: [
+          { type: 'text', text: currentMessage.content },
+
+          // forward the image information to OpenAI:
+          {
+            type: 'image_url',
+            image_url: data.imageUrl,
+          },
+        ],
+      },
+    ],
+  });
+
+  // Convert the response into a friendly text-stream
+  const stream = OpenAIStream(response);
+  // Respond with the stream
+  return new StreamingTextResponse(stream);
+};

examples/solidstart-openai/src/routes/vision/index.tsx

@@ -0,0 +1,46 @@
+import { For, JSX } from 'solid-js';
+import { useChat } from 'ai/solid';
+
+export default function Chat() {
+  const { messages, input, setInput, handleSubmit } = useChat({
+    api: '/api/chat-with-vision',
+  });
+
+  const handleInputChange: JSX.ChangeEventHandlerUnion<
+    HTMLInputElement,
+    Event
+  > = e => {
+    setInput(e.target.value);
+  };
+
+  return (
+    <div class="flex flex-col w-full max-w-md py-24 mx-auto stretch">
+      <For each={messages()}>
+        {m => (
+          <div class="whitespace-pre-wrap">
+            {m.role === 'user' ? 'User: ' : 'AI: '}
+            {m.content}
+          </div>
+        )}
+      </For>
+
+      <form
+        onSubmit={e =>
+          handleSubmit(e, {
+            data: {
+              imageUrl:
+                'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Field_sparrow_in_CP_%2841484%29_%28cropped%29.jpg/733px-Field_sparrow_in_CP_%2841484%29_%28cropped%29.jpg',
+            },
+          })
+        }
+      >
+        <input
+          class="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
+          value={input()}
+          placeholder="Say something..."
+          onChange={handleInputChange}
+        />
+      </form>
+    </div>
+  );
+}

packages/core/react/use-chat.ts

@@ -61,7 +61,7 @@ export type UseChatHelpers = {
       | React.ChangeEvent<HTMLInputElement>
       | React.ChangeEvent<HTMLTextAreaElement>,
   ) => void;
-  /** Form submission handler to automatically reset input and append a user message  */
+  /** Form submission handler to automatically reset input and append a user message */
   handleSubmit: (
     e: React.FormEvent<HTMLFormElement>,
     chatRequestOptions?: ChatRequestOptions,

packages/core/shared/types.ts

@@ -145,9 +145,7 @@ export type RequestOptions = {
 
 export type ChatRequestOptions = {
   options?: RequestOptions;
-  // @deprecated
   functions?: Array<Function>;
-  // @deprecated
   function_call?: FunctionCall;
   tools?: Array<Tool>;
   tool_choice?: ToolChoice;

packages/core/solid/use-chat.ts

@@ -5,10 +5,10 @@ import { callChatApi } from '../shared/call-chat-api';
 import { processChatStream } from '../shared/process-chat-stream';
 import type {
   ChatRequest,
+  ChatRequestOptions,
   CreateMessage,
   JSONValue,
   Message,
-  RequestOptions,
   UseChatOptions,
 } from '../shared/types';
 import { nanoid } from '../shared/utils';
@@ -28,14 +28,16 @@ export type UseChatHelpers = {
    */
   append: (
     message: Message | CreateMessage,
-    options?: RequestOptions,
+    chatRequestOptions?: ChatRequestOptions,
   ) => Promise<string | null | undefined>;
   /**
    * Reload the last AI chat response for the given chat history. If the last
    * message isn't from the assistant, it will request the API to generate a
    * new response.
    */
-  reload: (options?: RequestOptions) => Promise<string | null | undefined>;
+  reload: (
+    chatRequestOptions?: ChatRequestOptions,
+  ) => Promise<string | null | undefined>;
   /**
    * Abort the current request immediately, keep the generated tokens if any.
    */
@@ -50,8 +52,8 @@ export type UseChatHelpers = {
   input: Accessor<string>;
   /** Signal setter to update the input value */
   setInput: Setter<string>;
-  /** Form submission handler to automatically reset input and append a user message  */
-  handleSubmit: (e: any) => void;
+  /** Form submission handler to automatically reset input and append a user message */
+  handleSubmit: (e: any, chatRequestOptions?: ChatRequestOptions) => void;
   /** Whether the API request is in progress */
   isLoading: Accessor<boolean>;
   /** Additional data added on the server via StreamData */
@@ -109,7 +111,7 @@ export function useChat({
   let abortController: AbortController | null = null;
   async function triggerRequest(
     messagesSnapshot: Message[],
-    options?: RequestOptions,
+    { options, data }: ChatRequestOptions = {},
   ) {
     try {
       setError(undefined);
@@ -130,6 +132,7 @@ export function useChat({
       let chatRequest: ChatRequest = {
         messages: messagesSnapshot,
         options,
+        data,
       };
 
       await processChatStream({
@@ -151,6 +154,7 @@ export function useChat({
                   }),
                 ),
             body: {
+              data: chatRequest.data,
               ...body,
               ...options?.body,
             },
@@ -237,15 +241,20 @@ export function useChat({
 
   const [input, setInput] = createSignal(initialInput);
 
-  const handleSubmit = (e: any) => {
+  const handleSubmit = (e: any, options: ChatRequestOptions = {}) => {
     e.preventDefault();
     const inputValue = input();
     if (!inputValue) return;
-    append({
-      content: inputValue,
-      role: 'user',
-      createdAt: new Date(),
-    });
+
+    append(
+      {
+        content: inputValue,
+        role: 'user',
+        createdAt: new Date(),
+      },
+      options,
+    );
+
     setInput('');
   };