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

.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.

examples/next-langchain/app/api/chat/route.ts

@@ -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));
 }

examples/next-langchain/app/api/completion-stream-data/route.ts

@@ -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);
+}

examples/next-langchain/app/api/completion/route.ts

@@ -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));
+}