ai 2.1.0 → 2.1.3

package/README.md

@@ -0,0 +1,89 @@
+# Vercel AI SDK
+
+The Vercel AI SDK is **a library for building edge-ready AI-powered streaming text and chat UIs**.
+
+## Features
+
+- [SWR](https://swr.vercel.app)-powered React, Svelte and Vue helpers for streaming text responses and building chat and completion UIs
+- First-class support for [LangChain](js.langchain.com/docs) and [OpenAI](https://openai.com), [Anthropic](https://www.anthropic.com), and [HuggingFace](https://huggingface.co)
+- [Edge Runtime](https://edge-runtime.vercel.app/) compatibility
+- Callbacks for saving completed streaming responses to a database (in the same request)
+
+## Installation
+
+```sh
+pnpm install ai
+```
+
+## Example: An AI Chatbot with Next.js and OpenAI
+
+With the Vercel AI SDK, you can build a ChatGPT-like app in just a few lines of code:
+
+```tsx
+// ./app/api/chat/route.js
+import { Configuration, OpenAIApi } from 'openai-edge'
+import { OpenAIStream, StreamingTextResponse } from 'ai'
+
+const config = new Configuration({
+  apiKey: process.env.OPENAI_API_KEY
+})
+const openai = new OpenAIApi(config)
+
+export const runtime = 'edge'
+
+export async function POST(req) {
+  const { messages } = await req.json()
+  const response = await openai.createChatCompletion({
+    model: 'gpt-4',
+    stream: true,
+    messages
+  })
+  const stream = OpenAIStream(response)
+  return new StreamingTextResponse(stream)
+}
+```
+
+```tsx
+// ./app/page.js
+'use client'
+
+import { useChat } from 'ai/react'
+
+export default function Chat() {
+  const { messages, input, handleInputChange, handleSubmit } = useChat()
+
+  return (
+    <div>
+      {messages.map(m => (
+        <div key={m.id}>
+          {m.role}: {m.content}
+        </div>
+      ))}
+
+      <form onSubmit={handleSubmit}>
+        <input
+          value={input}
+          placeholder="Say something..."
+          onChange={handleInputChange}
+        />
+      </form>
+    </div>
+  )
+}
+```
+
+---
+
+View the full documentation and examples on [play.vercel.ai/docs](https://play.vercel.ai/docs)
+
+## Authors
+
+This library is created by [Vercel](https://vercel.com) and [Next.js](https://nextjs.org) team members, with contributions from:
+
+- Jared Palmer ([@jaredpalmer](https://twitter.com/jaredpalmer)) - [Vercel](https://vercel.com)
+- Shu Ding ([@shuding\_](https://twitter.com/shuding_)) - [Vercel](https://vercel.com)
+- Max Leiter ([@max_leiter](https://twitter.com/max_leiter)) - [Vercel](https://vercel.com)
+- Malte Ubl ([@cramforce](https://twitter.com/cramforce)) - [Vercel](https://vercel.com)
+- Justin Ridgewell ([@jridgewell](https://github.com/jridgewell)) - [Vercel](https://vercel.com)
+
+[Contributors](https://github.com/vercel-labs/ai/graphs/contributors)

package/dist/index.d.ts

@@ -1,10 +1,50 @@
-export { AIStream, AIStreamCallbacks, AIStreamParser, createCallbacksTransformer, createEventStreamTransformer, trimStartOfStreamHelper } from './ai-stream.js';
-export { OpenAIStream } from './openai-stream.js';
-export { StreamingTextResponse, streamToResponse } from './streaming-text-response.js';
-export { HuggingFaceStream } from './huggingface-stream.js';
-export { AnthropicStream } from './anthropic-stream.js';
-export { LangChainStream } from './langchain-stream.js';
-import 'node:http';
+import { ServerResponse } from 'node:http';
+
+interface AIStreamCallbacks {
+    onStart?: () => Promise<void>;
+    onCompletion?: (completion: string) => Promise<void>;
+    onToken?: (token: string) => Promise<void>;
+}
+interface AIStreamParser {
+    (data: string): string | void;
+}
+declare function createEventStreamTransformer(customParser: AIStreamParser): TransformStream<Uint8Array, string>;
+/**
+ * This stream forks input stream, allowing us to use the result as a
+ * bytestream of the messages and pass the messages to our callback interface.
+ */
+declare function createCallbacksTransformer(callbacks: AIStreamCallbacks | undefined): TransformStream<string, Uint8Array>;
+declare function trimStartOfStreamHelper(): (text: string) => string;
+declare function AIStream(res: Response, customParser: AIStreamParser, callbacks?: AIStreamCallbacks): ReadableStream;
+
+declare function OpenAIStream(res: Response, cb?: AIStreamCallbacks): ReadableStream;
+
+/**
+ * A utility class for streaming text responses.
+ */
+declare class StreamingTextResponse extends Response {
+    constructor(res: ReadableStream, init?: ResponseInit);
+}
+/**
+ * A utility function to stream a ReadableStream to a Node.js response-like object.
+ */
+declare function streamToResponse(res: ReadableStream, response: ServerResponse, init?: {
+    headers?: Record<string, string>;
+    status?: number;
+}): void;
+
+declare function HuggingFaceStream(res: AsyncGenerator<any>, callbacks?: AIStreamCallbacks): ReadableStream;
+
+declare function AnthropicStream(res: Response, cb?: AIStreamCallbacks): ReadableStream;
+
+declare function LangChainStream(callbacks?: AIStreamCallbacks): {
+    stream: ReadableStream<Uint8Array>;
+    handlers: {
+        handleLLMNewToken: (token: string) => Promise<void>;
+        handleChainEnd: () => Promise<void>;
+        handleLLMError: (e: any) => Promise<void>;
+    };
+};
 
 /**
  * Shared types between the API and UI packages.
@@ -128,4 +168,4 @@ type UseCompletionOptions = {
     body?: object;
 };
 
-export { CreateMessage, Message, UseChatOptions, UseCompletionOptions };
+export { AIStream, AIStreamCallbacks, AIStreamParser, AnthropicStream, CreateMessage, HuggingFaceStream, LangChainStream, Message, OpenAIStream, StreamingTextResponse, UseChatOptions, UseCompletionOptions, createCallbacksTransformer, createEventStreamTransformer, streamToResponse, trimStartOfStreamHelper };

package/dist/index.mjs

@@ -1,30 +1,238 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// streams/ai-stream.ts
 import {
-  init_streams
-} from "./chunk-7KLTYB74.mjs";
-import {
-  AnthropicStream
-} from "./chunk-TWW2ODJW.mjs";
-import {
-  HuggingFaceStream
-} from "./chunk-KKQRUR3E.mjs";
-import {
-  LangChainStream
-} from "./chunk-U2OQ6HW6.mjs";
-import {
-  OpenAIStream
-} from "./chunk-BJMBMGA3.mjs";
-import {
-  AIStream,
-  createCallbacksTransformer,
-  createEventStreamTransformer,
-  trimStartOfStreamHelper
-} from "./chunk-UJV6VDVU.mjs";
-import {
-  StreamingTextResponse,
-  streamToResponse
-} from "./chunk-RBP6ONSV.mjs";
-import "./chunk-2JQWCLY2.mjs";
-init_streams();
+  createParser
+} from "eventsource-parser";
+function createEventStreamTransformer(customParser) {
+  const decoder = new TextDecoder();
+  let parser;
+  return new TransformStream({
+    start(controller) {
+      return __async(this, null, function* () {
+        function onParse(event) {
+          if (event.type === "event") {
+            const data = event.data;
+            if (data === "[DONE]") {
+              controller.terminate();
+              return;
+            }
+            const message = customParser(data);
+            if (message)
+              controller.enqueue(message);
+          }
+        }
+        parser = createParser(onParse);
+      });
+    },
+    transform(chunk) {
+      parser.feed(decoder.decode(chunk));
+    }
+  });
+}
+function createCallbacksTransformer(callbacks) {
+  const encoder = new TextEncoder();
+  let fullResponse = "";
+  const { onStart, onToken, onCompletion } = callbacks || {};
+  return new TransformStream({
+    start() {
+      return __async(this, null, function* () {
+        if (onStart)
+          yield onStart();
+      });
+    },
+    transform(message, controller) {
+      return __async(this, null, function* () {
+        controller.enqueue(encoder.encode(message));
+        if (onToken)
+          yield onToken(message);
+        if (onCompletion)
+          fullResponse += message;
+      });
+    },
+    flush() {
+      return __async(this, null, function* () {
+        yield onCompletion == null ? void 0 : onCompletion(fullResponse);
+      });
+    }
+  });
+}
+function trimStartOfStreamHelper() {
+  let start = true;
+  return (text) => {
+    if (start)
+      text = text.trimStart();
+    if (text)
+      start = false;
+    return text;
+  };
+}
+function AIStream(res, customParser, callbacks) {
+  if (!res.ok) {
+    throw new Error(
+      `Failed to convert the response to stream. Received status code: ${res.status}.`
+    );
+  }
+  const stream = res.body || new ReadableStream({
+    start(controller) {
+      controller.close();
+    }
+  });
+  return stream.pipeThrough(createEventStreamTransformer(customParser)).pipeThrough(createCallbacksTransformer(callbacks));
+}
+
+// streams/openai-stream.ts
+function parseOpenAIStream() {
+  const trimStartOfStream = trimStartOfStreamHelper();
+  return (data) => {
+    var _a, _b, _c, _d, _e;
+    const json = JSON.parse(data);
+    const text = trimStartOfStream(
+      (_e = (_d = (_b = (_a = json.choices[0]) == null ? void 0 : _a.delta) == null ? void 0 : _b.content) != null ? _d : (_c = json.choices[0]) == null ? void 0 : _c.text) != null ? _e : ""
+    );
+    return text;
+  };
+}
+function OpenAIStream(res, cb) {
+  return AIStream(res, parseOpenAIStream(), cb);
+}
+
+// streams/streaming-text-response.ts
+var StreamingTextResponse = class extends Response {
+  constructor(res, init) {
+    super(res, __spreadProps(__spreadValues({}, init), {
+      status: 200,
+      headers: __spreadValues({
+        "Content-Type": "text/plain; charset=utf-8"
+      }, init == null ? void 0 : init.headers)
+    }));
+  }
+};
+function streamToResponse(res, response, init) {
+  response.writeHead((init == null ? void 0 : init.status) || 200, __spreadValues({
+    "Content-Type": "text/plain; charset=utf-8"
+  }, init == null ? void 0 : init.headers));
+  const reader = res.getReader();
+  function read() {
+    reader.read().then(({ done, value }) => {
+      if (done) {
+        response.end();
+        return;
+      }
+      response.write(value);
+      read();
+    });
+  }
+  read();
+}
+
+// streams/huggingface-stream.ts
+function createParser2(res) {
+  const trimStartOfStream = trimStartOfStreamHelper();
+  return new ReadableStream({
+    pull(controller) {
+      return __async(this, null, function* () {
+        var _a2, _b;
+        const { value, done } = yield res.next();
+        if (done) {
+          controller.close();
+          return;
+        }
+        const text = trimStartOfStream((_b = (_a2 = value.token) == null ? void 0 : _a2.text) != null ? _b : "");
+        if (!text)
+          return;
+        if (value.generated_text != null && value.generated_text.length > 0) {
+          controller.close();
+          return;
+        }
+        if (text === "</s>" || text === "<|endoftext|>") {
+          controller.close();
+        } else {
+          controller.enqueue(text);
+        }
+      });
+    }
+  });
+}
+function HuggingFaceStream(res, callbacks) {
+  return createParser2(res).pipeThrough(createCallbacksTransformer(callbacks));
+}
+
+// streams/anthropic-stream.ts
+function parseAnthropicStream() {
+  let previous = "";
+  return (data) => {
+    const json = JSON.parse(data);
+    const text = json.completion;
+    const delta = text.slice(previous.length);
+    previous = text;
+    return delta;
+  };
+}
+function AnthropicStream(res, cb) {
+  return AIStream(res, parseAnthropicStream(), cb);
+}
+
+// streams/langchain-stream.ts
+function LangChainStream(callbacks) {
+  const stream = new TransformStream();
+  const writer = stream.writable.getWriter();
+  return {
+    stream: stream.readable.pipeThrough(createCallbacksTransformer(callbacks)),
+    handlers: {
+      handleLLMNewToken: (token) => __async(this, null, function* () {
+        yield writer.ready;
+        yield writer.write(token);
+      }),
+      handleChainEnd: () => __async(this, null, function* () {
+        yield writer.ready;
+        yield writer.close();
+      }),
+      handleLLMError: (e) => __async(this, null, function* () {
+        yield writer.ready;
+        yield writer.abort(e);
+      })
+    }
+  };
+}
 export {
   AIStream,
   AnthropicStream,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai",
-  "version": "2.1.0",
+  "version": "2.1.3",
   "license": "Apache-2.0",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -61,8 +61,8 @@
     "ts-jest": "29.0.3",
     "tsup": "^6.7.0",
     "typescript": "^4.5.3",
-    "@vercel/ai-tsconfig": "0.0.0",
-    "eslint-config-vercel-ai": "0.0.0"
+    "eslint-config-vercel-ai": "0.0.0",
+    "@vercel/ai-tsconfig": "0.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -88,7 +88,7 @@
   },
   "scripts": {
     "build": "tsup",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm -rf react/dist && rm -rf svelte/dist && rm -rf vue/dist",
+    "clean": "rm -rf dist && rm -rf react/dist && rm -rf svelte/dist && rm -rf vue/dist",
     "dev": "tsup --watch",
     "lint": "eslint \"./**/*.ts*\"",
     "type-check": "tsc --noEmit",

package/react/dist/index.d.ts

@@ -1,3 +1,206 @@
-export { UseChatHelpers, useChat } from './use-chat.js';
-export { UseCompletionHelpers, useCompletion } from './use-completion.js';
-export { C as CreateMessage, M as Message, U as UseChatOptions } from './types-f862f74a.js';
+/**
+ * Shared types between the API and UI packages.
+ */
+type Message = {
+    id: string;
+    createdAt?: Date;
+    content: string;
+    role: 'system' | 'user' | 'assistant';
+};
+type CreateMessage = {
+    id?: string;
+    createdAt?: Date;
+    content: string;
+    role: 'system' | 'user' | 'assistant';
+};
+type UseChatOptions = {
+    /**
+     * The API endpoint that accepts a `{ messages: Message[] }` object and returns
+     * a stream of tokens of the AI chat response. Defaults to `/api/chat`.
+     */
+    api?: string;
+    /**
+     * An unique identifier for the chat. If not provided, a random one will be
+     * generated. When provided, the `useChat` hook with the same `id` will
+     * have shared states across components.
+     */
+    id?: string;
+    /**
+     * Initial messages of the chat. Useful to load an existing chat history.
+     */
+    initialMessages?: Message[];
+    /**
+     * Initial input of the chat.
+     */
+    initialInput?: string;
+    /**
+     * Callback function to be called when the API response is received.
+     */
+    onResponse?: (response: Response) => void;
+    /**
+     * Callback function to be called when the chat is finished streaming.
+     */
+    onFinish?: (message: Message) => void;
+    /**
+     * Callback function to be called when an error is encountered.
+     */
+    onError?: (error: Error) => void;
+    /**
+     * HTTP headers to be sent with the API request.
+     */
+    headers?: Record<string, string> | Headers;
+    /**
+     * Extra body object to be sent with the API request.
+     * @example
+     * Send a `sessionId` to the API along with the messages.
+     * ```js
+     * useChat({
+     *   body: {
+     *     sessionId: '123',
+     *   }
+     * })
+     * ```
+     */
+    body?: object;
+    /**
+     * Whether to send extra message fields such as `message.id` and `message.createdAt` to the API.
+     * Defaults to `false`. When set to `true`, the API endpoint might need to
+     * handle the extra fields before forwarding the request to the AI service.
+     */
+    sendExtraMessageFields?: boolean;
+};
+type UseCompletionOptions = {
+    /**
+     * The API endpoint that accepts a `{ prompt: string }` object and returns
+     * a stream of tokens of the AI completion response. Defaults to `/api/completion`.
+     */
+    api?: string;
+    /**
+     * An unique identifier for the chat. If not provided, a random one will be
+     * generated. When provided, the `useChat` hook with the same `id` will
+     * have shared states across components.
+     */
+    id?: string;
+    /**
+     * Initial prompt input of the completion.
+     */
+    initialInput?: string;
+    /**
+     * Initial completion result. Useful to load an existing history.
+     */
+    initialCompletion?: string;
+    /**
+     * Callback function to be called when the API response is received.
+     */
+    onResponse?: (response: Response) => void;
+    /**
+     * Callback function to be called when the completion is finished streaming.
+     */
+    onFinish?: (prompt: string, completion: string) => void;
+    /**
+     * Callback function to be called when an error is encountered.
+     */
+    onError?: (error: Error) => void;
+    /**
+     * HTTP headers to be sent with the API request.
+     */
+    headers?: Record<string, string> | Headers;
+    /**
+     * Extra body object to be sent with the API request.
+     * @example
+     * Send a `sessionId` to the API along with the prompt.
+     * ```js
+     * useChat({
+     *   body: {
+     *     sessionId: '123',
+     *   }
+     * })
+     * ```
+     */
+    body?: object;
+};
+
+type UseChatHelpers = {
+    /** Current messages in the chat */
+    messages: Message[];
+    /** The error object of the API request */
+    error: undefined | Error;
+    /**
+     * Append a user message to the chat list. This triggers the API call to fetch
+     * the assistant's response.
+     */
+    append: (message: Message | CreateMessage) => 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: () => Promise<string | null | undefined>;
+    /**
+     * Abort the current request immediately, keep the generated tokens if any.
+     */
+    stop: () => void;
+    /**
+     * Update the `messages` state locally. This is useful when you want to
+     * edit the messages on the client, and then trigger the `reload` method
+     * manually to regenerate the AI response.
+     */
+    setMessages: (messages: Message[]) => void;
+    /** The current value of the input */
+    input: string;
+    /** setState-powered method to update the input value */
+    setInput: React.Dispatch<React.SetStateAction<string>>;
+    /** An input/textarea-ready onChange handler to control the value of the input */
+    handleInputChange: (e: any) => void;
+    /** Form submission handler to automattically reset input and append a user message  */
+    handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+    /** Whether the API request is in progress */
+    isLoading: boolean;
+};
+declare function useChat({ api, id, initialMessages, initialInput, sendExtraMessageFields, onResponse, onFinish, onError, headers, body }?: UseChatOptions): UseChatHelpers;
+
+type UseCompletionHelpers = {
+    /** The current completion result */
+    completion: string;
+    /**
+     * Send a new prompt to the API endpoint and update the completion state.
+     */
+    complete: (prompt: string) => Promise<string | null | undefined>;
+    /** The error object of the API request */
+    error: undefined | Error;
+    /**
+     * Abort the current API request but keep the generated tokens.
+     */
+    stop: () => void;
+    /**
+     * Update the `completion` state locally.
+     */
+    setCompletion: (completion: string) => void;
+    /** The current value of the input */
+    input: string;
+    /** setState-powered method to update the input value */
+    setInput: React.Dispatch<React.SetStateAction<string>>;
+    /**
+     * An input/textarea-ready onChange handler to control the value of the input
+     * @example
+     * ```jsx
+     * <input onChange={handleInputChange} value={input} />
+     * ```
+     */
+    handleInputChange: (e: any) => void;
+    /**
+     * Form submission handler to automattically reset input and append a user message
+     * @example
+     * ```jsx
+     * <form onSubmit={handleSubmit}>
+     *  <input onChange={handleInputChange} value={input} />
+     * </form>
+     * ```
+     */
+    handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+    /** Whether the API request is in progress */
+    isLoading: boolean;
+};
+declare function useCompletion({ api, id, initialCompletion, initialInput, headers, body, onResponse, onFinish, onError }?: UseCompletionOptions): UseCompletionHelpers;
+
+export { CreateMessage, Message, UseChatHelpers, UseChatOptions, UseCompletionHelpers, useChat, useCompletion };

package/react/dist/index.js

@@ -250,7 +250,8 @@ function useChat({
         return;
       append({
         content: input,
-        role: "user"
+        role: "user",
+        createdAt: /* @__PURE__ */ new Date()
       });
       setInput("");
     },