DEV Community

Cover image for Build a Portable AI Companion with Discord’s User-Installable Apps (GPT 4o)
WavePlay Staff for WavePlay

Posted on

Build a Portable AI Companion with Discord’s User-Installable Apps (GPT 4o)

Discord User-Installable Apps are here, which means you can bring Discord Bots with you wherever you go - DMs and even other servers your bot isn't in. Best of all, they're not that different from regular bots!

So, what if you could have an AI companion that's always there to help you out, tell you jokes, and even give you advice? We'll be using Discord.js and Robo.js to create one. Beginners are welcome!

Image

Exciting, right? Let's get started.

Creating Your Bot Project

Make sure you have Node.js and an editor like VS Code installed then run the following in your terminal:

npx create-robo my-ai-companion -k bot
Enter fullscreen mode Exit fullscreen mode

This will create a new Discord.js project ready to use as a Discord Bot, made easier with the Robo.js framework. We'll be opting out of TypeScript to keep things simple.

Image

Adding AI Capabilities

Now that we have a shiny new bot, let's give it some AI capabilities!

Normally, you'd have to handle commands, events, and AI logic yourself, but with Robo.js, you can use plugins to get it instantly. Install the @robojs/ai plugin using your terminal:

npx robo add @robojs/ai
Enter fullscreen mode Exit fullscreen mode

Ta-dah! Your bot can now chat with users! ✨

... at least, it will once you get an OpenAI key. Sign up for OpenAI and get your API key. Once you have it, add it to your project's .env file:

OPENAI_API_KEY="your-api-key-here"
Enter fullscreen mode Exit fullscreen mode

You now have the /chat and /imagine slash commands from @robojs/ai.

Making Your App User-Installable

User installable apps are new, so let's enable this feature in our project's configuration. Open the robo.mjs file in the config folder and add the following:

export default {
    // ... rest of config
    experimental: {
        userInstall: true
    }
}
Enter fullscreen mode Exit fullscreen mode

This will tell Robo.js to register all commands as user installable.

Next, enable the "User Install" authorization method for this app in the Discord Developer Portal and give it the application.commands scope. Oh, and make sure the "Public Bot" setting is enabled. You can share the Discord Provided Link to let users install this app.

Image

Trying It Out

Use the Discord Provided Link to install the app to your account then run your project in development mode:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Go on a test server or DM someone and try out the /chat command. Your AI companion should respond to you!

Image

Wanna personalize your AI companion? Open the ai.mjs file in the /config/plugins/robojs folder and change the systemMessage to something you like better. You can change the model to something smarter like gpt-4o, or even feed it documents to learn from.

export default {
    model: 'gpt-4o',
    systemMessage: 'You are Darth Vader. Respond like a Sith Lord.'
}
Enter fullscreen mode Exit fullscreen mode

Learn more in the @robojs/ai documentation.

Image

Creating a Context Command

Talking to your AI is fun and all, but what if you want it to respond to other messages? User-Installable Apps support Context Commands too! They're different from Slash Commands as they take the context of the message into account.

Let's create a context command called Reply that responds to any message with "I have no idea what you're talking about" as a placeholder for now. Create a new file in the /src/context/message folder called Reply.js. Remember to create the folder if it doesn't exist.

export default (interaction) => {
    interaction.reply("I have no idea what you're talking about")
}
Enter fullscreen mode Exit fullscreen mode

Right click on the message you want to reply to, look for "Apps", and click on the Reply context command.

Image

Now let's replace the placeholder with a more meaningful response. @robojs/ai exports an AI object to get responses programatically. Update Reply.js to use it:

import { AI } from '@robojs/ai'

export default async (_interaction, message) => {
    const response = await AI.chatSync([
        {
            content: message.content,
            role: 'user'
        }
    ], {})

    return response.text ?? "I don't know what to say"
}
Enter fullscreen mode Exit fullscreen mode

Now run the Reply context command on a message again and watch your AI companion respond!

Image

Why does it work, you ask? You may have noticed that our bot was able to access message.content despite the "Message Content" intent being disabled. This is because Context Commands have access to message content by default.

The interaction object is also optional when using Robo.js. You can simply return the result instead of using interaction.reply. Replies are even automatically deferred when your default export is async.

Enjoy Your New Companion!

Now that you have your own User-Installable AI companion, you can take it with you wherever you go on Discord. You can even share it with your friends! You can find the full code for this project written in TypeScript on as a Robo.js Template.

🔗 Template: Purrth Vader AI

Check out the Robo.js documentation for more cool features and plugins. You can even use it to build Discord Activities in seconds!

Don't forget to join our Discord server to chat with other developers, ask questions, and share your projects. We're here to help you build amazing apps with Robo.js! 🚀

Robo - Imagine Magic

Power up Discord with effortless activities, bots, servers, and more! ⚡ | 49 members

favicon discord.com

Our very own Robo, Sage, is there to answer any questions about Robo.js, Discord.js, and more.

Top comments (0)