DEV Community: clxrity

Learn to think like a programmer with the most amazing project series I found on YouTube

clxrity — Mon, 09 Jun 2025 19:44:23 +0000

If you've ever been down the coding tutorial route on YouTube, then you've also likely heard the following:

"Do not watch coding tutorials and just copy code... That's not how you learn"

I completely agree with this. Copying lines of code does not teach you the fundamental skills you need to become a programmer:

Problem solving
Comprehension
Debugging & diagnostics
...

To be a good programmer; you have to not only understand what you're doing, but why you're doing it. Truthfully, that primarily comes from hands on experience.

That being said... I did stumble across a series on YouTube that is simply perfect for learning how to think like a programmer.

The reason I recommend this series is because it isn't just a 2 hour video where you learn little to nothing about why you're doing what you're doing. The videos were streamed live, and you witness every problem and thought process.

There are 86 videos in this series, some being up to over 3 hours long. The entirety of the project spanned over 4 years.

I've watched 13 of these videos and my mind has been opened as to the ways you can abstract your mind to code with precision to get the results you truly want.

I've hyped it up enough, so let me show you what he actually builds:

An entire operating system in the browser built with Next.js

File system

Session management

Personalization/customization

And so much more

He also has his own posts on here about this project as well:

Here are his links:
@dustinbrett
github/DustinBrett
github/DustinBrett/daedaIOS

Thank you to Dustin for sharing his project and thought processes for us who benefit greatly from learning this way.

If you want to learn how to code in and outside of the box (literally and figuratively), check out his series:

Make an OS with ReactJS & Next.js

Discord bot dashboard with OAuth2 (Nextjs)

clxrity — Thu, 11 Jul 2024 21:51:42 +0000

Preface

I wanted to build a Discord bot with TypeScript that had:

A database

A dashboard/website/domain

An API for interactions & authentication with Discord

I previously created this same "hbd" bot that ran on nodejs runtime, built with the discord.js library.

clxrityy / hbd

A discord birthday & horoscope bot

hbd

ARCHIVED!!!

This is the old version of the hbd bot running on Node.js runtime. To view the new and improved (yet work in progress) version of this bot that is on edge runtime, click here.

a discord bot for user's birthdays, horoscopes, and wishing user's a happy birthday.

📖 WIKI

Getting Started — Information about configuring the bot for your guild

how it works

data is stored in mongoose models
- guild settings (channels, roles)
- user's birthdays
- birthday wishes
when the bot logs in, the time event is emitted:

client.login(process.env.BOT_TOKEN!).then(() => client.emit("time"));

which checks the time, if it is midnight, the interval is emitted
- this returns an interval that runs every 24 hrs and checks for birthdays
- if there's a…

View on GitHub

While, the discord.js library offers a lot of essential utilities for interacting with discord, it doesn't quite fit for a bot that's going to be running through Nextjs/Vercel.

I wanted the bot to respond to interactions through edge runtime rather than running in an environment 24/7 waiting for interactions.

Now, bare with me... I am merely learning everything as I go along. 🤖

Getting started
- Interactions endpoint
OAuth2
Vercel postgres
Prisma
OAuth2 (continued)
- Access token
- Refresh token
Encryption
Cookies / JWT
What's next?
Final product

Getting started

Copy all the Discord bot values (token, application ID, oauth token, public key, etc.) place them your environment variables locally and on Vercel.
Clone the template repository
- Either the initial one: jzxhuang/nextjs-discord-bot
- Or the one I built that already has oauth2 (but I will discuss both): clxrityy/nextjs-discord-bot-with-oauth

Alright, as much as I'd like to take credit for the whole "discord bot with nextjs" implementation, my starting point was finding this extremely useful repository that had already put an interactions endpoint & command registration script into place.

jzxhuang/nextjs-discord-bot

Interactions endpoint

Set your discord bot's interactions endpoint url to https://<VERCEL_URL>/api/interactions.

`/api/interactions`

Set the the runtime to edge:

export const runtime = "edge";

The interaction is verified to be received & responded to within the route using some logic implemented by the template creator that I haven't bothered to understand.
The interaction data is parsed into a custom type so that it can be interacted with regardless of it's sub-command(s)/option(s) structure:

export interface InteractionData {
    id: string;
    name: string;
    options?: InteractionSubcommand<InteractionOption>[] | InteractionOption[] | InteractionSubcommandGroup<InteractionSubcommand<InteractionOption>>[];
}

