DEV Community: WavePlay Staff

Hacktoberfest 2025: Create Discord Features or Videos to Win Rewards 🎉

WavePlay Staff — Mon, 06 Oct 2025 15:30:00 +0000

🎉 Welcome to Hacktoberfest 2025! 🎉

It’s time to flex your creativity and snag awesome swag. Built a Discord bot, activity, or website? Prefer teaching with videos instead of code? Either works!🌟

Every participant gets Discord Nitro. Top contributors earn an exclusive Robo.js Hacktoberfest 2025 T‑Shirt, upgrades, and cash. The more people join, the bigger (and better) the prize pool gets. 🎁

Event window: October 1–31, 2025

✨ What is Robo.js?

Robo.js is a framework for building Discord Bots, Discord Activities, and Web Apps—with batteries included. It streamlines your workflow via plugins, sensible defaults, and a smooth DX so you can ship faster.

Here’s what you can expect:

Ecosystem: A growing directory of plugins, templates, and tools to help you move from idea to MVP in record time.
Integrated Database: A built-in KV store (Flashcore) with adapters so you can point at your favorite data source.
TypeScript Support: First-class TypeScript, zero config required.

Check out the Getting Started guide.

Note: Robo.js does not replace Discord.js for bots. It’s a higher-level framework that helps you build more complex projects with less effort. Bring your favorite libraries—Robo.js plays nicely with them.

🧪 Our Vibe on Coding

We accept vibe coding as long as your contribution - and please actually read and review the code you generate (don’t just hope AI got it right).

Works and does exactly what it claims.
Is well‑tested (unit/integration where appropriate) with clear steps to verify.
Has clean code (readable, typed, documented) and passes lint/build checks.
Comes with a concise README and examples where relevant.

To help you ship faster, we have several AGENTS.md files scattered throughout the monorepo to guide AI coding tools (e.g., Codex, Claude Code) with context, patterns, and commands. Feel free to rely on them while you build.

🎁 Rewards

As participation grows, so do the rewards.

Starting Rewards

Exclusive Robo.js Hacktoberfest 2025 T‑Shirt for the top 3 contributors
Free Discord Nitro for everyone who makes a meaningful contribution, while supplies last
$25 USD optional alternative for the top contributor

Stretch Rewards

Over 10 Participants: Add a free month of RoboPlay for the top 3 contributors.
Over 25 Participants: Expand top‑contributor rewards to top 5. Cash prize increases to $50 USD.
Over 50 Participants: Top 5 may upgrade their T‑Shirt to a higher prize tier. Cash prize increases to $100 USD.
Over 75 Participants: All top participants receive event stickers.
Over 100 Participants: Expand top‑contributor rewards to top 10. Cash prizes extend to top 3.

Cash prizes are sent via PayPal or another agreed method. Rewards may be limited by local laws or restrictions.

Share the event to unlock every milestone! 🚀

🚀 How to Participate

Contribute plugins, templates, video content, or features to the core framework. Every meaningful contribution is an entry—submit more, increase your odds.

Getting started is easy:

npx create-robo <project-name>

Boom! You’ve scaffolded a Robo.js project. Build something cool and send a PR to qualify. 🎉

Contributions must add real value. “Hello World” plugins won’t count, but anything that unlocks new interactions or improves the dev experience will—even if it’s not for Discord!

🧮 Points & Contribution Types

Each accepted contribution type earns points. Points (plus impact and quality) help determine top contributors.

🐞 Bug Fix (1 point)

Fix a bug in the core or an official plugin. Documentation-only changes don’t count for points (but we still ❤️ them).

GitHub: How to Contribute

📦 Template (2 points)

Templates are ready-made project starters. Examples: a music-enabled Discord bot, a quiz activity, or a streamlined web app.

Docs: Template Collection

🧩 Plugin — 7–10 points

NPM packages that snap extra features into Robo.js (e.g., command packs, dashboards, storage adapters, integration bridges).

Scoring guidance: Complexity, test coverage, UX polish, docs, and adoption potential push you toward the 10 end of the range.

Docs: Creating Plugins
Directory: Browse Ideas

🎥 Video Tutorial — 5 points

Teach the community—record a walkthrough, live‑coding session, or deep‑dive. Upload to YouTube and PR the link.

🧠 Core Framework Feature — 3–5 points

Propose and ship a scoped core feature (after community discussion). Start a thread, align on scope, and follow the contribution guidelines.

GitHub: Issues
Docs: Robo Internals

If in doubt, start with a plugin or template; many ideas shine better outside core.

📝 Prepared #hacktoberfest Issues

We’ve prepped well‑detailed issues to help you hit the ground running. Most include optional bonus features that can grant extra points beyond their base value if implemented. These are just a few—there are more #hacktoberfest issues across the repo.

Note: Links below are placeholders—you’ll find the real links in the issue tracker.

@robojs/prefix — Prefix Commands Plugin (plugin)
@robojs/social — Social Alerts (Twitch, YouTube, RSS/Atom)** — Social Alerts (Twitch, YouTube, RSS/Atom)** (plugin) —
@robojs/welcome — Welcome & Goodbye for Discord bots (plugin)
@robojs/giveaways — One-click Discord giveaways — One‑click Discord giveaways** (plugin) —
@robojs/cooldown — Cooldowns & Rate‑Limiting** (plugin) —
@robojs/announcements — Scheduled announcements for servers** (plugin) —
@robojs/tickets — Thread‑based support tickets** (plugin) —

Tip: Many issues have a “Good first issue” label and include acceptance criteria, test hints, and bonus ideas.

🎨 Creation Ideas

