Skip to content

šŸ’» Hackable UI Generator with LLMs. Build quick MVP UIs with HTML, Tailwind, Font Awesome, Placehold.co and Groq for superfast generationāš”

Notifications You must be signed in to change notification settings

Justmalhar/QuickUI-Agent

Repository files navigation

Quick UI AI Agent

Quick UI is a superfast web application UI generator that uses LLMs to quickly generate your UI ideas into polished, ready-to-deploy single-page applications. Utilizing HTML, Tailwind CSS, Bootstrap, Font Awesome, and Google Fonts, the Quick UI Generator streamlines the design process, making it faster to test your idea. Designed for both novices and seasoned developers, this tool simplifies the UI generation process with an intuitive interface and real-time preview capabilities.

Demo Image

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Deploy with Vercel

Features:

  • Idea to UI: Simply input your concept, and let the generator do the rest, crafting a responsive and aesthetically pleasing UI.
  • Live Preview: Instantly see your generated UI in a dedicated preview pane.
  • Code View and Copy: Easily access and copy the generated HTML code with syntax highlighting for further customization.

Whether you're looking to quickly prototype a concept or need a starting point for a more complex design, Quick UI Generator is your go-to tool for rapid, hassle-free UI creation.

How to Use

  1. Enter your UI idea in the provided text area.
  2. Click "Generate UI" to process your input.
  3. View the generated UI in the preview pane on the right.
  4. Access and copy the HTML code with the "View Code" button.

Technologies Used

  • Next.js
  • Groq for superfast LLM inference
  • Tailwind CSS
  • Font Awesome
  • Google Fonts
  • Prism

Run Locally

First, run the development server:

git clone https://github.com/Justmalhar/quick-ui.git
cd quick-ui
cp .env.example .env #Add your Groq API Key from https://console.groq.com/ and save as GROQ_API_KEY=api_value_here
npm run dev

Get Groq API key from: Groq Console

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js.

API routes can be accessed on http://localhost:3000/api/generateHtml. This endpoint can be edited in pages/api/generateHTML.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

About

šŸ’» Hackable UI Generator with LLMs. Build quick MVP UIs with HTML, Tailwind, Font Awesome, Placehold.co and Groq for superfast generationāš”

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published