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.

Deploy on Vercel

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

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.