Need inspiration? Try these starters.

🎮 Discord Activities

Game Engine Template: Unity, Unreal, or Godot wired to Robo.js.
Live Whiteboard: Real‑time drawing via WebSockets or @robojs/sync.
Video Tutorial: From setup to multiplayer—show your build and thought process.

🤖 Discord Bots

Music Bot Template: Playback, queues, and intuitive UX.
Ticketing & Support Threads Plugin: Create, route, and auto‑close support tickets with transcripts, tags, and slash commands.
Video Tutorial: Walk through commands, modals, embeds, and permissions.

🌐 Other Suggestions

Integration Templates: Pair Robo.js with Better Stack, Notion, or another favorite service.
Bot Dashboard Plugin: Settings, logs, analytics—optionally as a Discord Activity.
Video Showcase: Demo your coolest Robo.js build—what it does and how you made it.

✅ What We Look For (Quality Signals)

Clear problem/solution summary and scope.
Tests (unit/integration) and easy repro steps.
Clean code: types, naming, comments, and small PRs.
Docs & examples: README, usage notes, screenshots or gifs.
DX polish: sensible errors, helpful logs, zero‑config defaults where possible.

Spread the Word!

Invite friends, post your progress, and help us smash every milestone. The more builders we have, the better the rewards for

Questions? Need a hand getting started? Hop in our Discord Server — we’re excited to see what you create!

Happy coding and happy Hacktoberfest 2025! 🎉

Hacktoberfest Extended Until November 30 for Robo.js

WavePlay Staff — Fri, 01 Nov 2024 15:00:00 +0000

This event is over, but join our Discord server for more!

Now that October is over, all good things must come to an end, right? Not so for Robo.js! We're extending our Hacktoberfest event until November 30.

This means you have an extra month to create templates, plugins, video tutorials, or general contributions. The more you contribute, the more points you earn, and the better prizes you unlock.

See our main post for more:

🎃 Hacktoberfest: Build stuff, win free swag ✨

Updated Grading Criteria

We've also updated the grading criteria. Templates can now earn you up to 5 points, and general contributions may earn you between 1 and 10 points based on complexity.

See the Points label on GitHub issues tagged #hacktoberfest.

Leaderboard

We now have a leaderboard to see how you're doing compared to others. Join our Discord server and check out the #leaderboard channel!

Web version of the leaderboard coming soon.

Discord: Join the Community

Hacktoberfest 2024: Code Templates and Win Rewards 🎉

WavePlay Staff — Fri, 11 Oct 2024 15:00:00 +0000

This event is over, but join our Discord server for more!

Welcome to Week 2 of Hacktoberfest 2024! This week our spotlight is one of the most accessible and creative ways to contribute to Robo.js during Hacktoberfest: Templates.

Not only are templates fun to make, but they also help others get started faster, and, of course, they qualify you for free Discord Nitro. Top contributors are also in the running for an exclusive Robo.js Hacktoberfest 2024 T-Shirt and other prizes. 🎁

For more details, check out the main event page.

Hacktoberfest 2024

Robo.js is a framework that helps developers easily build a Discord Bot, Discord Activity, or Web App.

📦 What Are Templates?

Templates are boilerplate projects that give others a head start by providing a solid foundation to build on. They make it easy for anyone to spin up a project like a without starting from scratch. Using Robo.js, you can create templates that include all sorts of features—perfect for getting someone off the ground quickly.

Here are some ideas to get you started:

Discord Activities

Game Engine Template: Create a starter template that integrates Robo.js with your favorite game engine, like Unity or Unreal Engine. This will help others set up Discord activities that use game engines with minimal configuration.

Discord Bots

Music Bot Template: Build a music bot template that plays music from external platforms. This could be a popular project for those wanting to add a bit of life to their Discord servers.

Other Suggestions

Integration Templates: Build templates that connect Robo.js with platforms like Notion or Better Stack. These integrations make it easy for others to use Robo.js alongside their favorite tools.

For more inspiration, check out the entire Templates Collection.

✨ Getting Started

Getting started is simple. Run the following command to set up a new Robo.js project:

npx create-robo <project-name>

Modify it, add features, and when you're ready, submit a pull request to the Robo.js repository to qualify for the rewards. Creating templates is an easy way to get your feet wet, help others, and potentially win prizes! 🎁

We can't wait to see the creative templates you come up with. Remember, the more people who contribute, the better the rewards—so invite your friends to participate too! 🚀

📣 Spread the Word!

Share this event with your friends and help us reach our milestones. The more participants we have, the better the rewards for everyone. Let's make Hacktoberfest 2024 the best one yet! 🚀

If you have any questions or need help getting started, don't hesitate to reach out on our Discord Server. We're excited to see what you create!

Discord: Join the Community

Happy coding and happy Hacktoberfest! 🎉

Hacktoberfest 2024: Create Discord Features or Videos to Win Rewards 🎉

WavePlay Staff — Wed, 02 Oct 2024 14:30:00 +0000

This event is over, but join our Discord server for more!

🎉 Welcome to Hacktoberfest 2024! 🎉

The time has come to show off your creativity and win free stuff! Ever built a Discord bot, activity, or website? Don't feel confident coding but like making videos about code? This is your time to shine! 🌟

Every participant gets free Discord Nitro. Top contributors get an exclusive Robo.js Hacktoberfest 2024 T-Shirt, upgrades, and cash. The more people participate, the more and better prizes we'll give out. 🎁

✨ What is Robo.js?

Robo.js is a framework for building Discord Bots, Discord Activities, and Web Apps. It simplifies the process by providing an ecosystem of plugins and features to help you build your project faster and more efficiently. It's simple, straightforward to use, and easy to host.

