Langflow
In this tutorial, we will guide you through the steps to create a Chainlit application from your Langflow agent.

Preview of the app you'll build
Prerequisites
Before diving in, ensure that the following prerequisites are met:
- A working installation of Chainlit
- The Langflow package installed
- An OpenAI API key
- A basic understanding of Python programming
Step 1: Create your agent in Langflow
Start your local Langflow server, and create an agent. For this tutorial I am going to create a Wikipedia aware agent.

Langflow graph of the agent
Here is the exported json schema file for this agent.
Step 2: Export the agent
You have two options to export your agent:
- Download the JSON schema from the Langflow interface
- Use the Langflow API endpoint. You can derive it from your flow URL.
http://127.0.0.1:7860/flow/2a0aa566-bc57-4a97-909a-43328d87daa5
Step 3: Write the Application Logic
In app.py
, import the necessary packages and define one function to handle a new chat session and another function to handle messages incoming from the UI.
import json
from langchain.agents import AgentExecutor
from chainlit.langflow import load_flow
import chainlit as cl
with open("./schema.json", "r") as f:
schema = json.load(f)
@cl.on_chat_start
async def start():
flow = await load_flow(schema=schema)
cl.user_session.set("flow", flow)
@cl.on_message
async def main(message: cl.Message):
# Load the flow from the user session
flow = cl.user_session.get("flow") # type: AgentExecutor
# Enable streaming
flow.agent.llm_chain.llm.streaming = True
# Run the flow
res = await cl.make_async(flow.run)(
message.content, callbacks=[cl.LangchainCallbackHandler()]
)
# Send the response
await cl.Message(content=res).send()
Step 4: Launch the Application
To kick off your LLM app, open a terminal, navigate to the directory containing app.py
, and run the following command:
chainlit run app.py -w
The -w
flag enables auto-reloading so that you don’t have to restart the server each time you modify your application. Your chatbot UI should now be accessible at http://localhost:8000.
Next Steps
Congratulations! You’ve just created your first LLM app with Chainlit and LangFlow. From here, you can add elements and actions to create a more sophisticated app.
Happy coding! 🎉
Was this page helpful?