Creating Discord Slash Commands with Discord.js

This past week, Discord announced a new feature which helps to bridge interactions between users and bots. Their new “slash commands” gives users quick and easy access to the syntax and features of bots, allowing for client-side input validation and simple prompting. We’ll walk you through how to make your very own slash commands using the Discord.js library so you can offer this feature to your users!

Slash Commands example (credit Discord)

Step 0: Creating the Bot

If you already have a Discord bot ready to go, you can skip ahead to step 1. Otherwise, we’ll refer you to the Discord.js guide, which has very helpful articles on creating a bot https://discordjs.guide/preparations/setting-up-a-bot-application.html and getting setup with Discord.js https://discordjs.guide/creating-your-bot/

Step 1: Creating the Commands

Before we start, it’s important to ensure that your bot has the applications.commands scope selected when creating the bot invite link. If your bot has already been added, you can use the link below to authorize it again for your guild with the commands scope (make sure to replace your bot ID). Slash commands will only work in guilds with that have this scope until January, when Discord will do it automatically.

https://discord.com/api/oauth2/authorize?client_id=<YOUR_BOT_ID_HERE>&scope=applications.commands

Since slash commands are still in beta, there is no UI yet for creating and managing the commands. Instead, we have to use the Discord API through HTTP requests.

There are two types of slash commands: guild commands and global commands. As implied by the name, guild commands exist per guild, and allow bots to create custom commands for each guild. Global commands, on the other hand, exist in any server that the bot is present in, so they’re handy to use for any general commands related to your bot. For the purposes of this guide we’ll use guild commands, but the process is largely the same when using global commands.

Each slash command is represented by a JSON object that contains data about what Discord should feed the user when they invoke your command. Below is annotated JSON for a sample command that would search GIFs for a specific type of penguin.

If you want to learn more about the command structure, visit this documentation here: https://discord.com/developers/docs/interactions/slash-commands#applicationcommand

Step 2: Registering the Commands

Now that we’ve got our command figured out, we can add it to Discord. This is a one time operation, so you can do it however you like. We’ll show you how to do it both using Insomnia Core, a GUI application, and inside Node.js itself with node-fetch.

To register a command with Discord, we’ll need three things:

1. The API endpoint
2. Our bot token
3. Our command data

The API endpoint differs if you’re trying to create a guild command or a global command. You’ll need to send a POST request here, with your bot token as the authorization and your command data in JSON as the body.

Global commands:

https://discord.com/api/v8/applications/<bot_id>/commands

Guild commands:

https://discord.com/api/v8/applications/<bot_id>/guilds/<guild_id>/commands

Now that we’ve gathered everything, we can finally create our command!

Using a GUI application:

Add your chosen endpoint to the URL bar at the top. Make sure to enter your bot ID (and guild ID, if applicable).

Then, paste in the JSON you created in step 1 for the body. Make sure the content type is set to JSON so Discord doesn’t return an error. Here’s the sample JSON again for easy copying:

Then, head over to the authentication tab and choose “Bearer token”. Paste in your bot token in the token field, and make sure that your prefix is “Bot”.

Once you’ve got everything setup, hit send and your command should be created! If you get an error, back up or check the documentation and try again. When you’re done, skip ahead to step 3.

Using Node.js:

First, install node-fetch (npm install node-fetch). Then, create a new file and paste the following code inside. You can replace the commandData with your own JSON if you’re customizing the command. This will send a POST request to the API endpoint using your supplied command JSON and your bot token.

Once you’ve got everything setup, run the file and your command should be created! If you get an error, back up or check the documentation and try again. When you’re done, continue on to step 3.

Step 3: Implementing the Commands

Now that we’ve got our commands registered they will show up when users type in the command. Unfortunately, nothing currently happens when users execute them. We can add logic to our bot file to handle the user input. Discord.js doesn’t support slash commands natively yet, but we can hook into the WebSocket to provide a barebones implementation in the meantime. Below is some of the data received from Discord when a user runs a command:

{
  version: 1,
  type: 2,
  member: {
    // whole bunch of user information
  },
  guild_id: '000', // guild command was run in
  data: { options: [ { value: 'gentoo', name: 'breed' } ], name: 'penguin', id: '000' },
  channel_id: '000' // channel command was run in
}

Using this data, we can then fetch a GIF using the GIPHY API that matches the given search terms. After we get the GIF, we can send it to the channel that the command was run in.

Discord requires that we acknowledge the command sent by the user, so in this case we return with type 4, which is sending a message and show the user’s input in the channel. If you do not want the history of command execution, you can change it to type 3. (All response types available here: https://discord.com/developers/docs/interactions/slash-commands#interaction-interaction-response)

This solution isn’t the best, and should not be used in production, but it’s a nice workaround that shows the power of slash commands (credit to KevSlashNull for this hack). Follow this issue to see when the feature makes it into Discord.js natively, and we’ll make sure to update the guide to reflect any changes.

Slash Commands Support · Issue #5103 · discordjs/discord.js

Step 4: Profit

Congrats, your Discord bot now supports slash commands! Now, try to expand the commands and add some cool features! We look forward to hearing your creations and thoughts in the comments.