在JavaScript中使用LangChain实现响应流式输出的问题

问题描述 #

我正在使用LangChain库开发一个JavaScript应用，编写了如下代码片段：

/* LangChain Imports */
import { OpenAI } from "langchain/llms/openai";
import { BufferMemory } from "langchain/memory";
import { ConversationChain } from "langchain/chains";

// ========================================================================================= //
  // ============= Use LangChain to send request to OpenAi API =============================== //
  // ========================================================================================= //

  const openAILLMOptions = {
    modelName: chatModel.value,
    openAIApiKey: decryptedString,
    temperature: parseFloat(temperatureValue.value),
    topP: parseFloat(topP.value),
    maxTokens: parseInt(maxTokens.value),
    stop: stopSequences.value.length > 0 ? stopSequences.value : null,
    streaming: true,
};

  const model = new OpenAI(openAILLMOptions);
  const memory = new BufferMemory();
  const chain = new ConversationChain({ llm: model, memory: memory });

  try {
    const response = await chain.call({ input: content.value, signal: signal }, undefined,
      [
        {

          handleLLMNewToken(token) {
            process.stdout.write(token);
          },
        },
      ]
    );

// handle the response

}

这段代码无法实现流式响应（我尝试过TypeScript和非类型写法）。目前能通过LangChain的ConversationChain API成功获取OpenAI的完整响应，但无法实现流式输出，求解决方案。

解决方案 #

在JavaScript版本的LangChain中，ConversationChain的call方法不支持通过回调参数直接接收流式token，需改用stream方法实现流式输出：

修改步骤 #

1. 替换chain.call为chain.stream方法，该方法返回异步迭代器用于逐个获取token
2. 通过for await...of循环遍历迭代器，处理每个生成的token

修改后的代码 #

/* LangChain Imports */
import { OpenAI } from "langchain/llms/openai";
import { BufferMemory } from "langchain/memory";
import { ConversationChain } from "langchain/chains";

const openAILLMOptions = {
  modelName: chatModel.value,
  openAIApiKey: decryptedString,
  temperature: parseFloat(temperatureValue.value),
  topP: parseFloat(topP.value),
  maxTokens: parseInt(maxTokens.value),
  stop: stopSequences.value.length > 0 ? stopSequences.value : null,
  streaming: true,
};

const model = new OpenAI(openAILLMOptions);
const memory = new BufferMemory();
const chain = new ConversationChain({ llm: model, memory: memory });

try {
  // 调用stream方法获取异步迭代器
  const stream = await chain.stream({ 
    input: content.value, 
    signal: signal 
  });

  // 逐个处理流中的token
  for await (const chunk of stream) {
    process.stdout.write(chunk);
    // 浏览器环境下可替换为DOM操作，例如：
    // document.getElementById('response-container').textContent += chunk;
  }

  // 流结束后的后续处理
  console.log("流式响应完成");
} catch (error) {
  console.error("流式响应出错:", error);
}

关键说明 #

• stream方法是LangChain JS实现流式输出的标准方式，无需依赖handleLLMNewToken回调
• 若在浏览器中使用，将process.stdout.write替换为对应DOM更新逻辑即可
• 确保使用最新版本的LangChain，旧版本可能存在stream方法兼容性问题

内容的提问来源于stack exchange，提问作者Alan