The last bit of the interactions endpoint structure (that I'm not entirely proud of) is that I'm using switch cases between every command name within the route to execute an external function/handler that generates the response for that specific command. But, this could be more efficient/easier-to-read in the future

import { commands } from "@/data/commands";

const { name } = interaction.data;
// ...
switch (name) {
    case commands.ping.name:

        embed = {
             title: "Pong!",
             color: Colors.BLURPLE
        }

        return NextResponse.json({
               type: InteractionResponseType.ChannelMessageWithSource,
               data: {
                    embeds: [JSON.parse(JSON.stringify(embed))]
               }
        });
// ...
}

OAuth2

Authentication endpoint

That template had everything necessary to lift this project off the ground, use interactions, and display UI elements based on the bot's data.
However, I wanted to create another template I could use that implemented authentication with Discord so that there can be an interactive dashboard.

I will go over the whole process, but you can see in-depth everything I changed about the initial template in this pull request:

With oauth2 #4

clxrityy posted on Jun 10, 2024

nextjs-discord-bot (with oauth2)

Production URL: https://nextjs-discord-bot-with-oauth.vercel.app/

Overview

Accessing the designated root url (/) will require authentication with Discord. Upon authorizing, the user will be redirected back to the root url (with additional user details displayed)

ex.

Replication

OAuth2 URLs

Generate your own OAuth2 redirect URI with every additional scope needed (discord.com/applications/CLIENT_ID/oauth2)
- The path should be /api/auth/discord/redirect

Add these urls (development and production) to config.ts:

export const CONFIG = {
  REDIRECT_URI:
    process.env.NODE_ENV === "development"
      ? "http://localhost:3000/api/auth/discord/redirect"
      : "https://yourdomain.com/api/auth/discord/redirect", // REPLACE WITH YOUR DOMAIN
  OAUTH2_INVITE_URL: process.env.NODE_ENV === "development" ? "" : "", // (copy the generated url)
  ROOT_URL: process.env.NODE_ENV === "development" ? "http://localhost:3000" : "", // REPLACE WITH YOUR DOMAIN
}

Discord endpoints

After making a POST request to Discord's oauth token endpoint (discord.com/api/v10/oauth2/token)
- The access_token from the data given is used to receive the Discord user's details by making a GET request to the discord.com/api/v10users/@me endpoint:
```
export async function getUserDetails(accessToken: string) {
  return await axios.get<OAuth2UserResponse>(CONFIG.OAUTH2_USER, {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  })
}
```

Vercel Postgres / Prisma

I've implemented a prisma table which will store the encrypted access & refresh token from the user data. This can be used later, but for now has minimal impact on the application.

Getting Started with Vercel Postgres

Prisma is used to store the User model:

model User {
  id           String @id @default(uuid())
  userId       String @unique
  accessToken  String @unique
  refreshToken String @unique
}

Quickstart

Create a postgres database on your vercel dashboard

This will automatically generate the necessary environment variables for the database.

Retreive the environment variables locally:

vercel env pull .env.development.local

Generate the prisma client:

npx prisma generate

Create the table(s) in your database based on your prisma schema:

npx prisma db push

The build script within package.json has been altered to support the prisma database in production:
```
"build": "prisma generate && next build"
```

Encryption

crypto-js is used to encrypt the access_token & refresh_token before storing into the User model.

import CryptoJS from 'crypto-js';

export const encryptToken = (token: string) => CryptoJS.AES.encrypt(token, process.env.ENCRYPTION_KEY);

Add a custom ENCRYPTION_KEY environment variable (make sure to also add this to your vercel project environment variables)

Cookies & JWT

jsonwebtoken & cookie are used for signing & serializing the cookie for the user session.

Add a custom JWT_SECRET environment variable (make sure to also add this to your vercel project environment variables)

import { CONFIG } from "@/config";
import { serialize } from "cookie";
import { sign } from "jsonwebtoken";
import { cookies } from "next/headers";

const token = sign(user.data, process.env.JWT_SECRET, {
    expiresIn: "24h"
});

cookies().set(CONFIG.cookieName, serialize(CONFIG.cookieName, token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    sameSite: "lax",
    path: "/"
}))

Updates

The .env.local.example has been updated to include:

# discord.com/developers/applications/APP_ID/oauth2
DISCORD_CLIENT_SECRET=

# Encryption: a custom secret key for encrypting sensitive data
# This is used to encrypt the user's Discord token in the database
# If you don't set this, the app will use a default key
ENCRYPTION_KEY=

# JWT for cookies
# This is used to sign the JWT token for the user's session
# If you don't set this, the app will use a default key
JWT_SECRET=

# Prisma / Postgres
# These are used to connect to the database
# See here: https://vercel.com/docs/storage/vercel-postgres/quickstart
POSTGRES_DATABASE=
POSTGRES_HOST=
POSTGRES_PASSWORD=
POSTGRES_PRISMA_URL=
POSTGRES_URL=
POSTGRES_URL_NON_POOLING=
POSTGRES_URL_NO_SSL=

An additional config.ts has been made to include necesssary authentication URLs

View on GitHub

`/api/auth/discord/redirect`

Add your redirect URI to your Discord application: (should be found at https://discord.com/developers/applications/{APP_ID}/oauth2)
- Development - http://localhost:3000/api/auth/discord/redirect
- Production - https://VERCEL_URL/api/auth/discord/redirect

I know off the bat I'm gonna need to start implementing the database aspect of this application now; as I need a way to store user data (such as refresh tokens, user id, etc.)

... Let's take a brief intermission and talk about Prisma & Vercel Postgres

Vercel has this amazing feature, you can create a postgresql database directly through Vercel and connect it to any project(s) you want.

I'm not sponsored but I should be

Vercel Postgres

pnpm add @vercel/postgres
Install Vercel CLI
- pnpm i -g vercel@latest
Create a postgres database
Get those environment variables loaded locally
- vercel env pull .env.development.local

Prisma

Install prisma
- pnpm add -D prisma
- pnpm add @prisma/client
Since I'm going to be using prisma on the edge as well, I'm going to install Prisma Accelerate
- pnpm add @prisma/extension-accelerate
Initialize the prisma client
- npx prisma init

You should now have prisma/schema.prisma in your root directory:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider  = "postgresql"
  url       = env("POSTGRES_URL")
  directUrl = env("POSTGRES_URL_NON_POOLING")
}

