Step 1 Minimal Gemini Demo

🌟 Minimal Gemini Free AI Demo

🔍 Overview

This is a lightweight web-based Gemini AI interface that allows any user to use Google’s Gemini models for free with their own Google account API key.

✔️ No backend ✔️ No billing required ✔️ No API cost for developers ✔️ Users bring their own free API key

The app runs entirely in the browser and talks directly to Google’s Gemini API.

🎯 Objective

The goal of this project is to:

  • Allow any user to use AI without paying
  • Avoid developer-side API costs
  • Demonstrate how easily Gemini AI can be integrated into a web app
  • Enable fast AI usage for content, summaries, reports, and more

💸 Why This Is 100% Free

  • Google provides free Gemini API access via Google AI Studio
  • Each user uses their own API key
  • Developers do not pay for user requests
  • Users do not pay to use the app (within free limits)

⚙️ How It Works

  1. User gets a free API key from Google AI Studio.

  2. User opens this HTML file in a browser.

  3. User:

    • Pastes their API key
    • Writes a question or prompt
    • Selects a Gemini model

  4. JavaScript sends the request directly to Google

  5. The AI response is shown instantly on the page

No server. No database. No authentication.

🧾 The Code

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-5" style="max-width:600px">
  <h5>Gemini Demo</h5>

  <p class="mb-2">Get Your Free API Key From <a href="https://aistudio.google.com/app/apikey" target="_blank">Google AI Studio</a></p>

  <input id="key" class="form-control mb-2" placeholder="API Key">
  <textarea id="q" class="form-control mb-2" placeholder="Ask something..."></textarea>

  <div class="d-flex gap-3 mb-2">
    <label class="form-check">
      <input class="form-check-input" type="radio" name="m" value="gemini-2.5-flash" checked><span class="form-check-label">gemini-2.5-flash</span>
    </label>
    <label class="form-check">
      <input class="form-check-input" type="radio" name="m" value="gemini-2.5-flash-lite"><span class="form-check-label">gemini-2.5-flash-lite</span>
    </label>
    <label class="form-check">
      <input class="form-check-input" type="radio" name="m" value="gemini-2.5-pro"><span class="form-check-label">gemini-2.5-pro</span>
    </label>
    <button class="btn btn-primary ms-auto" onclick="ask()">Send</button>
  </div>

  <pre id="out" class="border p-2"></pre>
</div>

<script>
const key = document.getElementById("key"),
      q = document.getElementById("q"),
      out = document.getElementById("out");

async function ask() {
  if (!key.value || !q.value) return;
  out.textContent = "Thinking...";
  const m = document.querySelector('input[name=m]:checked').value;
  const r = await fetch(
    `https://generativelanguage.googleapis.com/v1beta/models/${m}:generateContent?key=${key.value}`,
    {method:"POST",headers:{"Content-Type":"application/json"},
     body:JSON.stringify({contents:[{parts:[{text:q.value}]}]})}
  );
  out.textContent = (await r.json())?.candidates?.[0]?.content?.parts?.[0]?.text || "No response";
}
</script>
</body>
</html>

🚀 Where You Can Use This

This approach is extremely flexible and cost-effective. You can use it for:

  • 🧑‍💼 Portfolio sections

    • Generate or update project descriptions
    • Write “About Me” content dynamically

  • 📱 Apps & dashboards

    • Content updates inside apps
    • AI-powered text generation tools

  • 📝 Content creation

    • Blog drafts
    • Social media captions

  • 📊 Reports & summaries

    • Generate summaries from text
    • Prepare reports or explanations
    • Convert notes into structured content

  • 🧪 Prototyping & experiments

    • AI feature testing
    • Learning AI integration without cost
    • UI/UX demos
    • Hackathon projects
Previous Topic
Step 2 Gemini Chat Api
0%