Here's what you can expect:

Ecosystem: A growing ecosystem of plugins, templates, and tools to help you build faster with less effort.
Integrated Database: Robo.js has a built-in KV database that can be pointed to any data source via adapters.
TypeScript Support: TypeScript works out of the box, so you can use it without any additional setup.

Check out our Documentation for more.

Documentation: Getting Started

Note: Robo.js does not replace Discord.js for bots. It's a higher-level framework that allows you to build more complex projects with less effort. Use your favorite libraries and tools alongside Robo.js!

🎁 Rewards

Depending on the number of participants, we'll give out more and better prizes.

Starting Rewards

Exclusive Robo.js Hacktoberfest 2024 T-Shirt for top 3 contributors
Free Discord Nitro for everyone who makes a meaningful contribution, while supplies last.
$25 USD as an optional alternative reward for the top contributor.

Stretch Rewards

Over 10 Participants: We include a free month of RoboPlay for the top 3 contributors.
Over 25 Participants: We expand the top contributor rewards to include the top 5 participants. Cash prize increases to $50 USD.
Over 50 Participants: The top 5 get to upgrade their T-Shirt to a higher prize. Cash prize increases to $100 USD.
Over 75 Participants: All top participants get free event stickers.
Over 100 Participants: We expand the top contributor rewards to include the top 10 participants. Cash prize is expanded to top 3.

Cash prizes will be sent via PayPal or another agreed-upon method. Rewards may not be available in all regions, due to U.S. export laws and other restrictions.

Share this event with your friends and help us reach these milestones and unlock more rewards! 🚀

🚀 How to Participate

Contribute plugins, templates, video content, or even features to the core framework. You can contribute as many times as you want, and each contribution counts as an entry for the prizes. The more you contribute, the more likely you are to win.

Sound complicated? It's really not! Run this in your terminal to get started:

npx create-robo <project-name>

Ta-dah! You now have a Robo.js project. Modify it, add features, and submit a pull request to qualify! 🎉

Each type of contribution is worth a different amount of entries. They must be meaningful and add value to the community. Things like plugins that add "Hello World" commands won't count, but a plugin that adds a new way to interact will, even if it's not for Discord. Check out some ideas below!

🐞 Bug Fix (1 point)

Fix a bug in the core framework or a plugin. It's a small contribution, but it's a start! Documentation fixes don't count, but they're still appreciated.

GitHub: How to Contribute

📦 Template (2 points)

Templates are boilerplate projects that help you get started with a specific type of project. For example, a template could be a Discord bot with a music feature or a Discord activity with a quiz.

Use the create-robo command to create a new project and modify it to your liking. Once you're done, submit a pull request to the Robo.js repository. Check out our Template Collection for inspiration!

Documentation: Template Collection

🧩 Plugin (5 points)

Plugins are NPM packages that instantly add features to Robo.js projects. For example, a plugin could add a new command or a new way to interact with Discord.

Creating a plugin is no different from creating a normal Robo.js project, except that it's packaged as an NPM package. See our Plugin Directory for inspiration!

Documentation: Creating Plugins

🎥 Video Tutorial (5 points)

Video tutorials are a great way to teach others how to use Robo.js or how to build something cool with it. They can be as simple as a screen recording with voiceover or as complex as a full-blown tutorial series.

Upload your video to YouTube and submit a pull request to the Robo.js repository with a link to your video.

🌟 Core Framework Feature (7 points)

This is the big one! Add a new feature to the core Robo.js framework. Please discuss your idea with the community first to make sure it's a good fit, and make sure to follow the Contributing Guidelines. It may also help to learn about the Robo Internals first.

We're strict about this one, but that's how we keep things high-quality. If you're not sure, start with a plugin or a template! Some ideas are best left as plugins, so don't be discouraged if your feature doesn't make it into the core framework.

GitHub: Issues

🎨 Creation Ideas

Not sure what to contribute? Here are some ideas to get you started.

🎮 Discord Activities

Game Engine: Create a template of your favorite game engine, like Unity or Unreal Engine, for Robo.js.
Live Whiteboard: Create a plugin that allows users to draw on a shared canvas in real-time, built with WebSockets or @robojs/sync.
Video Tutorial: Create a video tutorial on how to build a Discord activity with Robo.js. You could cover the basics, like setting up a project, or more advanced topics, like adding multiplayer support.

🤖 Discord Bots

Music Bot: Create a template for a music bot that can play music from an external platform.
Leveling System: Create a plugin that adds a leveling system to your Discord bot. Users can earn XP and level up by chatting in your server.
Video Tutorial: Create a video tutorial on how to build a Discord bot with Robo.js. You could cover the basics, like setting up a project, or more advanced topics, modals and embeds.

Other Suggestions

Integration Templates: Create templates for integrating Robo.js with other platforms, like Better Stack or Notion.
Bot Dashboard: Create a plugin that adds a web dashboard to your Discord bot. Users could configure settings, view logs, and more. Could even be viewed as a Discord Activity!
Video Showcase: Create a video showcasing your favorite Robo.js project. Maybe it's a bot, an activity, or a web app. Show off what you've built and how it works!
Documentation: Plugin Directory
Documentation: Template Collection

Spread the Word!

Share this event with your friends and help us reach our milestones! The more participants we have, the better the rewards for everyone. Let's make Hacktoberfest 2024 the best one yet! 🚀

If you have any questions or need help getting started, don't hesitate to reach out on our Discord Server. We're excited to see what you create!

Discord: Join the Community

