mcp server

quickfill-mcp

Instant Generative UI MCP Server for AI Agents. Turn static AI chats into live, hot-reloading browser experiences with local file access. Tailwind, Alpine.js, and WASM-powered data parsers.

DikshitRJ/quickfill-mcpcommunitylistedunreviewed

Use tool

Set up

Runs on your computer. Pick your agent and operating system.

Before you start

Node.js 20 or newer

~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "dikshitrj-quickfill-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@dikshitrj/quickfill-mcp"
      ]
    }
  }
}

same format Cursor, GitHub Copilot CLI, Junie, JetBrains AI Assistant, Augment (Auggie CLI), Factory Droid, Kiro, Devin CLI +12

Values in angle brackets are placeholders. Restart Claude Desktop after editing its config.Claude Desktop docs

README

synced Oct 17, 2026

🚀 Usage Guide • 🤝 Contributing • GitHub

🌟 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:

📊 Analyze: Feed an Excel sheet, PDF, or image to your AI agent.
🎨 Generate: The AI drafts a custom-tailored UI using Tailwind & Alpine.js.
🔗 Bridge: Use mount_file to expose your local data to the secure web environment.
🚀 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.