https://github.com/justmalhar/quickui-agent

💻 Hackable UI Generator with LLMs. Build quick MVP UIs with HTML, Tailwind, Font Awesome, Placehold.co and Groq for superfast generation⚡
https://github.com/justmalhar/quickui-agent

font-awesome frontend gemini groq groqapi html llm nextjs openai openai-api openai-chatgpt tailwind vercel website

Last synced: about 1 month ago
JSON representation

💻 Hackable UI Generator with LLMs. Build quick MVP UIs with HTML, Tailwind, Font Awesome, Placehold.co and Groq for superfast generation⚡

• Host: GitHub
• URL: https://github.com/justmalhar/quickui-agent
• Owner: Justmalhar
• Created: 2024-03-18T08:22:07.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-06-11T15:49:13.000Z (6 months ago)
• Last Synced: 2024-06-11T23:20:34.168Z (6 months ago)
• Topics: font-awesome, frontend, gemini, groq, groqapi, html, llm, nextjs, openai, openai-api, openai-chatgpt, tailwind, vercel, website
• Language: JavaScript
• Homepage: https://quick-ui-one.vercel.app
• Size: 1.17 MB
• Stars: 7
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://github.com/Justmalhar/quick-ui/raw/main/public/demo.jpg)

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/Justmalhar/quick-ui&env=GROQ_API_KEY)

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

```bash

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](https://console.groq.com/)

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

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

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/generateHtml](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](https://nextjs.org/docs/api-routes/introduction) instead of React pages.