feat (ai/streams): add LangChainAdapter.toAIStream() (#1549)

Author: lgrammel

.changeset/lovely-stingrays-fail.md

@@ -0,0 +1,5 @@
+---
+'ai': patch
+---
+
+feat (ai/streams): add LangChainAdapter.toAIStream()

content/providers/04-adapters/index.mdx

@@ -0,0 +1,14 @@
+---
+title: Adapters
+description: Learn how to use AI SDK Adapters.
+---
+
+# Adapters
+
+Adapters are lightweight integrations that enable you to use
+the Vercel AI SDK UI functions (`useChat` and `useCompletion`)
+with 3rd party libraries.
+
+The following adapters are currently available:
+
+- [LangChain](./langchain)

content/providers/04-adapters/langchain.mdx

@@ -0,0 +1,66 @@
+---
+title: LangChain
+description: Learn how to use LangChain with the Vercel AI SDK.
+---
+
+# LangChain
+
+[LangChain](https://js.langchain.com/docs/) is a framework for developing applications powered by language models.
+It provides tools and abstractions for working with AI models, agents, vector stores, and other data sources for retrieval augmented generation (RAG).
+However, LangChain does not provide a way to easily build UIs or a standard way to stream data to the client.
+
+## Example: Completion
+
+Here is a basic example that uses both Vercel AI SDK and LangChain together with the [Next.js](https://nextjs.org/docs) App Router.
+
+The AI SDK `LangChainAdapter` uses the result from [LangChain ExpressionLanguage streaming](https://js.langchain.com/docs/expression_language/streaming) to pipe text to the client.
+`LangChainAdapter.toAIStream()` is compatible with the LangChain Expression Language `.stream()` function response.
+
+```tsx filename="app/api/completion/route.ts" highlight={"17"}
+import { ChatOpenAI } from '@langchain/openai';
+import { LangChainAdapter, StreamingTextResponse } from 'ai';
+
+export const dynamic = 'force-dynamic';
+export const maxDuration = 60;
+
+export async function POST(req: Request) {
+  const { prompt } = await req.json();
+
+  const model = new ChatOpenAI({
+    model: 'gpt-3.5-turbo-0125',
+    temperature: 0,
+  });
+
+  const stream = await model.stream(prompt);
+
+  const aiStream = LangChainAdapter.toAIStream(stream);
+
+  return new StreamingTextResponse(aiStream);
+}
+```
+
+Then, we use the Vercel AI SDK's [`useCompletion`](/docs/ai-sdk-ui/completion) method in the page component to handle the completion:
+
+```tsx filename="app/page.tsx"
+'use client';
+
+import { useCompletion } from 'ai/react';
+
+export default function Chat() {
+  const { completion, input, handleInputChange, handleSubmit } =
+    useCompletion();
+
+  return (
+    <div>
+      {completion}
+      <form onSubmit={handleSubmit}>
+        <input value={input} onChange={handleInputChange} />
+      </form>
+    </div>
+  );
+}
+```
+
+## More Examples
+
+You can find additional examples in the Vercel AI SDK [examples/next-langchain](https://github.com/vercel/ai/tree/main/examples/next-langchain) folder.

content/providers/04-legacy-providers/langchain.mdx

@@ -1,29 +1,29 @@
-import { StreamingTextResponse, LangChainStream, Message } from 'ai';
-import { ChatOpenAI } from 'langchain/chat_models/openai';
+import { ChatOpenAI } from '@langchain/openai';
+import { LangChainAdapter, Message, StreamingTextResponse } from 'ai';
 import { AIMessage, HumanMessage } from 'langchain/schema';
 
 export const dynamic = 'force-dynamic';
+export const maxDuration = 60;
 
 export async function POST(req: Request) {
-  const { messages } = await req.json();
+  const {
+    messages,
+  }: {
+    messages: Message[];
+  } = await req.json();
 
-  const { stream, handlers } = LangChainStream();
-
-  const llm = new ChatOpenAI({
-    streaming: true,
+  const model = new ChatOpenAI({
+    model: 'gpt-3.5-turbo-0125',
+    temperature: 0,
   });
 
-  llm
-    .call(
-      (messages as Message[]).map(m =>
-        m.role == 'user'
-          ? new HumanMessage(m.content)
-          : new AIMessage(m.content),
-      ),
-      {},
-      [handlers],
-    )
-    .catch(console.error);
+  const stream = await model.stream(
+    messages.map(message =>
+      message.role == 'user'
+        ? new HumanMessage(message.content)
+        : new AIMessage(message.content),
+    ),
+  );
 
-  return new StreamingTextResponse(stream);
+  return new StreamingTextResponse(LangChainAdapter.toAIStream(stream));
 }

content/providers/04-legacy-providers/anthropic.mdx renamed to content/providers/05-legacy-providers/anthropic.mdx

@@ -0,0 +1,28 @@
+import { ChatOpenAI } from '@langchain/openai';
+import { LangChainAdapter, StreamData, StreamingTextResponse } from 'ai';
+
+export const dynamic = 'force-dynamic';
+export const maxDuration = 60;
+
+export async function POST(req: Request) {
+  const { prompt } = await req.json();
+
+  const model = new ChatOpenAI({
+    model: 'gpt-3.5-turbo-0125',
+    temperature: 0,
+  });
+
+  const stream = await model.stream(prompt);
+
+  const data = new StreamData();
+
+  data.append({ test: 'value' });
+
+  const aiStream = LangChainAdapter.toAIStream(stream, {
+    onFinal() {
+      data.close();
+    },
+  });
+
+  return new StreamingTextResponse(aiStream, {}, data);
+}

content/providers/04-legacy-providers/aws-bedrock.mdx renamed to content/providers/05-legacy-providers/aws-bedrock.mdx

@@ -0,0 +1,18 @@
+import { ChatOpenAI } from '@langchain/openai';
+import { LangChainAdapter, StreamingTextResponse } from 'ai';
+
+export const dynamic = 'force-dynamic';
+export const maxDuration = 60;
+
+export async function POST(req: Request) {
+  const { prompt } = await req.json();
+
+  const model = new ChatOpenAI({
+    model: 'gpt-3.5-turbo-0125',
+    temperature: 0,
+  });
+
+  const stream = await model.stream(prompt);
+
+  return new StreamingTextResponse(LangChainAdapter.toAIStream(stream));
+}

content/providers/04-legacy-providers/azure-openai.mdx renamed to content/providers/05-legacy-providers/azure-openai.mdx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useCompletion } from 'ai/react';
+
+export default function Completion() {
+  const { completion, input, handleInputChange, handleSubmit, error, data } =
+    useCompletion({ api: '/api/completion-stream-data' });
+
+  return (
+    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
+      <h4 className="pb-4 text-xl font-bold text-gray-900 md:text-xl">
+        useCompletion Example
+      </h4>
+      {data && (
+        <pre className="p-4 text-sm bg-gray-100">
+          {JSON.stringify(data, null, 2)}
+        </pre>
+      )}
+      {error && (
+        <div className="fixed top-0 left-0 w-full p-4 text-center text-white bg-red-500">
+          {error.message}
+        </div>
+      )}
+      {completion}
+      <form onSubmit={handleSubmit}>
+        <input
+          className="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>
+  );
+}

content/providers/04-legacy-providers/cohere.mdx renamed to content/providers/05-legacy-providers/cohere.mdx

@@ -4,15 +4,15 @@ import { useCompletion } from 'ai/react';
 
 export default function Chat() {
   const { completion, input, handleInputChange, handleSubmit, error } =
-    useCompletion({ api: '/api/stream-data-chain' });
+    useCompletion();
 
   return (
     <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
-      <h4 className="text-xl font-bold text-gray-900 md:text-xl pb-4">
-        useCompletion / stream-data-chain Example
+      <h4 className="pb-4 text-xl font-bold text-gray-900 md:text-xl">
+        useCompletion Example
       </h4>
       {error && (
-        <div className="fixed top-0 left-0 w-full p-4 text-center bg-red-500 text-white">
+        <div className="fixed top-0 left-0 w-full p-4 text-center text-white bg-red-500">
           {error.message}
         </div>
       )}
@@ -21,7 +21,7 @@ export default function Chat() {
         <input
           className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
           value={input}
-          placeholder="Enter a product..."
+          placeholder="Say something..."
           onChange={handleInputChange}
         />
       </form>

content/providers/04-legacy-providers/fireworks-ai.mdx renamed to content/providers/05-legacy-providers/fireworks-ai.mdx

@@ -6,7 +6,7 @@ export default function Chat() {
   const { messages, input, handleInputChange, handleSubmit } = useChat();
 
   return (
-    <div className="mx-auto w-full max-w-md py-24 flex flex-col stretch">
+    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
       {messages.length > 0
         ? messages.map(m => (
             <div key={m.id} className="whitespace-pre-wrap">
@@ -18,7 +18,7 @@ export default function Chat() {
 
       <form onSubmit={handleSubmit}>
         <input
-          className="fixed w-full max-w-md bottom-0 border border-gray-300 rounded mb-8 shadow-xl p-2"
+          className="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}

content/providers/04-legacy-providers/google.mdx renamed to content/providers/05-legacy-providers/google.mdx

@@ -9,8 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@langchain/openai": "0.0.28",
     "ai": "latest",
-    "langchain": "^0.0.196",
+    "langchain": "0.1.36",
     "next": "latest",
     "react": "18.2.0",
     "react-dom": "^18.2.0"

content/providers/04-legacy-providers/hugging-face.mdx renamed to content/providers/05-legacy-providers/hugging-face.mdx

@@ -9,6 +9,7 @@ export * from './cohere-stream';
 export * from './google-generative-ai-stream';
 export * from './huggingface-stream';
 export * from './inkeep-stream';
+export * as LangChainAdapter from './langchain-adapter';
 export * from './langchain-stream';
 export * from './mistral-stream';
 export * from './openai-stream';

content/providers/04-legacy-providers/index.mdx renamed to content/providers/05-legacy-providers/index.mdx

@@ -0,0 +1,66 @@
+import {
+  AIStreamCallbacksAndOptions,
+  createCallbacksTransformer,
+} from './ai-stream';
+import { createStreamDataTransformer } from './stream-data';
+
+type LangChainImageDetail = 'auto' | 'low' | 'high';
+
+type LangChainMessageContentText = {
+  type: 'text';
+  text: string;
+};
+
+type LangChainMessageContentImageUrl = {
+  type: 'image_url';
+  image_url:
+    | string
+    | {
+        url: string;
+        detail?: LangChainImageDetail;
+      };
+};
+
+type LangChainMessageContentComplex =
+  | LangChainMessageContentText
+  | LangChainMessageContentImageUrl
+  | (Record<string, any> & {
+      type?: 'text' | 'image_url' | string;
+    })
+  | (Record<string, any> & {
+      type?: never;
+    });
+
+type LangChainMessageContent = string | LangChainMessageContentComplex[];
+
+type LangChainAIMessageChunk = {
+  content: LangChainMessageContent;
+};
+
+/**
+Converts the result of a LangChain Expression Language stream invocation to an AIStream.
+ */
+export function toAIStream(
+  stream: ReadableStream<LangChainAIMessageChunk>,
+  callbacks?: AIStreamCallbacksAndOptions,
+) {
+  return stream
+    .pipeThrough(
+      new TransformStream({
+        transform: async (chunk, controller) => {
+          if (typeof chunk.content === 'string') {
+            controller.enqueue(chunk.content);
+          } else {
+            const content: LangChainMessageContentComplex[] = chunk.content;
+            for (const item of content) {
+              if (item.type === 'text') {
+                controller.enqueue(item.text);
+              }
+            }
+          }
+        },
+      }),
+    )
+    .pipeThrough(createCallbacksTransformer(callbacks))
+    .pipeThrough(createStreamDataTransformer());
+}

content/providers/04-legacy-providers/inkeep.mdx renamed to content/providers/05-legacy-providers/inkeep.mdx

@@ -4,6 +4,9 @@ import {
 } from './ai-stream';
 import { createStreamDataTransformer } from './stream-data';
 
+/**
+@deprecated Use LangChainAdapter.toAIStream() instead.
+ */
 export function LangChainStream(callbacks?: AIStreamCallbacksAndOptions) {
   const stream = new TransformStream();
   const writer = stream.writable.getWriter();