Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn to build a basic ChatGPT clone with vanilla JavaScript in this video. Follow along with Dustin as he walks you through the process, from writing the HTML for the UI to integrating the OpenAI API. By the end, you'll have a functional chatbot that can generate human-like responses to user inputs!
Getting an error 429? This is due to "rate limiting". A free account with OpenAI will only allow you to make 3 requests per minute. If you're experiencing this and do not wish to purchase a paid plan, just take a break and grab a cup of coffee and when you come back, you should be good to go!
Resources
OpenAI API URl
https://api.openai.com/v1/chat/completions
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hey, what's up?
0:09
My name's Dustin and
I'm a developer here at Treehouse.
0:10
Today we're gonna build out
a very basic version of ChatGPT.
0:12
And we're gonna do this with just HTML,
CSS, and vanilla JavaScript.
0:16
So what we'll do is we'll start off with
the HTML first to build out our UI and
0:20
it'll be very basic.
0:25
And then I'm just gonna touch
very briefly on the CSS.
0:26
Because the meat and potatoes of this
project is gonna be the JavaScript,
0:29
I wanna focus more time on that.
0:33
So in the description or
teacher's notes down below,
0:34
there's gonna be a link to a GitHub gist.
0:37
And you can go there to copy all the CSS
for this project or download the file and
0:39
include it in your project folder.
0:42
Whatever you wanna do is
completely up to you.
0:44
You can even create your own styles and
make this project your own.
0:46
But what we'll do is spend the majority
of the time writing the JavaScript out.
0:50
So if you wanna follow along, feel free to
open up your favorite text editors, and
0:53
let's get started.
0:57
All right, so let's get started by
looking at the project's file structure.
0:59
So first, we have just an index.html
file with some boilerplate code, and
1:03
we're linking the CSS stylesheet, and then
we're also linking the JavaScript file.
1:07
Next, we have the CSS file,
and just remember,
1:13
grab the code snippet from the GitHub
gist link below for the styles and
1:15
include them in the project
to follow along.
1:19
Or you can just write your own styles and
1:21
make this project look
the way that you want.
1:23
Next, we have an empty index.js file and
1:25
this is where we'll
write all of our logic.
1:28
Lastly, we have a folder for
images where I've got a ChatGPT logo.
1:30
Feel free to grab one off
the internet if you want, but
1:34
you don't need one to follow
along with the project.
1:37
All right, so
let's get started with the markup.
1:39
We can get started by creating
a container for our entire project.
1:42
This will be a div with
the class of chat container.
1:46
And next, we'll just have two children
elements within the chat container, and
1:49
one will be for the chatlog, and
the other one will be for the new message.
1:52
The chatlog container will hold our
message prompt as well as the AI's
1:56
response while the new message container
will hold our form to send the new message
2:00
to the API.
2:04
So while we're inside of the new message
container, let's set that up now.
2:05
We can just create a form and inside
of the form, we'll just have an input.
2:09
And we'll give that input a type
of text and ID of prompt and
2:14
a placeholder of send a message.
2:18
Cool, okay, so, let's open this up in the
browser and see what it's looking like.
2:20
Awesome, cool.
2:25
We see our input at the bottom and
an empty chatlog.
2:26
So let's get started with
the chatlog markup now.
2:29
Even though all of this will be rendered
dynamically with the JavaScript later on,
2:33
it's still good to see how
this is gonna look statically.
2:36
So each message instance will
contain my message prompt as well as
2:39
the AI's response.
2:44
So let's create a container with
the class of message instance container.
2:45
Each message will have a class of message.
2:50
So let's create two divs here
with the class of message, but
2:53
one will get a class of user message,
which is gonna be our message prompt,
2:57
while the other one gets
a class of AI message.
3:02
The markup for each of these
messages will be pretty similar.
3:05
So let's toggle both of them and
create a content div.
3:08
And inside of this content div,
we'll just have a div with the class of
3:12
message image and this is where our
image for each message will go.
3:16
You can choose to add your own image for
your user but in our example,
3:21
it's just gonna be blank.
3:25
So we'll leave this div empty and next,
we'll just create a paragraph tag and
3:27
I'll write this is
a message from the user.
3:31
And for the AI message,
3:34
we'll obviously want to make it
say this is a message from the AI.
3:35
Also inside of the message image for
the AI message,
3:40
I'm going to link up our image for
our ChatGPT logo.
3:44
Awesome, so that's all the markup
that we're gonna need for
3:48
our message instance and sweet,
we see two separate messages.
3:51
I do wanna change one thing I'm going
to change this is a message from the AI
3:54
to thinking.
3:59
And I'm also going to give a class of
thinking to the paragraph tag that's
4:00
associated with the AI message.
4:04
And what this is gonna do is add a pulsing
animation to the paragraph text for
4:05
the AI message.
4:11
And we'll remove this later on whenever
the response comes back from the API.
4:13
Okay, great, so we're actually done with
all of the markup that we'll need and
4:18
we'll come back later to remove the
message instance container markup once we
4:22
render that part of the UI dynamically.
4:25
So let's get started with the meat and
potatoes of this project, the JavaScript.
4:27
So in order to connect to the OpenAI API,
we'll just need a couple of things first.
4:32
The API key and the API URL.
4:36
The URL will be
4:39
https://api.openai.com/v1/chat/completi-
ons.
4:41
Now, in order to get an API key,
4:49
you'll just need to create
a free account on OpenAI.
4:51
It's pretty quick and
I'll show you how to do it.
4:53
Just head on over to
platform.openai.com and sign up.
4:56
Once you have your account,
just click on the account icon and
5:01
then go down to view API keys.
5:04
Once you're there,
just hit Create a new secret key and
5:06
give it a name like chatgpt clone,
and then click create secret key.
5:10
Once you have your API key, click the copy
button., and I already have a key so
5:14
I'm just gonna paste mine in.
5:19
Please do not waste your time trying to
copy my key it won't work for you and
5:21
I'm gonna be deleting this key
after this video is recorded.
5:24
Also, do not share your key with anyone or
5:27
host this repo on GitHub
without making your key secure.
5:30
I'll link some resources down below on how
you can use environment variables to keep
5:33
this secure.
5:37
Okay, so now let's set up some
variables that I know we're gonna need.
5:38
I'll write const form and that's gonna
equal document.querySelector and
5:41
we're gonna target the form,
then I'll just write const promptInput.
5:46
And this will equal
document.querySelector.
5:51
And we're looking for the ID prompt.
5:54
And then we'll just write const
chatLog = document .querySelector and
5:57
we're gonna look for
the class of chat-log.
6:01
Okay, so you know how when you set up
a form and click enter the page refreshes?
6:04
Well we don't want that, so
that's the default behavior.
6:09
And the easiest way to remove that is
to set up a submit event listener on
6:13
the form, taking the event parameter, and
6:17
then just call the prevent
default method on the event.
6:19
And now when we click
Enter in the browser,
6:22
our form does not refresh the page.
6:25
Okay, so now let's figure out what
we wanna do when we do click Enter.
6:27
Well, let's make sure that
our input isn't empty.
6:31
So let's first set up
a variable named value and
6:33
let it equal our promptInput.value.
6:37
And if value is not equal
to an empty string,
6:40
we'll want to create
a new message instance.
6:43
So let's write a function call for
6:46
a function that we'll set up later
called createMessageInstance.
6:48
And we'll basically want to ask ChatGPT
our question based off of the prompt.
6:53
So we'll also create a function later, and
we can call it now, called askChatGPT.
6:57
And lastly, I'll wanna make sure that
every time we update our chatlog UI,
7:03
it automatically scrolls to the bottom so
7:07
that our most recent
message is always visible.
7:10
So we'll create a function
later called handleScroll,
7:13
and we'll call that now also.
7:16
And one last thing, we'll also just
wanna make sure our input is empty so
7:18
that we can type a new
message again later.
7:22
Awesome, I think when we click Enter,
7:25
every function that we
wanna run is being called.
7:26
So let's set up those functions now.
7:29
I'll create a function for
createMessageInstance,
7:30
I'll create another one for askChatGPT,
and one last one for handleScroll.
7:34
Okay, so let's knock out the quick and
easy one first,
7:39
which is the handleScroll function.
7:42
Since the name is a little vague,
7:44
I'll add a comment that says
scroll the chatlog to the bottom.
7:46
And all we'll wanna do in here is just
set the chatlog's scrollTop property
7:50
to the chatlog's scrollHeight value.
7:54
And that's it.
7:57
So we can call this function anytime that
we wanna make sure we scroll to the bottom
7:58
of our chatlog container.
8:02
Now let's work on
the CreateMessageInstance function.
8:03
To create our message
we'll need our prompt.
8:07
Luckily, we are setting the value of
our input to this value variable.
8:09
So when we call our function,
8:14
we can use that as the parameter
in the function call.
8:15
So now in the function declaration,
let's pass in an argument for this.
8:18
We can just call it prompt.
8:22
And for now, let's just console.log prompt
to see if everything's working correctly.
8:23
So I'll hit Save, and in the input
field I'll just type in hello world and
8:28
hit Enter.
8:32
And whenever I click inspect and
then navigate to the console,
8:33
we see hello world in the console.
8:37
Awesome.
8:39
So let's go ahead and
remove that console.log statement.
8:40
And what do we wanna do inside
of this createMessageInstance?
8:43
Well, we'll basically just want to replace
the inner HTML of our chatlog container.
8:48
So, I'll write chatlog.InnerHTML += and
we'll use a set of backticks so
8:52
that we can interpolate
our prompt argument.
8:58
So back in the HTML, let's find our
instance of our new chat message,
9:01
and we'll just copy that
entire chunk of HTML.
9:06
I'll hop back into my JavaScript file,
I'll paste it inside of the backticks,
9:10
and I'll fix up my indentation
just a little bit.
9:14
And inside of our user message paragraph
tag, I'll just copy that entire paragraph
9:17
tag, I'll remove the text that says
this is a message from the user.
9:20
And I'll replace it with a dollar sign and
a set of curly braces.
9:23
And now we can just paste
in our prompt argument.
9:27
So I'll hit Save on this.
9:30
And what we can do now is hop back into
the HTML file, and we'll remove the chunk
9:32
of HTML that we wrote and
we'll just replace it with a comment that
9:37
says something like dynamic so that we
know that this is dynamically rendered.
9:41
I'll hit Save and
I'll come into the browser and
9:46
I'll just write hello world and
press Enter.
9:49
And now we have a new chat instance
where you see my message on the top and
9:52
then what appears to be ChatGPT
thinking of a response.
9:56
And that is all that we will need our
createMessageInstance function to do.
10:00
So now we need to take our prompt and ping
the API with it to get back a response,
10:04
or in other words,
ask ChatGPT our question.
10:10
So now let's work on our
askChatGPT function.
10:13
In here, we'll just want to make
a fetch call to the URL and
10:17
we'll want to pass in some options.
10:20
The method will be post.
10:22
And for the headers,
we'll want content type, and
10:24
that'll be equal to the application/json.
10:28
Then we'll want authorization.
10:31
And this is where we'll use our API key,
so make sure to use a set of backticks for
10:33
the value.
10:38
Interpolate the API variable
that we set up earlier and
10:39
make sure you also add
Bearer in front of it.
10:43
And now for the body of our request,
we'll specify the model and for
10:46
this project, we'll use chatgpt-3.5-turbo.
10:51
And depending on when
you're watching this video,
10:55
there may even be a more
advanced model to use.
10:58
Next, we will supply the message.
11:00
This will be an array and inside will
house an object for our message.
11:02
The role will be set to user since
this is our message to the AI, and
11:06
the content will be equal to our prompt.
11:10
So let's not forget to add prompt as
an argument in our function declaration.
11:12
And we'll also want to use our value
variable as the function parameter when
11:16
calling the function.
11:20
And finally, we can just take our
prompt argument and use it for
11:22
our content's value.
11:26
So one other thing that I wanna
do is set the max tokens.
11:27
And basically what this is, is how long
of a response that you want from the AI.
11:31
You can do something like 100 or even 200,
and this will keep it somewhat short.
11:35
I'll stick with 200.
11:40
So I am noticing some sort of
syntax error and I'm not sure,
11:42
okay, so
I just forgot to add the colon after body.
11:47
So for the body object,
I'll just go ahead and add a colon.
11:52
And that should fix it up.
11:56
I'm actually glad we forgot the colon
because this reminds me that we also need
11:57
to run JSON.stringify on the request body.
12:02
So I will go ahead and cut out
the contents of the body object, and
12:05
then I'll just write
JSON.stringify as a method, and
12:09
then I'll just paste that back inside,
sweet.
12:13
Okay, so since fetch is promise based,
we can chain a .then method on this.
12:16
So let's do that, and
we can take the response and
12:22
run res.json to get it
back in JSON format.
12:26
Then we'll get back some data.
12:29
And this will have all the information
we get back from the response.
12:31
So let's write data,
12:34
and we'll want to use this data to
update our AI's message in the UI.
12:36
So let's write a function call for
12:41
a function called updateMessage and
pass data in as a parameter.
12:43
Now we need to go and
create this function.
12:49
So I'll create a function
named updateMessage and
12:50
I'll pass in message as an argument.
12:53
This will be the data that we
get back from our response.
12:56
So what do we wanna do with this function?
12:58
Well, let's first grab a reference to
the paragraph tag with the thinking class.
13:01
We'll wanna update the text content of
that paragraph tag with the response from
13:06
the API.
13:10
But what kind of info did we
even get back from the API?
13:11
Let's console.log message and
see what we get back in the console.
13:14
I'll hit Save and I'll type in what
is JavaScript in the prompt and
13:19
after some time, we see the data
sent back to us in the console.
13:24
If we examine it,
we get back an array named choices.
13:28
And in the first index of this array,
we see an object called message.
13:31
And the content property of
this object holds our response.
13:35
So back in the JavaScript,
we can just write our paragraph
13:38
tag.textContent = message.choices and
13:43
the first index of that
which is 0.message.content.
13:47
This should handle updating the AI's
message with the response that
13:52
we get back.
13:56
So the only thing we need to do now
is remove the thinking class from
13:56
the paragraph tag.
14:00
And then also I wanna call our
handleScroll function just to make sure
14:01
we're scrolling to the bottom
of our chatlog again.
14:05
I'll hit Save and in the browser,
I'll type in, what is JavaScript?
14:09
And after some time we see
the AI's message update.
14:15
And we see our response from ChatGPT,
perfect.
14:19
So if I go and I type in what is Python,
we'll wait a little bit longer and
14:22
we'll get another response back and
sweet, it works.
14:27
Awesome, we're finished.
14:31
So we built out a very basic version of
ChatGPT that lives in the browser and
14:32
we only used HTML, CSS,
and vanilla JavaScript.
14:37
It's not hard to build some pretty
complex things with some basic
14:40
fundamental concepts.
14:43
One thing that I really like about this
project is that it's set up to where we
14:44
can add as many features as we'd like.
14:47
The real ChatGPT has a panel on the left
side that allows you to see your chat
14:49
history, and that's not hard to implement,
and I encourage you to try it.
14:53
Another thing that we didn't do that we
could add in that would be super simple is
14:57
to handle our errors.
15:01
So if there's an error that
comes back from the API,
15:02
how will we show that to the end user?
15:05
These are some pretty cool features and
they're not hard to implement and
15:06
I hope that you build out
a really cool version of ChatGPT.
15:10
I also hope that this guide helped and
you were able to follow along with me.
15:12
So until next time,
have fun and happy coding.
15:15
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up