Quickstart
Get to know Langflow by building an OpenAI-powered chatbot application.
After you’ve constructed a chatbot, add Retrieval Augmented Generation (RAG) to chat with your own data.
Prerequisites
-
An OpenAI API key.
-
An active Serverless (Vector) database
Open Langflow and start a new project
-
In the Astra Portal header, switch your active app from Astra DB Serverless to Langflow.
-
In Langflow, click New Flow, and then select Blank Flow. A blank workspace opens where you can build your flow.
If you don’t want to create a blank flow, click New Flow, and then select Basic Prompting for a pre-built flow. Continue to Run the Basic Prompting flow.
Build the basic prompting flow
The Basic Prompting flow will look like this when it’s completed:
To build the Basic Prompting flow, follow these steps:
-
Click Inputs, select the Chat Input component, and then drag it to the canvas. The Chat Input component accepts user input to the chat.
-
Click Prompt, select the Prompt component, and then drag it to the canvas. The Prompt component combines the user input with a user-defined prompt.
-
Click Outputs, select the Chat Output component, and then drag it to the canvas. The Chat Output component prints the flow’s output to the chat.
-
Click Models, select the OpenAI component, and then drag it to the canvas. The OpenAI model component sends the user input and prompt to the OpenAI API and receives a response.
You should now have a flow that looks like this:
With no connections between them, the components won’t interact with each other. You want data to flow from Chat Input to Chat Output via the connectors between the components. Each component accepts inputs on its left side, and sends outputs on its right side. Hover over the connection ports to see the data types that the component accepts. For more on component inputs and outputs, see Components.
-
To connect the Chat Input component to the OpenAI model component, click and drag a line from the blue Message port to the OpenAI model component’s Input port.
-
To connect the Prompt component to the OpenAI model component, click and drag a line from the blue Prompt Message port to the OpenAI model component’s System Message port.
-
To connect the OpenAI model component to the Chat Output, click and drag a line from the blue Text port to the Chat Output component’s Text port.
Your finished basic prompting flow should look like this:
Run the Basic Prompting flow
Add your OpenAI API key to the OpenAI model component, and add a prompt to the Prompt component to instruct the model how to respond.
-
Add your credentials to the OpenAI component. The fastest way to complete these fields is with Langflow’s Global Variables.
-
In the OpenAI component’s OpenAI API Key field, click the
Globe icon, and then click Add New Variable. Alternatively, click your username in the top right corner, and then click Settings, Global Variables, and then Add New. -
Name your variable. Paste your OpenAI API key (
sk-…
) in the Value field. -
In the Apply To Fields field, select the OpenAI API Key field to apply this variable to all OpenAI Embeddings components.
-
-
To add a prompt to the Prompt component, click the Template field, and then enter your prompt. The prompt guides the bot’s responses to input. If you’re unsure, use
Answer the user as if you were a GenAI expert, enthusiastic about helping them get started building something fresh.
-
Click
Playground to start a chat session. -
Enter a query, and then make sure the bot responds according to the prompt you set in the Prompt component.
You have successfully created a chatbot application using OpenAI in the Langflow Workspace.
Add vector RAG to your application
You created a chatbot application with Langflow, but let’s try an experiment.
-
Ask the bot:
Who won the Oscar in 2024 for best movie?
-
The bot’s response is similar to this:
I'm sorry, but I don't have information on events or awards that occurred after October 2023, including the Oscars in 2024. You may want to check the latest news or the official Oscars website for the most current information.
Well, that’s unfortunate, but you can load more up-to-date data with Retrieval Augmented Generation, or RAG.
Vector RAG allows you to load your own data and chat with it, unlocking a wider range of possibilities for your chatbot application.
Add vector RAG with the Astra DB component
Build on the basic prompting flow and add vector RAG to your chatbot application with the Astra DB Vector Store component.
Add document ingestion to your basic prompting flow, with the Astra DB component as the vector store.
If you don’t want to create a blank flow, click New Flow, and then select Vector RAG for a pre-built flow. |
Adding vector RAG to the basic prompting flow will look like this when completed:
To build the flow, follow these steps:
-
Disconnect the Chat Input component from the OpenAI component by double-clicking on the connecting line.
-
Click Vector Stores, select the Astra DB component, and then drag it to the canvas. The Astra DB component connects to your Astra DB database.
-
Click Processing, select the Split Text component, and then drag it to the canvas. The Split Text component splits the loaded text into smaller chunks.
-
Click Processing, select the Parse Data component, and then drag it to the canvas. The Parse Data component converts the data from the Astra DB component into plain text.
-
Click Embeddings, select the OpenAI Embeddings component, and then drag it to the canvas. The OpenAI Embeddings component generates embeddings for the user’s input, which are compared to the vector data in the database.
-
Connect the new components into the existing flow, so your flow looks like this:
-
Configure the Astra DB component.
-
Add your Astra DB application token, or generate one.
-
Select your database, or click Add new database to create one.
-
Select the Collection where your data is stored, or click Create Collection to create one. The collection’s Dimensions value must match the dimensions of the OpenAI Embeddings Model. If you’re unsure, enter
1536
and select thetext-embedding-ada-002
model in the OpenAI Embeddings component. -
Select Embedding Model to bring your own embeddings model, which is the connected OpenAI Embeddings component.
-
If you used Langflow’s Global Variables feature, the RAG application flow components are already configured with the necessary credentials.
Run the chatbot with retrieved context
-
Modify the Prompt component to contain variables for both
{user_question}
and{context}
. The{context}
variable gives the bot additional context for answering{user_question}
beyond what the LLM was trained on.Given the context {context} Answer the question {user_question}
-
In the File component, upload a text file from your local machine with data you want to ingest into the Astra DB database. This example uploads an up-to-date CSV about Oscar winners.
-
Click
Playground to start a chat session. -
Ask the bot:
Who won the Oscar in 2024 for best movie?
-
The bot’s response should be similar to this:
The Oscar for Best Picture in 2024 was awarded to "Oppenheimer," produced by Emma Thomas, Charles Roven, and Christopher Nolan.
Adding an Astra DB vector store brought your chatbot all the way into 2024. You have successfully added RAG to your chatbot application using the Astra DB component.
Next steps
This example used movie data, but the RAG pattern can be used with any data you want to load and chat with.
Make the Astra DB database the brain that Agents use to make decisions.
Expose this flow as an API endpoint and call it from your external applications.
For more on the Astra DB component, see Create an Astra DB component in Langflow.