Render chatbox with user and AI messages

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Gemini API Beginner Guide</title>
<style>
  body { font-family: Arial, sans-serif; line-height: 1.6; margin: 20px; background: #f9f9f9; }
  h1, h2 { color: #1a73e8; }
  pre { background: #eee; padding: 10px; border-radius: 5px; overflow-x: auto; }
  a { color: #1a73e8; text-decoration: none; }
  a:hover { text-decoration: underline; }
  section { background: #fff; padding: 20px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
  code { background: #eee; padding: 2px 4px; border-radius: 3px; }
</style>
</head>
<body>

<h1>Google Gemini API – Beginner Setup Guide</h1>

<section>
<h2>Step 1: Sign Up / Log In</h2>
<p>Go to the official Google Gemini page:</p>
<p><a href="https://ai.google.com/gemini" target="_blank">https://ai.google.com/gemini</a></p>
<p>Sign in with your Google account. If you don't have one, create a Google account first.</p>
</section>

<section>
<h2>Step 2: Create a Project</h2>
<ol>
<li>Click <b>"New Project"</b> in the dashboard.</li>
<li>Give your project a name (e.g., <code>MyGeminiApp</code>).</li>
<li>This project will hold your API keys and track usage.</li>
</ol>
</section>

<section>
<h2>Step 3: Generate an API Key</h2>
<ol>
<li>Go to <b>API Keys</b> in your project.</li>
<li>Click <b>"Create API Key"</b>.</li>
<li>Copy your key and store it safely.</li>
</ol>
<p>Optional: store as environment variable for security:</p>
<pre>
# macOS/Linux
export GEMINI_API_KEY="YOUR_API_KEY_HERE"

# Windows (cmd)
set GEMINI_API_KEY=YOUR_API_KEY_HERE

# Windows (PowerShell)
$env:GEMINI_API_KEY="YOUR_API_KEY_HERE"
</pre>
</section>

<section>
<h2>Step 4: Install SDK</h2>
<p>For Python / Flask backend:</p>
<pre>pip install -U google-genai</pre>
<p>For JavaScript / Node frontend:</p>
<pre>npm install...