GeminiCoder is a web application that helps users transform their app ideas into reality by generating HTML and Tailwind CSS code using AI. The application leverages the Google Generative AI model to provide detailed technical specifications based on user input.
- AI-Powered Code Generation: Generate HTML and Tailwind CSS code based on your app idea.
This project was bootstrapped with Create React App.
- Node.js (version 14 or higher)
- npm (Node Package Manager)
-
Clone the repository:
git clone https://github.com/ekramasif/GeminiCoder.git cd GeminiCoder -
Install the dependencies:
npm install
-
Set up your environment variables. Create a
.envfile in the root directory and add your Google Generative AI API key:REACT_APP_GEMINI_API_KEY=your_api_key_here
To use the Google Generative AI model, you need to obtain an API key. Follow these steps:
-
Create a Google Cloud Project:
- Go to the ai.google.dev.
- Click on the project drop-down and select or create a new project.
-
Enable the Google Generative AI API:
- In the Google Cloud Console, navigate to the API & Services dashboard.
- Click on Enable APIs and Services.
- Search for "Google Generative AI" and enable it for your project.
-
Create Credentials:
- In the API & Services dashboard, click on Credentials in the left sidebar.
- Click on Create Credentials and select API Key.
- Your new API key will be generated. Copy this key.
-
Add the API Key to Your
.envFile:- Open the
.envfile you created in the root directory of your project. - Replace
your_api_key_herewith the API key you copied.
- Open the
In the project directory, you can run:
Runs the app in development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
- Google Generative AI for providing the AI model.
- Tailwind CSS for the utility-first CSS framework.
- React for the JavaScript library for building user interfaces.