QR Code Generator + MCP

A standalone QR code generator with beautiful styling options and Model Context Protocol (MCP) integration.

Features

Web App

• 10 pre-designed style presets
• Mobile-responsive design
• Custom logo upload support
• Export as SVG or PNG
• Logo positioning options (center, bottom-right)
• Dark/Light/System theme switcher
• Interactive sound effects with toggle control
• Built with Next.js 15 and React 19
• Full Kalypso design system styling

MCP Integration

• AI-powered QR code generation via Claude Desktop & Cursor
• HTTP and stdio transport support
• Access all 10 style presets programmatically
• No browser needed - generate QR codes directly from AI tools
• Hosted endpoint or local deployment options

Getting Started

Web App

Installation

npm install

Development

npm run dev

Open http://localhost:3000 to see the QR code generator.

Build

npm run build:next
npm start

MCP Server

Quick Start with Claude Desktop

Add to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "qr-tool": {
      "url": "https://qr-tool-mcp.vercel.app/api/mcp"
    }
  }
}

Restart Claude Desktop and you can now generate QR codes with AI!

Example usage:

Generate a QR code for https://instagram.com/kalypsodesigns using the neon-pulse style

Local MCP Server Development

npm run build:mcp
npm run start:mcp

For detailed setup instructions:

• Claude Desktop Setup Guide
• Cursor IDE Setup Guide

Project Structure

├── src/
│   ├── app/                    # Next.js app directory
│   │   ├── qr-generator/       # QR code generator feature
│   │   ├── layout.tsx          # Root layout
│   │   └── page.tsx            # Home page
│   ├── components/             # Reusable components
│   │   ├── ui/                 # UI components (button, input, etc.)
│   │   └── mobile-tool-wrapper.tsx
│   ├── hooks/                  # Custom React hooks
│   ├── lib/                    # Utility functions
│   └── styles/                 # Global styles
├── public/                     # Static assets
└── package.json

Available Scripts

Web App

• npm run dev - Start development server
• npm run build:next - Build Next.js app for production
• npm start - Start production server

MCP Server

• npm run build:mcp - Build MCP server
• npm run start:mcp - Start MCP server (stdio mode)
• npm run build - Build both web app and MCP server

Code Quality

• npm run lint - Run linter
• npm run lint:fix - Fix linting issues
• npm run format - Format code with Biome
• npm run type-check - Run TypeScript type checking

Technologies

Frontend

• Next.js 15 - React framework
• React 19 - UI library
• TypeScript - Type safety
• Tailwind CSS - Styling
• Radix UI - Accessible components
• next-themes - Theme management
• Motion - Smooth animations

MCP Server

• @modelcontextprotocol/sdk - MCP protocol implementation
• Zod - Schema validation
• jsdom - Headless DOM for server-side QR generation
• qr-code-styling - QR code generation
• jszip - ZIP file generation for batch downloads

Code Quality

• Biome - Linting and formatting
• Husky - Git hooks
• TypeScript - Type safety

MCP Tools

generate_qr_code

Generate a styled QR code with custom options.

Parameters:

• url (required) - The URL or text to encode
• style (optional) - Style preset ID (default: "slate-ember")
• format (optional) - "svg" or "png" (default: "svg")
• size (optional) - Dimensions 256-2048px (default: 768)
• logoPosition (optional) - "center" or "bottom-right"

generate_qr_urls_batch

Generate QR codes for multiple URLs at once. Returns a single ZIP file download URL containing all QR codes with filenames based on the URLs.

Parameters:

• urls (required) - Array of URLs or text content to encode (max 100)
• style (optional) - Style preset to apply to all QR codes (default: "slate-ember")

Returns: A single download URL that delivers a ZIP file containing all QR codes as SVG files. Filenames are automatically generated from the URLs (e.g., 001-example-com-page.svg, 002-github-com-user.svg).

Example:

Generate QR codes for these URLs: https://example.com, https://github.com/user, https://twitter.com/handle

get_available_styles

List all available QR code style presets with color schemes.

preview_qr_url

Generate a shareable web preview URL for customization.

Available Styles

1. slate-ember - Dark slate with orange accent (default)
2. ink-lime - Deep black with lime green
3. charcoal-cyan - Navy charcoal with cyan
4. night-sky - Midnight blue with sky blue
5. graphite-gold - Dark graphite with gold
6. espresso-rose - Dark brown with rose pink
7. plum-ice - Deep purple with lavender
8. forest-mint - Forest green with mint
9. cocoa-orange - Warm brown with orange
10. mono-high - High contrast black & white

License

MIT License - see LICENSE file for details.