Happy coding and happy Hacktoberfest! 🎉

Missing Launch Button in your Discord Activity? Fix the Entry Point Command!

WavePlay Staff — Tue, 01 Oct 2024 13:30:00 +0000

Got a fancy new Discord Activity but found that your Launch button went missing? We've got a patch for that!

This happens when your Discord App is too old to have it, or if you've accidentally deleted it when, say, cleaning up your Discord Bot's slash commands. We have different ways for you to choose, depending on what you're using.

Method 1: Node.js Script

We've open sourced a smol Node.js script that you can just run in your terminal. It'll automatically create the missing entry command for you if it doesn't exist. Download the script and run it like so:

node entry-fix.js <DISCORD_CLIENT_ID> <DISCORD_TOKEN>

🔗 GitHub: Download or copy script

Replace <DISCORD_CLIENT_ID> and <DISCORD_TOKEN> with the actual values in your Discord Developer Portal. Yes, you need a Discord Bot token to fix your Discord Activity.

This method is recommended for those with Node.js installed, even if making Discord Apps using other languages.

Method 2: @robojs/patch

Woah, you're using Robo.js? You're creating in luxury!

All you need to do is install @robojs/patch. That's it! It's a Robo Plugin, so it's integrated instantly.

npx robo add @robojs/patch

🔗 Documentation: @robojs/patch

This method is recommended for those using Robo.js to build their Discord Activities. If you're not using Robo.js, we highly recommend you check it out!

Discord Activities are Fun!

Discord Activities are a fun way to engage with your community. They're like mini-games or interactive experiences that you can create and share with others. Robo.js is a powerful framework that makes building Discord Activities easy and fun. Discord Activities are often built using HTML, CSS, and JavaScript like any other web app, but they run inside Discord itself.

If you don't already have a Discord Activity, you can create one in seconds with Robo.js.

npx create-robo <projectName> -k activity

Check out our tutorial to learn more.

Conclusion

Don't let a missing launch button ruin your day. Use one of the methods above to fix your Discord Activity and get back to building awesome experiences for your community.

You can join our Discord Server to chat with other developers, ask questions, and share your projects. We're a friendly bunch and always happy to help! Plus, our very own AI Robo, Sage, is there to assist you with any questions you may have.

🚀 Community: Join our Discord server

Patch Your Discord Activity’s Network Requests for Smooth CSP Compliance

WavePlay Staff — Tue, 17 Sep 2024 14:00:00 +0000

When running a Discord Activity through Discord, you may encounter Content Security Policy (CSP) issues. You can fix these by making sure network requests follow Discord Proxy rules.

This can be done manually... or you can let @robojs/patch handle it.

What is CSP?

Content Security Policy (CSP) is a security standard that helps prevent Cross-Site Scripting (XSS) attacks. It controls which resources a page can load and where it can send data.

When you run a Discord Activity in Discord, you're actually using the Discord Proxy as a middleman, meaning it sets its own CSP rules. If your network requests don't follow these rules, they'll be blocked.

Relative requests like /api/token will be blocked unless prefixed with /.proxy.
External requests like https://example.com/api/token will be blocked unless they're mapped or proxied.

Resolving CSP Violations

As stated above, all you have to do is make sure your network requests follow the Discord Proxy rules. In some cases, that includes adding /.proxy to the beginning of your request path.

// Before
fetch('/api/token')

// After
fetch('/.proxy/api/token')

However, WebSockets can be a bit trickier. Especially when relying on Hot Module Replacement (HMR) that loads before your own activity like in Vite. So, we created @robojs/patch to handle everything for you.

Patching Your Activity

@robojs/patch is a lightweight package that patches your network requests to follow Discord Proxy rules. It works by updating the fetch and WebSocket globals.

npm install @robojs/patch

We have different ways to apply this patch depending on your project setup.

Method 1: Vite Plugin (Recommended)

If you're using Vite, you can apply the patch as a plugin in your Vite config file.

import { DiscordProxy } from '@robojs/patch'
import { defineConfig } from 'vite'

export default defineConfig({
    plugins: [DiscordProxy.Vite()]
})

We recommend this method because it allows the patch to run before before Vite's HMR client, ensuring that it works correctly.

Method 2: Function Call

If you're not using Vite, you can apply the patch by calling a function directly.

import { DiscordProxy } from '@robojs/patch'

DiscordProxy.patch()

Be sure to call this at the very beginning of your project, before other scripts are loaded. (e.g. the top of your index.js file)

➞ 📚 Documentation: @robojs/patch

External Requests

This does not affect requests made to external URLs. If you're having CSP issues with those, you may be able to fix them by creating your own Proxy or mapping them in the Discord Developer Portal.

➞ 📚 Tutorial: Resolve CSP Issues with a Proxy

Resolve Content Security Policy (CSP) Issues in Your Discord Activity Using a Node.js Proxy

WavePlay Staff for WavePlay ・ Jun 17

#discord #programming #node #javascript

Interested in Discord Activities?

Robo.js is a powerful framework for building Discord Activities with ease. It provides a wide range of features and tools to help you create epic Discord experiences!

Join our Discord Server to chat with other developers, ask questions, and share your projects. We're a friendly bunch and always happy to help! Plus, our very own AI Robo, Sage, is there to assist you with any questions you may have.

➞ 🚀 Community: Join our Discord server

➞ 📚 Tutorial: Creating a Discord Activity in seconds with Robo.js

Robo - Imagine Magic

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

discord.com

Creating a Discord Activity in seconds with Robo.js

WavePlay Staff for WavePlay ・ Apr 9

