feat (ai/ui): support custom fetch function in useChat, useCompletion, useAssistant, useObject (#2120)

Author: lgrammel

.changeset/slimy-kangaroos-protect.md

@@ -0,0 +1,10 @@
+---
+'@ai-sdk/ui-utils': patch
+'@ai-sdk/svelte': patch
+'@ai-sdk/react': patch
+'@ai-sdk/solid': patch
+'ai': patch
+'@ai-sdk/vue': patch
+---
+
+feat (ai/ui): support custom fetch function in useChat, useCompletion, useAssistant, useObject

content/docs/07-reference/ai-sdk-ui/01-use-chat.mdx

@@ -127,6 +127,13 @@ Allows you to easily create a conversational user interface for your chatbot app
       description:
         'An optional literal that sets the mode of the stream to be used. Defaults to `stream-data`. If set to `text`, the stream will be treated as a text stream.',
     },
+    {
+      name: 'fetch',
+      type: 'FetchFunction',
+      optional: true,
+      description:
+        'Optional. A custom fetch function to be used for the API call. Defaults to the global fetch function.',
+    },
     {
       name: 'experimental_prepareRequestBody',
       type: '(options: { messages: Message[]; requestData?: Record<string, string>; requestBody?: object }) => JSONValue',

content/docs/07-reference/ai-sdk-ui/02-use-completion.mdx

@@ -116,6 +116,13 @@ Allows you to create text completion based capabilities for your application. It
       description:
         'An optional literal that sets the mode of the stream to be used. Defaults to `stream-data`. If set to `text`, the stream will be treated as a text stream.',
     },
+    {
+      name: 'fetch',
+      type: 'FetchFunction',
+      optional: true,
+      description:
+        'Optional. A custom fetch function to be used for the API call. Defaults to the global fetch function.',
+    },
   ]}
 />
 

content/docs/07-reference/ai-sdk-ui/03-use-object.mdx

@@ -67,6 +67,13 @@ export default function Page() {
       type: 'DeepPartial<RESULT> | undefined',
       description: 'An optional value for the initial object.',
     },
+    {
+      name: 'fetch',
+      type: 'FetchFunction',
+      optional: true,
+      description:
+        'Optional. A custom fetch function to be used for the API call. Defaults to the global fetch function.',
+    },
   ]}
 />
 

content/docs/07-reference/ai-sdk-ui/20-use-assistant.mdx

@@ -78,6 +78,13 @@ This works in conjunction with [`AssistantResponse`](./assistant-response) in th
       description:
         'Callback that will be called when the assistant encounters an error',
     },
+    {
+      name: 'fetch',
+      type: 'FetchFunction',
+      optional: true,
+      description:
+        'Optional. A custom fetch function to be used for the API call. Defaults to the global fetch function.',
+    },
   ]}
 />
 

examples/nuxt-openai/package.json

@@ -13,7 +13,7 @@
     "@nuxt/devtools": "0.8.0",
     "@nuxt/ui-templates": "^1.3.1",
     "@nuxtjs/tailwindcss": "^6.8.0",
-    "@types/node": "^20.5.0",
+    "@types/node": "^18",
     "@vue/reactivity": "^3.3.4",
     "@vue/runtime-core": "^3.3.4",
     "@vue/runtime-dom": "^3.3.4",

examples/sveltekit-openai/src/routes/+page.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { useChat } from '@ai-sdk/svelte'
 
 	const { input, handleSubmit, messages } = useChat()

packages/core/svelte/use-assistant.ts

