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:

1. Download the JSON schema from the Langflow interface
2. 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! 🎉