AI QR Studio

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

Project Name: AI QR Studio (WebMCP Enabled) Project Tagline: A smart, agent-friendly QR & Barcode generator that bridges natural language UI with the WebMCP protocol for seamless AI automation.

1. About the Project: AI QR Studio is a modern, single-page web application designed to solve two core problems: simplifying complex QR/Barcode creation for everyday users through natural language, and exposing tool capabilities to autonomous AI agents via the WebMCP standard. Users can type requests like "Create a WiFi QR for network 'HomeNet' with password 'pass123'", and the system automatically parses the intent, formats the structured payload, and renders high-resolution customizable vector outputs.
2. Why WebMCP is Essential for this Use Case: Traditional QR generators rely heavily on manual form filling, which creates friction when AI agents (like ChatGPT or WebMCP-enabled browsers) try to assist users. By implementing WebMCP, our platform exposes native tool definitions directly to the DOM (window.WEBMCP_TOOLS). This allows AI agents to dynamically generate, customize, and extract QR payload data directly on behalf of the user without needing complex API wrappers or headless browser scraping.
3. Key Features & Architecture: Natural Language Parsing: Powered by Google Gemini 1.5 Flash API to convert unstructured text inputs into valid vCards, WiFi configurations, WhatsApp links, and URLs. WebMCP Native Integration: Includes webmcp.json discovery manifest and client-side tool bindings for generate_qr functions. Instant Client-Side Rendering: Real-time canvas preview supporting custom branding, logos, error-correction levels, and SVG/PNG/PDF exports. Zero Overhead Stack: Built with React, TypeScript, and Tailwind CSS; easily hostable on Vercel, Netlify, or Lovable edge servers.
4. How We Built It: The entire application was prototyped and assembled using Lovable for full-stack React UI generation. For intelligence, we integrated the Google Gemini API (via @google/generative-ai) with a robust Regex fallback for offline capability. WebMCP tool schemas were declared directly within the app's root layout to maintain 100% compliance with ChatGPT and Chrome WebMCP flags.
5. Links & Deliverables: GitHub Repository: https://github.com/YOUR_USERNAME/ai-qr-studio Live Demo: https://YOUR_APP_SUBDOMAIN.netlify.app (or Lovable live link)

What's next for AI QR Studio

Built With

• ai