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:
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 servernpm run build:next- Build Next.js app for productionnpm start- Start production server
MCP Server
npm run build:mcp- Build MCP servernpm run start:mcp- Start MCP server (stdio mode)npm run build- Build both web app and MCP server
Code Quality
npm run lint- Run linternpm run lint:fix- Fix linting issuesnpm run format- Format code with Biomenpm 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 encodestyle(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
- slate-ember - Dark slate with orange accent (default)
- ink-lime - Deep black with lime green
- charcoal-cyan - Navy charcoal with cyan
- night-sky - Midnight blue with sky blue
- graphite-gold - Dark graphite with gold
- espresso-rose - Dark brown with rose pink
- plum-ice - Deep purple with lavender
- forest-mint - Forest green with mint
- cocoa-orange - Warm brown with orange
- mono-high - High contrast black & white
License
MIT License - see LICENSE file for details.