From Synthesizers to Software: What Else Can Be Built with Claude Code and Supabase MCP?

The video “Building a game with Claude Code and Supabase MCP” is framed as a playful experiment—an 8-bit platformer controlled by a MIDI synthesizer. But underneath the fun is a much more important idea: a repeatable methodology for building real software at unprecedented speed .

This article explores that methodology and, more importantly, the wide range of other applications it enables.

The Core Methodology in One Sentence

Break a complex idea into phases, let an AI agent implement each phase, and give that agent controlled access to real infrastructure.

That’s it. Everything else is detail.

In the video, this looks like:

  • Asking the AI to produce a detailed implementation plan

  • Executing that plan step by step

  • Letting the AI create files, refactor logic, and fix bugs

  • Granting the AI limited but powerful access to Supabase via MCP

  • Iterating rapidly based on what actually works on screen

The result is not a demo—it’s a working system with persistence, security, and external hardware integration.

Why This Approach Is So Powerful

Three things happen simultaneously:

  1. Planning and execution are aligned
    The AI doesn’t just write code—it reasons about phases, dependencies, and architecture first.

  2. Infrastructure is real, not mocked
    Scores are stored in a real Postgres database. Security rules are enforced. Data persists across sessions.

  3. Iteration cost collapses
    Fixing logic, adjusting physics, or adding features becomes a conversational loop instead of a rewrite.

Once you understand that, the game itself becomes almost incidental.

STEP BY STEP GUIDE

0) Prerequisites

Install / have ready

  • A Supabase account

  • Claude Code installed (the video uses Claude directly in the project directory)

  • A code editor (VS Code is used for MCP config in the video)

  • A browser (Chrome is easiest for Web MIDI)

  • (Optional) a MIDI device connected via USB

1) Start from an empty project folder

Terminal

mkdir super-mario-mcp
cd super-mario-mcp

# optional but recommended
git init

The video starts with an empty folder and lets Claude create files as needed.

2) Launch Claude Code in the folder

Terminal

# Run Claude Code from inside the project folder
claude

When Claude asks for access to the folder, approve it (the video explicitly does this on first open).

3) Prompt Claude to generate a detailed implementation plan (Phase-based)

Prompt (Claude)

Write a detailed plan to build a 2D platformer game similar to early Mario games.

Claude will produce a plan and break it into phases (that’s the key workflow).

4) Implement Phase 1: “draw something on screen”

Prompt (Claude)

Looks great. Please implement phase one.

When Claude asks permission to create/edit files (like index.html), approve it (the video chooses “yes and don’t ask again for this session”).

Run it locally

You can open index.html directly in the browser, or serve it via a local server:

Terminal (simple local server)

python3 -m http.server 8000

Open:

  • http://localhost:8000

You should see a canvas with a simple character shape.

5) Implement Phase 2: controls + gravity

Prompt (Claude)

This looks great. Please implement phase two.

Refresh the browser and confirm:

  • Left/right movement works

  • Gravity exists (jump/fall feels right)

6) Implement Phase 3: platforms + collision

Prompt (Claude)

Please implement phase three.

If you hit the same issue as the video (platforms too high / character can’t reach):

Prompt (Claude)

The character cannot actually jump up onto the platforms.

If Claude “fixes the wrong thing” (like collision logic), follow up like the video did:

Prompt (Claude)

The collision logic was okay. The platforms are just a little bit too high for the character to jump onto.

Once it feels good, you can fast-forward:

Prompt (Claude)

Implement the remainder of the phases.

This is where the video adds nicer visuals, sprites, and a side-scrolling camera.

7) Add enemies, projectiles (musical notes), and a score display

Prompt (Claude)

Add some enemies and make it possible for the character to shoot musical notes. Tally up the user’s score and show this somewhere on the screen.

Test: you should see enemies, “note” projectiles, and an on-screen score.

8) Set up Supabase MCP so Claude can create your backend

8.1 Create a Supabase Personal Access Token (PAT)

In Supabase:

  • Settings → Access Tokens (or similar)

  • Generate a new token (the video names it “Super Mario”)

8.2 Create MCP.json and add your token (do NOT commit it)

The video exits Claude Code, opens VS Code, creates MCP.json, pastes the config, and then adds it to .gitignore.

Terminal (create gitignore rule)

echo "MCP.json" >> .gitignore

Create file

  • Create MCP.json in your project (or wherever the Supabase docs instruct Claude Code to read it)

  • Paste the Supabase MCP config and replace the token field with your PAT

⚠️ The PAT is effectively account-level power. Keep it private and out of GitHub.

9) Relaunch Claude and confirm MCP is detected

Terminal

claude

Claude should detect a new MCP server and ask to enable it for this project—approve it (the video chooses “use this and all future MCP servers”).

10) Use MCP to create a new Supabase project

