🤖 AI Prompt Web Application

A simple AI Prompt Web Application built with Node.js that allows users to enter a prompt and receive an AI-generated response using the Groq API.

This project demonstrates how to create a web server using Node.js's built-in http, fs, and path modules without using Express.js.

🚀 Features

• ✨ Simple and clean AI prompt interface
• 📝 User can enter any prompt
• 🤖 Generates AI responses using the Groq API
• ⚡ Uses Node.js built-in HTTP server
• 📄 Reads and renders HTML using the fs module
• 📁 Handles file paths using the path module
• 🔐 Uses environment variables for API key security
• ❌ Handles API and invalid-request errors
• 🔄 Displays the AI response on the same page
• 📱 Responsive basic UI

🛠️ Technologies Used

• HTML5
• CSS3
• JavaScript
• Node.js
• Node.js http module
• Node.js fs module
• Node.js path module
• Fetch API
• Groq API
• ES Modules
• dotenv

📦 Dependencies

The project uses the following main dependency:

dotenv

Install it with:

npm install dotenv

For development, you can also use:

npm install --save-dev nodemon

📂 Project Structure

AI-Prompt-Web-Application/
│
├── random.html
├── server.js
├── package.json
├── package-lock.json
├── .env
├── .gitignore
└── README.md

🔑 Environment Variables

Create a .env file in the root directory:

GROQ_API_KEY=your_groq_api_key_here

Never upload your .env file or expose your API key publicly.

Add .env to your .gitignore file:

node_modules/
.env

⚙️ Installation & Setup

1. Clone the Repository

git clone https://github.com/your-username/AI-Prompt-Web-Application.git

2. Go to the Project Directory

cd AI-Prompt-Web-Application

3. Initialize/Install Dependencies

If package.json already exists:

npm install

Otherwise:

npm init -y
npm install dotenv

4. Configure Environment Variables

Create a .env file:

GROQ_API_KEY=your_groq_api_key_here

Replace your_groq_api_key_here with your actual Groq API key.

5. Run the Application

node server.js

You should see:

Server running at http://localhost:3000

6. Open in Browser

Visit:

http://localhost:3000

Enter a prompt and click Generate to receive an AI-generated response.

🔄 How It Works

The application follows this basic flow:

User enters a prompt
        ↓
HTML Form
        ↓
POST /ai
        ↓
Node.js HTTP Server
        ↓
Groq API
        ↓
AI Generated Response
        ↓
Render response in HTML
        ↓
User sees the result

🔌 API Route

Home Route

GET /

Displays the AI Prompt Generator interface.

AI Route

POST /ai

Receives the user's prompt and sends it to the Groq API.

Example form data:

prompt=Explain JavaScript in simple words

🧠 Example Prompt

Explain what JavaScript is and why it is important for web development.

The application sends this prompt to the Groq API and displays the generated response on the same page.

🔒 Security

The Groq API key is stored in an environment variable instead of directly inside the source code.

GROQ_API_KEY=your_api_key

Make sure .env is included in .gitignore.

🎯 Learning Objectives

This project helped demonstrate:

• Creating a server using Node.js http
• Handling GET and POST requests
• Reading HTML files using fs
• Managing file paths using path
• Processing form data
• Using JavaScript fetch()
• Working with REST APIs
• Handling asynchronous operations with async/await
• Managing API errors
• Using environment variables
• Building a simple AI-powered web application

🔮 Future Improvements

Possible improvements for this project include:

• 💬 Chat history
• 🎨 Improved UI/UX
• 🌙 Dark mode
• ⏳ Loading indicator
• 📋 Copy AI response button
• 🗑️ Clear response button
• 💾 Save previous prompts and responses
• 📱 More advanced responsive design
• 🔐 Better API error handling
• ⚡ Streaming AI responses

👨‍💻 Author

Arifur Rahman

Full Stack / MERN Stack Developer

Interested in building modern web applications with JavaScript, Node.js, React, and related technologies.

⭐ Support

If you find this project useful, consider giving the repository a ⭐ on GitHub.