{"slug": "how-i-built-an-mcp-server-so-claude-can-create-qr-codes-from-chat", "title": "How I Built an MCP Server So Claude Can Create QR Codes From Chat", "summary": "A developer built an MCP (Model Context Protocol) server for their SaaS product QRflows, enabling Claude to create, update, and track QR codes directly through chat conversations. The server exposes 10 tools including QR creation, URL updates, scan analytics, and smart routing rules, allowing users to perform complex tasks like setting time-based URL redirects with a single sentence. The implementation uses Cloudflare Workers with OAuth 2.0 authentication and KV storage for token management, making QRflows one of the first QR code platforms to offer native AI assistant integration.", "body_md": "I launched a SaaS product called [QRflows](https://qrflows.app) — a dynamic QR code platform. Two months in, I decided to build an MCP (Model Context Protocol) server for it. Now Claude can create, update, and track QR codes directly from a chat conversation, without touching a dashboard.\n\nThis post is about why I built it, how it works technically, and what I learned along the way.\n\nMCP is Anthropic's open protocol that lets AI assistants like Claude connect to external services. Think of it like a USB standard — any MCP-compatible server can plug into Claude and give it new tools.\n\nFor QRflows, this meant Claude could become a QR code manager. A user types \"create a QR code for my restaurant menu that routes to the breakfast version before 11am and the dinner version after\" — and it just happens.\n\nThat's a real use case for my product's Smart Rules feature. Before MCP, the user had to go to the dashboard, create a QR, set up routing rules manually. With MCP, the whole thing is one sentence in chat.\n\nHere's what it looks like in practice — Claude fetching stats across all QR codes for a full month:\n\nQRflows itself runs on Laravel + React. But the MCP server is completely separate:\n\n`wrangler deploy`\n\n)`@modelcontextprotocol/sdk`\n\nThe server lives at `mcp.qrflows.app`\n\nand communicates via HTTP (Streamable HTTP transport).\n\nThe MCP server exposes 10 tools to Claude:\n\n```\ncreate_qr          — create a new QR code (16 types supported)\nupdate_qr_url      — change the destination URL without reprinting\nupdate_qr          — update any QR fields\nupdate_wifi_qr     — update WiFi credentials\nlist_qr_codes      — list all QR codes in the account\nget_qr             — get details for a specific QR\nget_qr_stats       — get scan analytics\ndelete_qr          — delete a QR code\napply_smart_rules  — set geo/device/time routing rules\nget_account_usage  — check plan limits and usage\n```\n\nEach tool has proper MCP annotations:\n\n```\nserver.tool(\n  \"create_qr\",\n  \"Create a new dynamic QR code in QRflows (16 QR types).\",\n  {\n    name: z.string().describe(\"Human-readable name for the QR code\"),\n    qr_type: z.enum(qrTypes).default(\"url\"),\n    content: z.record(z.unknown()).describe(\n      \"Payload by type, e.g. url: { url }; smart_rules: { default_url, rules: [...] }\"\n    ),\n  },\n  {\n    title: \"Create QR Code\",\n    readOnlyHint: false,\n    destructiveHint: false,\n    idempotentHint: false,\n    openWorldHint: true,\n  },\n  async (input) => {\n    const api = new QrflowsApi(env, token);\n    return toolSuccessWithUserMarkdownLeadingJson(\n      await api.createQr(input)\n    );\n  }\n);\n```\n\nThe `readOnlyHint`\n\n, `destructiveHint`\n\n, and `idempotentHint`\n\nannotations are important — they tell Claude how to handle each tool safely. Read-only tools like `list_qr_codes`\n\nget `readOnlyHint: true`\n\n. The `delete_qr`\n\ntool gets `destructiveHint: true`\n\nso Claude knows to be careful.\n\nAnthropic requires remote MCP servers to implement OAuth 2.0. This makes sense — you don't want Claude connecting to a QR service without the user explicitly authorizing it.\n\nThe flow looks like this:\n\n`mcp.qrflows.app/auth/authorize`\n\nThe trickiest part was the token refresh logic. Cloudflare Workers have no persistent state between requests, so I use KV with TTL to store tokens and refresh them automatically.\n\n```\n// Store in KV with expiry\nawait env.OAUTH_STORE.put(\n  `token:${userId}`,\n  JSON.stringify({ access_token, refresh_token, expires_at }),\n  { expirationTtl: 3600 }\n);\n```\n\nThe most interesting use case is Smart Rules — QRflows' geo/device/time routing feature.\n\nA user can tell Claude:\n\n\"Create a QR code that sends people in Spain to qrflows.app/es and everyone else to qrflows.app\"\n\nClaude translates this into a `create_qr`\n\ncall with `qr_type: \"smart_rules\"`\n\nand the right routing config:\n\n```\n{\n  \"qr_type\": \"smart_rules\",\n  \"content\": {\n    \"default_url\": \"https://qrflows.app\",\n    \"rules\": [\n      {\n        \"condition_type\": \"country\",\n        \"condition_value\": \"ES\",\n        \"destination_url\": \"https://qrflows.app/es\",\n        \"label\": \"Spain\"\n      }\n    ]\n  }\n}\n```\n\nThis is where natural language + structured API really clicks. Describing routing rules in JSON is annoying. Describing them in English is natural. Claude handles the translation.\n\nAnd when you ask for stats on a specific QR, Claude returns a full analytics breakdown inline:\n\nOne thing I got wrong initially: my tools returned raw JSON. Claude would display it as a code block and the conversation felt clunky.\n\nThe fix was to make tools return a **markdown block first**, then the JSON for Claude's internal use, separated by a delimiter:\n\n```\nHere's your QR code for the restaurant menu:\n\n![QR Code](https://qrflows.app/qr/abc123.png)\n\n**Download:** [PNG](https://...) | [SVG](https://...)\n**Destination:** https://your-menu.com\n**Type:** Menu QR\n\n---\nqrflows_tool_json\n{ ... raw json ... }\n```\n\nClaude surfaces the markdown naturally in conversation. The JSON after the delimiter is parsed by Claude if it needs to chain tool calls.\n\nWhen listing all QR codes, Claude also renders a full breakdown table automatically:\n\nThe MCP server is live at `https://mcp.qrflows.app/mcp`\n\n.\n\nTo connect in Claude (claude.ai):\n\n`https://mcp.qrflows.app/mcp`\n\nThen try:\n\n```\nCreate a WiFi QR code for my office. SSID: OfficeWifi, password: correct-horse-battery\nShow me scan stats for all my QR codes from last week\nUpdate the URL on my \"Menu QR\" to point to https://myrestaurant.com/menu-v2\n```\n\nI've submitted QRflows to Anthropic's official MCP connector directory. The review is ongoing — once approved, QRflows will appear in the built-in connector list inside Claude without users needing to add a custom URL.\n\nIf you're building an MCP server and wondering about the submission process: there's a Google Form linked from the Anthropic docs. The technical requirements include Streamable HTTP transport, OAuth 2.0, and proper tool annotations. The review takes a few weeks.\n\n**Start with OAuth earlier.** I built all 10 tools first, then retrofitted OAuth. That was backwards. OAuth shapes your entire architecture — do it first.\n\n**Test with real Claude conversations, not just the MCP inspector.** The inspector tells you if tools work. Only real conversations tell you if Claude uses them correctly. Claude sometimes misinterprets tool descriptions in ways the inspector won't catch.\n\n**Keep tool descriptions conversational.** I initially wrote terse, developer-style descriptions. Claude is better at using tools described the way you'd explain them to a colleague.\n\n`https://mcp.qrflows.app/mcp`\n\n*Built this in about 2 weeks alongside the main product. Happy to answer questions about the implementation — drop them in the comments.*", "url": "https://wpnews.pro/news/how-i-built-an-mcp-server-so-claude-can-create-qr-codes-from-chat", "canonical_source": "https://dev.to/qrflows/how-i-built-an-mcp-server-so-claude-can-create-qr-codes-from-chat-205j", "published_at": "2026-05-29 21:11:00+00:00", "updated_at": "2026-05-29 21:41:33.546837+00:00", "lang": "en", "topics": ["ai-products", "ai-tools", "ai-agents"], "entities": ["QRflows", "Claude", "Anthropic", "MCP", "Model Context Protocol", "Laravel", "React"], "alternates": {"html": "https://wpnews.pro/news/how-i-built-an-mcp-server-so-claude-can-create-qr-codes-from-chat", "markdown": "https://wpnews.pro/news/how-i-built-an-mcp-server-so-claude-can-create-qr-codes-from-chat.md", "text": "https://wpnews.pro/news/how-i-built-an-mcp-server-so-claude-can-create-qr-codes-from-chat.txt", "jsonld": "https://wpnews.pro/news/how-i-built-an-mcp-server-so-claude-can-create-qr-codes-from-chat.jsonld"}}