Prompt (Claude)

Using the Supabase MCP server create a new Supabase project.

Claude will:

  • list organizations

  • ask which org to use

  • ask for a project name

  • show cost (the video sees $0/month) and asks to proceed

Approve the tool calls as prompted.

11) Scope MCP access down to only the new project (recommended)

After the project is created, the video copies the project ID, goes back to the config, and scopes access to that project ref—so Claude doesn’t have broad account access.

Prompt (Claude)

Update the MCP config so it only has access to this specific project ref, not my entire Supabase account.

(Then update MCP.json accordingly.)

12) Persist scores + show a top-3 leaderboard (Supabase)

Prompt (Claude)

When the game ends, allow the user to enter in three characters as their name and save their score in Supabase. After the endgame screen, show a leaderboard of the top three users who have the highest score.

Claude should generate:

  • A high_scores table (or similar)

  • SQL migrations

  • RLS enabled

  • Policies allowing select/insert (and preventing update/delete)

Approve the migration + file changes.

13) Connect the game to Supabase (URL + anon key)

Claude will ask for:

  • Supabase Project URL

  • Supabase anon key

Get them from the Supabase dashboard and provide them to Claude (the video does exactly this to “connect our game”).

14) Test end-to-end (score saving + leaderboard)

Play until game over, enter a 3-letter name, submit score.

Confirm:

  • Your name + score appear on the in-game leaderboard

  • In Supabase → Table Editor you can see the saved rows in the high scores table

15) Optional: Add MIDI controller support (Web MIDI API)

Prompt (Claude)

I have a synthesizer plugged into my computer via MIDI. I want to use this as a controller for the game. When the game starts, present the user with a screen where they can choose their controller, either a keyboard or a MIDI device. If they choose MIDI device, this should scan all available MIDI devices on their computer. When they select a MIDI device, step through each of the controls for the character. So ask the user to press a key for jump and then one for left, one for right, etc. Once they’ve assigned a note for every control, start the game.

Claude should:

  • Detect it needs the Web MIDI API

  • Build a “choose controller” screen

  • Request MIDI permissions

  • Let you map notes to actions

Practical tip

Web MIDI typically works best on localhost (use the python3 -m http.server step from earlier) and in Chrome.

What Other Apps Can Be Built with This Methodology?

1. Interactive Games and Simulations

The most obvious extension.

Examples

  • Browser-based games with leaderboards

  • Educational simulations (physics, chemistry, economics)

  • Multiplayer prototypes with real-time state

  • Experimental controllers (gesture, MIDI, sensors)

If a game can be planned, built, debugged, and persisted this way, so can any interactive system.

2. Creative Tools with Hardware Integration

The MIDI controller is the giveaway here.

Examples

  • Music composition tools

  • Live performance dashboards

  • Generative art systems

  • Hardware-controlled creative software

Any app that sits between physical input and digital logic fits perfectly.

3. Internal Business Tools

Arguably the highest-value category.

Examples

  • Admin dashboards

  • Reporting and analytics tools

  • Inventory and operations apps

  • Internal workflow automation

These apps are usually schema-heavy and iteration-heavy—exactly where AI-assisted development shines.

4. Productivity and Personal Tools

The same phased approach applies to everyday software.

Examples

  • Task managers

  • Habit trackers

  • Personal dashboards

  • Knowledge management systems

You can start simple, validate behavior, then layer on persistence, security, and polish.

5. SaaS MVPs and Startup Experiments

This methodology is ideal for early-stage products.

Examples

  • Niche SaaS tools

  • Subscription utilities

  • Feedback platforms

  • Creator or freelancer tools

Because schema changes are cheap and infrastructure is real from day one, you can validate ideas without overbuilding.

6. Educational and Learning Applications

The phased build mirrors how people learn.

Examples

  • Coding tutors

  • Interactive lessons

  • Skill practice apps

  • Progress-tracking learning tools

AI can implement logic, store progress, and adapt the experience as requirements evolve.

7. “Weird but Useful” Experiments

Some of the most interesting ideas don’t fit neat categories.

Examples

  • Data-driven toys

  • Experimental interfaces

  • Custom controllers

  • Proof-of-concept tools

The video itself is proof that novelty is no longer blocked by implementation effort.

The Bigger Shift: From Writing Code to Directing Systems

The most important takeaway from the video isn’t about games, MIDI, or even Supabase.

It’s this:

You no longer need to justify weeks of engineering time to explore an idea.

With an AI agent that can plan, implement, and integrate with real systems, the bottleneck shifts from ability to imagination.

That’s a fundamental change in how software gets built.

Final Thought

The game in the video is fun.
The methodology behind it is transformative.

Once you understand that workflow, the question is no longer “Can I build this?”
It becomes:

“What should exist that doesn’t yet?”

Vibe CodingFrancesca Tabor