- AI with Armand
- Posts
- Create your first chatbot with LLMs
In just 5 minutes, you'll get a crash course on using no-code AI to create a custom chatbot with large language models (LLMs).
Here's what we'll cover:
Setting up Flowise, an intuitive no-code platform to build LLM-powered apps
Creating your first Flow to make a simple chatbot
Testing out your new chatbot and seeing it in action
Everything you need to get started with no-code AI is right here in this quick tutorial.
No prior experience is needed - just bring your creativity!
Let's do this! 💪
Video tutorial
If you prefer learning visually, I've created a quick video walkthrough that demonstrates how to build your first chatbot.
What is Flowise
Flowise is an open source based on 🦜️🔗 LangChain.js and is a Graphic User Interface for developing LLM-based applications.
Step 1. Install & Run
Download and Install NodeJS >= 18.15.0 (lower node versions cause problems with some Nodes integration). You can find it here: https://nodejs.org/en
Install Flowise: npm install -g flowise
Start Flowise: npx flowise start
Open https://localhost:3000 🚀
Flowise is up and running
Step 2. ChatBot: Your first LLM application
In this tutorial, we are going to build a simple but very effective general chatbot in two simple steps with Flowise. Then we are going to test it and place it on our website.
1. Place the Nodes
Flowise works with elements called “Nodes” and can interact between them. For the purpose of this tutorial, we are going to develop the chatbot with the minimum number of nodes possible.
We will need 3 Nodes:
ChatOpenAi: Configure your connection to OpenAI services and use the language model you want. Allows additional configuration for the model like temperature, maximum tokens, etc.
Chat Prompt Template: Element to interact with the model. It is necessary to manage the input and the output. You can give the chat a context in the “System message”.
LLM Chain: Put together the other 2 pieces in a chain. A LLMChain is the most common type of chain. It consists of a PromptTemplate and a model. This chain takes multiple input variables and uses the PromptTemplate to format them into a prompt. It then passes that to the model.
An LLMChain is a simple chain that adds some functionality around language models.
2. Configure and connect the Nodes
Configure the Chat Prompt Template with some context and place “{text}” in the Human Message box (if we leave this blank, we are not connecting anything as human input, placing “{text}” we are telling the element to take the text typed by the human as the input).
Configure the ChatOpenAI element with your OpenAI credentials, you will need an API token to use the OpenAI API. If you are doing this for the first time you will need to create a new credential set (you can do it in the same credential dropdown. You can access your OpenAI keys here: https://platform.openai.com/account/api-keys
Connect the 3 elements between them like in the image below. We are connecting the model and prompt to the chain:
Connecting nodes on Flowise for a simple chatbot
The chain takes the prompt template and the model as input variables and produces the output based on these two inputs.
Step 3. Testing the chatbot
Save the ChatFlow and click the chat button to test it.
Now you can talk to the model (be prepared, we specifically requested a “funny assistant”):
Testing our chatbot and getting funny replies as requested in the prompt
Step 4. Embed the chatbot on your site
To embed this example in your website you only need to click the “API Endpoint” button (top right corner toolbox). There are several ways to embed this in your code. For the purpose of this tutorial we are going to use the first one, Popup HTML mode:
Create a file main.html and place the copied script in your section:
<!DOCTYPE html>
<head>
<script type="module">
import Chatbot from "<https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js>"
Chatbot.init({
chatflowid: "91eec4a8-9e8f-4acd-b76a-0f3a65821d00",
apiHost: "<http://localhost:3000>",
})
</script>
</head>
<body>
<h1>Hello world</h1>
</body>
This script will place automatically a “chat” icon at the bottom right of your page, when you open and talk to this chat, the message will go through the LLM chain we have configured.
And that’s it, open the file in your browser (without stopping Flowise):
CONGRATULATIONS! 🥳
You just created your first chatbot.
Would you like more tutorials like this in the future? |
Join the AI Bootcamp! 🤖
Pre-enroll to 🧠 The AI Bootcamp. It is FREE! Go from Zero to Hero and Learn the Fundamentals of AI. This Course is perfect for beginner to intermediate-level professionals that want to break into AI. Transform your skillset and accelerate your career. Learn more about it here:
Cheers!
Armand 😎
Join the conversation