@discord-applications/app

Application commands are native ways to interact with apps in the Discord client. There are 3 types of commands accessible in different interfaces: the chat input, a message's context menu (top-right menu or right-clicking in a message), and a user's context menu (right-clicking on a user).

Leveraging TypeScript's powerful type system, @discord-applications/app ensures type-safety in defining application commands. @discord-applications/app infers the relevant type information for each interaction handler based on the app schema.

Getting started

Start with a new Deno project.

deno init

Add a new file named main.ts to the project directory. In this case, let's use examples/high_five.ts as a starting point.

import type { AppSchema } from "@discord-applications/app";
import { createApp, InteractionResponseType } from "@discord-applications/app";

export const highFiveSchema = {
  user: { name: "High Five" },
} as const satisfies AppSchema;

if (import.meta.main) {
  // Create the Discord application.
  const highFive = await createApp(
    {
      schema: highFiveSchema,
      applicationID: Deno.env.get("DISCORD_APPLICATION_ID")!,
      publicKey: Deno.env.get("DISCORD_PUBLIC_KEY")!,
      register: { token: Deno.env.get("DISCORD_TOKEN")! },
      invite: { path: "/invite", scopes: ["applications.commands"] },
    },
    (interaction) => {
      const targetUser =
        interaction.data.resolved.users[interaction.data.target_id];
      return {
        type: InteractionResponseType.ChannelMessageWithSource,
        data: {
          content:
            `<@${interaction.member?.user.id}> high-fived <@${targetUser.id}>!`,
        },
      };
    },
  );

  // Start the server.
  Deno.serve(highFive);
}

Include environment variables from the Discord application into its designated .env file. Namely, those variables are:

DISCORD_APPLICATION_ID=""
DISCORD_PUBLIC_KEY=""
DISCORD_TOKEN=""

Install and set up Ngrok to expose the local server to Discord.

Add the following tasks to your Deno configuration file.

{
  "tasks": {
    "start": "deno run -A --env main.ts",
    "ngrok": "ngrok http 8000"
  }
}

Next, prepare two terminal windows to run the following commands:

Terminal 1:

deno task start

In Terminal 1, the server will start on port 8000. Visit http://localhost:8000/invite to invite the application to your server.

Terminal 2:

deno task ngrok

In Terminal 2, copy the URL that is generated under Forwarding (You will need to have Ngrok installed and in your path).

• The URL should look similar to this: https://ab01-23-456-78-910.ngrok-free.app

Set this new URL as the Interactions Endpoint URL in the General tab of your Discord application. Find your application here.

If Deno Deploy is used, replace the Interactions Endpoint URL with the Domain URL generated by the Production Deployment.

Now, you can test the application in the Discord server where the application was invited. In the case of the "High Five" command, a user command is executed by right-clicking on a user, selecting "Apps" in the context menu, and then selecting "High Five".

Examples

Message commands

Message commands are application commands that appear on the context menu (right click or tap) of messages. They're a great way to surface quick actions for your app that target messages. They don't take any arguments, and will return the message on whom you clicked or tapped in the interaction response.

In @discord-applications/app, message commands are created and served as demonstrated in examples/bookmark.ts.

User commands

User commands are application commands that appear on the context menu (right click or tap) of users. They're a great way to surface quick actions for your app that target users. They don't take any arguments, and will return the user on whom you clicked or tapped in the interaction response.

In @discord-applications/app, user commands are created and served as demonstrated in examples/high_five.ts.

Chat input commands

For those developers looking to make more organized and complex groups of commands, look no further than subcommands and groups.

Subcommands organize your commands by specifying actions within a command or group.

Subcommand Groups organize your subcommands by grouping subcommands by similar action or resource within a command.

These are not enforced rules. You are free to use subcommands and groups however you'd like; it's just how we think about them.

In @discord-applications/app, chat input commands, also known as "slash commands", are created and served as demonstrated in the following example files:

• examples/blep.ts. This is a simple application with a single command.
• examples/permissions.ts. This is a single command with grouped subcommands.

Contributing

Contributions to the project are welcome. Feel free to open an issue or pull request!

Developed with 💜 by @EthanThatOneKid