⚡ Quickfill: The Generative UI Toolkit for AI Agents

Transform static AI conversations into vibrant, interactive experiences.
Quickfill is a lightweight Generative UI Toolkit delivered via the Model Context Protocol (MCP).

🚀 Quick Start Guide • 🤝 Contributing • GitHub

📖 Table of Contents

• 🌟 Overview
• ✨ The "Generative UI" Workflow
• 🎨 Core Features
• 🛠 Tool Reference
• 📈 Star History
• 🏗 Development
• 📜 License

🌟 Overview

Quickfill bridges the gap between AI reasoning and functional user interfaces. Instead of the AI simply describing a dashboard or a tool, it builds and launches it instantly in your browser. No project setup, no npm install, no boilerplate—just pure generative UI.

It uses a high-performance stack powered by Hono, Alpine.js, and Tailwind CSS to render lightweight, hot-reloading frontends directly from your conversation.

✨ The "Generative UI" Workflow

The power of Quickfill lies in its ability to bridge local data with interactive frontends:

1. 📊 Analyze: Feed an Excel sheet, PDF, or image to your AI agent.
2. 🎨 Generate: The AI drafts a custom-tailored UI using Tailwind & Alpine.js.
3. 🔗 Bridge: Use mount_file to expose your local data to the secure web environment.
4. 🚀 Launch: Use render_interactive_ui to pop open a live, functional dashboard in your browser.

🎨 Core Features

• ⚡ Instant Rendering: Zero-config browser UI updates with hot-reload.
• 📁 Local Bridging: mount_file creates secure symlinks to bypass browser file restrictions.
• 🛠 Native Graphics Stack:
  • Tailwind CSS: Utility-first styling for modern designs.
  • Alpine.js: Lightweight reactivity for complex interactions.
  • WASM Parsers: Built-in support for PDF.js, SheetJS, and Tesseract.js (OCR).
• 🚀 Performant: Built with Hono and Biome for maximum speed and minimal overhead.

🛠 Tool Reference

🖼 render_interactive_ui

The primary engine for Generative UI. It creates or updates the interactive browser view.

| Parameter | Type | Description | | :--- | :--- | :--- | | html_body | string | The HTML/Alpine.js body content to render. | | required_libs | string[] | Optional. Choose from ["excel", "pdf", "ocr"] to inject heavy libraries. | | open_in_browser | boolean | Whether to automatically open the tab. Defaults to true on first call. |

🖇 mount_file

Securely exposes a local file to the web server's root. Essential for letting the browser "see" your local data.

| Parameter | Type | Description | | :--- | :--- | :--- | | absolute_path | string | The full path to the local file. |

Returns: A relative URL (e.g., ./data.xlsx) that you can use in your UI code's fetch() or src attributes.

📈 Star History

🏗 Development

The project is built with Node.js and optimized with Biome.

# Setup
npm install

# Build the production bundle
npm run build

# Run quality checks
npm run check

# Run tests
npm test

Check out CONTRIBUTNG.md for contributing to this repository.

📜 License

Built with ❤️ by DikshitRJ.
This project is licensed under the MIT License.