#discord #sdk #javascript #bot

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

WavePlay Staff — Tue, 18 Jun 2024 14:30:00 +0000

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!

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

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.

Creating a Discord Activity in seconds with Robo.js

WavePlay Staff for WavePlay ・ Apr 9

#discord #sdk #javascript #bot

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

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"

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
    }
}

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.

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

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

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.'
}

Learn more in the @robojs/ai documentation.

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")
}

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

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"
}

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

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! ⚡ | 95 members

discord.com

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

Resolve Content Security Policy (CSP) Issues in Your Discord Activity Using a Node.js Proxy

WavePlay Staff — Mon, 17 Jun 2024 15:00:00 +0000

If you're building a Discord Activity, you may encounter issues with Content Security Policy (CSP) restrictions.

CSP is a security feature that helps prevent cross-site scripting attacks by restricting the resources a web page can load. However, it can sometimes interfere with loading external resources like images, fonts, or scripts in your activity.

The recommended fix is to use Discord's URL Mapping feature to rewrite URLs and bypass CSP restrictions. However, this method has limitations and may not work in all cases.

Proxies to the Rescue

An alternative solution is to use a proxy server to fetch external resources and serve them from your server. This way, you can bypass CSP restrictions and load resources without any issues.

The way it works is simple:

Your activity makes a request to your server for an external resource.
Your server fetches the resource and streams it back as a response.
Your activity receives the resource from your server, bypassing CSP restrictions.

This method allows you to load any content from any source without having to map each domain individually in Discord's URL Mapping. It may sound complex, but it's literally one line of code if you created your Discord Activity with Robo.js.

Create a Discord Activity Project

Create a Discord Activity with Robo.js if you don't have one already:

npx create-robo my-activity -k activity

We'll be using React for this example, but you can apply the same principles to any frontend framework or vanilla HTML and CSS.

We highly recommend using create-robo to create a Discord Activity project. Robo.js providers a lot of features and tools to help you build your activity faster and more efficiently, such as Multiplayer Support, Easy Hosting, Streamlined Tunnels, Built-in Database, Plugin System, and so much more!

Creating a Discord Activity in seconds with Robo.js

WavePlay Staff for WavePlay ・ Apr 9

#discord #sdk #javascript #bot

Making a Music Player

Let's say you want to add an audio player to your activity that plays music from an external source. You might run into CSP issues when trying to load the audio file due to restrictions on loading external resources.

Let's create a simple music player using the <audio> element in React by adding a new file named Player.tsx inside the /src/app folder:

import { useState, useRef } from 'react'

export const Player = (props) => {
    const { url } = props
    const audioRef = useRef(null)
    const [isPlaying, setIsPlaying] = useState(false)

    const togglePlayPause = () => {
        const audio = audioRef.current

        if (audio && isPlaying) {
            audio.pause()
        } else if (audio && !isPlaying) {
            audio.play()
        }
        setIsPlaying(!isPlaying)
    }

    return (
        <>
            <audio ref={audioRef} src={url} preload="auto" />
            <button onClick={togglePlayPause}>{isPlaying ? 'Pause' : 'Play'}</button>
        </>
    )
}

Then update your Activity.tsx file to use it:

 import { Player } from './Player'

const ExternalUrl = 'https://media.waveplay.com/t/ckwldfuiq6608re6x8dzc5tyt.mp3'

export const Activity = () => {
    return (
        <div>
            <img src="/rocket.png" className="logo" alt="Discord" />
            <h1>Hello, World</h1>
            <Player url={ExternalUrl} />
            <p>
                <small>
                    Powered by{' '}
                    <a className="robojs" href="https://roboplay.dev/docs">
                        Robo.js
                    </a>
                </small>
            </p>
        </div>
    )
}

In this example, we're loading an audio file from an external source and playing it using the <audio> element. However, this also triggers a CSP violation because https://media.waveplay.com is not whitelisted in Discord's Proxy.

Let's fix this by creating a proxy!

Create Your Own Proxy

Create a new file named proxy.js inside the /src/api folder:

export default async (request) => {
    return fetch(request.query.url)
}

That's it!

The @robojs/server plugin used in this Robo.js project extends the standard web Request and Response interfaces which work seamlessly with Fetch API, which is why we can return the result directly.

Heads up! You'll need at least @robojs/server version 0.5.3 or newer.

Now, update your Activity.tsx file to use the proxy:

<Player url={'/api/proxy?url=' + ExternalUrl} />

By adding the /api/proxy?url= prefix to the audio URL, we're telling our server to fetch the audio file and serve it back to the activity without triggering CSP violations.

You can use this method to proxy any external resource in your activity, such as images, fonts, scripts, or other media files. For more complex scenarios, such as web pages, our upcoming @robojs/browser plugin will provide a more robust solution.

Limitations

While this method is effective for bypassing CSP restrictions, it does introduce additional latency because your server has to fetch the resource before serving it back to the activity. This may impact the performance of your activity, especially for large files or high traffic, so make sure your Hosting Service can handle it.

Be aware of potential security risks when using a proxy server, such as URL Injections and SSRF (Server-Side Request Forgery) attacks. Always use Discord's URL Mapping whenever possible and only resort to proxies when necessary.

Easy, Right?

By creating a simple proxy server, you can bypass CSP restrictions and load external resources in your Discord Activity without any issues. This method is easy and effective, allowing you to focus on building your activity without worrying about security restrictions. You can find the complete source code for this example available in TypeScript as a Robo.js Template.

➞ 🔗 Template: Music Player Proxy

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! ⚡ | 178 members

discord.com

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

