How to Build Support AI Chatbots for Your Website (for almost free) | Tutorial for Beginners

Summary

In this video, Stan from Lot demonstrates how to create a cost-effective custom AI support bot for tech-focused web products using ChatGPT and Chatwoot, integrated with the low-code automation platform, Lat.com. The tutorial covers setting up an inbox, creating a bot with instructions and model selection, attaching files, and configuring API keys and webhooks. It concludes with a cost analysis, showing that generating 100 replies costs just $0.19, highlighting the affordability of this solution for enhancing customer support.

Takeaways

• 😀 The video is about creating a custom AI support bot for a tech-focused web product to handle customer queries efficiently.
• 🤖 The speaker introduces the use of Chatwo and ChatGPT for creating a website widget, which is a cost-effective solution for customer support.
• 📝 The process starts by creating a 'dignet' using Chatwo, which is a free service for setting up an inbox for the chatbot on a website.
• 🔑 The video guides through the setup of an agent, which is a person who will interact with the customer, and in this case, it's Stan.
• 📝 The next step is to create a bot using the ChatGPT API, where instructions and model selection are crucial, and a retrieval function is enabled for file attachments.
• 📚 The importance of attaching files, such as plain text or markdown files, to the bot for its operation is highlighted.
• 🔗 The video explains how to create an API key in the ChatGPT account and how to integrate it with the workflow in the low-code automation platform called Lat.com.
• 🛠️ The workflow in Lat.com is demonstrated, showing how it triggers the creation of a thread with the assistant and processes incoming messages.
• 🔄 The video outlines the need to create variables in the Lat.com account, including API keys, assistant IDs, and unique identifiers for data storage.
• 💬 The process includes setting up variables for loading phrases that the bot will use while generating responses and an assistance prompt for the AI bot.
• 🔧 The final steps involve configuring webhooks in Chatwo to connect with the workflow in Lat.com, activating the scenario, and deploying it for use on a website.
• 💰 The video concludes by emphasizing the cost-effectiveness of the custom AI support bot, calculating the cost for generating 100 replies to be only $0.19.

Q & A

What is the main issue addressed in the video?

The video addresses the challenge of providing customer support for tech-focused web products, particularly when there is a lack of time and human resources to assist users.

Why is AI chat bots becoming prevalent on websites?

AI chat bots are becoming prevalent because they offer a solution to the problem of managing customer support efficiently and cost-effectively, especially for tech products where users have many questions.

What is the custom solution presented by Stan's team for their customer support issue?

Stan's team, being a low-code automation platform, created a custom AI support bot using chat GPT and chatbot widgets from a tool called Chatw, integrated with their low-code automation platform called Lat.com.

What is Chatw and how is it used in the video?

Chatw is a tool for creating website widgets. In the video, it is used to create a new inbox for the chatbot on their website, where users can interact with the AI support bot.

What is the role of the 'agent' in the context of the video?

In the context of the video, an 'agent' refers to the person who would ostensibly speak with the customer, though in this case, it's the AI bot that acts as the agent, with Stan being the representative example.

How does the video guide the creation of an AI bot using the chat GPT API?

The video guides the viewer through the process of creating a bot by providing instructions, choosing a model, enabling the retrieval function for file attachments, and attaching the necessary files.

What files are recommended to attach for the AI bot's workflow?

The video recommends using plain text files (.txt) with minimal design for the AI bot's workflow, as AI does not require complex design elements.

What is the significance of the 'retrieval function' mentioned in the video?

The retrieval function is significant as it allows the AI bot to attach files, which is essential for providing context or additional information needed to generate accurate responses.

How does Lat.com integrate with the AI bot created using chat GPT?

Lat.com integrates with the AI bot by providing an automation workflow that triggers the creation of a thread with the assistant whenever a conversation starts and sends the message body to chat GPT to generate a response.

What are the variables that need to be set up in the Lat.com account to make the AI bot functional?

The variables that need to be set up include the OpenAI API key, the assistant's ID, a unique UUID for data storage, the Chatw API key, loading phrases for the bot, and the assistance prompt to be sent with customer messages.

How does the video demonstrate the cost-effectiveness of the custom AI support bot?

