!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}return t}()||function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())

[Skip to main content](#__docusaurus_skipToContent_fallback)

LangChain v0.2 is coming soon! Preview the new docs [here](/v0.2/docs/introduction/).

[

![🦜️🔗 Langchain](/v0.1/img/brand/wordmark.png)![🦜️🔗 Langchain](/v0.1/img/brand/wordmark-dark.png)

](/v0.1/)[Docs](/v0.1/docs/get_started/introduction/)[Use cases](/v0.1/docs/use_cases/)[Integrations](/v0.1/docs/integrations/platforms/)[API Reference](https://api.js.langchain.com)

[More](#)

*   [People](/v0.1/docs/people/)
*   [Community](/v0.1/docs/community/)
*   [Tutorials](/v0.1/docs/additional_resources/tutorials/)
*   [Contributing](/v0.1/docs/contributing/)

[v0.1](#)

*   [v0.2](https://js.langchain.com/v0.2/docs/introduction)
*   [v0.1](/v0.1/docs/get_started/introduction/)

[🦜🔗](#)

*   [LangSmith](https://smith.langchain.com)
*   [LangSmith Docs](https://docs.smith.langchain.com)
*   [LangChain Hub](https://smith.langchain.com/hub)
*   [LangServe](https://github.com/langchain-ai/langserve)
*   [Python Docs](https://python.langchain.com/)

[Chat](https://chatjs.langchain.com)[](https://github.com/langchain-ai/langchainjs)

Search

*   [Use cases](/v0.1/docs/use_cases/)
    
    *   [SQL](/v0.1/docs/use_cases/sql/)
        
    *   [Chatbots](/v0.1/docs/use_cases/chatbots/)
        
    *   [Extraction](/v0.1/docs/use_cases/extraction/)
        
    *   [Query Analysis](/v0.1/docs/use_cases/query_analysis/)
        
    *   [Q&A with RAG](/v0.1/docs/use_cases/question_answering/)
        
        *   [Quickstart](/v0.1/docs/use_cases/question_answering/quickstart/)
        *   [Per-User Retrieval](/v0.1/docs/use_cases/question_answering/per_user/)
        *   [Add chat history](/v0.1/docs/use_cases/question_answering/chat_history/)
        *   [Citations](/v0.1/docs/use_cases/question_answering/citations/)
        *   [Using agents](/v0.1/docs/use_cases/question_answering/conversational_retrieval_agents/)
        *   [Using local models](/v0.1/docs/use_cases/question_answering/local_retrieval_qa/)
        *   [Returning sources](/v0.1/docs/use_cases/question_answering/sources/)
        *   [Streaming](/v0.1/docs/use_cases/question_answering/streaming/)
    *   [Tool use](/v0.1/docs/use_cases/tool_use/)
        
    *   [Interacting with APIs](/v0.1/docs/use_cases/api/)
    *   [Tabular Question Answering](/v0.1/docs/use_cases/tabular/)
    *   [Graphs](/v0.1/docs/use_cases/graph/)
        
    *   [Summarization](/v0.1/docs/use_cases/summarization/)
    *   [Agent Simulations](/v0.1/docs/use_cases/agent_simulations/)
        
    *   [Autonomous Agents](/v0.1/docs/use_cases/autonomous_agents/)
        
    *   [Code Understanding](/v0.1/docs/use_cases/code_understanding/)
    *   [Audio/Video Structured Extraction](/v0.1/docs/use_cases/media/)

*   [](/v0.1/)
*   [Use cases](/v0.1/docs/use_cases/)
*   [Q&A with RAG](/v0.1/docs/use_cases/question_answering/)
*   Streaming

On this page

Streaming
=========

Often in Q&A applications it’s important to show users the sources that were used to generate the answer. The simplest way to do this is for the chain to return the Documents that were retrieved in each generation.

We’ll work off of the Q&A app with sources we built over the [LLM Powered Autonomous Agents](https://lilianweng.github.io/posts/2023-06-23-agent/) blog post by Lilian Weng in the [Returning sources](/v0.1/docs/use_cases/question_answering/sources/) guide.

Setup[​](#setup "Direct link to Setup")
---------------------------------------

### Dependencies[​](#dependencies "Direct link to Dependencies")

We’ll use an OpenAI chat model and embeddings and a Memory vector store in this walkthrough, but everything shown here works with any [ChatModel](/v0.1/docs/modules/model_io/chat/) or [LLM](/v0.1/docs/modules/model_io/llms/), [Embeddings](/v0.1/docs/modules/data_connection/text_embedding/), and [VectorStore](/v0.1/docs/modules/data_connection/vectorstores/) or [Retriever](/v0.1/docs/modules/data_connection/retrievers/).

We’ll use the following packages:

    npm install --save langchain @langchain/openai cheerio

We need to set environment variable `OPENAI_API_KEY`:

    export OPENAI_API_KEY=YOUR_KEY

### LangSmith[​](#langsmith "Direct link to LangSmith")

Many of the applications you build with LangChain will contain multiple steps with multiple invocations of LLM calls. As these applications get more and more complex, it becomes crucial to be able to inspect what exactly is going on inside your chain or agent. The best way to do this is with [LangSmith](https://smith.langchain.com/).

Note that LangSmith is not needed, but it is helpful. If you do want to use LangSmith, after you sign up at the link above, make sure to set your environment variables to start logging traces:

    export LANGCHAIN_TRACING_V2=trueexport LANGCHAIN_API_KEY=YOUR_KEY

Chain with sources[​](#chain-with-sources "Direct link to Chain with sources")
------------------------------------------------------------------------------

Here is Q&A app with sources we built over the [LLM Powered Autonomous Agents](https://lilianweng.github.io/posts/2023-06-23-agent/) blog post by Lilian Weng in the [Returning sources](/v0.1/docs/use_cases/question_answering/sources/) guide:

    import "cheerio";import { CheerioWebBaseLoader } from "langchain/document_loaders/web/cheerio";import { RecursiveCharacterTextSplitter } from "langchain/text_splitter";import { MemoryVectorStore } from "langchain/vectorstores/memory";import { OpenAIEmbeddings, ChatOpenAI } from "@langchain/openai";import { pull } from "langchain/hub";import { ChatPromptTemplate } from "@langchain/core/prompts";import { formatDocumentsAsString } from "langchain/util/document";import {  RunnableSequence,  RunnablePassthrough,  RunnableMap,} from "@langchain/core/runnables";import { StringOutputParser } from "@langchain/core/output_parsers";

    const loader = new CheerioWebBaseLoader(  "https://lilianweng.github.io/posts/2023-06-23-agent/");const docs = await loader.load();const textSplitter = new RecursiveCharacterTextSplitter({  chunkSize: 1000,  chunkOverlap: 200,});const splits = await textSplitter.splitDocuments(docs);const vectorStore = await MemoryVectorStore.fromDocuments(  splits,  new OpenAIEmbeddings());// Retrieve and generate using the relevant snippets of the blog.const retriever = vectorStore.asRetriever();const prompt = await pull<ChatPromptTemplate>("rlm/rag-prompt");const llm = new ChatOpenAI({ model: "gpt-3.5-turbo", temperature: 0 });const ragChainFromDocs = RunnableSequence.from([  RunnablePassthrough.assign({    context: (input) => formatDocumentsAsString(input.context),  }),  prompt,  llm,  new StringOutputParser(),]);let ragChainWithSource = new RunnableMap({  steps: { context: retriever, question: new RunnablePassthrough() },});ragChainWithSource = ragChainWithSource.assign({ answer: ragChainFromDocs });await ragChainWithSource.invoke("What is Task Decomposition");

    {  question: "What is Task Decomposition",  context: [    Document {      pageContent: "Fig. 1. Overview of a LLM-powered autonomous agent system.\n" +        "Component One: Planning#\n" +        "A complicated ta"... 898 more characters,      metadata: {        source: "https://lilianweng.github.io/posts/2023-06-23-agent/",        loc: { lines: [Object] }      }    },    Document {      pageContent: 'Task decomposition can be done (1) by LLM with simple prompting like "Steps for XYZ.\\n1.", "What are'... 887 more characters,      metadata: {        source: "https://lilianweng.github.io/posts/2023-06-23-agent/",        loc: { lines: [Object] }      }    },    Document {      pageContent: "Agent System Overview\n" +        "                \n" +        "                    Component One: Planning\n" +        "                 "... 850 more characters,      metadata: {        source: "https://lilianweng.github.io/posts/2023-06-23-agent/",        loc: { lines: [Object] }      }    },    Document {      pageContent: "Resources:\n" +        "1. Internet access for searches and information gathering.\n" +        "2. Long Term memory management"... 456 more characters,      metadata: {        source: "https://lilianweng.github.io/posts/2023-06-23-agent/",        loc: { lines: [Object] }      }    }  ],  answer: "Task decomposition is a technique used to break down complex tasks into smaller and simpler steps. I"... 256 more characters}

Streaming final outputs[​](#streaming-final-outputs "Direct link to Streaming final outputs")
---------------------------------------------------------------------------------------------

With LCEL it’s easy to stream final outputs:

    for await (const chunk of await ragChainWithSource.stream(  "What is task decomposition?")) {  console.log(chunk);}

    { question: "What is task decomposition?" }{  context: [    Document {      pageContent: "Fig. 1. Overview of a LLM-powered autonomous agent system.\n" +        "Component One: Planning#\n" +        "A complicated ta"... 898 more characters,      metadata: {        source: "https://lilianweng.github.io/posts/2023-06-23-agent/",        loc: { lines: [Object] }      }    },    Document {      pageContent: 'Task decomposition can be done (1) by LLM with simple prompting like "Steps for XYZ.\\n1.", "What are'... 887 more characters,      metadata: {        source: "https://lilianweng.github.io/posts/2023-06-23-agent/",        loc: { lines: [Object] }      }    },    Document {      pageContent: "Agent System Overview\n" +        "                \n" +        "                    Component One: Planning\n" +        "                 "... 850 more characters,      metadata: {        source: "https://lilianweng.github.io/posts/2023-06-23-agent/",        loc: { lines: [Object] }      }    },    Document {      pageContent: "(3) Task execution: Expert models execute on the specific tasks and log results.\n" +        "Instruction:\n" +        "\n" +        "With "... 539 more characters,      metadata: {        source: "https://lilianweng.github.io/posts/2023-06-23-agent/",        loc: { lines: [Object] }      }    }  ]}{ answer: "" }{ answer: "Task" }{ answer: " decomposition" }{ answer: " is" }{ answer: " a" }{ answer: " technique" }{ answer: " used" }{ answer: " to" }{ answer: " break" }{ answer: " down" }{ answer: " complex" }{ answer: " tasks" }{ answer: " into" }{ answer: " smaller" }{ answer: " and" }{ answer: " simpler" }{ answer: " steps" }{ answer: "." }{ answer: " It" }{ answer: " can" }{ answer: " be" }{ answer: " done" }{ answer: " through" }{ answer: " various" }{ answer: " methods" }{ answer: " such" }{ answer: " as" }{ answer: " using" }{ answer: " prompting" }{ answer: " techniques" }{ answer: "," }{ answer: " task" }{ answer: "-specific" }{ answer: " instructions" }{ answer: "," }{ answer: " or" }{ answer: " human" }{ answer: " inputs" }{ answer: "." }{ answer: " Another" }{ answer: " approach" }{ answer: " involves" }{ answer: " outsourcing" }{ answer: " the" }{ answer: " planning" }{ answer: " step" }{ answer: " to" }{ answer: " an" }{ answer: " external" }{ answer: " classical" }{ answer: " planner" }{ answer: "." }{ answer: "" }

We can add some logic to compile our stream as it’s being returned:

    const output = {};let currentKey: string | null = null;for await (const chunk of await ragChainWithSource.stream(  "What is task decomposition?")) {  for (const key of Object.keys(chunk)) {    if (output[key] === undefined) {      output[key] = chunk[key];    } else {      output[key] += chunk[key];    }    if (key !== currentKey) {      console.log(`\n\n${key}: ${JSON.stringify(chunk[key])}`);    } else {      console.log(chunk[key]);    }    currentKey = key;  }}

    question: "What is task decomposition?"context: [{"pageContent":"Fig. 1. Overview of a LLM-powered autonomous agent system.\nComponent One: Planning#\nA complicated task usually involves many steps. An agent needs to know what they are and plan ahead.\nTask Decomposition#\nChain of thought (CoT; Wei et al. 2022) has become a standard prompting technique for enhancing model performance on complex tasks. The model is instructed to “think step by step” to utilize more test-time computation to decompose hard tasks into smaller and simpler steps. CoT transforms big tasks into multiple manageable tasks and shed lights into an interpretation of the model’s thinking process.\nTree of Thoughts (Yao et al. 2023) extends CoT by exploring multiple reasoning possibilities at each step. It first decomposes the problem into multiple thought steps and generates multiple thoughts per step, creating a tree structure. The search process can be BFS (breadth-first search) or DFS (depth-first search) with each state evaluated by a classifier (via a prompt) or majority vote.","metadata":{"source":"https://lilianweng.github.io/posts/2023-06-23-agent/","loc":{"lines":{"from":176,"to":181}}}},{"pageContent":"Task decomposition can be done (1) by LLM with simple prompting like \"Steps for XYZ.\\n1.\", \"What are the subgoals for achieving XYZ?\", (2) by using task-specific instructions; e.g. \"Write a story outline.\" for writing a novel, or (3) with human inputs.\nAnother quite distinct approach, LLM+P (Liu et al. 2023), involves relying on an external classical planner to do long-horizon planning. This approach utilizes the Planning Domain Definition Language (PDDL) as an intermediate interface to describe the planning problem. In this process, LLM (1) translates the problem into “Problem PDDL”, then (2) requests a classical planner to generate a PDDL plan based on an existing “Domain PDDL”, and finally (3) translates the PDDL plan back into natural language. Essentially, the planning step is outsourced to an external tool, assuming the availability of domain-specific PDDL and a suitable planner which is common in certain robotic setups but not in many other domains.\nSelf-Reflection#","metadata":{"source":"https://lilianweng.github.io/posts/2023-06-23-agent/","loc":{"lines":{"from":182,"to":184}}}},{"pageContent":"Agent System Overview\n                \n                    Component One: Planning\n                        \n                \n                    Task Decomposition\n                \n                    Self-Reflection\n                \n                \n                    Component Two: Memory\n                        \n                \n                    Types of Memory\n                \n                    Maximum Inner Product Search (MIPS)\n                \n                \n                    Component Three: Tool Use\n                \n                    Case Studies\n                        \n                \n                    Scientific Discovery Agent\n                \n                    Generative Agents Simulation\n                \n                    Proof-of-Concept Examples\n                \n                \n                    Challenges\n                \n                    Citation\n                \n                    References","metadata":{"source":"https://lilianweng.github.io/posts/2023-06-23-agent/","loc":{"lines":{"from":112,"to":146}}}},{"pageContent":"(3) Task execution: Expert models execute on the specific tasks and log results.\nInstruction:\n\nWith the input and the inference results, the AI assistant needs to describe the process and results. The previous stages can be formed as - User Input: {{ User Input }}, Task Planning: {{ Tasks }}, Model Selection: {{ Model Assignment }}, Task Execution: {{ Predictions }}. You must first answer the user's request in a straightforward manner. Then describe the task process and show your analysis and model inference results to the user in the first person. If inference results contain a file path, must tell the user the complete file path.","metadata":{"source":"https://lilianweng.github.io/posts/2023-06-23-agent/","loc":{"lines":{"from":277,"to":280}}}}]answer: ""Task decomposition is a technique used to break down complex tasks into smaller and simpler steps. It can be done through various methods such as using prompting techniques, task-specific instructions, or human inputs. Another approach involves outsourcing the planning step to an external classical planner.

    "answer"

* * *

#### Help us out by providing feedback on this documentation page:

[

Previous

Returning sources

](/v0.1/docs/use_cases/question_answering/sources/)[

Next

Tool use

](/v0.1/docs/use_cases/tool_use/)

*   [Setup](#setup)
    *   [Dependencies](#dependencies)
    *   [LangSmith](#langsmith)
*   [Chain with sources](#chain-with-sources)
*   [Streaming final outputs](#streaming-final-outputs)

Community

*   [Discord](https://discord.gg/cU2adEyC7w)
*   [Twitter](https://twitter.com/LangChainAI)

GitHub

*   [Python](https://github.com/langchain-ai/langchain)
*   [JS/TS](https://github.com/langchain-ai/langchainjs)

More

*   [Homepage](https://langchain.com)
*   [Blog](https://blog.langchain.dev)

Copyright © 2024 LangChain, Inc.