{"id":28284,"date":"2022-03-23T22:58:38","date_gmt":"2022-03-23T22:58:38","guid":{"rendered":"http:\/\/How-to-build-Discord-GIF-Bot-with-Nodejs"},"modified":"2025-02-19T16:19:59","modified_gmt":"2025-02-20T00:19:59","slug":"how-to-build-discord-gif-bot-with-nodejs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-discord-gif-bot-with-nodejs\/","title":{"rendered":"How to build Discord GIF Bot"},"content":{"rendered":"

In this media jam, we will build a discord bot that sends GIFs to the user. We will use Node.js<\/a> and Discord.js<\/a> to create the bot. We will also use node-fetch<\/code> to fetch the GIFs from Giphy.com<\/a>.<\/p>\n

If you want to jump right into the code, check out the GitHub Repo here<\/a>.<\/p>\n

CodeSandbox<\/h2>\n

You can join the dummy server, Discord Bot Tutorial Server<\/a><\/strong> to explore and play with the bot. For example, type !gif<\/code> followed by the search query in the general channel of the server and hit enter.<\/p>\n

You can also explore the code and preview the bot with the CodeSandbox.<\/p>\n

The following CodeSandbox contains an embed of a dummy Discord Server where the discord bot, built in this jam, is installed. Make sure you have the Discord App opened before exploring the CodeSandbox. There might be a few seconds delay between sending queries and receiving GIFs.<\/em><\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

Setup & Install<\/h2>\n

You will use Node.js<\/a> and Discord.js<\/a> to build the bot. Run the following command in the terminal to initialize a new Node.js project.<\/p>\n

npm init -y\n<\/code><\/span><\/pre>\n
This command will create a package.json<\/code> in your root directory. Run the following commands to install the dependencies.<\/p>\n
npm<\/span> install<\/span> discord<\/span>.js<\/span> node-fetch<\/span>\nnpm<\/span> install<\/span> -D<\/span> dotenv<\/span> nodemon<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
The discord.js<\/code> module makes interacting with Discord API much more effortless. The node-fetch<\/code> package helps in making GET requests to the Giphy API to retrieve the GIFs.<\/p>\n
dotenv<\/code> lets you store API Keys securely as environment variables. nodemon<\/code> restarts the server with every change in the code.<\/p>\n
Update the package.json<\/code> file like this to add two scripts, start<\/code>, and dev<\/code>, in the scripts<\/code> field.<\/p>\n
{\n    \"name\"<\/span>: \"discord-bot-gif\"<\/span>,\n    \"version\"<\/span>: \"1.0.0\"<\/span>,\n    \"description\"<\/span>: \"\"<\/span>,\n    \"main\"<\/span>: \"index.js\"<\/span>,\n    \"scripts\"<\/span>: {\n        \"start\"<\/span>: \"node index.js\"<\/span>,\n        \"dev\"<\/span>: \"nodemon index.js\"<\/span>\n    },\n    \"keywords\"<\/span>: [\n        \"discord-bot\"<\/span>,\n        \"giphhy\"<\/span>\n    ],\n    \"author\"<\/span>: \"\"<\/span>,\n    \"license\"<\/span>: \"ISC\"<\/span>,\n    \"devDependencies\"<\/span>: {\n        \"dotenv\"<\/span>: \"^10.0.0\"<\/span>,\n        \"nodemon\"<\/span>: \"^2.0.7\"<\/span>\n    },\n    \"dependencies\"<\/span>: {\n        \"discord.js\"<\/span>: \"^12.5.3\"<\/span>,\n        \"node-fetch\"<\/span>: \"^2.6.1\"<\/span>\n    }\n}\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n
Navigate to https:\/\/developers.giphy.com\/dashboard\/<\/a> and click on  Create an App<\/strong> button.<\/p>\n
\"Create<\/p>\n
When prompted, select the API<\/strong> product and click on Next Step<\/strong>.<\/p>\n
\"Next<\/p>\n
Enter your App Name<\/strong> and Description<\/strong> and hit Create App<\/strong>.<\/p>\n
\"Create<\/p>\n
Copy your API Key<\/strong> from the Giphy developer dashboard.<\/p>\n
\"API<\/p>\n
Create a new file named .env<\/code> in the root directory of your project by running the following command.<\/p>\n
touch<\/span> .env<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Paste the Giphy API Key in the .env<\/code> file.<\/p>\n
GIPHY_API_KEY = <YOUR-API-KEY>\n<\/code><\/pre>\n
How to get Discord Bot API Token<\/h2>\n
In this section, you will create a new Discord App and retrieve the API Token for the bot. Before proceeding further, make sure you have created a Discord account. You can create one here<\/a>.<\/p>\n
Navigate to Discord\u2019s developer page<\/a>  in the browser and click on New Application<\/strong>.<\/p>\n
\"New<\/p>\n
Name your application and click on the Create<\/strong> button.<\/p>\n
\"Name<\/p>\n
You can add general information like a description or an icon to your bot. Then, click on the Save Changes<\/strong> button to save the icon or description.<\/p>\n
\"Bot<\/p>\n
Click on the Bot<\/strong> tab in the left menu. Then, on the Bot<\/strong> page, click on Add Bot<\/strong>.<\/p>\n
\"Bot-<\/p>\n
Yow will be prompted to confirm; click on Yes, do it!<\/strong>.<\/p>\n
\"Confirm-<\/p>\n
After creating the bot, copy the API Token from the Build-A-Bot<\/strong> section.<\/p>\n
\"Copy<\/p>\n
Paste the Discord Token in the .env<\/code> file.<\/p>\n
GIPHY_API_KEY = ''\nDISCORD_TOKEN = ''\n<\/code><\/pre>\n
How to create a new Server in your Discord Account<\/h2>\n
In this section, you will create a dummy server in your Discord app and add the bot to it.<\/p>\n
Head over to your discord app, click on the plus icon present in the bottom left.<\/p>\n
\"Add<\/p>\n
When prompted, click on Create My Own<\/strong> to create a dummy server.<\/p>\n
\"Create<\/p>\n
You will be asked who the server is for; you can skip this by clicking on skip this question<\/strong>.<\/p>\n
\"Tell<\/p>\n
Given a name to your server, for example, Discord Bot Tutorial Server<\/strong>, and click on the Create<\/strong> button. You can also add an icon to it.<\/p>\n
\"Customize<\/p>\n
You have successfully created a dummy discord server for development purposes.<\/p>\n
The next step is to add the bot to this server. Head over to Discord\u2019s developer page<\/a> and click on the OAuth2<\/strong> tab in the left tab menu.<\/p>\n
On the OAuth2<\/strong> page, select bot<\/strong> under the SCOPES<\/strong> section. After selecting the bot<\/strong>, copy the URL present just below it and paste it into a new tab in the browser.<\/p>\n
\"OAuth2<\/p>\n
This link will install the discord-bot-gif<\/code> in your dummy server. You will be asked to select the server you want the bot to be installed on this page, select the dummy server you created, and click on the Authorize<\/strong> button.<\/p>\n
\"Authorize\"<\/p>\n
The bot will be installed in your dummy server, and you will see a message similar to the one below in the general<\/code> channel of your server.<\/p>\n
\"Bot<\/p>\n
How to create the Bot<\/h2>\n
In this section, you will code the bot to send a message, pong<\/code>, when ping<\/code> is entered in the discord channel. This simple command, i.e., ping<\/code>, will help in checking the status of the bot.<\/p>\n
Run the following command to create a file named index.js<\/code> in your project\u2019s root directory.<\/p>\n
touch<\/span> index<\/span>.js<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Add the following code the index.js<\/code> file.<\/p>\n
require<\/span>(\"dotenv\"<\/span>).config();\nconst<\/span> Discord = require<\/span>(\"discord.js\"<\/span>);\n\nconst<\/span> client = new<\/span> Discord.Client();\n\nclient.on(\"ready\"<\/span>, () => {\n  console<\/span>.log(`Logged in as ${client.user.tag}<\/span>!`<\/span>);\n});\n\nclient.on(\"message\"<\/span>, async<\/span> (message) => {\n  if<\/span> (message.content === \"ping\"<\/span>) {\n    message.reply(\"Pong!\"<\/span>);\n  }\n});\n\nclient.login(process.env.DISCORD_TOKEN);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the above code, you start by importing the dotenv<\/code> package to load the environment variables in your code. Then you create an instance of Discord.Client<\/code>.<\/p>\n
You add two event handlers to the discord client, the first being the ready<\/code> event triggered when the bot is ready and the second message<\/code> event triggered when the user sends a message in the discord channel.<\/p>\n
The ready<\/code> event handler logs the user tag of the bot in the terminal. In the message<\/code> event handler, you check if the message typed by the user is ping<\/code> or not. If it is ping<\/code>, then you send a reply message pong<\/code> to the user.<\/p>\n
Start the development server by running the following command in the terminal.<\/p>\n
npm run dev\n<\/code><\/span><\/pre>\n
\"Nodemon<\/p>\n
Your development server will start with nodemon<\/code>, and once the discord client is ready, a message similar to Logged in as discord-bot-gif#1153!<\/code> will be logged in the terminal.<\/p>\n
Head over to the  general<\/code> channel in the discord server. You will notice that your bot is online in the right section. Type ping<\/code> in the text area and hit enter.<\/p>\n
\"GIF<\/p>\n
The bot will reply with a pong<\/code> message.<\/p>\n
How to send GIF in the Discord Channel<\/h2>\n
In this section, you will fetch the GIFs based on the searched query and then send them to the channel. You have already installed the node-fetch<\/code> package, which will help to fetch the GIFs from Giphy.com<\/a>.<\/p>\n
You will send the user\u2019s query in the URL of the fetch request where gifSearchText<\/code> is the query entered by the user and process.env.GIPHY_API_KEY<\/code> is your Giphy API Key.<\/p>\n
http:\/\/api.giphy.com\/v1\/gifs\/search?q=${gifSearchText}&\napi_key=${process.env.GIPHY_API_KEY}&limit=100\n<\/code><\/pre>\n
The next step is to finalize the invocation command, which triggers the bot to send the GIF; this tutorial uses !gif<\/code> as the invocation command. You can also choose any other command like !searchGif<\/code>, !gifff<\/code>, etc.<\/p>\n
The search query will be followed by the invocation command. So, for example, the command to search for GIFs related to hello<\/strong> will look like this.<\/p>\n
!gif hello\n<\/code><\/pre>\n
You first need to listen for the invocation command, i.e., !gif<\/code>, and then make a request to Giphy API with the query followed by !gif<\/code>.<\/p>\n
One way of doing so is using the split()<\/code> method of an Array. You can split the entire string into an array of substrings and check if the index element is !gif<\/code> or not. You can read more about the split()<\/code> method here<\/a>.<\/p>\n
Update the index.js<\/code> file like this.<\/p>\n
require<\/span>(\"dotenv\"<\/span>).config();\nconst<\/span> Discord = require<\/span>(\"discord.js\"<\/span>);\nconst<\/span> fetch = require<\/span>(\"node-fetch\"<\/span>);\n\nconst<\/span> client = new<\/span> Discord.Client();\n\nclient.on(\"ready\"<\/span>, () => {\n  console<\/span>.log(`Logged in as ${client.user.tag}<\/span>!`<\/span>);\n});\n\nclient.on(\"message\"<\/span>, async<\/span> (message) => {\n  if<\/span> (message.content === \"ping\"<\/span>) {\n    message.reply(\"Pong!\"<\/span>);\n  }\n\n  let<\/span> splitMessage = message.content.split(\" \"<\/span>);\n\n  if<\/span> (splitMessage[0<\/span>] === \"!gif\"<\/span>) {\n    const<\/span> gifSearchText = splitMessage.slice(0<\/span>, splitMessage.length).join(\" \"<\/span>);\n\n    const<\/span> url = `http:\/\/api.giphy.com\/v1\/gifs\/search?q=${gifSearchText}<\/span>\n    &api_key=${process.env.GIPHY_API_KEY}<\/span>&limit=100`<\/span>;\n\n    const<\/span> res = await<\/span> fetch(url);\n\n    const<\/span> json = await<\/span> res.json();\n    \n    const<\/span> randomIndex = Math<\/span>.floor(Math<\/span>.random() * json.data.length);\n\n    message.channel.send(json.data[randomIndex].url);\n  }\n});\n\nclient.login(process.env.DISCORD_TOKEN);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the above code, you split the message into substrings using the split()<\/code> method.  The split()<\/code> method splits the message wherever it finds a space, i.e., after the invocation word. You then check if the first element in the array is !gif<\/code>.<\/p>\n
If the first element is !gif<\/code>, you create a new substring of all the elements except !gif<\/code> using the slice()<\/code>  and join<\/code> method.<\/p>\n
For example, a user can search for !gif happy birthday<\/code>; you will need to make the fetch request using the string happy birthday<\/code> and remove the !gif<\/code> from the message, which is what the following line of code does.<\/p>\n
const<\/span> gifSearchText = splitMessage.slice(0<\/span>, splitMessage.length).join(\" \"<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Then you pass the search query, i.e., the gifSearchText<\/code> variable and the Giphy API key in the fetch URL. You also pass a limit to return only 100 GIFs in the responses.<\/p>\n
const<\/span> url = `http:\/\/api.giphy.com\/v1\/gifs\/search?q=${gifSearchText}<\/span>\n    &api_key=${process.env.GIPHY_API_KEY}<\/span>&limit=100`<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You then fetch the GIFs bypassing the URL or the url<\/code> variable in the fetch<\/code> method.<\/p>\n
You convert the returned response into JSON using the .json()<\/code> method and send a random GIF from the fetched responses.<\/p>\n
    const<\/span> json = await<\/span> res.json();\n    const<\/span> randomIndex = Math<\/span>.floor(Math<\/span>.random() * json.data.length);\n    message.channel.send(json.data[randomIndex].url);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You are actually sending the URL of the GIF which is converted to the GIF by Discord.<\/p>\n
\"GIF<\/p>\n
Conclusion<\/h2>\n
In this media jam, you created a Discord Bot to send GIFs from scratch. We used Giphy API in this jam; you can also integrate other APIs like Tenor<\/a>, Imgur<\/a>, Gfycat<\/a>, etc., with the bot. You can change the invocation command to select which API should be used. For example, !giphy <QUERY><\/code> or\n!tenor <QUERY><\/code>.<\/p>\n
You can also try to integrate Spotify API<\/a> to play music in the channel.<\/p>\n
Here are a few resources that you might find helpful:<\/p>\n
The next step is to create an app on Giphy Developers<\/a> and retrieve the API key. Head over to Giphy.com<\/a> and create an account if you haven\u2019t already.<\/p>\n