The video demonstrates the cost-effectiveness by providing numbers, showing that it takes around 150 input tokens and 250 output tokens for GPT to generate one reply, along with one execution credit on Lat.com, which costs significantly less than traditional support methods.

What are the final steps to deploy the AI bot on a website according to the video?

The final steps include configuring the webhook URLs in Chatw, setting up the necessary variables in the Lat.com account, and deploying the scenario to make it active.

Outlines

00:00

🤖 Creating a Custom AI Support Bot

In this paragraph, Stan introduces the problem of customer support for tech-focused web products and the common use of AI chatbots as a solution. He presents a custom solution developed by his team, which is cost-effective. Stan, from Lot, will demonstrate how to create a custom AI support bot using Chat GPC and Chatwood, a tool for creating website widgets, integrated with a low-code automation platform called Lat. The process begins with creating a widget using Chatwood, setting up an inbox, choosing the website option, and specifying the website name and domain. The bot will be created using the assistance API, requiring the setup of an agent and the attachment of files. The video will guide through the process of attaching files and setting up the API keys necessary for the bot to function.

05:00

🔧 Configuring Variables and Integrations for the AI Bot

This paragraph details the process of setting up variables and integrations necessary for the AI bot to function properly. Stan explains how to create variables for the OpenAI API key, the assistant's ID, a unique UUID for data storage, the Chatw API key, loading phrases for the bot, and the assistance prompt. Each variable is created with a specific type and value, such as strings for API keys and JSON for the loading phrases. The paragraph also covers the configuration of web hooks in Chatwood, linking them to the production URL of the web hook trigger in the Lat account. This setup ensures that the bot can receive and respond to messages effectively.

10:03

💰 The Cost-Effectiveness of the Custom AI Support Bot

In the final paragraph, Stan emphasizes the cost-effectiveness of the custom AI support bot. He provides an estimate of the cost for generating replies using the bot, which includes the number of input and output tokens required by Chat GPC and the execution credits needed on Lat. The cost breakdown shows that it takes approximately 150 input tokens and 250 output tokens for one reply, with the input token costing $0.41 and the output token costing three times more. Additionally, one execution credit on Lat costs $0.19. Stan calculates that generating 100 replies would only cost $1.90, highlighting the affordability of the solution. He concludes the video by inviting viewers to like, subscribe, and join their Discord Channel for further assistance, and provides a link to the scenario template in the video description.

Keywords

💡Tech Focus Web Product

A tech focus web product refers to a web-based application or service that is centered around technology and its functionalities. In the context of the video, it's a product that requires users to understand its technical workings. The script mentions that customer support for such a product can be challenging due to the complexity involved, which is why AI chatbots are introduced as a solution.

💡Customer Support

Customer support refers to the assistance provided to customers by a company to help them with their inquiries, issues, or feedback regarding a product or service. In the video, it is identified as a 'worst nightmare' for tech web product teams due to the high demand and the complexity of addressing technical questions, which is why an AI solution is sought.

💡AI Chat Bots

AI chat bots are software applications powered by artificial intelligence that can interact with users in a conversational manner. They are used to provide instant responses and assistance on websites. The script discusses the implementation of AI chat bots to alleviate the burden of customer support on human resources.

💡Low Code Automation Platform

A low code automation platform is a tool that allows users to create applications or automate processes with minimal coding. The video script mentions that the team uses such a platform, called 'lat.com', to create a custom AI support bot, emphasizing the ease and efficiency of the process.

💡Chatwood

Chatwood is a tool mentioned in the script for creating website widgets. It is used in conjunction with a low code automation platform to set up the user interface for the AI support bot, allowing for a chat interface on the website without extensive coding.

💡API Keys

API keys are unique identifiers used to authenticate requests to an API (Application Programming Interface). In the script, API keys are created and used to connect the AI chat bot to the services of 'openai' and 'chatw', enabling the bot to function and interact with users.

💡Retrieval Function

The retrieval function, as mentioned in the script, is a feature that allows the AI to attach files, which is crucial for the AI to access and utilize information from attached documents. This function is turned on when setting up the AI bot in the 'openai' account.