Make sure url & directUrl are set to your environment variable values

Get your accelerate URL: console.prisma.io

`src/lib/db.ts`

import { PrismaClient } from "@prisma/client/edge";
import { withAccelerate } from '@prisma/extension-accelerate';

function makePrisma() {
    return new PrismaClient({
        datasources: {
            db: {
                url: process.env.ACCELERATE_URL!,
            }
        }
    }).$extends(withAccelerate());
}

const globalForPrisma = global as unknown as {
    prisma: ReturnType<typeof makePrisma>;
}

export const db = globalForPrisma.prisma ?? makePrisma();

if (process.env.NODE_ENV !== "production") {
    globalForPrisma.prisma = makePrisma();
}

Don't ask me why it's set up this way, or why this is the best way... just trust~

Lastly, update your package.json to generate the prisma client upon build.
- Adding --no-engine is recommended when using prisma accelerate.

scripts: {
   "build": "npx prisma generate --no-engine && next build",
},

Back to OAuth2

Create your route (mine is api/auth/discord/redirect/route.ts)

This route is automatically going to give a code url parameter upon successful authentication with Discord (make sure the route is set as the REDIRECT_URI in your bot settings).

export async function GET(req: Request) {
    const urlParams = new URL(req.url).searchParams;

    const code = urlParams.get("code");
}

You need this code to generate an access token and a refresh token.

Access token

Consider the access token as an item (such as a token) that authorizes the client (authorized website user) to interact with the API server (being Discord in this instance) on behalf of that same user.

Refresh token

Access tokens can only be available for so long (for security purposes), and the refresh token allows users to literally refresh their access token without doing the entire log in process again.

Set up a query string that says "hey, here's the code, can I have the access and refresh tokens"

const scope = ["identify"].join(" ");

const OAUTH_QS = new URLSearchParams({
    client_id: process.env.CLIENT_ID!,
    redirect_uri: CONFIG.URLS.REDIRECT_URI,
    response_type: "code",
    scope
}).toString();

const OAUTH_URL = `https://discord.com/api/oauth2/authorize?${OAUTH_QS}`;

Build the OAuth2 request payload (the body of the upcoming request)

export type OAuthTokenExchangeRequestParams = {
    client_id: string;
    client_secret: string;
    grant_type: string;
    code: string;
    redirect_uri: string;
    scope: string;
}

const buildOAuth2RequestPayload = (data: OAuthTokenExchangeRequestParams) => new URLSearchParams(data).toString();

const body = buildOAuth2RequestPayload({
    client_id: process.env.CLIENT_ID!,
    client_secret: process.env.CLIENT_SECRET!,
    grant_type: "authorization_code",
    code,
    redirect_uri: CONFIG.URLS.REDIRECT_URI,
    scope
}).toString();

Now we should be able to access the access_token and refresh_token by deconstructing the data from the POST request to the OAUTH_URL.

const { data } = await axios.post<OAuth2CrendialsResponse>(CONFIG.URLS.OAUTH2_TOKEN, body, {
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    }
});
const { access_token, refresh_token } = data;

I'm gonna wanna store these as encrypted values, along with some other user data, in a User model, and set up functions to update those values.

model User {
  id           String     @id @default(uuid())
  userId       String     @unique
  accessToken  String     @unique
  refreshToken String     @unique
}

Get the user details using the access token

export async function getUserDetails(accessToken: string) {
    return await axios.get<OAuth2UserResponse>(`https://discord.com/api/v10/users/@me`, {
        headers: {
            Authorization: `Bearer ${accessToken}`
        }
    })
};

Encryption

In order to store the access_token & refresh_token, it's good practice to encrypt those values.

I'm using crypto-js.

Add an ENCRYPTION_KEY environment variable locally and on Vercel.

import CryptoJS from 'crypto-js';

export const encryptToken = (token: string) => CryptoJS.AES.encrypt(token, process.env.ENCRYPTION_KEY!);
export const decryptToken = (encrypted: string) => CryptoJS.AES.decrypt(encrypted, process.env.ENCRYPTION_KEY!).toString(CryptoJS.enc.Utf8);

Now you can store those values in the User model

import { db } from "@/lib/db";

await db.user.create({
    data: {
        userId,
        accessToken, // encrypted
        refreshToken, // encrypted
    }
});

Cookies / JWT

Add a JWT_SECRET environment variable locally & on Vercel.

Cookies are bits of data the website sends to the client to recount information about the user's visit.

I'm going to be using jsonwebtoken, cookie, & the cookies() (from next/headers) to manage cookies.

