Creating a basic context menu command

warning

This section covers the absolute minimum for setting up a message context menu command. We have an entire "Application Commands" section on how to effectively set up context menu commands, and if you are doing anything serious we highly recommend you start there with What are application commands?

To create a Message Context Menu Command (User Context Menu Commands are covered in "Application Commands"), you will need to implement the registerApplicationCommands method in the Command class. Let's create a ping command and register a corresponding Message Context Menu Command with Discord:

CommonJS

const { Command } = require('@sapphire/framework');
const { ApplicationCommandType } = require('discord.js');

class UserCommand extends Command {
  constructor(context, options) {
    super(context, { ...options });
  }

  registerApplicationCommands(registry) {
    registry.registerContextMenuCommand((builder) =>
      builder //
        .setName('ping')
        .setType(ApplicationCommandType.Message)
    );
  }
}
module.exports = {
  UserCommand
};

ESM

import { Command } from '@sapphire/framework';
import { ApplicationCommandType } from 'discord.js';

export class UserCommand extends Command {
  constructor(context, options) {
    super(context, { ...options });
  }

  registerApplicationCommands(registry) {
    registry.registerContextMenuCommand((builder) =>
      builder //
        .setName('ping')
        .setType(ApplicationCommandType.Message)
    );
  }
}

TypeScript

import { Command } from '@sapphire/framework';
import { ApplicationCommandType } from 'discord.js';

export class UserCommand extends Command {
  public constructor(context: Command.LoaderContext, options: Command.Options) {
    super(context, { ...options });
  }

  public override registerApplicationCommands(registry: Command.Registry) {
    registry.registerContextMenuCommand((builder) =>
      builder //
        .setName('ping')
        .setType(ApplicationCommandType.Message)
    );
  }
}

The above will create a Message Context Menu Command called ping, note that we specified the ApplicationCommandType.Message type.

In order for your bot to respond to the Message Context Menu Command when it is invoked by the user, you must implement the contextMenuRun method for the Command class.

CommonJS

const { Command } = require('@sapphire/framework');

class PingCommand extends Command {
  constructor(context, options) {
    super(context, { ...options });
  }

  registerApplicationCommands(registry) {
    registry.registerContextMenuCommand((builder) =>
      builder //
        .setName('ping')
        .setType(ApplicationCommandType.Message)
    );
  }

  async contextMenuRun(interaction) {
    return interaction.reply('Pong');
  }
}
module.exports = {
  PingCommand
};

ESM

import { Command } from '@sapphire/framework';

export class PingCommand extends Command {
  constructor(context, options) {
    super(context, { ...options });
  }

  registerApplicationCommands(registry) {
    registry.registerContextMenuCommand((builder) =>
      builder //
        .setName('ping')
        .setType(ApplicationCommandType.Message)
    );
  }

  async contextMenuRun(interaction) {
    return interaction.reply('Pong');
  }
}

TypeScript

import { Command } from '@sapphire/framework';
import type { Message } from 'discord.js';

export class PingCommand extends Command {
  public constructor(context: Command.LoaderContext, options: Command.Options) {
    super(context, { ...options });
  }

  public override registerApplicationCommands(registry: Command.Registry) {
    registry.registerContextMenuCommand((builder) =>
      builder //
        .setName('ping')
        .setType(ApplicationCommandType.Message)
    );
  }

  public async contextMenuRun(interaction: Command.ContextMenuCommandInteraction) {
    return interaction.reply('Pong');
  }
}