💡Webhook Trigger

A webhook trigger is an event that activates a specific process or workflow when it occurs. In the video, webhook triggers are used to initiate the creation of a conversation thread with the AI assistant and to send messages to the AI when they are received from the user.

💡Variables

In the context of the script, variables are elements within the low code automation platform that store data used in the workflow. They are essential for customizing the AI bot, such as storing API keys, assistant IDs, and loading phrases for the bot to use.

💡Cost-Effectiveness

Cost-effectiveness refers to the ability to achieve the desired outcome at the lowest possible cost. The script highlights the affordability of the custom AI support bot, calculating the cost of generating replies using tokens and execution credits, and emphasizing the economic advantage of using AI over human resources.

💡Automation Workflow

An automation workflow is a sequence of steps or actions that are automated to perform a task or process. The script describes the creation of an automation workflow in the 'lat.com' platform that integrates the AI bot with the website, allowing it to respond to user inquiries automatically.

Highlights

Introduction to the problem of customer support in tech-focused web products and the solution of AI chatbots.

The team's challenge of limited time and human resources for customer support and their decision to create a custom AI support bot.

The cost-effectiveness of the custom AI support bot solution.

Introduction of the speaker, Stan, and the purpose of the video: creating a custom AI support bot using chat GPT and chatw.

The process of creating a chatbot using chatw, starting with creating a new inbox for the website.

The importance of choosing the right widget color and setting up the welcome heading and tagline.

The selection of an agent for the chatbot and the integration of the script into the website.

The creation of the actual bot using the chat GPT assistance API and the importance of turning on the retrieval function.

The process of attaching files to the bot and the types of files recommended for use with AI.

The necessity of creating API keys for both chat GPT and chatw and their integration into the workflow.

The use of the no-code automation platform, lat.com, for creating the automation workflow for the chatbot.

The cloning of a template from the AI examples folder in lat.com to create the automation workflow.

The explanation of the two parts of the workflow: the webhook trigger for starting a conversation and the message reception part.

The creation of variables in the workflow for API keys, assistant ID, and other necessary data.

The use of loading phrases for the bot to communicate with customers while processing responses.

The finalization of the scenario with the correct webhook URLs and the deployment of the scenario for functionality.

The cost analysis of generating 100 replies with the custom AI support bot, emphasizing its affordability.

The conclusion of the video with an invitation for feedback and assistance through the provided Discord Channel.

Transcripts

if you run a tech Focus web product

customer support is your worst nightmare

people try to figure out how your

product works and you have no time and

no human resources to help them that's

why you see AI chat bots on almost every

website our team fac the same issue but

since we're a loward automation platform

we tried to come up with a custom

solution for it and we did yes come

on and the best thing is that came out

to be extremely cheap cheap hello

everyone I'm Stan from lot and in this

video I'll show you how to create a

custom AI support bot using chat GPC and

chatwood a tool for creating website

widgets bonded of course by low code

automation platform called late n let's

start with creating a diget and we'll

use chatwood to do it first of all

because you can use it for free so I

logged into my account and after that I

have to go to inboxes here here to

create a new

inbox and here I choose the website

option because I'm trying to create in

the chatbot for my late night website so

in here we have to specify the website

name and domain let's do

it okay now we can choose the widget

color anything would be okay uh welcome

heading the tagline

and that said we can now create an

inbox now we have to pick an agent an

agent is a person who would speak with

the customer so in my case it's

obviously

Stan and that's it now I have the script

that I can just put into my website and

get vidget and the next step is going to

be creation of an actual bot using chpt

assistance API so here we are in open

eyes account and we have to go to

assistance tab here and then click

create to actually create a b then you

give it a name provide it with

instructions choose the model and what

is the most important you have to turn

the retrieval function on so you will be

able to attach files to it and after

that click here to actually attach the

files I can show you the actual bot

we're using onl not.com here it is and

here are the instructions that we're

using and talking about the files to

attach you can use txt files with plain

text minimal design no design uh cuz AI

just don't need it in this case we use

MD

files and uh to make your workflow

actually work what you also need to do

in your account is to go to API keys and

