Streaming in production in LangChain - Performance & Optimization

Performance: Streaming in production

MEDIUM IMPACT

Streaming affects how quickly users see partial results and how smoothly the UI updates during data processing.

Delivering large AI-generated text responses to users

LangChain

const stream = langchain.stream({ input: userInput }); stream.on('data', chunk => updateUI(chunk));

Sends partial data as soon as available, allowing UI to update progressively and improving user experience.

📈 Performance GainReduces interaction delay, improves INP by showing content incrementally.

Delivering large AI-generated text responses to users

LangChain

const response = await langchain.call({ input: userInput }); display(response);

Waits for the entire response before showing anything, causing long delays and poor interaction responsiveness.

📉 Performance CostBlocks UI update until full response arrives, increasing INP and perceived latency.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full response wait	Single large DOM update	1 reflow after full data	High paint cost at once	[X] Bad
Streaming chunks	Multiple small DOM updates	Multiple reflows but smaller	Lower paint cost per chunk	[OK] Good

Rendering Pipeline

Streaming sends partial data chunks to the browser, allowing incremental rendering and reducing blocking time.

→Network

→JavaScript Execution

→Paint

→Composite

⚠️ BottleneckNetwork latency and JavaScript processing of streamed chunks

Core Web Vital Affected

INP

Streaming affects how quickly users see partial results and how smoothly the UI updates during data processing.

Optimization Tips

1Send data in small chunks to enable progressive rendering.

2Avoid blocking UI by processing streamed data asynchronously.

3Monitor network and script execution to optimize streaming performance.

Performance Quiz - 3 Questions

How does streaming data affect user interaction responsiveness?

A It improves responsiveness by showing partial results early.

B It delays responsiveness until all data is received.

C It has no effect on responsiveness.

D It increases layout shifts significantly.

DevTools: Performance

How to check: Record a session while triggering the streaming response, then analyze the timeline for incremental paints and script execution.

What to look for: Look for multiple small paint events spaced over time indicating streaming; long single paint indicates blocking.

Practice

1. What does enabling streaming=True in LangChain do?

easy

A. It sends tokens immediately as they are generated.

B. It delays token sending until the entire response is ready.

C. It disables callbacks for token processing.

D. It caches all tokens before sending them.

Solution

1. Step 1: Understand streaming behavior in LangChain

   Streaming means tokens are sent one by one as soon as they are generated, not waiting for the full response.

2. Step 2: Match streaming=True effect

   Setting streaming=True activates this immediate token sending behavior.

3. Final Answer:

   It sends tokens immediately as they are generated. -> Option A

4. Quick Check:

   Streaming = immediate token sending [OK]

Hint: Streaming means tokens flow out live, not delayed [OK]

Common Mistakes:

• Thinking streaming buffers all tokens first
• Confusing streaming with disabling callbacks
• Assuming streaming delays output

2. Which of the following is the correct way to enable streaming with callbacks in LangChain?

easy

A. llm = OpenAI(streaming=True, callbacks=[MyCallbackHandler()])

B. llm = OpenAI(streaming=False, callbacks=MyCallbackHandler)

C. llm = OpenAI(callbacks=True, streaming=[MyCallbackHandler()])

D. llm = OpenAI(stream=True, callback=[MyCallbackHandler()])

Solution

1. Step 1: Recall correct parameter names

   LangChain's OpenAI class uses 'streaming=True' and 'callbacks' as a list of handlers.

2. Step 2: Check each option's syntax

   llm = OpenAI(streaming=True, callbacks=[MyCallbackHandler()]) correctly uses streaming=True and callbacks as a list. Others misuse parameter names or types.

3. Final Answer:

   llm = OpenAI(streaming=True, callbacks=[MyCallbackHandler()]) -> Option A

4. Quick Check:

   Correct params: streaming=True, callbacks=[handler] [OK]

Hint: Use streaming=True and callbacks as a list [OK]

Common Mistakes:

• Using streaming=False to try enabling streaming
• Passing callbacks as a single object, not a list
• Misspelling parameter names like 'stream' or 'callback'

3. Given this code snippet:

from langchain.callbacks.base import BaseCallbackHandler

class PrintTokens(BaseCallbackHandler):
    def on_llm_new_token(self, token: str, **kwargs):
        print(token, end='')

llm = OpenAI(streaming=True, callbacks=[PrintTokens()])
llm('Hello world')

What will be the output behavior?

medium

A. Prints 'Hello world' all at once after generation completes.

B. Raises a syntax error due to missing imports.

C. Prints nothing because callbacks are not supported.

D. Prints each token of 'Hello world' immediately as it is generated.

Solution

1. Step 1: Understand the callback handler

   The PrintTokens class prints each token immediately when on_llm_new_token is called.

2. Step 2: Streaming enabled triggers token callbacks live

   With streaming=True, tokens are sent and printed one by one as generated.

3. Final Answer:

   Prints each token of 'Hello world' immediately as it is generated. -> Option D

4. Quick Check:

   Streaming + on_llm_new_token = live token print [OK]

Hint: Streaming with on_llm_new_token prints tokens live [OK]

Common Mistakes:

• Expecting full output after completion
• Assuming callbacks don't work with streaming
• Missing that print uses end='' to avoid newlines

4. What is the main issue with this code snippet for streaming in LangChain?

llm = OpenAI(streaming=True, callbacks=PrintTokens())
llm('Test')

medium

A. The PrintTokens class is missing required methods.

B. streaming=True is not a valid parameter for OpenAI.

C. Callbacks must be passed as a list, not a single instance.

D. The llm call should be awaited with async syntax.

Solution

1. Step 1: Check callback parameter type

   LangChain expects callbacks as a list, even if only one handler is used.

2. Step 2: Identify error cause

   Passing callbacks=PrintTokens() (not in a list) causes a type error or unexpected behavior.

3. Final Answer:

   Callbacks must be passed as a list, not a single instance. -> Option C

4. Quick Check:

   Callbacks = list of handlers [OK]

Hint: Always wrap callbacks in a list, even if one [OK]

Common Mistakes:

• Passing a single callback object directly
• Assuming streaming=True is invalid
• Forgetting to implement callback methods

5. You want to build a chatbot that shows user responses token-by-token as they are generated. Which combination of LangChain features should you use in production?

hard

A. Use streaming=True with callbacks, but disable token printing to improve speed.

B. Use streaming=True with a callback handler implementing on_llm_new_token to display tokens live.

C. Use streaming=True but no callbacks, then print the final output after completion.

D. Use streaming=False and collect all tokens before displaying the full response.

Solution

1. Step 1: Identify streaming usage for live token display

   Streaming must be enabled to get tokens as they generate, not after full response.

2. Step 2: Use callback handler to process tokens live

   Implementing on_llm_new_token in a callback lets you display tokens immediately.

3. Step 3: Confirm best practice for production chatbot

   Combining streaming=True with a callback that prints tokens live is the correct approach.

4. Final Answer:

   Use streaming=True with a callback handler implementing on_llm_new_token to display tokens live. -> Option B

5. Quick Check:

   Streaming + on_llm_new_token = live chatbot tokens [OK]

Hint: Streaming plus on_llm_new_token callback shows tokens live [OK]

Common Mistakes:

• Disabling streaming and expecting live tokens
• Not using callbacks to handle tokens
• Printing tokens only after full response