Skip to main content
BACK TO HOME/NOTES
HomeAboutToolsProjectsNotesContact

QR Tool + MCP Server

QR Tool + MCP Server

I built a QR code generator that works two ways: as a web app with 10 custom styles, and as an MCP server that lets Claude and Cursor generate QR codes directly in conversations.

What I built

  • Web app: QR generator with 10 style presets, logo uploads, mobile design, and SVG/PNG export

  • MCP server: Connects to Claude Desktop and Cursor so you can generate QR codes by just asking

  • Two connection modes: HTTP endpoint (works instantly) and stdio transport (run locally)

  • Batch tool: Generate dozens of styled QR codes at once for docs or marketing assets

My role and stack

Role: Designed and built everything; product, visuals, architecture, code, and docs

Stack:

  • Next.js 15 + React 19: Web framework

  • TypeScript + Zod: Type safety and validation

  • @modelcontextprotocol/sdk: MCP server

  • qr-code-styling + jsdom: Server-side QR generation

  • Tailwind CSS + Radix UI: Styling and components

  • Vercel: Hosting for both web and MCP

  • Biome: Linting and formatting

  • Motion: Animations

The problem

Making QR codes usually means opening a separate tool, downloading generic-looking codes, and manually matching your brand colors. Developers write custom scripts. Designers use Figma plugins. Everyone wastes time.

How I built it

Design

I made 10 color presets: Slate Ember, Night Sky, Graphite Gold, and others. Each one balances contrast for reliable scanning with colors that look good in modern interfaces. Added logo positioning (center or bottom-right), dark/light/system themes, and sound effects you can toggle off.

The styles work identically in the web app and MCP server; same code, same output.

MCP integration

The MCP server exposes three tools:

  • generate_qr_code - Creates a QR code with style, format, size, and logo options

  • get_available_styles - Lists all 10 presets

  • preview_qr_url - Returns a web link to customize further

You can batch-process URLs and get svg download links back.

Setup takes one line in your Claude or Cursor config. The HTTP version needs no installation. The stdio version runs locally.

Both apps share the same QR generation code. I built separate TypeScript configs; one for Next.js, one for Node. The MCP server uses jsdom to generate codes without a browser. Style resolution happens server-side so colors stay consistent.

Vercel hosts both the web app and the MCP HTTP endpoint from one codebase. You can also install it as an npm package for local stdio mode.

Results

  • Launched early: One of the first MCP tools that generates visual assets (most tools fetch data or run commands)

  • Easy setup: Add one line to your config file. No API keys, no installs

  • Scanability tested: All 10 styles scan reliably on phones, tablets, and printed materials

  • Community interest: Got featured in MCP showcases and adopted by developers for automated doc generation

  • New workflows: People started doing things like "scan my README and generate QR codes for every link" or "make QR codes for all product URLs in this spreadsheet"

What I learned

Building for a protocol is different than building for users. The MCP version needed clear parameter names and good error messages because users don't see a UI—they just type requests to an AI.

AI should handle visual tasks too. Most AI tools focus on text and code. But plenty of work involves design assets. Making those accessible through conversation saves time.

Presets beat parameters for style. I could have exposed RGB values and corner radius as parameters. Instead, I made named presets. Much easier to ask for "night-sky style" than to specify hex codes.

Docs are the interface for developer tools. The setup guides with example prompts mattered as much as the code. If people can't configure it in 30 seconds, they won't try.

Dual deployment makes sense. HTTP mode gets you started instantly. Stdio mode lets you fork and modify. Both work from one codebase.

The point

I wanted to make QR codes without leaving my editor. Built a tool that does that, and it turns out other people wanted it too. The web version works if you prefer clicking buttons. The MCP version works if you prefer typing to Claude.

MCP is new. So most tools are still being figured out. This one shows you can use it for design assets, not just data. That feels like it opens up some interesting possibilities.