Add JS docs

apps/website/docs/guide/01-getting-started/02-setup-commandkit.mdx

@@ -3,6 +3,9 @@ title: Setup CommandKit
 description: Setup a new CommandKit project using the create-commandkit CLI
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 :::info
 
 - CommandKit requires at least [Node.js](https://nodejs.org/) v24
@@ -52,18 +55,38 @@ The `src/app.ts` file is the main entry point for your application.
 This file default exports the discord.js client instance which
 CommandKit loads at runtime.
 
-```ts title="src/app.ts"
-import { Client } from 'discord.js';
+<Tabs>
+  <TabItem value="ts" label="TypeScript" default>
+    ```ts title="src/app.ts"
+    import { Client } from 'discord.js';
 
-const client = new Client({
-  intents: ['Guilds', 'GuildMessages', 'MessageContent'],
-});
+    const client = new Client({
+      intents: ['Guilds', 'GuildMessages', 'MessageContent'],
+    });
 
-// Optional: Setting up the token manually
-client.token = process.env.MY_BOT_TOKEN;
+    // Optional: Setting up the token manually
+    client.token = process.env.MY_BOT_TOKEN;
 
-export default client;
-```
+    export default client;
+    ```
+
+  </TabItem>
+  <TabItem value="js" label="JavaScript">
+    ```js title="src/app.js"
+    import { Client } from 'discord.js';
+
+    const client = new Client({
+      intents: ['Guilds', 'GuildMessages', 'MessageContent'],
+    });
+
+    // Optional: Setting up the token manually
+    client.token = process.env.MY_BOT_TOKEN;
+
+    export default client;
+    ```
+
+  </TabItem>
+</Tabs>
 
 Notice how there's no `client.login()` in this file. This is because
 CommandKit will automatically handle the login process for you when

apps/website/docs/guide/02-commands/01-chat-input-commands.mdx

@@ -2,6 +2,9 @@
 title: Chat Input Commands
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 Chat input commands, more commonly known as 'Slash Commands', are a
 way for users on Discord to perform actions using your bot.
 
@@ -14,18 +17,43 @@ To create a new chat input command, create a new file in the
 will create a basic ping command which will respond with "Pong!" when
 executed.
 
-```ts title="src/app/commands/ping.ts"
-import type { CommandData, ChatInputCommand } from 'commandkit';
+<Tabs>
+  <TabItem value="ts" label="TypeScript" default>
+    ```ts title="src/app/commands/ping.ts"
+    import type { CommandData, ChatInputCommand } from 'commandkit';
+
+    export const command: CommandData = {
+      name: 'ping',
+      description: 'Replies with Pong!',
+    };
+
+    export const chatInput: ChatInputCommand = async (ctx) => {
+      await ctx.interaction.reply('Pong!');
+    };
+    ```
+
+  </TabItem>
+  <TabItem value="js" label="JavaScript">
+    ```js title="src/app/commands/ping.js"
+    /**
+     * @typedef {import('commandkit').CommandData} CommandData
+     * @typedef {import('commandkit').ChatInputCommand} ChatInputCommand
+     */
+
+    /** @type {CommandData} */
+    export const command = {
+      name: 'ping',
+      description: 'Replies with Pong!',
+    };
 
-export const command: CommandData = {
-  name: 'ping',
-  description: 'Replies with Pong!',
-};
+    /** @type {ChatInputCommand} */
+    export const chatInput = async (ctx) => {
+      await ctx.interaction.reply('Pong!');
+    };
+    ```
 
-export const chatInput: ChatInputCommand = async (ctx) => {
-  await ctx.interaction.reply('Pong!');
-};
-```
+  </TabItem>
+</Tabs>
 
 ## Exports explained
 

apps/website/docs/guide/02-commands/02-command-options-autocomplete.mdx

@@ -2,6 +2,9 @@
 title: Options Autocomplete
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 :::warning
 
 This feature is only available for
@@ -24,61 +27,131 @@ and managing your own `interactionCreate` event listener.
 To begin, export the `autocomplete` function from the command where
 you have an option with `autocomplete` set to `true`.
 
-```ts title="src/app/commands/pet.ts"
-import type { CommandData, AutocompleteCommand } from 'commandkit';
-import { ApplicationCommandOptionType } from 'discord.js';
-
-export const command: CommandData = {
-  name: 'pet',
-  description: 'Check in one of your pets.',
-  options: [
-    {
-      name: 'name',
-      description: 'The name of your pet',
-      type: ApplicationCommandOptionType.String,
-      autocomplete: true,
-      required: true,
-    },
-  ],
-};
-
-const pets = Array.from({ length: 20 }, (_, i) => ({
-  name: `Pet ${i + 1}`, // e.g. Pet 1, Pet 2, Pet 3, etc.
-  value: `petId_${i}`,
-}));
-
-export const autocomplete: AutocompleteCommand = async ({ interaction }) => {
-  try {
-    // Get the input value of your autocomplete option
-    const input = interaction.options.getString('name', false);
-    if (!input) {
-      interaction.respond(pets);
-      return;
-    }
-
-    const filteredPets = pets.filter((pet) =>
-      pet.name.toLowerCase().includes(input.toLowerCase()),
-    );
-
-    // Respond with what you think the user may trying to find
-    interaction.respond(filteredPets);
-  } catch (error) {
-    console.error('Autocomplete error', error);
-  }
-};
-
-export const chatInput: ChatInputCommand = async ({ interaction }) => {
-  const chosenPetId = interaction.options.getString('name', true);
-  const chosenPet = pets.find((pet) => pet.value === chosenPetId);
-
-  if (!chosenPet) {
-    interaction.reply('Pet not found.');
-    return;
-  }
-
-  interaction.reply(`You chose ${chosenPet.name}`);
-};
-```
+<Tabs>
+  <TabItem value="ts" label="TypeScript" default>
+    ```ts title="src/app/commands/pet.ts"
+    import type { CommandData, AutocompleteCommand, ChatInputCommand } from 'commandkit';
+    import { ApplicationCommandOptionType } from 'discord.js';
+
+    export const command: CommandData = {
+      name: 'pet',
+      description: 'Check in one of your pets.',
+      options: [
+        {
+          name: 'name',
+          description: 'The name of your pet',
+          type: ApplicationCommandOptionType.String,
+          autocomplete: true,
+          required: true,
+        },
+      ],
+    };
+
+    const pets = Array.from({ length: 20 }, (_, i) => ({
+      name: `Pet ${i + 1}`, // e.g. Pet 1, Pet 2, Pet 3, etc.
+      value: `petId_${i}`,
+    }));
+
+    export const autocomplete: AutocompleteCommand = async ({ interaction }) => {
+      try {
+        // Get the input value of your autocomplete option
+        const input = interaction.options.getString('name', false);
+        if (!input) {
+          interaction.respond(pets);
+          return;
+        }
+
+        const filteredPets = pets.filter((pet) =>
+          pet.name.toLowerCase().includes(input.toLowerCase()),
+        );
+
+        // Respond with what you think the user may trying to find
+        interaction.respond(filteredPets);
+      } catch (error) {
+        console.error('Autocomplete error', error);
+      }
+    };
+
+    export const chatInput: ChatInputCommand = async ({ interaction }) => {
+      const chosenPetId = interaction.options.getString('name', true);
+      const chosenPet = pets.find((pet) => pet.value === chosenPetId);
+
+      if (!chosenPet) {
+        interaction.reply('Pet not found.');
+        return;
+      }
+
+      interaction.reply(`You chose ${chosenPet.name}`);
+    };
+    ```
+
+  </TabItem>
+  <TabItem value="js" label="JavaScript">
+    ```js title="src/app/commands/pet.js"
+    /**
+     * @typedef {import('commandkit').CommandData} CommandData
+     * @typedef {import('commandkit').AutocompleteCommand} AutocompleteCommand
+     * @typedef {import('commandkit').ChatInputCommand} ChatInputCommand
+     */
+    import { ApplicationCommandOptionType } from 'discord.js';
+
+    /** @type {CommandData} */
+    export const command = {
+      name: 'pet',
+      description: 'Check in one of your pets.',
+      options: [
+        {
+          name: 'name',
+          description: 'The name of your pet',
+          type: ApplicationCommandOptionType.String,
+          autocomplete: true,
+          required: true,
+        },
+      ],
+    };
+
+    const pets = Array.from({ length: 20 }, (_, i) => ({
+      name: `Pet ${i + 1}`, // e.g. Pet 1, Pet 2, Pet 3, etc.
+      value: `petId_${i}`,
+    }));
+
+    /** @type {AutocompleteCommand} */
+    export const autocomplete = async ({ interaction }) => {
+      try {
+        // Get the input value of your autocomplete option
+        const input = interaction.options.getString('name', false);
+        if (!input) {
+          interaction.respond(pets);
+          return;
+        }
+
+        const filteredPets = pets.filter((pet) =>
+          pet.name.toLowerCase().includes(input.toLowerCase()),
+        );
+
+        // Respond with what you think the user may trying to find
+        interaction.respond(filteredPets);
+      } catch (error) {
+        console.error('Autocomplete error', error);
+      }
+    };
+
+    /** @type {ChatInputCommand} */
+    export const chatInput = async ({ interaction }) => {
+      const chosenPetId = interaction.options.getString('name', true);
+      const chosenPet = pets.find((pet) => pet.value === chosenPetId);
+
+      if (!chosenPet) {
+        interaction.reply('Pet not found.');
+        return;
+      }
+
+      interaction.reply(`You chose ${chosenPet.name}`);
+    };
+    ```
+
+  </TabItem>
+</Tabs>
 
 :::warning