Heads up! To view this whole video, sign in with your Treehouse account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this tutorial video, Dustin will guide you through the process of building a ChatGPT-powered Discord bot. You'll learn how to create a bot that listens to messages in a designated channel, sends those messages to the ChatGPT API for processing, and then responds with the generated text from the AI. By the end of this tutorial, you'll have a functional Discord bot that can generate responses to user messages using the power of ChatGPT. So whether you're a seasoned developer or just starting out, come join Dustin and learn how to build a ChatGPT Discord bot today!
NPM packages to install:
npm i discord.js openai dotenv
Update
This workshop was recorded using v3 of the openai package. The release of v4 introduced new initialization logic which might cause errors when following along with the workshop. You'll want to make the following adjustments compared to Dustins code:
Adjust the import:
// Old
import { Configuration, OpenAIApi } from "openai";
to be:
// New
import OpenAI from 'openai';
Then instead of using Configuration and OpenAIApi as shown you can initialize the OpenAI class without separately creating the configuration.
// Old
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
// New
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY // This is also the default, can be omitted
});
If you're interested to find out what other changes were introduced you can check out the v3 to v4 Migration Guide
Resources
Discord
OpenAI
NodeJS
Additional Learning Content
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
It's Dustin, and you're probably already
pretty familiar with the popular messaging
0:10
service, Discord.
0:14
But if you're not, it's basically just
a messaging and communication platform,
0:15
designed primarily for gamers.
0:19
But it's evolved into a pretty
versatile tool for various communities,
0:20
it combines text, voice, and
video chat within a server.
0:24
Servers are essentially
just chat rooms for
0:28
groups of people with similar interests.
0:30
In these servers, you can have multiple
channels for different topics.
0:32
I know, you're probably wondering why
I'm even telling you about Discord, but
0:36
I had a fun project that I
think we could build together.
0:39
I recently built out a Discord bot that
uses Open AI's API to answer questions we
0:42
prompt it with, it's basically
a ChatGPT Discord bot, it's pretty cool.
0:47
It's actually pretty easy to build,
and I only use JavaScript to build it.
0:51
So if you have a solid understanding
of the JavaScript basics,
0:55
this should be a pretty great project for
you to follow along with.
0:57
So if you wanna follow along,
let's get started.
1:00
So first things first,
1:03
you'll wanna head on over to
discord.com/developers/applications.
1:04
If you're not already signed into your
Discord account, make sure to sign in.
1:10
Your screen should look
pretty similar to mine,
1:14
mine is some bots that
I've already created.
1:15
Web pages can change over time, so
1:18
I can't guarantee that this page will look
exactly as it does now, but just make sure
1:19
that you can find the New Application
button and go ahead and click it.
1:23
Give your Discord bot a name,
I'll just name mine ChatGPT,
1:27
then you'll wanna agree to the Terms
of Service and hit Create.
1:31
We just created the shell for
our bot application.
1:35
Here, you can change the bots image,
name, or even add a description.
1:38
For this demo, I'll just update my
bots image and I'll hit Save Changes.
1:43
Now head on over to the bot tab,
this is our actual bot and
1:47
it'll inherit the name and image given
to the shell if it was provided.
1:50
This is how the bot will appear in Discord
once we invite it to our server, so
1:54
let's scroll down and
update some of the rules and permissions.
1:58
Look for something called Public Bot and
make sure it's turned off.
2:02
You'll wanna have this turned on only if
you plan on having other people invite
2:06
your bot to their server.
2:10
But for this demo, I highly
recommend just keeping it private.
2:11
Click Save Changes and
scroll down a little bit further.
2:15
Underneath the section called
Privileged Gateway Intents, go ahead and
2:19
toggle all these rules on.
2:23
This will give our bot access to
the things that we'll need for
2:25
our ChatGPT bot to work.
2:28
Click Save Changes once more, and
now just head over to the OAuth2 tab.
2:30
And from the submenu, click URL Generator.
2:36
Under Scopes, make sure to check
off Bot and Application.commands.
2:39
Then, under Bot Permissions,
check off Administrator.
2:44
This is so that our bot has
everything that it needs to work.
2:48
Once that's done,
if you scroll all the way to the bottom,
2:51
you should see a generated
URL that we can copy.
2:55
This is how we'll invite our bot
to our server, so go ahead and
2:57
click the Copy button, and
now you'll wanna just open up Discord.
3:00
We'll wanna invite our bot to our server,
so for this demo,
3:05
I'll just create a new test
server to invite our bot to.
3:08
So click the Add a Server button and
then click Create My Own or
3:11
choose from a template.
3:14
Give your server a name and click Create.
3:17
Now remember that URL that we copied just
a little while ago, we'll need that now.
3:19
So if you forgot to copy it, head back
over to the browser, hit Copy and
3:24
jump right back into Discord.
3:28
In your general channel, go ahead and
paste in that link and hit Enter.
3:31
And now, just click the link and
3:35
this will invite our bot to
whichever server we select, so
3:36
select the one that we just created and
click Continue, and then click Authorize.
3:40
Prove that you're actually a human and
3:45
you should get a message confirming
that you've authorized your bot.
3:47
And now, if you open the Members tab for
your server,
3:51
you'll see the ChatGPT bot that
we created, but it's offline.
3:54
We'll turn it online pretty soon, but
3:58
let's go grab a few things
that we'll need first.
4:00
Hop back into your browser and
head on over to platform.open.ai.com.
4:03
We'll need an API key from OpenAI so
that we can use chatGPT text completions.
4:09
If you don't already have an OpenAI
account, just simply create a free one.
4:15
And once you're logged in,
click on your account in the top right and
4:19
navigate to View API Keys.
4:23
Once here,
just click on Create New Secret Key and
4:25
give your new key a name,and
then click on Create Secret Key.
4:28
Once it's created,
you'll wanna hit the Copy button.
4:32
Now, let's open up VS Code and
actually start writing some code.
4:35
You'll wanna make sure to have
Node.js installed before proceeding to
4:39
the next part of this project.
4:42
Open up an empty project folder for
your bot application.
4:44
I've created an empty folder on my
desktop and just named it ChatGPT bot.
4:48
Let's first open up the terminal and
4:53
initialize our project as an NPM
project by writing npm init -y.
4:55
This will allow us to install some
packages that will make working with
5:00
the Discord API much simpler.
5:03
Now, you should have a package.json file.
5:05
Once you have that,
in the terminal again, let's write npm i,
5:08
which is short for npm install, and
5:13
we'll wanna install three packages
discord.js, openai, and dotenv.
5:16
Once those are finished installing, you
can check that they've successfully been
5:22
installed by opening
the package.json file.
5:26
Now I'll create a .tenv file.
5:29
This file will hold all of our
sensitive variables like our OpenAI API
5:32
key that we just copied.
5:35
If you'd like a pretty quick tutorial
on how to use environment variables,
5:36
be sure to check out the description or
teachers notes down below.
5:40
So in this file,
let's write API equals, and
5:44
we'll paste in that secret key
that we just copied from Open AI.
5:46
Now, let's add in another variable named
token, and this will be our bots token.
5:51
We need this so that Discord knows
which bot we wanna work with.
5:55
So let's jump back over into our
browser and click on the Bot tab.
5:59
Scroll all the way up and
you should see a reset token button.
6:03
This will reset our bots token and
allow us to copy it.
6:06
Please note that every time you click
Reset, you'll need to update your
6:09
bot's token in the code, so
only do this if you absolutely need to.
6:13
Also, if you have two-factor
authentication enabled,
6:18
you may need to put that in
before you can reset the token.
6:20
But once it's reset, just click the Copy
button next to the Reset Token button and
6:24
we're gonna paste this into our .env file.
6:28
Once that's done,
we just need one more variable.
6:31
And this is the channel ID that
we want our bot to work with.
6:34
This one's easy,
head on over to Discord, and
6:37
just right-click on the channel that
you want your bot to work with.
6:39
And at the very bottom of that menu,
you should see Copy Channel ID.
6:42
If you don't see that option, don't worry.
6:46
You just need to enable developer mode for
Discord, and I'll show you how to do it.
6:49
At the bottom of your Discord app,
you should see an icon for user settings.
6:54
Go ahead and click that and
then go to Advanced.
6:58
Once there,
you should see a developer mode toggle.
7:01
Make sure that this is turned on, and
7:04
then head back over to
your servers channel list.
7:05
Right-click on the channel that
you want the bot to work with, and
7:08
then you should be able to click
on the Copy Channel ID button.
7:11
Now, with that channel ID,
7:14
let's paste it into our .env file
with the variable name of channel.
7:16
Now, we have everything we need to
get started writing our main logic
7:20
for our bot.
7:23
So to get started with that,
let's first create an index.js file.
7:24
This will be our entry point to our app.
7:28
At the top of the file,
let's require ('dotenv').config, and
7:31
this is so that we can use all the
environment variables that we just set up.
7:35
Next, let's require a couple
of things from discord.js,
7:40
we'll destructure Client
as well as IntentsBitField.
7:43
I won't go too deep into what these are,
but if you'd like to take a deeper dive
7:47
into discord.js, I'll drop a link
below to their API documentation.
7:51
I found that the discord.js
documentation is very well-written and
7:56
super easy to understand.
7:59
So if you're interested in building
even more bots after this tutorial,
8:01
I suggest spending some time
getting to know the documentation.
8:04
You can build just about
anything you can think of.
8:07
Let's create a variable to hold a new
instance of client from discord.js.
8:10
In here,
let's specify the intents that we'll need.
8:14
This will be an array of
intense from discord.js.
8:17
As your bot program grows, you may need
to add and have access to more and
8:20
more intense, and
this is where you can add them.
8:23
So let's write
IntentsBitField.Flags.Guilds.
8:26
Guilds in Discord is another
way of saying server.
8:31
So for example, the test server that
we created is actually a guild.
8:33
I'll copy down this line a couple
more times since the other intents
8:37
are pretty similar.
8:40
For the second one,
we'll wanna write guild messages.
8:42
This will give us access to
the messages in our server or guild.
8:45
And the last one,
we can just change to message content.
8:49
And as the name implies, this will give
us access to the content of a message.
8:52
I'll go over how we can use
intents in a moment but first,
8:57
let's turn our bot online.
8:59
The client has access to some events, so
9:00
we can write client.on and
the event that we want is ready.
9:04
So basically, when the client,
which is our bot, is ready,
9:09
let's console.log ChatGPT is online.
9:12
Of course, before we can even run this
code, let's actually log in our bot.
9:16
This is actually super easy to do, we just
need to write client.login as a method and
9:20
the parameter will be our bot.
9:24
So if you remember, we set up a variable
in our .env file called token.
9:27
So in order to use that variable,
we just need to write process.env.token.
9:31
So let's hit Save and run our server.
9:37
To do this, you'll need to make sure you
have node installed on your machine.
9:39
And in the terminal, you can write
node index.js to run our node server.
9:43
If all is well,
9:48
you should see our console.log
statement saying ChatGPT is online.
9:48
So now, let's hop into Discord and
see if our bot is online.
9:53
Sweet, there it is.
9:56
Now, let's get back to our code and
figure out what we should do next.
9:57
When we send a message to our channel,
10:01
we'll want to ping ChatGPT
with the message, right?
10:03
So we'll need to write another
event listener on our client.
10:06
Let's write client.on.
10:10
And the event that we wanna listen for
is messageCreate.
10:12
And with this event,
we have access to the message itself.
10:15
So let's console.log message and
see what we get back.
10:18
I'll hit Save and
hop back into my terminal.
10:22
The server is still running so
I'll hit Ctrl+C to stop the server.
10:24
And now I'll rerun the server by
just typing node index.js again.
10:28
We can see our ChatGPT is online message
so we know that there's no errors.
10:32
So let's hop into discord and
type something in our channel.
10:37
I'll type in Hello,
World and I'll hit Send.
10:40
Now if we check our terminal, we see that
we got back a message object containing
10:43
all sorts of information
about our message.
10:47
If we scroll all the way up to the top,
we'll see a property for
10:49
content which holds our message.
10:52
Remember that,
as we'll need that later on.
10:54
But now that we know that we have
access to our message's content,
10:56
let's start setting up our
bot to work with OpenAI.
11:00
At the top of our file,
11:02
I'll grab a few things from our
OpenAI package that we installed.
11:04
We'll need configuration and OpenAI API.
11:07
Now after our ready event listener, let's
create a new instance of the configuration
11:12
class from OpenAI and inside it will
just want to connect our API key.
11:17
If we hop back into our .env file,
11:22
you'll see that we named our
API key from open AI as API.
11:24
So let's use that by
writing process.env.API.
11:28
That's actually all we'll need for
our new configuration.
11:33
So let's use it.
11:35
We can create a new OpenAI API class and
pass in our configuration variable.
11:37
This will allow us to
connect straight to OpenAPI.
11:43
Inside of that message that
we logged to the console,
11:46
you may have noticed we had access to
a lot more than just our messages content.
11:49
Some of this data is actually
gonna be pretty useful.
11:53
For example,
11:56
the message.author property allows us to
know if a user sent the message or a bot.
11:57
Since our bot will reply
back to the channel,
12:01
we don't wanna ping the API
with our bot's response, right?
12:04
So let's write a conditional for this.
12:08
We can remove our console.log statement
and just write if (msg.author.bot),
12:10
which will return true if the message
author is a bot, or want to just return.
12:16
Returning here will not allow any
of the following code to run.
12:21
And we also wanna check that
we're in the right channel.
12:25
We want this bot to only work
in one specific channel, right?
12:28
So let's write another conditional
that tests if msg.channel.id
12:31
is not equal to our channel
environment variable,
12:36
which holds the channel ID,
then we'll also want to return.
12:40
And lastly,
12:44
we may wanna have a way to talk to
this channel without pinging the bot.
12:45
So we can use the starts with method
to check if our message starts with
12:49
a specific string.
12:53
And if so we wanna return.
12:54
For this example,
I'll just use an exclamation mark.
12:56
Now with those safety nets in place,
let's give some context to our bot.
12:59
What we can do is create
a conversation log.
13:03
And this will be just an array of objects.
13:05
And the first object will be the initial
context that we wanna give our bot.
13:08
So let's set this bot up
as a friendly chatbot.
13:11
We can set the rolled property to
system and the content property,
13:14
we can just write,
you are a friendly chatbot.
13:18
You can change this to your liking
if you want a mean chatbot or
13:21
even a sarcastic bot.
13:24
Just make sure you're okay with getting
your feelings hurt if you choose to
13:25
make a sarcastic bot.
13:28
I tried this and
[LAUGH] it's actually really hilarious.
13:29
But now that we have our initial
conversation log setup let's handle
13:32
pushing our prompt to this array
whenever we send a message.
13:36
This is gonna be pretty easy to do.
13:39
We just need to write
conversationLog.push, and
13:41
we wanna push a new object.
13:44
We can set the role to user
since it's our message, and
13:46
the content will be our messages content.
13:49
Easy enough, right?
13:52
Now we can utilize a cool
method called sendTyping.
13:53
This will show that our bot is
typing while waiting for a response.
13:56
We just need to write
message.channel.sendTyping as a method.
13:59
Also, I noticed we forgot to set
this up as an async function.
14:04
Let's go ahead and do that now since
we'll be awaiting a response from OpenAI.
14:07
Let's write the await keyword
before the sendTyping method and
14:11
we can write async just after
the messageCreate event.
14:15
All right, now for the fun part,
let's ping OpenAI with our message.
14:18
We can create a new variable for
the response and
14:22
set it equal to
openai.createChatCompletion as a method.
14:25
Be sure to put a weight
before the method call.
14:29
This will be an object and in here, we'll
just wanna specify the model we're using.
14:32
For this tutorial,
I'm gonna be using gpt-3.5-turbo, but
14:36
there may be a better model to use in
the future, so be on the lookout for that.
14:40
Now we just need to pass it our message,
but instead of passing it msg.content,
14:45
let's pass it our conversationLog.
14:50
This will have our bot's initial context
as well as our prompt since we pushed it
14:52
to the conversationLog array.
14:56
And now we just need to send our bot's
response back to the channel, and
14:57
that's actually pretty easy to do.
15:01
We just need to write
msg.reply as a method and
15:02
we can just pass in
the response from ChatGPT.
15:05
The response will just be
our response variable.data,
15:09
the first index of choices .message.
15:12
And I know this without needing to log
our response to the console because I'm
15:15
actually pretty familiar
with the OpeAI API.
15:19
I just created a video on building
a ChatGPT clone with JavaScript where I
15:21
go over this API a lot more.
15:26
So if you're interested in that,
15:27
be sure to check out the teacher's
notes down below for that video.
15:29
It's actually a pretty fun
project to code along with.
15:31
All right, so let's hit Save and
make sure to stop
15:34
running the server if you're still
running it by pressing Ctrl+C, and
15:37
restarting the server by
running node index.js.
15:41
Brownie points if you're
familiar with node and
15:44
running Nodemon to auto-run your server.
15:46
I'll link a resource down below if you're
interested in learning more about Nodemon.
15:48
So back in Discord,
I'll just write what is JavaScript?
15:52
And let's see what we get back.
15:55
Okay, so I don't see that our bot
is typing a message response, so
15:58
we might have an error.
16:02
Let's switch back to our text editor and
check out the console.
16:04
Okay, so we definitely made
the console a little angry.
16:07
Let's see what's going on.
16:09
So it looks like message
link is not defined and
16:11
I don't really remember writing
anything with the words message link.
16:14
So let's see what happened.
16:18
Okay, I'm back.
16:20
So it looks like on line 40, I wrote
await messageLink.channel.sendTyping.
16:21
And this may have been
an autocomplete fail.
16:26
Let's change message
link with just message.
16:29
So I'm gonna hit Save and
back in my terminal,
16:32
I'm going to clear all these errors out.
16:35
And I'm just gonna run node index.js.
16:38
Okay, so let's hop back into Discord and
find out what is JavaScript.
16:40
Okay, great.
16:46
We at least see that
the bot is typing back.
16:46
Boom, we have a helpful response from
ChatGPT, right in our Discord channel.
16:49
This is pretty fun.
16:54
Let's ask it another question.
16:54
Do you know what Python is?
16:56
Awesome, it does.
16:59
I would certainly hope it did, right?
17:01
So now what happens if we talk to it like
a human and ask it if it's easy to learn?
17:02
Let's find out.
17:07
Is it easy to learn?
17:08
It looks like it has no idea what I'm
talking about and that's not cool.
17:10
While our bot program works, it doesn't
seem to remember any previous messages.
17:15
This is a fun feature that I think
we can tackle pretty easily.
17:19
So let's see what we have to do.
17:22
Let's first move some things around.
17:23
Let's cut out the sendTyping
function from its current
17:25
place in our script to just right
after our conversationLog on line 35.
17:28
We can create a previous
message variable and
17:32
let it equal to
msg.channel.messages.fetch.
17:36
Remember to put await
before this function call.
17:39
Now this fetch function didn't
just pop out of thin air and
17:42
I'm not some magical wizard that
just knows exactly what to type.
17:45
Believe me, I wish I were.
17:48
But like I mentioned earlier, spend some
time on the discord.js documentation, and
17:50
you'll be a Discord API wiz in no time.
17:55
This function takes in an object
with a limit property.
17:57
The value is essentially the amount of
previous messages from that channel that
18:01
you'd like to fetch.
18:05
You can choose to fetch five,
ten, or even 15 messages.
18:06
But 15 seems like a nice number, so
let's go ahead and use that now.
18:09
This fetch method will return
an array of the last 15 messages.
18:13
The only problem with that is that
they're in order from oldest to newest.
18:16
So a quick and easy way around
that is to just reverse the order.
18:20
Since I mentioned that we are returned
with an array, we can use the reverse
18:23
array method to essentially
reverse the order of the array.
18:27
This will give us back our previous
messages from newest to oldest,
18:30
which is exactly what we want.
18:34
See how fun using array methods can be.
18:35
Let's use another one.
18:38
We'll wanna loop over each one of
these messages and push them to our
18:39
conversation log and that sounds like
a perfect use case forEach method.
18:42
You should be pretty familiar
with array methods by now, but
18:47
just in case you're not, I'll link below
some content where I explain how to use
18:49
most of the array methods that we
have access to with JavaScript.
18:53
So let's write previousMessages.forEach
and for each message, what do we wanna do?
18:56
Well, let's make sure we aren't pushing
any messages that we wanted the ChatGPT
19:02
bot to ignore.
19:06
Remember earlier we set up
using the exclamation mark for
19:07
the bot to ignore messages?
19:10
Well, we definitely don't
want to add those messages to
19:12
the conversationLog, right?
19:15
Another safeguard that we want to put in
place is to make sure that our bot ignores
19:16
messages in the channel that
may have been from other bots.
19:20
So we don't want it to ignore itself but
19:22
we don't want previous
messages from other bots.
19:25
Currently, our server doesn't
have any other bots but
19:27
this is a safeguard that you could put in
place now to ensure that your bot will
19:30
work in the future no matter
how big your server grows.
19:33
We can do this pretty easily by
writing if (message.author.id) is
19:36
not equal to client.user.id and
message.author.bot.
19:42
If so we wanna return.
19:48
And lastly, one final safeguard that I
think would be a good idea to include
19:50
would be to keep the conversation
long with the bot personal.
19:54
Meaning it can have a conversationLog
with each different user.
19:57
So, for example,
if I'm talking to the bot about Python,
20:00
while another person in my server
is talking about JavaScript, and
20:04
one of us asks if it is easy to learn,
it will reply to the right person.
20:08
And this is a really
easy thing to do as well.
20:12
We just need to write if
message.author.id is not equal
20:14
to message.author.id,
then we'll simply wanna return.
20:19
Please note that I am using message
with two different spellings.
20:24
If you're confused as to why let's
quickly break that down now so
20:27
that there's no confusion.
20:31
On line 40, you see that we're creating
a message variable that holds the value of
20:32
our currently iterated array item
from the previous messages array.
20:36
So when message is written out in
this way it refers to the currently
20:40
iterated item whereas msg is from line 23.
20:44
On line 23, we set up a variable to
hold the message object from Discord so
20:47
when we refer to msg, it's actually
the object of our Discord message.
20:52
Okay, so back to the code.
20:56
After all of those safeguards are in
place, what do we actually wanna do with
20:58
the previous messages that make
it past all those conditionals?
21:02
Well, we just wanna write
conversationLog.push, and
21:06
we'll push an object with
the role property set to user and
21:09
a content property with the value
equal to our message.content.
21:13
Now let's erase our old
conversationLog.push.
21:18
Also, if we ran this now we would get
an error because the value of msg.content
21:21
will be undefined.
21:26
And this is because message only lives
in the scope of the forEach method.
21:27
So silly me we just need to cut
this conversation log push and
21:31
paste it into our forEach method where
it has access to this message variable.
21:34
So let's hit Save and
run our server one last time, hopefully.
21:38
I'll write node, index.js,
and hop back into Discord.
21:43
I'll ask our bot to give me a Javascript
array containing the US states and
21:47
let's see if it can return me that.
21:52
Awesome, it gave me exactly what I wanted.
21:55
But what if I wanted them
in an abbreviated format?
21:57
Let's see if it remembers our last
message and can reply accurately.
22:00
All right, I'm sorry,
could I get that abbreviated instead, and
22:04
let's see what ChatGPT can do.
22:08
Sweet, now have an updated JavaScript
array of abbreviated US states.
22:11
Okay, that was pretty fun and
it didn't take a whole lot of code and
22:15
we only use JavaScript.
22:19
Pretty neat, right?
22:20
Well, I hope I'll see you in the next one,
and until then have fun and happy coding.
22:22
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