actually create one after this we can

switch to lat.com

so here we are in late night account

I've created a brand new one so and the

first thing that we're going to do is to

start with template click here and now

we are in the template gallery of late n

we'll need to go to AI examples folder

and the second example here is what we

need GPT customer supported B yes click

on

it and here you see the actual

automation workflow that runs this

vidget but to make work for you first

thing that you have to do is to click

clone to add this template to your

scenario

list here it is we can see now that it

is in our scenarios what is going on

here we have two parts of this workflow

each one starts with the web hook

trigger first web hook trigger activates

the creation of thread with the

assistant and it's triggered every time

the conversation starts in our Viet and

the second part of this workflow is

activated when the message is received

and uh it sends the body of this message

to chat GPC using this workflow and

generates the answer we actually can see

how it works cuz here it is the actual

uh system that that is created using

this workflow let's click on it it saved

my previous question so I asked how to

create a scenaria and it ask me to wait

a bit and uh after that so this messages

are sent to to extend the waiting time

for the reply of the assistant but it

actually doesn't matter cuz all you have

to do to make this scenario this example

uh work for you is to go here to

variables Tab and create a few VAR ibles

that are going to be used in this

workflow and that's it so let's create a

first one click here new variable and

then select the type of a variable the

first variable that we're going to

create is the variable for openi API key

so since is just string of numbers and

letters we going to use a string type

let's name

it okay and here in value field we just

need to insert our API key from the open

account and after that click

save here it is our first

variable the next variable is going to

be the assistant's

ID so we choose the string type once

again give it a

name and in value tab we insert the

actual assistance ID from our account

here it is and just paste and click save

another variable grade for the next

variable you can visit this website is

called uuid generated. net and what it

does it creates the this yuu ID so that

is just a unique stream for storing data

in key value pass we just

copy this ID and then go back to

variables uh choose string type once

again give it a

name and here just insert this code here

is another variable variable number four

is going to be the chatw API key so new

variable and streen again specify the

name

and to get the chatboard API key go back

to chatboard account click on your

profile then go to profile settings and

scroll down the page and here you see

your access token copy and then paste

inide of this field

okay we'll use the next variable to

provide the bot with the loaded phrases

that he will send to the customer till

he is thinking what to answer so create

new variable and then choose Json

because we'll add the Json object here

give it a

name and in value tab you can use this

loading phrases from the description of

this video or you can come up with your

own so click here and just paste it

that's it

save and the last variable is the

assistance prompt so new variable streen

again this prom will be sended together

with the customer message to the AI bot

so you can come up with your own or you

can just take the one from the

description

just paste it here and that's it we

finished with variables and now we have

a fully functional scenario here

actually I've missed one thing let's

choose the WAP hook node here and here

we have development and production URL

we'll need the production one and also

you can edit it a

bit okay that's okay then we copy it and

save the changes

yes after that we have to go back to

chatwood in chatwood go to settings and

then Integrations and here we have web

hooks now we have to click configure and

add new web hook and here we add the

production URL of this web hook trigger

and since this web Hook is activated uh

when the conversation is created we have

to choose this event and then create web

hook and all the same we have to do with

the second one where with which is

activated when the message is received

so go to production URL edit

it okay and now copy and save the

changes and once again add new web hook

paste the link and now choose message

create created event that's it after you

do that your scenario is fully

functional and all you have to do is to

click the deploy

button here it is the scenario is active

now and uh if you put the widget on your

website it should actually work just

like the widget on lot.com and I said

this custom AI support Bo is extremely

cheap right let's bring some numbers it

takes something around 150 input tokens

and 250 output tokens for Chad gp4 turbo

to generate one reply and also it takes

only one execution credit on lot.com to

run this scenario GPT for turo input

token cost

0.41 and output token cost three times

more and one execution credit on lot.com

costs zero bu two $19 so to generate 100

replies it takes only

$19 cents isn't that cheap that's it

guys thanks for watching if you found

this video helpful please give it a like

subscribe and hit the Bell if you face

any difficulties during your automation

Journey feel free to ask for help in our

Discord Channel Link in the description

together with the template of this

scenario see you soon and happy

automating