feat (provider): langchain StringOutputParser support (#1826)

Author: lgrammel

.changeset/eight-wolves-visit.md

@@ -0,0 +1,5 @@
+---
+'ai': patch
+---
+
+feat (provider): langchain StringOutputParser support

content/docs/07-reference/stream-helpers/16-langchain-adapter.mdx

@@ -0,0 +1,75 @@
+---
+title: LangChainAdapter
+description: API Reference for LangChainAdapter.
+---
+
+# `LangChainAdapter`
+
+The `LangChainAdapter` module provides a way to transform LangChain output streams into AI streams.
+See the [LangChain Adapter documentation](/providers/adapters/langchain) for more information.
+
+## Import
+
+<Snippet text={`import { LangChainAdapter } from "ai"`} prompt={false} />
+
+## API Signature
+
+### Methods
+
+<PropertiesTable
+  content={[
+    {
+      name: 'toAIStream',
+      type: '(stream: ReadableStream<LangChainAIMessageChunk> | ReadableStream<string>, AIStreamCallbacksAndOptions) => AIStream',
+      description: 'Converts LangChain output streams to AIStream.',
+    },
+  ]}
+/>
+
+## Examples
+
+### Convert LangChain Expression Language Stream
+
+```tsx filename="app/api/completion/route.ts" highlight={"14"}
+import { ChatOpenAI } from '@langchain/openai';
+import { LangChainAdapter, StreamingTextResponse } from 'ai';
+
+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);
+}
+```
+
+### Convert StringOutputParser Stream
+
+```tsx filename="app/api/completion/route.ts" highlight={"16"}
+import { ChatOpenAI } from '@langchain/openai';
+import { LangChainAdapter, StreamingTextResponse } from 'ai';
+import { StringOutputParser } from '@langchain/core/output_parsers';
+
+export async function POST(req: Request) {
+  const { prompt } = await req.json();
+
+  const model = new ChatOpenAI({
+    model: 'gpt-3.5-turbo-0125',
+    temperature: 0,
+  });
+
+  const parser = new StringOutputParser();
+  const stream = await model.pipe(parser).stream(prompt);
+
+  const aiStream = LangChainAdapter.toAIStream(stream);
+
+  return new StreamingTextResponse(aiStream);
+}
+```

content/docs/07-reference/stream-helpers/16-langchain-stream.mdx

@@ -1,6 +1,6 @@
 ---
 title: LangChainStream
-description: Learn to use LangChainStream helper function in your application.
+description: API Reference for LangChainStream.
 ---
 
 # `LangChainStream`
@@ -15,8 +15,6 @@ Helps with the integration of LangChain. It is compatible with useChat and useCo
 
 ## Import
 
-### React
-
 <Snippet text={`import { LangChainStream } from "ai"`} prompt={false} />
 
 <ReferenceTable packageName="streams" functionName="LangChainStream" />

content/docs/07-reference/stream-helpers/index.mdx

@@ -91,6 +91,12 @@ description: Learn to use help functions that help stream generations from diffe
         "Transforms the response from LangChain's language models into a readable stream.",
       href: '/docs/reference/stream-helpers/langchain-stream',
     },
+    {
+      title: 'LangChainAdapter',
+      description:
+        "Transforms the response from LangChain's stream into AI streams.",
+      href: '/docs/reference/stream-helpers/langchain-adapter',
+    },
     {
       title: 'MistralStream',
       description:

examples/next-langchain/app/api/completion-string-output-parser/route.ts

@@ -0,0 +1,21 @@
+import { ChatOpenAI } from '@langchain/openai';
+import { LangChainAdapter, StreamingTextResponse } from 'ai';
+import { StringOutputParser } from '@langchain/core/output_parsers';
+
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { prompt } = await req.json();
+
+  const model = new ChatOpenAI({
+    model: 'gpt-3.5-turbo-0125',
+    temperature: 0,
+  });
+
+  const parser = new StringOutputParser();
+
+  const stream = await model.pipe(parser).stream(prompt);
+
+  return new StreamingTextResponse(LangChainAdapter.toAIStream(stream));
+}

examples/next-langchain/app/completion-string-output-parser/page.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useCompletion } from 'ai/react';
+
+export default function Chat() {
+  const { completion, input, handleInputChange, handleSubmit, error } =
+    useCompletion();
+
+  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>
+      {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>
+  );
+}

examples/next-langchain/app/completion/page.tsx

@@ -4,7 +4,9 @@ import { useCompletion } from 'ai/react';
 
 export default function Chat() {
   const { completion, input, handleInputChange, handleSubmit, error } =
-    useCompletion();
+    useCompletion({
+      api: '/api/completion-string-output-parser',
+    });
 
   return (
     <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">

examples/next-langchain/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@langchain/openai": "0.0.28",
+    "@langchain/core": "0.1.63",
     "ai": "latest",
     "langchain": "0.1.36",
     "next": "latest",

packages/core/streams/langchain-adapter.test.ts

@@ -0,0 +1,30 @@
+import { convertArrayToReadableStream } from '../core/test/convert-array-to-readable-stream';
+import { convertReadableStreamToArray } from '../core/test/convert-readable-stream-to-array';
+import { toAIStream } from './langchain-adapter';
+
+describe('toAIStream', () => {
+  it('should convert ReadableStream<LangChainAIMessageChunk>', async () => {
+    const inputStream = convertArrayToReadableStream([
+      { content: 'Hello' },
+      { content: [{ type: 'text', text: 'World' }] },
+    ]);
+
+    assert.deepStrictEqual(
+      await convertReadableStreamToArray(
+        toAIStream(inputStream).pipeThrough(new TextDecoderStream()),
+      ),
+      ['0:"Hello"\n', '0:"World"\n'],
+    );
+  });
+
+  it('should convert ReadableStream<string> (LangChain StringOutputParser)', async () => {
+    const inputStream = convertArrayToReadableStream(['Hello', 'World']);
+
+    assert.deepStrictEqual(
+      await convertReadableStreamToArray(
+        toAIStream(inputStream).pipeThrough(new TextDecoderStream()),
+      ),
+      ['0:"Hello"\n', '0:"World"\n'],
+    );
+  });
+});

packages/core/streams/langchain-adapter.ts

@@ -38,17 +38,23 @@ type LangChainAIMessageChunk = {
 };
 
 /**
-Converts the result of a LangChain Expression Language stream invocation to an AIStream.
+Converts LangChain output streams to AIStream. 
+
+The following streams are supported:
+- `LangChainAIMessageChunk` streams (LangChain `model.stream` output)
+- `string` streams (LangChain `StringOutputParser` output)
  */
 export function toAIStream(
-  stream: ReadableStream<LangChainAIMessageChunk>,
+  stream: ReadableStream<LangChainAIMessageChunk> | ReadableStream<string>,
   callbacks?: AIStreamCallbacksAndOptions,
 ) {
   return stream
     .pipeThrough(
-      new TransformStream({
+      new TransformStream<LangChainAIMessageChunk | string>({
         transform: async (chunk, controller) => {
-          if (typeof chunk.content === 'string') {
+          if (typeof chunk === 'string') {
+            controller.enqueue(chunk);
+          } else if (typeof chunk.content === 'string') {
             controller.enqueue(chunk.content);
           } else {
             const content: LangChainMessageContentComplex[] = chunk.content;