Within this route (if the code exists, there's no error, and user data exists) I'm going to set a cookie, as users should only be directed to this route upon authentication.

Sign the token

import { sign } from "jsonwebtoken";

const token = sign(user.data, process.env.JWT_SECRET!, { expiresIn: "72h" });

Set the cookie
- You can name this cookie whatever you want.

import { cookies } from "next/headers";
import { serialize } from "cookie";

cookies().set("cookie_name", serialize("cookie_name", token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production", // secure when in production
    sameSite: "lax",
    path: "/"
}));

Then you can redirect the user to the application!

import { NextResponse } from 'next/server';
//...
return NextResponse.redirect(BASE_URL);

View the full route code

Check for a cookie to ensure a user is authenticated:

import { parse } from "cookie";
import { verify } from "jsonwebtoken";
import { cookies } from "next/headers";

export function parseUser(): OAuth2UserResponse | null {

    const cookie = cookies().get(CONFIG.VALUES.COOKIE_NAME);
    if (!cookie?.value) {
        return null;
    }

    const token = parse(cookie.value)[CONFIG.VALUES.COOKIE_NAME];
    if (!token) {
        return null;
    }
    try {
        const { iat, exp, ...user } = verify(token, process.env.JWT_SECRET) as OAuth2UserResponse & { iat: number, exp: number };

        return user;
    } catch (e) {
        console.log(`Error parsing user: ${e}`);
        return null;
    }
}

What's next?

With this, you have a fully authenticated Discord application with Nextjs!

Utilizing discord & user data, you can add on by...

Add pages for guilds / user profiles
Give guild admins the ability to alter specific guild configurations for the bot through the dashboard
Display data about commands
- Example commands page
Add premium features
- Integrate stripe for paid features only available to premium users
Leaderboards / statistics
- Guild with the most members, user who's used the most commands, etc...

The possibilities are endless, and your starting point to making something amazing is right here.

Final product

You can clone the template repository here.

My bot (hbd) is hosted here: ~~hbd.mjanglin.com~~ -> hbd.clxrity.xyz
🔗 Invite
Support server
GitHub repo
Source structure overview

Thanks for reading! Give this post a ❤️ if you found it helpful!
I'm open to comments/suggestions/ideas!

How to create a dynamic AI Discord bot with TypeScript

clxrity — Mon, 19 Feb 2024 00:10:46 +0000

Learn how to create your own AI Discord bot (with command and event handling) that can be dynamically configurable through each guild.

Concepts that will be explored throughout this tutorial

Getting started

Project initialization