@@ -8,6 +8,9 @@ import type {
 import { generateId, readDataStream } from '@ai-sdk/ui-utils';
 import { Readable, Writable, get, writable } from 'svelte/store';
 
+// use function to allow for mocking in tests:
+const getOriginalFetch = () => fetch;
+
 let uniqueId = 0;
 
 const store: Record<string, any> = {};
@@ -78,6 +81,7 @@ export function useAssistant({
   headers,
   body,
   onError,
+  fetch,
 }: UseAssistantOptions): UseAssistantHelpers {
   // Generate a unique thread ID
   const threadIdStore = writable<string | undefined>(threadIdParam);
@@ -115,7 +119,8 @@ export function useAssistant({
     input.set('');
 
     try {
-      const response = await fetch(api, {
+      const actualFetch = fetch ?? getOriginalFetch();
+      const response = await actualFetch(api, {
         method: 'POST',
         credentials,
         signal: abortController.signal,

packages/core/svelte/use-chat.ts

@@ -2,6 +2,7 @@ import type {
   ChatRequest,
   ChatRequestOptions,
   CreateMessage,
+  FetchFunction,
   IdGenerator,
   JSONValue,
   Message,
@@ -51,13 +52,11 @@ export type UseChatHelpers = {
   setMessages: (messages: Message[]) => void;
   /** The current value of the input */
   input: Writable<string>;
-
   /** Form submission handler to automatically reset input and append a user message  */
   handleSubmit: (
     event?: { preventDefault?: () => void },
     chatRequestOptions?: ChatRequestOptions,
   ) => void;
-
   metadata?: Object;
   /** Whether the API request is in progress */
   isLoading: Readable<boolean | undefined>;
@@ -79,10 +78,11 @@ const getStreamedResponse = async (
   previousMessages: Message[],
   abortControllerRef: AbortController | null,
   generateId: IdGenerator,
-  streamMode?: 'stream-data' | 'text',
-  onFinish?: (message: Message) => void,
-  onResponse?: (response: Response) => void | Promise<void>,
-  sendExtraMessageFields?: boolean,
+  streamMode: 'stream-data' | 'text' | undefined,
+  onFinish: ((message: Message) => void) | undefined,
+  onResponse: ((response: Response) => void | Promise<void>) | undefined,
+  sendExtraMessageFields: boolean | undefined,
+  fetch: FetchFunction | undefined,
 ) => {
   // Do an optimistic update to the chat state to show the updated messages
   // immediately.
@@ -115,7 +115,6 @@ const getStreamedResponse = async (
 
   return await callChatApi({
     api,
-    messages: constructedMessagesPayload,
     body: {
       messages: constructedMessagesPayload,
       data: chatRequest.data,
@@ -151,6 +150,8 @@ const getStreamedResponse = async (
     },
     onFinish,
     generateId,
+    onToolCall: undefined, // not implemented yet
+    fetch,
   });
 };
 
@@ -177,6 +178,7 @@ export function useChat({
   headers,
   body,
   generateId = generateIdFunc,
+  fetch,
 }: UseChatOptions = {}): UseChatHelpers {
   // Generate a unique id for the chat if not provided.
   const chatId = id || `chat-${uniqueId++}`;
@@ -243,6 +245,7 @@ export function useChat({
             onFinish,
             onResponse,
             sendExtraMessageFields,
+            fetch,
           ),
         experimental_onFunctionCall,
         experimental_onToolCall,
@@ -353,7 +356,6 @@ export function useChat({
     options: ChatRequestOptions = {},
   ) => {
     event?.preventDefault?.();
-
     const inputValue = get(input);
     if (!inputValue) return;
 

packages/core/svelte/use-completion.ts

@@ -31,7 +31,6 @@ export type UseCompletionHelpers = {
   setCompletion: (completion: string) => void;
   /** The current value of the input */
   input: Writable<string>;
-
   /**
    * Form submission handler to automatically reset input and append a user message
    * @example
@@ -42,7 +41,6 @@ export type UseCompletionHelpers = {
    * ```
    */
   handleSubmit: (event?: { preventDefault?: () => void }) => void;
-
   /** Whether the API request is in progress */
   isLoading: Readable<boolean | undefined>;
 
@@ -69,6 +67,7 @@ export function useCompletion({
   onResponse,
   onFinish,
   onError,
+  fetch,
 }: UseCompletionOptions = {}): UseCompletionHelpers {
   // Generate an unique id for the completion if not provided.
   const completionId = id || `completion-${uniqueId++}`;
@@ -132,6 +131,7 @@ export function useCompletion({
       onData(data) {
         streamData.set([...(existingData || []), ...(data || [])]);
       },
+      fetch,
     });
   };
 

packages/react/src/use-assistant.ts

@@ -1,5 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-
 import { isAbortError } from '@ai-sdk/provider-utils';
 import {
   AssistantStatus,
@@ -11,6 +9,9 @@ import {
 } from '@ai-sdk/ui-utils';
 import { useCallback, useRef, useState } from 'react';
 
+// use function to allow for mocking in tests:
+const getOriginalFetch = () => fetch;
+
 export type UseAssistantHelpers = {
   /**
    * The current array of chat messages.
@@ -92,6 +93,7 @@ export function useAssistant({
   headers,
   body,
   onError,
+  fetch,
 }: UseAssistantOptions): UseAssistantHelpers {
   const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState('');
@@ -140,7 +142,8 @@ export function useAssistant({
     try {
       abortControllerRef.current = abortController;
 
-      const response = await fetch(api, {
+      const actualFetch = fetch ?? getOriginalFetch();
+      const response = await actualFetch(api, {
         method: 'POST',
         credentials,
         signal: abortController.signal,

packages/react/src/use-chat.ts

@@ -2,6 +2,7 @@ import type {
   ChatRequest,
   ChatRequestOptions,
   CreateMessage,
+  FetchFunction,
   IdGenerator,
   JSONValue,
   Message,
@@ -82,16 +83,19 @@ const getStreamedResponse = async (
   messagesRef: React.MutableRefObject<Message[]>,
   abortControllerRef: React.MutableRefObject<AbortController | null>,
   generateId: IdGenerator,
-  streamMode?: 'stream-data' | 'text',
-  onFinish?: (message: Message) => void,
-  onResponse?: (response: Response) => void | Promise<void>,
-  onToolCall?: UseChatOptions['onToolCall'],
-  sendExtraMessageFields?: boolean,
-  experimental_prepareRequestBody?: (options: {
-    messages: Message[];
-    requestData?: Record<string, string>;
-    requestBody?: object;
-  }) => JSONValue,
+  streamMode: 'stream-data' | 'text' | undefined,
+  onFinish: ((message: Message) => void) | undefined,
+  onResponse: ((response: Response) => void | Promise<void>) | undefined,
+  onToolCall: UseChatOptions['onToolCall'] | undefined,
+  sendExtraMessageFields: boolean | undefined,
+  experimental_prepareRequestBody:
+    | ((options: {
+        messages: Message[];
+        requestData?: Record<string, string>;
+        requestBody?: object;
+      }) => JSONValue)
+    | undefined,
+  fetch: FetchFunction | undefined,
 ) => {
   // Do an optimistic update to the chat state to show the updated messages
   // immediately.
@@ -127,7 +131,6 @@ const getStreamedResponse = async (
 
   return await callChatApi({
     api,
-    messages: constructedMessagesPayload,
     body: experimental_prepareRequestBody?.({
       messages: chatRequest.messages,
       requestData: chatRequest.data,
@@ -168,6 +171,7 @@ const getStreamedResponse = async (
     onToolCall,
     onFinish,
     generateId,
+    fetch,
   });
 };
 
@@ -335,6 +339,7 @@ By default, it's set to 0, which will disable the feature.
               onToolCall,
               sendExtraMessageFields,
               experimental_prepareRequestBody,
+              fetch,
             ),
           experimental_onFunctionCall,
           experimental_onToolCall,

packages/react/src/use-completion.ts

@@ -72,6 +72,7 @@ export function useCompletion({
   headers,
   body,
   streamMode,
+  fetch,
   onResponse,
   onFinish,
   onError,
@@ -126,6 +127,7 @@ export function useCompletion({
           ...options?.body,
         },
         streamMode,
+        fetch,
         setCompletion: completion => mutate(completion, false),
         setLoading: mutateLoading,
         setError,
@@ -149,6 +151,7 @@ export function useCompletion({
       setError,
       streamData,
       streamMode,
+      fetch,
       mutateStreamData,
     ],
   );

packages/react/src/use-object.ts

@@ -1,12 +1,16 @@
 import {
   DeepPartial,
+  FetchFunction,
   isDeepEqualData,
   parsePartialJson,
 } from '@ai-sdk/ui-utils';
 import { useCallback, useId, useRef, useState } from 'react';
 import useSWR from 'swr';
 import z from 'zod';
 
+// use function to allow for mocking in tests:
+const getOriginalFetch = () => fetch;
+
 export type Experimental_UseObjectOptions<RESULT> = {
   /**
    * The API endpoint. It should stream JSON that matches the schema as chunked text.
@@ -29,6 +33,12 @@ export type Experimental_UseObjectOptions<RESULT> = {
    * An optional value for the initial object.
    */
   initialValue?: DeepPartial<RESULT>;
+
+  /**
+Custom fetch implementation. You can use it as a middleware to intercept requests,
+or to provide a custom fetch implementation for e.g. testing.
+    */
+  fetch?: FetchFunction;
 };
 
 export type Experimental_UseObjectHelpers<RESULT, INPUT> = {
@@ -68,6 +78,7 @@ function useObject<RESULT, INPUT = any>({
   id,
   schema, // required, in the future we will use it for validation
   initialValue,
+  fetch,
 }: Experimental_UseObjectOptions<RESULT>): Experimental_UseObjectHelpers<
   RESULT,
   INPUT
@@ -101,7 +112,8 @@ function useObject<RESULT, INPUT = any>({
       const abortController = new AbortController();
       abortControllerRef.current = abortController;
 
-      const response = await fetch(api, {
+      const actualFetch = fetch ?? getOriginalFetch();
+      const response = await actualFetch(api, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         signal: abortController.signal,

packages/solid/src/use-chat.ts

@@ -2,6 +2,7 @@ import type {
   ChatRequest,
   ChatRequestOptions,
   CreateMessage,
+  FetchFunction,
   IdGenerator,
   JSONValue,
   Message,
@@ -76,6 +77,12 @@ export type UseChatHelpers = {
   isLoading: Accessor<boolean>;
   /** Additional data added on the server via StreamData */
   data: Accessor<JSONValue[] | undefined>;
+
+  /**
+Custom fetch implementation. You can use it as a middleware to intercept requests,
+or to provide a custom fetch implementation for e.g. testing.
+    */
+  fetch?: FetchFunction;
 };
 
 const getStreamedResponse = async (
@@ -88,15 +95,17 @@ const getStreamedResponse = async (
   messagesRef: Message[],
   abortController: AbortController | null,
   generateId: IdGenerator,
-  streamMode?: 'stream-data' | 'text',
-  onFinish?: UseChatOptions['onFinish'],
-  onResponse?: UseChatOptions['onResponse'],
-  onToolCall?: UseChatOptions['onToolCall'],
-  sendExtraMessageFields?: boolean,
+  streamMode: 'stream-data' | 'text' | undefined,
+  onFinish: UseChatOptions['onFinish'] | undefined,
+  onResponse: UseChatOptions['onResponse'] | undefined,
+  onToolCall: UseChatOptions['onToolCall'] | undefined,
+  sendExtraMessageFields: boolean | undefined,
+  fetch: FetchFunction | undefined,
 ) => {
   // Do an optimistic update to the chat state to show the updated messages
   // immediately.
   const previousMessages = messagesRef;
+
   mutate(chatRequest.messages);
 
   const existingStreamData = streamData() ?? [];
@@ -116,7 +125,6 @@ const getStreamedResponse = async (
 
   return await callChatApi({
     api,
-    messages: constructedMessagesPayload,
     body: {
       messages: constructedMessagesPayload,
       data: chatRequest.data,
@@ -141,6 +149,7 @@ const getStreamedResponse = async (
     onToolCall,
     onFinish,
     generateId,
+    fetch,
   });
 };
 
@@ -248,6 +257,7 @@ export function useChat(
             useChatOptions().onResponse?.(),
             useChatOptions().onToolCall?.(),
             useChatOptions().sendExtraMessageFields?.(),
+            useChatOptions().fetch?.(),
           ),
         experimental_onFunctionCall:
           useChatOptions().experimental_onFunctionCall?.(),

packages/solid/src/use-completion.ts

@@ -1,4 +1,5 @@
 import type {
+  FetchFunction,
   JSONValue,
   RequestOptions,
   UseCompletionOptions,
@@ -61,6 +62,12 @@ export type UseCompletionHelpers = {
   isLoading: Accessor<boolean>;
   /** Additional data added on the server via StreamData */
   data: Accessor<JSONValue[] | undefined>;
+
+  /**
+Custom fetch implementation. You can use it as a middleware to intercept requests,
+or to provide a custom fetch implementation for e.g. testing.
+    */
+  fetch?: FetchFunction;
 };
 
 const [store, setStore] = createStore<Record<string, string>>({});
@@ -139,6 +146,7 @@ export function useCompletion(
       onData: data => {
         setStreamData([...existingData, ...(data ?? [])]);
       },
+      fetch: useCompletionOptions().fetch?.(),
     });
   };
 

packages/svelte/src/use-assistant.ts

@@ -8,6 +8,9 @@ import type {
 import { generateId, readDataStream } from '@ai-sdk/ui-utils';
 import { Readable, Writable, get, writable } from 'svelte/store';
 
+// use function to allow for mocking in tests:
+const getOriginalFetch = () => fetch;
+
 let uniqueId = 0;
 
 const store: Record<string, any> = {};
@@ -75,6 +78,7 @@ export function useAssistant({
   headers,
   body,
   onError,
+  fetch,
 }: UseAssistantOptions): UseAssistantHelpers {
   // Generate a unique thread ID
   const threadIdStore = writable<string | undefined>(threadIdParam);
@@ -112,7 +116,8 @@ export function useAssistant({
     input.set('');
 
     try {
-      const response = await fetch(api, {
+      const actualFetch = fetch ?? getOriginalFetch();
+      const response = await actualFetch(api, {
         method: 'POST',
         credentials,
         signal: abortController.signal,

packages/svelte/src/use-chat.ts

@@ -2,6 +2,7 @@ import type {
   ChatRequest,
   ChatRequestOptions,
   CreateMessage,
+  FetchFunction,
   IdGenerator,
   JSONValue,
   Message,
@@ -77,10 +78,11 @@ const getStreamedResponse = async (
   previousMessages: Message[],
   abortControllerRef: AbortController | null,
   generateId: IdGenerator,
-  streamMode?: 'stream-data' | 'text',
-  onFinish?: (message: Message) => void,
-  onResponse?: (response: Response) => void | Promise<void>,
-  sendExtraMessageFields?: boolean,
+  streamMode: 'stream-data' | 'text' | undefined,
+  onFinish: ((message: Message) => void) | undefined,
+  onResponse: ((response: Response) => void | Promise<void>) | undefined,
+  sendExtraMessageFields: boolean | undefined,
+  fetch: FetchFunction | undefined,
 ) => {
   // Do an optimistic update to the chat state to show the updated messages
   // immediately.
@@ -113,7 +115,6 @@ const getStreamedResponse = async (
 
   return await callChatApi({
     api,
-    messages: constructedMessagesPayload,
     body: {
       messages: constructedMessagesPayload,
       data: chatRequest.data,
@@ -149,6 +150,8 @@ const getStreamedResponse = async (
     },
     onFinish,
     generateId,
+    onToolCall: undefined, // not implemented yet
+    fetch,
   });
 };
 
@@ -172,6 +175,7 @@ export function useChat({
   headers,
   body,
   generateId = generateIdFunc,
+  fetch,
 }: UseChatOptions = {}): UseChatHelpers {
   // Generate a unique id for the chat if not provided.
   const chatId = id || `chat-${uniqueId++}`;
@@ -238,6 +242,7 @@ export function useChat({
             onFinish,
             onResponse,
             sendExtraMessageFields,
+            fetch,
           ),
         experimental_onFunctionCall,
         experimental_onToolCall,

packages/svelte/src/use-completion.ts

@@ -64,6 +64,7 @@ export function useCompletion({
   onResponse,
   onFinish,
   onError,
+  fetch,
 }: UseCompletionOptions = {}): UseCompletionHelpers {
   // Generate an unique id for the completion if not provided.
   const completionId = id || `completion-${uniqueId++}`;
@@ -127,6 +128,7 @@ export function useCompletion({
       onData(data) {
         streamData.set([...(existingData || []), ...(data || [])]);
       },
+      fetch,
     });
   };
 

packages/ui-utils/src/call-chat-api.ts

@@ -2,9 +2,11 @@ import { parseComplexResponse } from './parse-complex-response';
 import { IdGenerator, JSONValue, Message, UseChatOptions } from './types';
 import { createChunkDecoder } from './index';
 
+// use function to allow for mocking in tests:
+const getOriginalFetch = () => fetch;
+
 export async function callChatApi({
   api,
-  messages,
   body,
   streamMode = 'stream-data',
   credentials,
@@ -16,20 +18,21 @@ export async function callChatApi({
   onFinish,
   onToolCall,
   generateId,
+  fetch = getOriginalFetch(),
 }: {
   api: string;
-  messages: Omit<Message, 'id'>[];
   body: Record<string, any>;
-  streamMode?: 'stream-data' | 'text';
-  credentials?: RequestCredentials;
-  headers?: HeadersInit;
-  abortController?: () => AbortController | null;
+  streamMode: 'stream-data' | 'text' | undefined;
+  credentials: RequestCredentials | undefined;
+  headers: HeadersInit | undefined;
+  abortController: (() => AbortController | null) | undefined;
   restoreMessagesOnFailure: () => void;
-  onResponse?: (response: Response) => void | Promise<void>;
+  onResponse: ((response: Response) => void | Promise<void>) | undefined;
   onUpdate: (merged: Message[], data: JSONValue[] | undefined) => void;
-  onFinish?: (message: Message) => void;
-  onToolCall?: UseChatOptions['onToolCall'];
+  onFinish: ((message: Message) => void) | undefined;
+  onToolCall: UseChatOptions['onToolCall'] | undefined;
   generateId: IdGenerator;
+  fetch: ReturnType<typeof getOriginalFetch> | undefined;
 }) {
   const response = await fetch(api, {
     method: 'POST',

packages/ui-utils/src/call-completion-api.ts

@@ -2,6 +2,9 @@ import { readDataStream } from './read-data-stream';
 import { JSONValue } from './types';
 import { createChunkDecoder } from './index';
 
+// use function to allow for mocking in tests:
+const getOriginalFetch = () => fetch;
+
 export async function callCompletionApi({
   api,
   prompt,
@@ -17,21 +20,23 @@ export async function callCompletionApi({
   onFinish,
   onError,
   onData,
+  fetch = getOriginalFetch(),
 }: {
   api: string;
   prompt: string;
-  credentials?: RequestCredentials;
-  headers?: HeadersInit;
+  credentials: RequestCredentials | undefined;
+  headers: HeadersInit | undefined;
   body: Record<string, any>;
-  streamMode?: 'stream-data' | 'text';
+  streamMode: 'stream-data' | 'text' | undefined;
   setCompletion: (completion: string) => void;
   setLoading: (loading: boolean) => void;
   setError: (error: Error | undefined) => void;
   setAbortController: (abortController: AbortController | null) => void;
-  onResponse?: (response: Response) => void | Promise<void>;
-  onFinish?: (prompt: string, completion: string) => void;
-  onError?: (error: Error) => void;
-  onData?: (data: JSONValue[]) => void;
+  onResponse: ((response: Response) => void | Promise<void>) | undefined;
+  onFinish: ((prompt: string, completion: string) => void) | undefined;
+  onError: ((error: Error) => void) | undefined;
+  onData: ((data: JSONValue[]) => void) | undefined;
+  fetch: ReturnType<typeof getOriginalFetch> | undefined;
 }) {
   try {
     setLoading(true);

packages/ui-utils/src/types.ts

@@ -386,6 +386,12 @@ either synchronously or asynchronously.
 
   /** Stream mode (default to "stream-data") */
   streamMode?: 'stream-data' | 'text';
+
+  /**
+Custom fetch implementation. You can use it as a middleware to intercept requests,
+or to provide a custom fetch implementation for e.g. testing.
+    */
+  fetch?: FetchFunction;
 };
 
 export type UseCompletionOptions = {
@@ -454,6 +460,12 @@ export type UseCompletionOptions = {
 
   /** Stream mode (default to "stream-data") */
   streamMode?: 'stream-data' | 'text';
+
+  /**
+Custom fetch implementation. You can use it as a middleware to intercept requests,
+or to provide a custom fetch implementation for e.g. testing.
+    */
+  fetch?: FetchFunction;
 };
 
 export type JSONValue =
@@ -487,3 +499,8 @@ export type DataMessage = {
   role: 'data';
   data: JSONValue; // application-specific data
 };
+
+/**
+ * Fetch function type (standardizes the version of fetch used).
+ */
+export type FetchFunction = typeof fetch;

packages/ui-utils/src/use-assistant-types.ts

@@ -1,3 +1,5 @@
+import { FetchFunction } from './types';
+
 // Define a type for the assistant status
 export type AssistantStatus = 'in_progress' | 'awaiting_message';
 
@@ -35,4 +37,10 @@ export type UseAssistantOptions = {
    * An optional callback that will be called when the assistant encounters an error.
    */
   onError?: (error: Error) => void;
+
+  /**
+Custom fetch implementation. You can use it as a middleware to intercept requests,
+or to provide a custom fetch implementation for e.g. testing.
+    */
+  fetch?: FetchFunction;
 };

packages/vue/src/use-chat.ts

@@ -83,6 +83,7 @@ export function useChat({
   headers,
   body,
   generateId = generateIdFunc,
+  fetch,
 }: UseChatOptions = {}): UseChatHelpers {
   // Generate a unique ID for the chat if not provided.
   const chatId = id || `chat-${uniqueId++}`;
@@ -164,7 +165,6 @@ export function useChat({
 
           return await callChatApi({
             api,
-            messages: constructedMessagesPayload,
             body: {
               messages: constructedMessagesPayload,
               data: chatRequest.data,
@@ -194,6 +194,8 @@ export function useChat({
               mutate(previousMessages);
             },
             generateId,
+            onToolCall: undefined, // not implemented yet
+            fetch,
           });
         },
         experimental_onFunctionCall,

packages/vue/src/use-completion.ts

@@ -67,6 +67,7 @@ export function useCompletion({
   onResponse,
   onFinish,
   onError,
+  fetch,
 }: UseCompletionOptions = {}): UseCompletionHelpers {
   // Generate an unique id for the completion if not provided.
   const completionId = id || `completion-${uniqueId++}`;
@@ -132,6 +133,7 @@ export function useCompletion({
       onData: data => {
         mutateStreamData(() => [...existingData, ...(data ?? [])]);
       },
+      fetch,
     });
   }