Claude Code

Generate QR Codes with Claude Code

Bash tool usage, MCP server setup, and real conversation flows

How It Works

Claude Code is Anthropic's CLI agent for software development. It can run shell commands, read and write files, and interact with APIs. The QR Gen API is a perfect fit: Claude Code can call it via curl to generate QR codes and save them directly into your project.

There are two approaches: direct API calls using the Bash tool, or setting up an MCP server for a more integrated experience.

Direct API Calls with the Bash Tool

The simplest approach. When you ask Claude Code to create a QR code, it uses curl to call the API and saves the result to a file.

Generate a PNG

curl -s "https://qrgenapp.com/api/qr?data=https://example.com&size=512&ec=H" -o qr-code.png

Generate an SVG (better for web projects)

curl -s "https://qrgenapp.com/api/qr?data=https://example.com&format=svg&size=512" -o qr-code.svg

WiFi QR Code

curl -s "https://qrgenapp.com/api/qr?data=WIFI%3AT%3AWPA%3BS%3AMyNetwork%3BP%3AMyPassword%3B%3B&size=512&ec=H" -o wifi-qr.png

Custom Colors for Dark Backgrounds

curl -s "https://qrgenapp.com/api/qr?data=https://example.com&color=ffffff&bg=1a1a1a&size=512" -o qr-dark.png

Example Conversation

Here is what a typical interaction looks like when you ask Claude Code to generate a QR code:

> Create a QR code for https://myproject.dev and save it to assets/qr.png

Claude Code:
  I'll generate a QR code for your URL and save it to the assets directory.

  [Bash] mkdir -p assets && curl -s "https://qrgenapp.com/api/qr?data=https%3A%2F%2Fmyproject.dev&size=512&ec=H" -o assets/qr.png

  Done. Saved a 512x512 QR code to assets/qr.png with high error correction.
> Generate a WiFi QR code for SSID "Office5G" with password "Tr0ub4dor&3"

Claude Code:
  I'll create a WiFi QR code with WPA authentication.

  [Bash] curl -s -G "https://qrgenapp.com/api/qr" \
    --data-urlencode "data=WIFI:T:WPA;S:Office5G;P:Tr0ub4dor&3;;" \
    --data-urlencode "size=512" \
    --data-urlencode "ec=H" \
    -o wifi-qr.png

  Saved the WiFi QR code to wifi-qr.png. When scanned, it will
  automatically connect to "Office5G" using WPA authentication.

MCP Server Setup

For a tighter integration, you can add the QR Gen API as an MCP (Model Context Protocol) tool. This gives Claude Code a dedicated generate_qr_code tool instead of relying on curl commands.

Option 1: Quick Add via CLI

If you have an MCP server file ready, register it directly:

claude mcp add qrgen node /path/to/qr-mcp-server.js

Option 2: Project Settings

Add the MCP server to your project's .claude/settings.json:

{
  "mcpServers": {
    "qrgen": {
      "command": "node",
      "args": ["/path/to/qr-mcp-server.js"]
    }
  }
}

Complete MCP Server Implementation

Save this file as qr-mcp-server.js. It exposes a single tool that generates QR codes via the QR Gen API.

#!/usr/bin/env node
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";
import { writeFile } from "fs/promises";
import { resolve } from "path";

const server = new McpServer({
  name: "qrgen",
  version: "1.0.0",
});

server.tool(
  "generate_qr_code",
  "Generate a QR code image from the QR Gen API and optionally save it to a file.",
  {
    data: z.string().describe("Content to encode: URL, text, WiFi string, vCard, etc."),
    format: z.enum(["png", "svg"]).default("png").describe("Output image format"),
    size: z.number().min(32).max(2048).default(512).describe("Image size in pixels"),
    color: z.string().default("000000").describe("Foreground hex color without #"),
    bg: z.string().default("ffffff").describe("Background hex color without #"),
    ec: z.enum(["L", "M", "Q", "H"]).default("H").describe("Error correction level"),
    margin: z.number().min(0).max(10).default(4).describe("Quiet zone width in modules"),
    outputPath: z.string().optional().describe("File path to save the image. If omitted, returns the URL."),
  },
  async ({ data, format, size, color, bg, ec, margin, outputPath }) => {
    const params = new URLSearchParams({
      data, format,
      size: String(size),
      color, bg, ec,
      margin: String(margin),
    });
    const url = `https://qrgenapp.com/api/qr?${params}`;

    if (outputPath) {
      const res = await fetch(url);
      if (!res.ok) {
        const err = await res.text();
        return { content: [{ type: "text", text: `Error: ${res.status} — ${err}` }] };
      }
      const buffer = Buffer.from(await res.arrayBuffer());
      const absPath = resolve(outputPath);
      await writeFile(absPath, buffer);
      return {
        content: [{ type: "text", text: `QR code saved to ${absPath} (${buffer.length} bytes)` }],
      };
    }

    return {
      content: [{ type: "text", text: `QR code URL: ${url}` }],
    };
  }
);

const transport = new StdioServerTransport();
await server.connect(transport);

Install dependencies and register:

npm init -y
npm install @modelcontextprotocol/sdk zod
claude mcp add qrgen node qr-mcp-server.js

Now when you ask Claude Code to generate a QR code, it will use the dedicated MCP tool instead of constructing curl commands.

Using the OG Image API

When building web projects, Claude Code can generate social preview images using the OG Image API. This is useful for setting up <meta> tags in new projects.

> Set up OG meta tags for my landing page at https://myapp.dev

Claude Code:
  I'll add OG meta tags using the QR Gen OG image API for a dynamic
  social preview that includes a QR code.

  <meta property="og:image"
    content="https://qrgenapp.com/api/og?title=MyApp&data=https%3A%2F%2Fmyapp.dev&color=3b82f6">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">

Tips

Full API Reference

See all parameters, response formats, and code examples in the complete API documentation.

API Docs