Achieve Game-Like Scaling in Discord Activities and Web Apps Using CSS

WavePlay Staff — Mon, 03 Jun 2024 15:30:00 +0000

Discord Activities are awesome! They run inside Discord and can be all sorts of cool things like games, quizzes, and more. But if you're developing using web technologies rather than game engines, you might run into a common problem: scaling.

In this article, we'll show you how to achieve game-like scaling in your Discord Activities and web apps using plain CSS. This will allow you to create responsive designs that look great on any device, just like a game!

The Problem with Scaling

Screen sizes vary widely, even among devices of the same type. This can make it challenging to create a design that looks good on all screens. If you've ever built a Discord Activity using HTML and CSS, you've probably encountered this issue.

Suppose you have a button with a fixed size. On a large desktop screen, the button might look tiny, while on a smaller screen, it might be too big and take up a large portion of the screen. That's fine for standard web apps, but for Discord Activities, you may want everyone to have a similar experience, regardless of their screen size.

This is even more of a problem when you minimize the activity window or navigate elsewhere in Discord. Your page might look tiny and miss out a lot of the content, or it might be too large and require scrolling to see everything!

Before scaling, content looks huge and most of it is cut off:

After scaling, content fits the screen and is fully visible:

Create a Discord Activity Project

Create a Discord Activity project if you don't have one already:



npx create-robo my-activity -k activity

We'll be using React and TypeScript for this example, but you can apply the same principles to any frontend framework or vanilla HTML and CSS.

Creating a Discord Activity in seconds with Robo.js

WavePlay Staff for WavePlay ・ Apr 9

#discord #sdk #javascript #bot

Achieving Game-Like Scaling

First, decide on a base resolution for your activity. This will be the resolution you design your activity for. For this example, let's use 1280x720. This is a common resolution for games and will work well for our purposes, especially since Discord enforces this aspect ratio for activities.

In game design, developers often create assets for a base resolution and scale up or down from there to fit the player's screen. This ensures consistency in the visual experience. We can apply the same principle to our Discord Activities and web apps using CSS via the transform property.

Next, let's create a wrapper component that will handle the scaling for us. We'll use the transform property to scale the content based on the user's screen size. Here's a simple example:



// src/components/ScaleProvider.tsx
import { createContext, useContext, useState, useEffect, ReactNode } from 'react'

interface ScaleContextType {
    scale: number
}

const ScaleContext = createContext<ScaleContextType | undefined>(undefined)

export const useScale = (): ScaleContextType => {
    const context = useContext(ScaleContext)
    if (!context) {
        throw new Error('useScale must be used within a ScaleProvider')
    }
    return context
}

interface ScaleProviderProps {
    baseWidth: number
    baseHeight: number
    children: ReactNode | ReactNode[]
}

export const ScaleProvider = (props: ScaleProviderProps) => {
    const { baseWidth, baseHeight, children } = props
    const [scale, setScale] = useState(1)

    useEffect(() => {
        const handleResize = () => {
            const scaleWidth = window.innerWidth / baseWidth
            const scaleHeight = window.innerHeight / baseHeight
            setScale(Math.min(scaleWidth, scaleHeight))
        }

        handleResize()
        window.addEventListener('resize', handleResize)
        return () => window.removeEventListener('resize', handleResize)
    }, [baseWidth, baseHeight])

    return (
        <ScaleContext.Provider value={{ scale }}>
            <div
                style={{
                    transform: `scale(${scale})`,
                    transformOrigin: 'top left',
                    width: '100vw',
                    height: '100vh'
                }}
            >
                <div
                    style={{
                        width: baseWidth,
                        height: baseHeight,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center'
                    }}
                >
                    {children}
                </div>
            </div>
        </ScaleContext.Provider>
    )
}

Now, wrap your main app component with the ScaleProvider:



// src/app/App.tsx
import { DiscordContextProvider } from '../hooks/useDiscordSdk'
import { Activity } from './Activity'
import { ScaleProvider } from './ScaleProvider'
import './App.css'

export default function App() {
    return (
        <DiscordContextProvider>
            <ScaleProvider baseWidth={1280} baseHeight={720}>
                <Activity />
            </ScaleProvider>
        </DiscordContextProvider>
    )
}

This ScaleProvider component will scale its children based on the user's screen size. It calculates the scale factor by dividing the screen width and height by the base resolution. It then applies this scale factor to the content using the transform property. Transforms run on the GPU, so they're very efficient and won't cause performance issues!

If you need to reference the scale factor in your components, you can use the useScale hook.



const { scale } = useScale()

Conclusion

Now, your activity will scale up or down based on the user's screen size, providing a consistent experience for everyone. You can design your activity for the base resolution and trust that it will look great on any screen!

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! 🚀

🚀 Community: Join our Discord Server

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

Robo - Imagine Magic

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

discord.com

How to Add Multiplayer to Your Discord Activity

WavePlay Staff for WavePlay ・ May 21

#javascript #programming #discord #node

Add Advanced Features to Your Discord Bot Without Code (Discord.js + Robo.js)

WavePlay Staff — Fri, 31 May 2024 15:30:00 +0000

Got a Discord Bot you'd like to enhance with advanced features? Robo.js is a powerful framework compatible with Discord.js with a plugin system so powerful, you can add new features to your bot without writing a single line of code. If you're a beginner, you can add powerful features as you learn how to code the rest of it!

Creating a New Discord Bot

If you haven't already created a Discord Bot, you can do so by running the following command in your terminal:

npx create-robo <projectName> -k bot

This will spawn a new Robo.js project ready to use as a Discord Bot. We call these Robos.

