Gemini AI Frontend Integration

A simple frontend project demonstrating the integration of Google Gemini AI API for generating AI responses. This project allows users to send messages to the AI and receive generated responses in real-time.

---

Features

• Send messages to Gemini AI API directly from the frontend.
• Display AI-generated responses.
• Handles API errors gracefully.
• Fully compatible with modern browsers.

---

Project Structure

/project-root │ ├── index.html # Main HTML file ├── style.css # Styling for the frontend ├── script.js # JavaScript logic for API calls └── README.md # Project documentation

yaml Copy code

---

Installation

1. Clone the repository:

git clone https://github.com/yourusername/gemini-frontend.git
cd gemini-frontend
Open index.html in a browser.

Usage
Replace YOUR_API_KEY in script.js with your Gemini API key:

javascript
Copy code
const API_KEY = "YOUR_API_KEY";
Type a message in the input box and click Send.

AI response will appear below the input.

Example API Call
javascript
Copy code
async function sendMessage(msg) {
  try {
    const res = await fetch(
      `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${API_KEY}`,
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          contents: [{ parts: [{ text: msg }] }]
        }),
      }
    );

    const data = await res.json();

    if (!data.candidates) {
      throw new Error("No response from AI");
    }

    console.log(data.candidates[0].content.parts[0].text);
  } catch (err) {
    console.error("Error:", err);
  }
}
Notes
Frontend API Usage Warning: Using API keys in frontend exposes them publicly. For production, consider using a backend server to make API calls securely.

Make sure your API key has enough quota.

License
MIT License © 2026

Author
Taha – Frontend Developer