Commands Setup

CommandKit supports both slash commands and context menu commands. Since both have the same triggers (interactions) and similar command structure, they are both stored and handled from the same commands directory.

Slash Command

Here's an example /ping slash command which replies with "Pong!"

CommonJS

src/commands/Misc/ping.js

module.exports = {
  data: {
    name: 'ping',
    description: 'Pong!',
  },

  run: ({ interaction, client, handler }) => {
    interaction.reply(`:ping_pong: Pong! ${client.ws.ping}ms`);
  },

  options: {
    devOnly: true,
    userPermissions: ['Administrator', 'AddReactions'],
    botPermissions: ['Administrator', 'AddReactions'],
    deleted: false,
  },
};

ESM

src/commands/Misc/ping.js

export const data = {
  name: 'ping',
  description: 'Pong!',
}

export function run({ interaction, client, handler }) {
  interaction.reply(`:ping_pong: Pong! ${client.ws.ping}ms`);
}

export const options = {
  devOnly: true,
  userPermissions: ['Administrator', 'AddReactions'],
  botPermissions: ['Administrator', 'AddReactions'],
  deleted: false,
}

TypeScript

src/commands/Misc/ping.ts

import type { CommandData, SlashCommandProps, CommandOptions } from 'commandkit';

export const data: CommandData = {
  name: 'ping',
  description: 'Pong!',
}

export function run({ interaction, client, handler }: SlashCommandProps) {
  interaction.reply(`:ping_pong: Pong! ${client.ws.ping}ms`);
}

export const options: CommandOptions = {
  devOnly: true,
  userPermissions: ['Administrator', 'AddReactions'],
  botPermissions: ['Administrator', 'AddReactions'],
  deleted: false,
}

Context Menu Command

Here's an example content command which replies with the content of the target message.

CommonJS

src/commands/Misc/content.js

const { ApplicationCommandType } = require("discord.js");

module.exports = {
  data: {
    name: 'content',
    type: ApplicationCommandType.Message,
  },

  run: ({ interaction, client, handler }) => {
    interaction.reply(`The message is: ${interaction.targetMessage.content}`);
  },

  options: {
    devOnly: true,
    userPermissions: ['Administrator', 'AddReactions'],
    botPermissions: ['Administrator', 'AddReactions'],
    deleted: false,
  },
};

ESM

src/commands/Misc/content.js

import { ApplicationCommandType } from "discord.js";

export const data = {
  name: 'content',
  type: ApplicationCommandType.Message,
}

export function run({ interaction, client, handler }) {
  interaction.reply(`The message is: ${interaction.targetMessage.content}`);
}

export const options = {
  devOnly: true,
  userPermissions: ['Administrator', 'AddReactions'],
  botPermissions: ['Administrator', 'AddReactions'],
  deleted: false,
}

TypeScript

src/commands/Misc/content.ts

import { type CommandData, type ContextMenuCommandProps, type CommandOptions } from "commandkit";
import { ApplicationCommandType } from "discord.js";

export const data: CommandData = {
  name: 'content',
  type: ApplicationCommandType.Message,
}

export function run({ interaction, client, handler }: ContextMenuCommandProps) {
  interaction.reply(`The message is: ${interaction.targetMessage.content}`);
}

export const options: CommandOptions = {
  devOnly: true,
  userPermissions: ['Administrator', 'AddReactions'],
  botPermissions: ['Administrator', 'AddReactions'],
  deleted: false,
}

Autocomplete function

In addition to the run function, you can also export an autocomplete function from your command file so that you don't have to create a new "interactionCreate" event listener.

Here's an example of how to use the autocomplete function:

CommonJS

src/commands/Fun/pet.js

const pets = require('../data/pets.json');

module.exports = {
  data: new SlashCommandBuilder()
    .setName('pet')
    .setDescription('Find a pet from a list of pets.')
    .addStringOption((option) =>
      option
        .setName('pet')
        .setDescription('The pet to check.')
        .setRequired(true)
        .setAutocomplete(true)
    ),

  run: ({ interaction, client, handler }) => {
    const targetPetId = interaction.options.getString('pet');
    const targetPetObj = pets.find((pet) => pet.id === targetPetId);

    interaction.reply(`Your pet name is ${targetPetObj.name}.`);
  },

  autocomplete: ({ interaction, client, handler }) => {
    const focusedPetOption = interaction.options.getFocused(true);

    const filteredChoices = pets.filter((pet) => pet.name.startsWith(focusedPetOption));

    const results = filteredChoices.map((pet) => {
      return {
        name: `${pet.name} | ${pet.type}`,
        value: pet.id,
      };
    });

    interaction.respond(results.slice(0, 25));
  }
}

ESM

src/commands/Fun/pet.js

import pets from '../data/pets.json';

export const data = new SlashCommandBuilder()
  .setName('pet')
  .setDescription('Find a pet from a list of pets.')
  .addStringOption((option) =>
    option
      .setName('pet')
      .setDescription('The pet to check.')
      .setRequired(true)
      .setAutocomplete(true)
  );

export function run({ interaction, client, handler }) {
  const targetPetId = interaction.options.getString('pet');
  const targetPetObj = pets.find((pet) => pet.id === targetPetId);

  interaction.reply(`Your pet name is ${targetPetObj.name}.`);
}

export function autocomplete({ interaction, client, handler }) {
  const focusedPetOption = interaction.options.getFocused(true);

  const filteredChoices = pets.filter((pet) => pet.name.startsWith(focusedPetOption));

  const results = filteredChoices.map((pet) => {
    return {
      name: `${pet.name} | ${pet.type}`,
      value: pet.id,
    };
  });

  interaction.respond(results.slice(0, 25));
}

TypeScript

commands/Fun/pet.ts

import type { CommandData, AutocompleteProps, CommandOptions } from 'commandkit';
import pets from '../data/pets.json';

export const data = new SlashCommandBuilder()
  .setName('pet')
  .setDescription('Find a pet from a list of pets.')
  .addStringOption((option) =>
    option
      .setName('pet')
      .setDescription('The pet to check.')
      .setRequired(true)
      .setAutocomplete(true)
  );

export function run({ interaction, client, handler }: SlashCommandProps) {
  const targetPetId = interaction.options.getString('pet');
  const targetPetObj = pets.find((pet) => pet.id === targetPetId);

  interaction.reply(`Your pet name is ${targetPetObj.name}.`);
}

export function autocomplete({ interaction, client, handler }: AutocompleteProps) {
  const focusedPetOption = interaction.options.getFocused(true);

  const filteredChoices = pets.filter((pet) => pet.name.startsWith(focusedPetOption));

  const results = filteredChoices.map((pet) => {
    return {
      name: `${pet.name} | ${pet.type}`,
      value: pet.id,
    };
  });

  interaction.respond(results.slice(0, 25));
}

Properties and Methods

data

• Type: CommandData | SlashCommandBuilder | ContextMenuCommandBuilder

This property contains the command's structural information, and is required to register and handle commands.

run

• Type: void

• Props Type: SlashCommandProps | ContextMenuCommandProps

This function will be called when the command is executed.

autocomplete

• Type: void
• Props Type: AutocompleteProps

This function will be called when an autocomplete interaction event is triggered for any option set as autocomplete in this command's data object.

options (optional)

• Type: CommandOptions

This property contains the command's registration/handling behaviour.