Adding Features

Once you have your Discord Bot set up, you can add new features using Robo Plugins. These plugins integrate seamlessly with your Robo to provide new functionality as if you had written the code yourself. For example, you can add AI chatbot capabilities, moderation tools, maintenance mode, economy systems, and more.

Run this in your terminal, replacing with the name of the plugin you want to install (e.g. @robojs/ai):

npx robo add <package>

This will install the package and register it in your Robo's configuration. To install many at once:

npx robo add @robojs/ai @robojs/moderation @robojs/server

You can also create a new Robo project with plugins pre-installed:

npx create-robo <projectName> --plugins @robojs/ai @robojs/moderation

Existing Bots

If you have an existing Discord.js Bot and want to add new features, you'll need to migrate your bot to Robo.js. This process is straightforward and involves moving your existing code into the Robo File Structure.

Once your bot is migrated, you can add new features using Robo Plugins as described above.

Where to Find Plugins

You can find a list of available plugins in the Robo Plugin Directory. Browse through the directory to find plugins that suit your needs and add them to your bot. You can also create your own plugins and share them with the community.

➞ 🔌 Plugin Directory: Explore more plugins

What's more, Robo.js comes with a lot of other features and tools to help you build your bot faster and more efficiently, such as Flashcore Database to persist data easily, TypeScript, Easy Hosting, and so much more. 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! 🚀

➞ 🚀 Community: Join our Discord Server

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

How to Fix Stuck Ready Event in Discord Embedded App SDK

WavePlay Staff — Mon, 27 May 2024 22:00:00 +0000

If you've been following Discord's Building Your First Activity tutorial, you may have encountered an issue where the Embedded App SDK gets stuck on the READY event. This issue can be caused by a few different things, but the most common cause is Vite's hot module reloading (HMR) feature.

We've seen this issue pop up in a few different places, so we wanted to provide a quick guide on how to fix it. This post will explain it in more detail and suggest ways around it.

TLDR; Quick Fix

If you're in a hurry, the quickest way to fix this without disabling HMR is to make sure you're creating only one instance of the DiscordSDK close to the root of your app. Check out this template to see how it's done.

You can also create a new Discord Activity project with the fix already included by running this in your terminal:

npx create-robo <projectName> -k activity

What's Happening?

When you're developing a Discord Activity with Vite, the hot module reloading feature can cause the SDK to be re-created multiple times. This is because Vite reloads the module when you make changes, which can cause the DiscordSDK to be reinitialized.

Unfortunately, discordSdk.ready() gets stuck on the READY event because Discord sends the payload once per instance. That means your activity will be left waiting for the READY event to fire, but it never will until you restart it.

Starting Fresh with a Fix

To fix this issue, you need to ensure that you're only creating one instance of the DiscordSDK close to the root of your app. This way, the SDK won't be re-initialized every time you make changes, thus you won't need to await discordSdk.ready() more than once.

The easiest and fastest way to prevent this is to make sure you start from a template that already has this fix in place. You can clone this template or create a new project with the fix included by running:

npx create-robo <projectName> -k activity

This will create a new Discord Activity project with the fix already in place, so you won't have to worry about this issue. Check out our guide for more info!

➞ ✨ Guide: Creating a Discord Activity in seconds with Robo.js

Fixing Your Existing Project

If you're already working on a project and don't want to start over, you can fix this issue by ensuring that you're only creating one instance of the DiscordSDK close to the root of your app. For example, in a React app, you can use a Context to manage the SDK instance.

Here's a simplified example:

import { DiscordSDK, DiscordSDKMock } from '@discord/embedded-app-sdk'
import { createContext, useContext } from 'react'

export const discordSdk = new DiscordSDK(import.meta.env.VITE_DISCORD_CLIENT_ID)

const DiscordContext = createContext({ discordSdk })

export function DiscordContextProvider(props) {
    const { children } = props
    const setupResult = useDiscordSdkSetup()

    return <DiscordContext.Provider value={setupResult}>{children}</DiscordContext.Provider>
}

export function useDiscordSdk() {
    return useContext(DiscordContext)
}

function useDiscordSdkSetup() {
    // Your setup logic here (e.g., discordSdk.ready() in a useEffect)

    return { discordSdk }
}

Then apply the DiscordContextProvider at the root of your app:

import { DiscordContextProvider } from '../hooks/useDiscordSdk'
import { Activity } from './Activity'
import './App.css'

export default function App() {
    return (
        <DiscordContextProvider>
            <Activity />
        </DiscordContextProvider>
    )
}

This way, Vite won't re-initialize the DiscordSDK every time you make changes, and you won't get stuck on the READY event. It works like so:

The DiscordSDK is created once and passed down through the context.
The SDK is initialized in the context provider.
Components can access the SDK through the custom useDiscordSdk hook.
The same SDK instance will be re-used, as long as you don't edit the useDiscordSdk file.

Conclusion

React's Context is a great way to manage global state in your app, and it's perfect for managing the DiscordSDK instance. By ensuring that you only create one instance of the SDK close to the root of your app, you can prevent the READY event from getting stuck and avoid the need to restart your activity every time you make changes.

We highly recommend using create-robo to create a Discord Activity project. These templates are designed to help you get started quickly and avoid common issues like this one. What's more, they come with a lot of other features and tools to help you build your activity faster and more efficiently, such as Multiplayer Support, TypeScript, Easy Hosting, Streamlined Tunnels, Built-in Database, Plugin System, and so much more!

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! 🚀

➞ 🚀 Community: Join our Discord Server

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

How to Add Multiplayer to Your Discord Activity

