THE THING WE BUILT:

Image Manipulation MCP

Who doesn’t love being in the flow?

That feeling when time disappears. When you’re not fighting your tools. When ideas turn into real things as fast as you can think them. It’s rare, and when you get it, you want to protect it.

I try to carve out that time for myself. We try to create it for our team. But it’s fragile.

I’ve felt that flow spending hours in Illustrator or Photoshop, drawing icons, refining details, getting lost in the work. I’ve felt it in a text editor too, typing away and watching a page come to life line by line.

What’s hard is staying there.

Because the moment you’re forced to switch contexts, the spell breaks.

Here’s the common problem: You’re in an IDE. Everything is working in text. Pages, components, maybe even an SVG. You’re moving fast. Then you realize you need to drop in a raster image.

Now what?

You open a browser. Search. Right click. Download. Maybe crop it in Photoshop. Rename it. Move it into the right folder. A surprising amount of work for a single image.

Maybe you skip all that and use an external URL. That works until you’re using something like the Next.js <Image> component and now you’re whitelisting domains and thinking about configuration instead of building.

Maybe you write a little script to fetch the image for you. And then you end up doing that again in the next repo.

And once the image is there, you’re still not done. Resize it. Crop it. Convert formats. Optimize it for the web. Extract colors. Apply filters.

Every step pulls you further away from the flow you were just in.

So we built a thing.

MCP in action

How It Works

It's an MCP (Model Context Protocol) server with 1️⃣ 3️⃣ tools for working with images:

• Fetch OG images from URLs

• Get OG metadata (title, description, date)

• Find favicons and Apple touch icons

• Extract YouTube thumbnails

• Resize with smart fit modes

• Crop to specific regions

• Convert between formats (JPEG, PNG, WebP, GIF, TIFF, AVIF)

• Rotate and flip

• Apply filters (grayscale, blur, sharpen, brightness, contrast, saturation)

• Optimize and compress

• Compose/overlay images

• Extract color palettes

• Get image info (dimensions, format, EXIF data)

All from Claude Code or Cursor. Anything that supports an MCP.
No context switching. No external tools. Just ask and it's done.

Notes from Building

This feels like just the beginning

MCP tools let you turn one-off tasks into durable capabilities that live inside your dev environment. Instead of asking an LLM to generate a script and hoping it works, you give it access to a vetted tool with predictable behavior.

You’ve seen some MCPs from us before, but thinking about how tools like this fit into your personal workflow opens up a lot more to explore. Seeing this slot so seamlessly into my own workflow, I can’t help but think about what to build next.

From fetch to full toolkit

In this case, it started as just one script: a way to fetch OG images from a URL.

But the moment you can fetch images, you need to manipulate them. Resize for thumbnails. Crop for social media. Convert formats for the web. There’s always more to do.

So one tool became thirteen. A simple fetcher turned into a complete image manipulation server.

Job to be done

This followed a familiar pattern. Once you start building, the real job starts reveals itself. The goal wasn’t just to fetch an image. It was to produce a complete, optimized, ready-to-use image that I’d already approved.

We see the same thing often when scoping work for our clients. What may start as one ask expands once conversations deepen and discovery begins. The deeper you go, the clearer the real problem becomes. We’ve come to expect that shift in most full-scale projects.

Sometimes it helps to pay attention to the friction. It often reveals the problem you’re actually trying to solve.

Built with ❤️ by Township

You’re receiving this because you signed up for Township’s “We Built a Thing” newsletter. We'll only send these when we, well, build things.