Create an empty folder for your project and initialize it (for this project, I'll be using pnpm, but feel free to use whatever you prefer):

pnpm init

Install the dependencies and dev dependencies we'll be using to get started:

pnpm add -D typescript ts-node

pnpm add discord.js nodemon dotenv mongoose openai

Now let's set this up as a typescript project:

tsc --init

And make sure it has our specific configurations:

{
  "compilerOptions": {
      "lib": [
          "ESNext"
      ],
      "module": "CommonJS",
      "moduleResolution": "node",
      "target": "ESNext",
      "outDir": "dist",
      "sourceMap": false,
      "resolveJsonModule": true,
      "esModuleInterop": true,
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "allowSyntheticDefaultImports": true,
      "skipLibCheck": true,
      "skipDefaultLibCheck": true,
      "importHelpers": true,
  },
  "include": [
      "src/**/*",
      "environment.d.ts"
  ],
  "exclude": [
      "node_modules",
      "**/*.spec.ts"
  ]
}

And let's add these scripts to our package.json so we can run the project:

"scripts": {
    "start": "ts-node src/index.ts",
    "start:dev": "ts-node-dev src/index.ts",
    "start:prod": "node dist/index.js",
    "dev": "nodemon ./src/index.ts",
    "build": "tsc",
    "watch": "tsc -w"
  },

Time to create a ~/src/index.ts file and test that our project runs properly:

console.log("Hello World");

If we run pnpm dev and see Hello World in the console, it seems like our project environment is ready!

Getting our `.env` variables

Discord

Navigate to the Discord Developer Portal
Create a new application
Reset and copy the Bot's token and add it to your .env
Make sure to enable the necessary presence intents that you'd like your Discord bot to be able to access.

OpenAI

Navigate to your OpenAI API Keys
Create a new API key and add it to your .env
Then copy your organization ID and add it as well (found here

MongoDB

Navigate to MongoDB Cloud
Create a new project and database then click Connect
- Click Drivers
- Copy your connection URI
- Replace <password> with your password
Add the URI to your .env
Create a ~/src/lib/db.ts file which will contain your MongoDB connection:

import "colors";
import mongoose from "mongoose";

const mongoURI = process.env.MONGO_URI;

const db = async () => {
    if (!mongoURI) {
        console.log(`[WARNING] Missing MONGO_URI environment variable!`.bgRed);
    }

    mongoose.set("strictQuery", true);

    try {
        if (await mongoose.connect(mongoURI)) {
            console.log(`[INFO] Connected to the database!`.bgCyan);
        }
    } catch (err) {
        console.log(`[ERROR] Couldn't establish a MongoDB connection!\n${err}`.red);
    }
}

export default db;

Optional: install colors to add some color to your console.log's

Discord bot setup

We will need to set up a couple of folders and structures that will manage our Discord bot's events and commands.

Utility

Create a utils/ folder within your src/ directory which will contain multiple utility functions to help the management of our Discord bot.

We are going to create a couple utility files that will be useful within this project; but to start, we need a function that can read files within folders.

import fs from "fs";
import path from "path";

/* 
    this function will accept 2 (one is optional) parameters:
    (1) the directory of which to read the files
    (2) if the function should read folders only, which we'll set as false by default
*/

const getFiles = (directory: string, foldersOnly = false) => {
    let fileNames = [];

    const files = fs.readdirSync(directory, { withFileTypes: true });

    for (const file of files) {
        const filePath = path.join(directory, file.name);

        if (foldersOnly) {
            if (file.isDirectory()) {
                fileNames.push(filePath);
            }
        } else {
            if (file.isFile()) {
                fileNames.push(filePath);
            }
        }
    }

    return fileNames;
}

export default getFiles;

Handler(s)

Create a /handlers/index.ts within your src/ directory:
- For now, we will just add this eventHandler() function, but this can be expanded later for your needs.

This function will accept a discord Client parameter which will then read and register events that will be located within an events/ folder

import { Client } from "discord.js";
import path from "path";
import getFiles from "../utils/getFiles";

const eventHandler = (client: Client) => {
    const eventFolders = getFiles(path.join(__dirname, "..", "events"), true);

    for (const eventFolder of eventFolders) {
        const eventFiles = getFiles(eventFolder);

        let eventName: string;

        eventName = eventFolder.replace(/\\/g, '/').split("/").pop();

        eventName === "validations" ? (eventName = "interactionCreate") : eventName;

        client.on(eventName, async (args) => {
            for (const eventFile of eventFiles) {
                const eventFunction = require(eventFile);
                await eventFunction(client, args);
            }
        })
    }
}

export default eventHandler;

Events

Now that we've established a function that can read and register events for the bot, let's set up some events we want to listen for.

Firstly we'll want our bot to listen for the ready event, if you've ever seen:

client.on("ready", () => {};

This is exactly what we're setting up.

Create a ready/ folder within events/. Then inside this folder, we can put a file for each function we want to run when the bot is ready.
- To start, I want the bot to console.log() when it's ready, so I'm going to create a consoleLog.ts file:

import "colors";
import { Client } from "discord.js";

module.exports = (client: Client) => {
    console.log(`[INFO] ${client.user.username} is online!`.bgCyan);
}

IMPORTANT:

When exporting these functions so that they're registered, we need to use module.exports since our eventHandler() function uses require()

Before continuing, we should now test and see if our bot will listen for this event:

Navigate to your src/index.ts file and register events to your bot:

import { config } from "dotenv";
import { Client, GatewayIntentBits } from "discord.js";
import eventHandler from "@/handlers";

config() // Load environment variables

const client = new Client({
    intents: [
        GatewayIntentBits.Guilds,
        GatewayIntentBits.GuildMessages,
        GatewayIntentBits.GuildMembers
    ] // Specify all the intents you wish your bot to access
});

eventHandler(client) // Register events

client.login(process.env.BOT_TOKEN); // Login to the bot

If you run pnpm dev and see the console log, it looks like everything is working properly.

Let's also connect to the database whenever the bot is ready.

Add a dbConnect.ts file to events/ready

import "colors";
import db from "../../lib/db";

module.exports = async () => {
    await db().catch((err) => console.log(`[ERROR] Error connecting to database! \n${err}`.red));
}

Obviously, you're gonna want to have the ability to create/delete/edit commands. So, if we're gonna keep commands in, say, a commands/ folder, let's create some utility functions that can gather those for us.

Commands

Create a file utils/getCommands.ts where we're going to have 2 essential functions getApplicationCommands() and getLocalCommands()
- getApplicationCommands() this function will find the commands that are already registered to the bot.
- getLocalCommands() this function will fetch the commands from the commands/ folder.

Get commands

import { ApplicationCommandManager, Client, GuildApplicationCommandManager } from "discord.js";
import path from "path";
import getFiles from "./getFiles";


const getApplicationCommands = async (client: Client, guildId?: string) => {
    let applicationCommands: GuildApplicationCommandManager | ApplicationCommandManager;

    if (guildId) { // if registering to a specific guild
        const guild = await client.guilds.fetch(guildId);
        applicationCommands = guild.commands;
    } else {
        applicationCommands = client.application.commands;
    }

    await applicationCommands.fetch({
        guildId: guildId
    });

    return applicationCommands;
}

const getLocalCommands = (exceptions = []) => {
    let localCommands = [];

    const commandCategories = getFiles(path.join(__dirname, "..", "commands"), true);

    for (const commandCategory of commandCategories) {
        const commandFiles = getFiles(commandCategory);

        for (const commandFile of commandFiles) {
            const commandObject = require(commandFile);

            if (exceptions.includes(commandObject.name)) continue;
            localCommands.push(commandObject);
        }
    }

    return localCommands;
}

export {
    getApplicationCommands,
    getLocalCommands
};

Command type

Suppose we want our commands to look like:

import { PermissionsBitField, SlashCommandBuilder } from "discord.js";

const ping = {
    data: new SlashCommandBuilder()
        .setName("ping")
        .setDescription("Pong!")
        .addUserOption((option) => option
            .setName("user")
            .setDescription("The user you want to ping")
    ),
    userPermissions: [PermissionsBitField.Flags.SendMessages], // array of permissions the user needs to execute the command
    botPermissions: [PermissionsBitField.Flags.SendMessages], // array of permissions the bot needs to execute the command
    run: async (client, interaction) => {
        // run the command
    }
}

module.exports = ping;

Since we're using TypeScript, let's go ahead and create a type for our commands:

import { ChatInputCommandInteraction, Client, RESTPostAPIChatInputApplicationCommandsJSONBody, SlashCommandBuilder, SlashCommandSubcommandsOnlyBuilder } from "discord.js";

export type SlashCommand = {
    data: RESTPostAPIChatInputApplicationCommandsJSONBody | Omit<SlashCommandBuilder, "addSubcommandGroup" | "addSubcommand">
    | SlashCommandSubcommandsOnlyBuilder;
    userPermissions: Array<bigint>;
    botPermissions: Array<bigint>;
    run: (client: Client, interaction: ChatInputCommandInteraction) => Promise<any>;
}

Alright, we're ALMOST ready to create an event that'll handle registering commands...

But, unless you wanna re-register every command from the commands folder every time the bot is online, we'll need some sort of function that's going to compare the locally existing commands (commands/) to the commands that have been already registered to the bot.

Command compare

Create a file within utils/ that will hold our commandCompare() function

commandCompare()

import { ApplicationCommand } from "discord.js";
import { SlashCommand } from "./types";

const commandCompare = (existing: ApplicationCommand, local: SlashCommand) => {
    const changed = (a, b) => JSON.stringify(a) !== JSON.stringify(b);

    if (changed(existing.name, local.data.name) || changed(existing.description, local.data.description)) {
        return true;
    }

    function optionsArray(cmd) {
        const cleanObject = obj => {
            for (const key in obj) {
                if (typeof obj[key] === 'object') {
                    cleanObject(obj[key]);

                    if (!obj[key] || (Array.isArray(obj[key]) && obj[key].length === 0)) {
                        delete obj[key];
                    }
                } else if (obj[key] === undefined) {
                    delete obj[key];
                }
            }
        };

        const normalizedObject = (input) => {
            if (Array.isArray(input)) {
                return input.map((item) => normalizedObject(item));
            }

            const normalizedItem = {
                type: input.type,
                name: input.name,
                description: input.description,
                options: input.options ? normalizedObject(input.options) : undefined,
                required: input.required
            }

            return normalizedItem;
        }

        return (cmd.options || []).map((option) => {
            let cleanedOption = JSON.parse(JSON.stringify(option));
            cleanedOption.options ? (cleanedOption.options = normalizedObject(cleanedOption.options)) : (cleanedOption = normalizedObject(cleanedOption));
            cleanObject(cleanedOption);
            return {
                ...cleanedOption,
                choices: cleanedOption.choices ? JSON.stringify(cleanedOption.choices.map((c) => c.value)) : null
            }
        })
    }

    const optionsChanged = changed(optionsArray(existing), optionsArray(local.data));

    return optionsChanged;
}

export default commandCompare;

Validations (`interactionCreate`)

Circling back to the eventHandler(), do you remember this line:

eventName === "validations" ? (eventName = "interactionCreate") : eventName;

This was intended so we can validate the commands. We'll add a file within events validations/command.ts which will attempt to notify users if the bot and/or the user has insufficient permissions to use the command, or otherwise run the command.

validations

import "colors";
import { Client, ColorResolvable, CommandInteraction, EmbedBuilder, Colors } from "discord.js";
import { getLocalCommands } from "../../utils/getCommands";
import { SlashCommand } from "../../utils/types";

module.exports = async (client: Client, interaction: CommandInteraction) => {

    if (!interaction.isChatInputCommand()) return;

    const localCommands = getLocalCommands();
    const commandObject: SlashCommand = localCommands.find((cmd: SlashCommand) => cmd.data.name === interaction.commandName);

    if (!commandObject) return;

    const createEmbed = (color: string | ColorResolvable, description: string) => new EmbedBuilder()
        .setColor(color as ColorResolvable)
        .setDescription(description);

    for (const permission of commandObject.userPermissions || []) {
        if (!interaction.memberPermissions.has(permission)) {
            const embed = createEmbed(Colors.Red, "You do not have permission to execute this command!");

            return await interaction.reply({ embeds: [embed], ephemeral: true });
        }
    }

    const bot = interaction.guild.members.me;

    for (const permission of commandObject.botPermissions || []) {
        if (!bot.permissions.has(permission)) {
            const embed = createEmbed(Colors.Red, "I don't have permission to execute this command!");

            return await interaction.reply({ embeds: [embed], ephemeral: true });
        }
    }

    try {
        await commandObject.run(client, interaction);
    } catch (err) {
        console.log(`[ERROR] An error occured while validating commands!\n ${err}`.red);
        console.error(err);
    }
}

Register commands

Now we can add an event within events/ready/ that will register (add, delete, edit) the commands!

registerCommands()

import "colors";
import { Client } from "discord.js";
import commandCompare from "../../utils/commandCompare";
import { getApplicationCommands, getLocalCommands } from "../../utils/getCommands";

module.exports = async (client: Client) => {
    try {

        const [localCommands, applicationCommands] = await Promise.all([
            getLocalCommands(),
            getApplicationCommands(client)
        ]);

        for (const localCommand of localCommands) {
            const { data, deleted } = localCommand;
            const { name: commandName, description: commandDescription, options: commandOptions } = data;

            const existingCommand = applicationCommands.cache.find((cmd) => cmd.name === commandName);

            if (deleted) {
                if (existingCommand) {
                    await applicationCommands.delete(existingCommand.id);
                    console.log(`[COMMAND] Application command ${commandName} has been deleted!`.grey);
                } else {
                    console.log(`[COMMAND] Application command ${commandName} has been skipped!`.grey);
                }
            } else if (existingCommand) {
                if (commandCompare(existingCommand, localCommand)) {
                    await applicationCommands.edit(existingCommand.id, {
                        name: commandName, description: commandDescription, options: commandOptions
                    });
                    console.log(`[COMMAND] Application command ${commandName} has been edited!`.grey);
                }
            } else {
                await applicationCommands.create({
                    name: commandName, description: commandDescription, options: commandOptions
                });
                console.log(`[COMMAND] Application command ${commandName} has been registered!`.grey);
            }
        }

    } catch (err) {
        console.log(`[ERROR] There was an error inside the command registry!\n ${err}`.red);
    }
}

Creating commands

It's time to create the first command to see if it registers when our bot is ready.

NOTE:

You can create sub-folders for categories of commands.

`commands/misc/ping.ts`

import { SlashCommand } from "../../utils/types";
import { EmbedBuilder, SlashCommandBuilder, userMention, Colors } from "discord.js";

const ping: SlashCommand = {
    data: new SlashCommandBuilder()
        .setName("ping")
        .setDescription("Ping a user")
        .setDMPermission(false)
        .addUserOption((option) => option
            .setName("user")
            .setDescription("The user you wish to ping")
            .setRequired(true),
    ),
    userPermissions: [],
    botPermissions: [],
    run: async (client, interaction) => {
        const options = interaction.options;
        const target = options.getUser("user");

        const embed = new EmbedBuilder()
            .setDescription(userMention(target.id))
            .setColor(Colors.Default)

        return await interaction.reply({ embeds: [embed] });
    },
}

module.exports = ping;

You should be able to start up your bot and see:

And if I run the command:

We're ready to start implementing the key features!

AI (OpenAI)

Create a file inside your lib/ directory to hold your OpenAI object:

import { OpenAI } from "openai";

const openai = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY,
    organization: process.env.OPENAI_ORGANIZATION_ID,
});

export default openai;

Create another file for your OpenAI query:

query()

import openai from "./openai";

/*
    a sleep function to make sure the AI gets a good night's rest before it has to get back to work
*/
function sleep(ms: number) {
    return new Promise((resolve) => setTimeout(resolve, ms));
}

const query = async (prompt: string, guildId: string) => {

    /* 
        the `guildId` paramater will come in handy later when we want the bot to respond dynamically based on the guild's settings
    */

    if (!prompt || prompt.length < 1) return false;

    /*
        this variable directs the AI how to respond.
        it will be made dynamic later (along with all the other configurations)
    */
    const tempSystemRoleContent = "Respond to the given prompt in a funny and/or witty way."

    const res = await openai.chat.completions.create({
        model: "gpt-3.5-turbo",
        messages: [
            {
                role: "system",
                content: tempSystemRoleContent
            },
            {
                role: "user",
                content: prompt
            }
        ],
        temperature: 0.86,
        presence_penalty: 0
    })
        .then((res) => res.choices[0].message)
        .catch((err) => `Error with query!\n${err}`);

    await sleep(1000);

    if (typeof res === 'object') {
        return res.content;
    }

    return res;
}

export default query;

Create a command just to test that the AI is working, I'm just going to call it /ai

/ai

import query from "../../lib/query";
import { SlashCommand } from "../../utils/types";
import { SlashCommandBuilder } from "discord.js";

const ai: SlashCommand = {
    data: new SlashCommandBuilder()
        .setName("ai")
        .setDescription("Say or ask something to an AI")
        .addStringOption((option) => option
            .setName("prompt")
            .setDescription("The prompt to give")
            .setRequired(true)
            .setMinLength(5)
            .setMaxLength(500)
    ),
    userPermissions: [],
    botPermissions: [],
    run: async (client, interaction) => {
        const { guildId } = interaction;

        if (!interaction.isCommand()) return;

        const prompt = interaction.options.getString("prompt");

        // defer the reply to give the openai query time
        await interaction.deferReply().catch(() => null)

        const response = await query(prompt, guildId);

        if (response === undefined || response === null || !response) {
            return await interaction.editReply({ content: "An error occured" })
        }
        if (interaction.replied) {
            return;
        }
        if (interaction.deferred) {
            return await interaction.editReply({ content: response });
        }

        return;
    }
}

module.exports = ai;

And as you can see, this should work for you with absolutely no errors:

Mongoose

When setting up the query() from before, we manually passed in certain options like:

The temperature
The model
The presence_penalty
Last but not least, the System role content
- How you instruct the AI to respond

Instead of having these variables set in stone, we're going to allow administrators of guilds to alter the settings. To do that, we need to be able to store a guild's settings within a database.

Firstly I'm going to envision the type of data to work with by creating a model.

`models/guild.ts`

import { model, Schema } from "mongoose";

const guildSchema = new Schema({
    GuildID: String,
    SystemRoleContent: String,
    Temperature: Number,
    PresencePenalty: Number,
}, { strict: false });

export default model("guild", guildSchema);

Then I set up a configuration file which contains the default settings to use, while adding logic to the query() function to check for a guild's settings:

let guildData = await guild.findOne({ GuildID: guildId });

    if (!guildData) {
        guildData = new guild({
            GuildID: guildId,
            Temperature: config.openai.temperature,
            SystemRoleContent: config.openai.systemRoleContent,
            PresencePenalty: config.openai.presence_penalty,
            Model: config.openai.model,
        });

        await guildData.save();
    }

Then use those values within the chat completion function:

await openai.chat.completions.create({
        model: guildData.Model,
        messages: [
            {
                role: "system",
                content: guildData.SystemRoleContent
            },
            {
                role: "user",
                content: prompt
            }
        ],
        temperature: guildData.Temperature,
        presence_penalty: guildData.PresencePenalty
    })

Finally, create a command in which:

Only admins can use
Has sub commands:
- /settings view
- /settings config
- /settings reset

`/settings` command

Only admins can use

userPermissions: [PermissionsBitField.Flags.Administrator]

Has sub commands:

.addSubcommand((sub) => sub
            .setName("reset")
            .setDescription("Reset your guild to default settings")
        )

For configuration options, make sure to add the parameters you want to the ability to be altered:

presence_penalty

.addNumberOption((option) => option
                .setName("presence_penalty")
                .setDescription("How diverse the responses are")
                .setMinValue(-2)
                .setMaxValue(2)
            )

run()

Get the sub command used & the guild, then fetch the guild's data model

const { options, guildId } = interaction;

        const subCommand = options.getSubcommand(true);

        if (!["config", "view", "reset", "help"].includes(subCommand)) return;

import Guild from "../../models/guild";
// ...

let guildData = await Guild.findOne({
            GuildID: guildId
        });

        if (!guildData) {
            guildData = new Guild({
                GuildID: guildId,
                // ...
            });

            await guildData.save();
        }

Then you can configure the guild's settings by utilizing .updateOne():

await guildData.updateOne({ /* 
*/
})

View the complete code for the way I set up my settings command here.

You now have a customizable AI bot!

Ideas to expand

Apply additional functionality to check for models/configure the model.
Integrate into a website (nextjs?)
Create a custom authentication page
Set up logic so the default settings change based on prompts
...

Thank you for reading my first post on here! The full code can be found on my github here.

The bot is live and running now on an AWS instance. There are steps listed in the repository's readme with how to go about getting your bot live at all times.

Feel free to make any issues and/or pull requests, or leave feedback with any thoughts!

DEV Community: clxrity

Learn to think like a programmer with the most amazing project series I found on YouTube

Discord bot dashboard with OAuth2 (Nextjs)

Preface

clxrityy / hbd

A discord birthday & horoscope bot

hbd

ARCHIVED!!!

🔗 INVITE

🌐 DISCORD SERVER

📋 CHANGELOG

📖 WIKI

how it works

Getting started

Interactions endpoint

/api/interactions

OAuth2

With oauth2 #4

nextjs-discord-bot (with oauth2)

Overview

Replication

OAuth2 URLs

Discord endpoints

Vercel Postgres / Prisma

Quickstart

Encryption

Cookies & JWT

Updates

/api/auth/discord/redirect

... Let's take a brief intermission and talk about Prisma & Vercel Postgres

Vercel Postgres

Prisma

src/lib/db.ts

Back to OAuth2

Access token

Refresh token

Encryption

Cookies / JWT

What's next?

Final product

How to create a dynamic AI Discord bot with TypeScript

Concepts that will be explored throughout this tutorial

Getting started

Project initialization

Getting our .env variables

Discord

OpenAI

MongoDB

Discord bot setup

Utility

Handler(s)

Events

IMPORTANT:

Commands

Get commands

Command type

Command compare

Validations (interactionCreate)

Register commands

Creating commands

NOTE:

commands/misc/ping.ts

AI (OpenAI)

Mongoose

models/guild.ts

/settings command

run()

Ideas to expand

`/api/interactions`

`/api/auth/discord/redirect`

`src/lib/db.ts`

Getting our `.env` variables

Validations (`interactionCreate`)

`commands/misc/ping.ts`

`models/guild.ts`

`/settings` command