---

🚀 Usage Guide • 🤝 Contributing • GitHub

output.mp4

---

📖 Table of Contents

• 🌟 Overview
• ✨ The "Generative UI" Workflow
• 📦 Installation
• 🎨 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.

---

📦 Installation

Check out the USAGE.md for detailed installation and setup instructions.

---

🎨 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.