CSSGeneratorGPT

An AI tool that takes HTML as an input to generate responsive CSS with a real-time preview for instant interaction.

Table of Content

• Live Demo
• Features
• Technologies Used
• Getting Started
  • Prerequisites
  • How to run the project
• Screenshots
• How to use the application
• Use cases and similar project ideas
• Contributing
• License
• Acknowledgments
• Contact

Live Demo

Live demo - CSSGeneratorGPT

Features

• AI Powered CSS style generator
• Custom commands to generate according to UI preference

Technologies Used

• Tailwind CSS and Chakra UI
• Next.js
• AI Integration: OpenAI's GPT-4

Getting Started

Prerequisites

• Next.js
• OpenAI API key

How to run the project

1. Clone the repository:

git clone https://github.com/0xmetaschool/code-styler
cd code-styler

2. Install dependencies:

npm install

3. Set up environment variables:

Create a .env.local file in the root directory and add the following variables:

OPENAI_API_KEY=your_openai_api_key

4. Run the development server:

npm run dev

5. Open your browser and navigate to http://localhost:3000

You should now see the CSSGeneratorGPT running with Next.js.

Screenshots

How to use the application

1. Paste your raw HTML code in 'Input HTML field'
2. In the field, design description, add what kind of design you prefer

Contributing

We love contributions! Here's how you can help make the CSSGeneratorGPT even better:

1. Fork the project (gh repo fork https://github.com/0xmetaschool/code-styler)
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• OpenAI for providing the GPT-4 API
• The Chakra UI and Tailwind CSS team for their excellent React component library

Contact

Please open an issue in the GitHub repository for any queries or support.