Made a Chrome extension that adds AI chat to MakeCode Arcade to help debug games/chat with code

Arcade
1

Hey everyone,

I’ve been working with students learning to code through MakeCode Arcade and noticed they often get stuck on bugs or don’t know what blocks to use next. Figured I’d throw together a Chrome extension that adds an AI assistant right in the editor.

- → https://github.com/rawritude/arcade-makecode-ai

r/MakeCode - Made a Chrome extension that adds AI chat to MakeCode Arcade to help debug games/chat with code|750xauto

What it does:

  • Opens a chat panel in MakeCode Arcade

  • Automatically grabs your project code

  • Detects if you’re using blocks or JavaScript

  • Has a complexity slider so it can explain things simply for younger kids or be more technical for experienced users

  • Uses Gemini API for the AI stuff

The blocks detection was actually trickier than expected - had to look at the DOM to see which editor tab is active rather than just checking file contents.

For younger learners, it uses simple language and tells them which blocks to drag from which category. For older/experienced users, it can give proper TypeScript examples.

It’s pretty basic but does the job. Code’s on GitHub if anyone wants to mess with it or has suggestions.

NB: it doesn’t include significant AI guardrails. Something to consider with younger age groups. I could add in the future.

14 Likes
2

You made WHAT.
Add Python support.

4 Likes
3

how does one manage to do this

1 Like
4

This is incredible!

2 Likes
5

Please do not use generative AI. It seems cool and helpful but learning how to debug is a valuable skill and this stuff will probably get it wrong 50% of the time anyway.

Also:

“With larger and new AI-focused data centers, water consumption is increasing alongside energy usage and carbon emissions.“

Source: https://www.eesi.org/articles/view/data-centers-and-water-consumption

3 Likes
6

It’s not showing up.

1 Like
7

How to add it in my project?

Btw, I don’t use chrome, so will it work in microsoft edge?

1 Like
8

It grabs the block data from indexedb in local storage and passes it to the ai.

1 Like
9

yeah will work on edge. download the repo, generate your api key (free) on google ai studio and add it to the extension. Then click on chat when in a editor window.

2 Likes
10

make sure you’ve added the api key and clicked on the bubble on bottom right.

2 Likes
11

Wait, water is also used to run AI servers?

5 Likes
12

By my understanding, AI is fueled by those big data centers, and because of that data companies are making more of them. As people continue to use AI, there will be higher and higher demand for data centers and then higher and higher water usage and co2 emissions.

And all that for things YOU COULD DO YOURSELF.

That being said, I am not an expert, look it up.

1 Like