How to display images inline (in the middle) of a streaming LLM response in a FastAPI WebSocket chat app?
23:35 18 Dec 2025

I'm building a real-time chat application using FastAPI WebSockets and LangGraph (LangChain) where the assistant can return both text and relevant financial charts/images retrieved from a Weaviate vector store.

The text response is streamed token-by-token beautifully, but the images are currently only sent after the full text response has finished (response_end), causing them to appear below the completed message instead of embedded inline where they are referenced in the analysis.

Here's the current flow (simplified):

  1. User sends query → processed via LangGraph.

  2. Text tokens are streamed via {"type": "token", "content": "..."}

  3. When LangGraph finishes, I collect any returned images (base64 from Weaviate) in collected_images.

  4. Send {"type": "response_end"}

  5. Then loop through collected_images and send each via {"type": "image_b64", ...}

Result: All images appear at the bottom, even if the LLM says "As you can see in the chart above..."

Goal: Have images appear inline, exactly where they belong in the text (e.g., after a paragraph mentioning "performance trend"), ideally while text is still streaming or at least seamlessly embedded.

python langchain langgraph