Intermediate

LangChain Integration

Chainlit integrates deeply with LangChain, automatically visualizing chain steps, agent tool calls, and retrieval results in the chat UI.

Basic LangChain Chain

Python
import chainlit as cl
from langchain_openai import ChatOpenAI
from langchain_core.prompts import ChatPromptTemplate
from langchain_core.output_parsers import StrOutputParser

@cl.on_chat_start
async def start():
    prompt = ChatPromptTemplate.from_messages([
        ("system", "You are a helpful assistant."),
        ("human", "{input}"),
    ])
    chain = prompt | ChatOpenAI(model="gpt-4o") | StrOutputParser()
    cl.user_session.set("chain", chain)

@cl.on_message
async def main(message: cl.Message):
    chain = cl.user_session.get("chain")

    msg = cl.Message(content="")
    await msg.send()

    async for chunk in chain.astream({"input": message.content}):
        await msg.stream_token(chunk)
    await msg.update()

RAG Pipeline

Python
from langchain_community.vectorstores import Chroma
from langchain_openai import OpenAIEmbeddings

@cl.on_chat_start
async def start():
    # Load documents and create retriever
    vectorstore = Chroma.from_documents(docs, OpenAIEmbeddings())
    retriever = vectorstore.as_retriever()
    cl.user_session.set("retriever", retriever)

@cl.on_message
async def main(message: cl.Message):
    retriever = cl.user_session.get("retriever")

    # Show retrieval step
    async with cl.Step(name="Retrieving", type="retrieval") as step:
        docs = await retriever.ainvoke(message.content)
        step.output = f"Found {len(docs)} relevant documents"

    # Generate response with context
    context = "\n".join(d.page_content for d in docs)
    response = await generate(message.content, context)
    await cl.Message(content=response).send()

Agent with Tools

Python
from langchain.agents import create_tool_calling_agent, AgentExecutor
from langchain_core.tools import tool

@tool
def search_web(query: str) -> str:
    """Search the web for information."""
    return web_search(query)

@cl.on_chat_start
async def start():
    llm = ChatOpenAI(model="gpt-4o")
    tools = [search_web]
    agent = create_tool_calling_agent(llm, tools, prompt)
    executor = AgentExecutor(agent=agent, tools=tools)
    cl.user_session.set("agent", executor)

@cl.on_message
async def main(message: cl.Message):
    agent = cl.user_session.get("agent")
    result = await agent.ainvoke({"input": message.content})
    await cl.Message(content=result["output"]).send()

LlamaIndex Integration

Python
from llama_index.core import VectorStoreIndex, SimpleDirectoryReader

@cl.on_chat_start
async def start():
    documents = SimpleDirectoryReader("data").load_data()
    index = VectorStoreIndex.from_documents(documents)
    query_engine = index.as_query_engine(streaming=True)
    cl.user_session.set("engine", query_engine)

@cl.on_message
async def main(message: cl.Message):
    engine = cl.user_session.get("engine")
    response = await cl.make_async(engine.query)(message.content)
    await cl.Message(content=str(response)).send()
Automatic step tracking: Chainlit can automatically track LangChain steps. Set LANGCHAIN_TRACING_V2=true and the Chainlit callback handler to see every chain step in the UI without manual Step() calls.

What's Next?

Let's customize the look and feel of your Chainlit chatbot with themes, branding, and authentication.

Ready to Go Deeper?

Live instructor-led courses from our partners. Affiliate disclosure.