WavePlay Staff — Tue, 21 May 2024 20:45:00 +0000

Discord Activities are web apps that run inside Discord, typically in the form of games or other interactive content using Discord's Embedded App SDK. They're currently in preview, but you can start building them today!

In this guide, we'll create a video player that everyone in a channel can control as a Discord Activity using Robo.js and React. Let's get started!

Creating the Activity Project

First, you'll need to have Node.js installed and an editor like VS Code to get started. Next, create a new Discord Activity project using the following command in your terminal:



npx create-robo <projectName> -k activity

This will spawn a new Discord Activity project ready to use and made easier with the Robo.js framework. For this guide, we'll be using TypeScript and React. We've named our project teamplay.

If this is your first time making a Discord Activity, you'll need to create an app in the Discord Developer Portal and get your Client ID and Client Secret.

Need more help? Check out Creating a Discord Activity in seconds with Robo.js

Running the Activity

Now that our project is set up, open it in your code editor and run the following command in your terminal:



npm run dev

This will start the Robo project in development mode, refreshing with every change in code. It will also create a free Cloudflare tunnel for testing.

Copy the tunnel URL and paste it into your Discord App's URL Mappings in the Discord Developer Portal. This will allow Discord to communicate with it.

With the project running, join a voice channel in your test Discord server and click the rocket button to join a Discord Activity. You should see your activity running in Discord!

Setting Up the Video Player

We need a video file to play. You can use any video file you like, but for this guide, we'll be using a sample video you can download from Coverr. Let's name it sample.mp4 and place it in the /public folder of your new project.

With the video file in place, let's add a <video> element to our main page. Open the Activity.tsx file in the /src/app folder and replace the existing code with the following:



import { useEffect, useRef, useState } from 'react'

export const Activity = () => {
    const [isPlaying, setPlaying] = useState(false)
    const videoPlayer = useRef<HTMLVideoElement>(null)

    const onPause = () => {
        if (isPlaying) {
            setPlaying(false)
        }
    }
    const onPlay = () => {
        if (!isPlaying) {
            setPlaying(true)
        }
    }

    useEffect(() => {
        if (isPlaying) {
            videoPlayer.current?.play()
        } else if (!isPlaying) {
            videoPlayer.current?.pause()
        }
    }, [isPlaying])

    return (
        <div>
            <img src="/rocket.png" className="logo" alt="Discord" />
            <br />
            <video ref={videoPlayer} className="video" src="/sample.mp4" controls={false} loop />
            <br />
            <button onClick={isPlaying ? onPause : onPlay}>{isPlaying ? 'Pause' : 'Play'}</button>
        </div>
    )
}

Let's also adjust the video player styling a bit. Add the following CSS to the App.css file in the /src/app folder:



video {
    width: 50%;
}

Ta-dah! We now have a video player in our Discord Activity that can be controlled by a button. Let's add some multiplayer features to it!

Controling the Video

To allow everyone to control the video player, we'll use the @robojs/sync plugin to sync the video player state across all clients in real-time. There's many ways to add multiplayer features but this is the easiest.

Run the following in your terminal:



npx robo add @robojs/sync

Then wrap the Activity component with SyncContextProvider in App.tsx:



import { SyncContextProvider } from '@robojs/sync'
import { DiscordContextProvider } from '../hooks/useDiscordSdk'
import { Activity } from './Activity'
import './App.css'

export default function App() {
    return (
        <DiscordContextProvider>
            <SyncContextProvider>
                <Activity />
            </SyncContextProvider>
        </DiscordContextProvider>
    )
}

We now have a websocket-powered connection between clients! This would normally require a lot of code, but @robojs/sync automatically upgrades your web server to handle websockets and syncs the state for you.

If you're already familiar with React's useState hook, you'll feel right at home with useSyncState. You can use it just like React's useState hook, but the state will be synced across all clients in real-time. Just provide a dependency array that acts as a unique identifier for the state.

To make it multiplayer, replace the useState hook in Activity.tsx with useSyncState and provide a unique identifier for the state. In this case, we'll use the string 'video':



import { useSyncState } from '@robojs/sync'
import { useEffect, useRef } from 'react'

export const Activity = () => {
    const [isPlaying, setPlaying] = useSyncState(false, ['video'])
    // ... rest of the code remains the same
}

Now, when you click the play button, everyone using your activity will see the video playing. And when you pause it, everyone will see it pause!

But wait, what if you want to sync state by channels? You can do that too! Just provide the channel ID as the second argument in useSyncState, which you can get from the Discord SDK.



import { useDiscordSdk } from '../hooks/useDiscordSdk'
import { useSyncState } from '@robojs/sync'
import { useEffect, useRef } from 'react'

export const Activity = () => {
    const { discordSdk } = useDiscordSdk()
    const [isPlaying, setPlaying] = useSyncState(false, ['video', discordSdk.channelId])
    // ... rest of the code remains the same
}

Now each channel has their own state! Invite a friend to join your Discord Activity and see the video player in action.

Wasn't That Easy?

With Robo.js and @robojs/sync, adding multiplayer features to your Discord Activity is a breeze. You can now create interactive experiences that everyone in a channel can enjoy together! You can also add more features like volume control, seeking, and even mouse tracking using useSyncState! 🚀

What's more, you can use the built-in Flashcore Database to persist data easily or Explore Plugins to add new features with one command, such as AI Chatbot Features or Web Servers. You can even create Discord Bots with it! If you're looking for something more powerful, we also have a Colyseus Discord Activity Template for real-time multiplayer games.

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! 🚀

➞ 🚀 Community: Join our Discord Server

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