Mignon - Autonomous AI Mini-Apps & Agent Widget Engine

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're prou Inspiration

Most AI experiences today are trapped inside monolithic chat windows. While conversational chatbots are fun, they present significant friction in everyday web workflows:

Chatbots are passive and text-heavy: Users have to prompt endlessly and parse walls of markdown text. AI tools are hard to embed: Website builders and developers (on Shopify, WordPress, Webflow, or custom stacks) have no simple, drop-in mechanism to expose specific, single-purpose AI agent capabilities directly inside their UI. No safety guardrails out of the box: Connecting an LLM to a public webpage risks rapid token exhaustion, spam abuse, and runaway cloud bills. We asked ourselves: What if creating and deploying an autonomous, tool-calling AI agent were as simple as embedding a YouTube video?

That sparked Mignon — an end-to-end engine that turns Google Gemini models and native Function Calling tools into secure, embeddable mini-apps and Web Components with just 1 line of code.

🚀 What It Does Mignon bridges the gap between raw Gemini reasoning capabilities and live, production web applications:

🎨 Visual Studio & "Prompt-to-App" Co-Pilot: Design autonomous mini-apps with system personas, custom input fields, and native Gemini tool bindings (e.g., flight searches, real-time FX, time zone conversion) in seconds. 📦 1-Line Embeddable Web Components: automatically injects an isolated Shadow DOM widget that renders dynamic forms, minimalist quote cards, and voice synthesis (TTS) without styling conflicts. 🛡️ Fortified Security & Burst Protection: Built-in anti-spam cooldown ($t_{\text{wait}} = 3\text{s}$), per-session IP quotas, and cryptographic SHA-256 hashed API keys for external developers. 🔌 Developer REST API Gateway: Instant code generation across cURL, Python, JavaScript, and TypeScript with standard RFC rate-limiting headers (X-RateLimit-*). 📊 Real-time Observability Dashboard: Sub-second latency tracking, $P_{95}$ metrics, token consumption analytics, timeline charts, and audit trails. 🛠️ How We Built It We architected Mignon with a cloud-native, serverless mindset optimized for Google Cloud and Gemini:

AI Core: Powered by Google Gemini 3.5 Flash / Gemini 2.5 Flash with native Function Calling (Tool Use) and multi-turn execution pipelines. Frontend & Studio: Built with React 18, TypeScript, Tailwind CSS, and Vite with Lucide icons for a responsive studio experience. Embeddable Widgets: Implemented with zero-dependency Vanilla JavaScript & Shadow DOM Web Components, ensuring CSS isolation across any host website. Backend & Gateway: Node.js (ESM) and Express.js providing deterministic function execution, token metering, and cryptographic auth. Cloud Infrastructure: Fully containerized with Docker and deployed on Google Cloud Run for auto-scaling and serverless execution. 🧗 Challenges We Faced Host CSS Bleed & Style Isolation: Embedding widgets into third-party sites (WordPress/Shopify) often causes CSS conflicts. We solved this by strictly encapsulating the widget inside a Shadow DOM, ensuring styling remains untouched regardless of the host environment. Preventing Burst Spam & Cost Runaways: Public widgets are prime targets for automated scraping and rapid clicking. We designed a dual-tier protection model: $$\text{Rate Limit} = \begin{cases} \text{HTTP 429} & \text{if } \Delta t < t_{\text{cooldown}} \ \text{Session Exceeded} & \text{if } N_{\text{queries}} > Q_{\text{max}} \end{cases}$$ Paired with a real-time countdown timer (⏳ Cooldown (3s)...) on the widget button. Tool Execution Determinism: Designing a seamless fallback simulator that gracefully switches between live Gemini tool calls and realistic mocked outputs so developers and hackathon judges can test the platform without setup friction. 🏆 What We Learned Function Calling turns LLMs into Software: Transitioning from text generation to structured tool execution transforms Gemini into an actionable execution engine rather than just a conversationalist. Embeddability requires zero dependencies: Modern Web Components and Shadow DOM are powerful standards for micro-frontends and third-party SaaS integrations. Observability is essential from Day 1: Giving developers visibility into token usage, tool invocation counts, and latency graphs turns a prototype into an enterprise-ready service. 🔮 What's Next for Mignon 🧩 Community Tool Marketplace: Allowing developers to publish and monetize custom Gemini function tools (e.g., Stripe payments, Notion integration, GitHub actions). 🎙️ Full Duplex Voice Agent Widgets: Upgrading the TTS capabilities to real-time bidirectional Gemini Live Audio streams. 🏢 Multi-Tenant Team Workspaces: Role-based access control (RBAC), custom domain mapping, and white-label widget theming.