Featured Image Implementation & MCP Server Setup (Day 27)

You know that feeling when you discover something that makes you go "Why wasn't I doing this from day one?" That's exactly what happened when I finally set up the MCP server to connect directly with my Supabase database.

Quick summary

I've been taking screenshots of my database for weeks like some kind of caveman, sending them to my AI assistant every time I needed to make changes. Then I stumbled across this MCP server setup that gives my development environment direct access to read and modify my Supabase database. Game changer doesn't even begin to cover it.

Why this matters (and why I was being stubborn)

So here's the thing - I've been building this Bali travel directory for 27 days now, and every single time I wanted to add a new feature or modify the database structure, I had to take screenshots and explain what I was seeing. It was like trying to describe a painting to someone over the phone.

Living here in Bali, I'm trying to move fast and build efficiently. But this screenshot workflow was slowing me down massively. I kept telling myself "I need to set up that MCP server thing" but never actually did it because, honestly, I thought it would be complicated.

Plot twist: it took me about 5 minutes.

The breakthrough moment

I was scrolling through YouTube this morning (probably procrastinating, let's be honest) and found this video explaining the exact setup process. The lightbulb moment was realizing that instead of constantly explaining my database structure, I could just give my AI assistant direct access to see everything.

Here's what blew my mind - it doesn't just read the data. It can actually make changes, list all my projects, and understand the relationships between tables. It's like having a database administrator that never sleeps.

How I actually set it up

Step 1: Create your Supabase access token

First thing you need to do is head over to your Supabase dashboard and create a personal access token. This is basically giving your development environment permission to talk directly to your database.

The process is straightforward - go to your account settings, generate a new token, and copy it somewhere safe. I always forget this step and have to regenerate tokens, so learn from my mistakes.

Step 2: Add the configuration file

This is where it gets interesting. You need to create a specific JSON file in your Cursor directory (if you're using Cursor like me). The file goes right alongside your cursor rules and other configuration files.

The setup is pretty minimal - just your database URL, the access token, and a few basic settings. What I love about this approach is that it's not some complex integration that breaks every time you update something.

Step 3: Test the connection

Here's where I got genuinely excited. As soon as I saved the configuration, I could ask my AI assistant to list all my database tables, show me the current structure, and even make modifications directly.

I tested it by asking it to show me all my current projects, and boom - there they were. Every single project I'm working on, displayed perfectly. No more screenshots needed.

The stuff that went wrong (because of course it did)

I'm not gonna lie, my first concern was "What if this thing starts deleting my entire database?" That's a legitimate fear when you're giving direct access to your production data.

The good news is that you can configure the permissions pretty granularly. I set it up so it can read everything and make basic modifications, but I'm keeping an eye on it to make sure it doesn't go rogue and drop important tables.

Also, I initially put the configuration file in the wrong directory and spent 10 minutes wondering why nothing was working. Classic me.

What I'm building with this new superpower

Now that I have this direct database access, I decided to tackle something I've been putting off - adding featured images to my listings. This is exactly the kind of task that would have taken forever with the screenshot method.

Instead of explaining "I need a new column here, and it should connect to this bucket, and here's what the form looks like," I could just say "add featured image functionality" and let the AI assistant figure out the implementation details by examining the actual database structure.

The featured image implementation

Here's what we built together:

Added a new featured_image_url column to the listings table
Updated the stay and dining forms to include image upload functionality
Modified all the listing cards to display the featured images
Updated the individual listing pages with proper hero images

The whole process took maybe an hour instead of the half-day I was expecting. The AI assistant could see exactly how my existing image upload system worked and replicated that pattern for the featured images.

Lessons I'm taking from this

Stop procrastinating on obvious improvements. I knew this MCP setup would help, but I kept putting it off because I assumed it would be complicated. Sometimes the thing you're avoiding is actually the easiest fix.

Direct access beats screenshots every time. This seems obvious now, but having real-time access to your database structure makes development so much smoother. No more explaining context that the AI assistant can just see for itself.

Set boundaries early. I'm glad I thought about permissions upfront. Giving an AI assistant direct database access is powerful, but you want to make sure it can't accidentally nuke your entire project.

What's working now

My development workflow is completely different. Instead of:

Take screenshot of database
Explain what I want to change
Get back some code that might work
Test and debug
Repeat

It's now:

Describe what I want to build
AI assistant examines the database directly
Implements the change with full context
Usually works the first time

The featured images are live on both the stays and dining sections. You can see them on the homepage, category pages, and individual listing pages. The images are properly stored in Supabase storage and the URLs are saved in the database.

Current challenges I'm working through

The image upload functionality works great now, but I had some issues with form submissions not saving properly at first. We spent a good chunk of time debugging why the featured image URLs weren't getting stored even though the images were uploading successfully.

Turns out it was a data transformation issue - the form was collecting the data correctly, but something in the submission process wasn't handling the new field properly. A few targeted fixes later and everything's working smoothly.

I also realized I need to think about mobile optimization. Grace (my business partner) will probably want to manage content from her phone, so these admin forms need to work well on smaller screens.

What I'm tackling next

Now that the technical infrastructure is solid, I want to focus on content categories. Next up is adding the wellness category to the directory - spas, yoga studios, meditation retreats, all that good stuff that Bali is famous for.

I'm skipping beach clubs for now because, honestly, I haven't been to one in two years. It's hard to write authentic content about places you don't actually visit. Maybe if this project takes off, we can hire someone whose job it is to visit beach clubs. Tough life, right?

Final thoughts

This MCP server setup is one of those changes that seems small but completely transforms how you work. If you're building anything with a database and using AI assistants for development, stop taking screenshots and set up direct access.

The 5 minutes of setup will save you hours of explaining context. Plus, your AI assistant will make better decisions when it can see the full picture instead of working from partial screenshots.

I'm curious - have you set up something similar in your projects? Or are you still in the screenshot phase like I was? Either way, I'd love to hear about your workflow.

Following along with my 60-day challenge to build a Bali travel directory? I'm documenting everything - the wins, the failures, and the random discoveries like this one. Subscribe to my newsletter for weekly updates, or just say hi in the comments below.