For an index to all my stories click this text
This story describes how to make a webpage that displays information from Google's Gemini AI. The webpage is made with plain HTML and Javascript. You so need an API key from Google. But at the moment of this writing there are no costs involved.
The previous solution
In a previous story I demonstrated how to build a webpage with some Javascript On which you could type a question. The program send that question to an AI and the answer was written on the webpage.
You can read that story here:
https://lucstechblog.blogspot.com/2026/02/easy-ai-with-javascript.html
Although this works flawless there are some peculiarities with the solution.
- The company that provides the service is unknown
- We do not know how generous this free service is
- We do not know what AI it uses
update: it uses powerbrain ai which is powered by ChatGPT & GPT4
- The answers the AI provides are short.
The last point (the answers being short) does have some advantages which I am going to use in a special project. But that is for a later story.
Just be aware that that service might stop anytime.
The new solution
Some people really hate Google.
I am not one of them. They brought us great products and services like Google Search, GMail, the space for this weblog etc. And even Android. All these run for free on your devices. And yes they send you advertisements. And yes these advertisements are chosen by algorithms that look at your preferences.
And to be frank: I do not give a damn.
If advertisements pay for these free services I do not care.
Ok enough of this Google advocacy..........
There are many AI sytems around like ChatGPT, Copilot, Grok, Mistral and Gemini.
I opted for Gemini.
Gemini has a great free tier and an easy to use API.
And free really means free here. You only have to have a Google account. But if you already use Gmail or any other of their services you already have an account. So let's go.
Create an API key.
Start by visiting the Google Gemini AI developer site:
https://aistudio.google.com/welcome
At the top of the page on the right side choose Get Started
The familiar Google Sign in screen is shown and you can sigh in with your Google account (you know: xxxxxxx@gmail.com). The next screen asks for your password. Just as usual with all Google services.
If you do not own a Google Account you can create ne by clicking the text at the bottom of this screen.
When logged in look at the left side of the screen and choose the top item: API keys.
Then on the top right side click on Create API key.
A pop-up window is shown.
Fill in a name for your key and in the drop-down menu choose Default Gemini Project. Then press Create key.
The pop-up window closes and on the webpage you can see the API key is created.
Click on the blue letters of the API key AND A NEW POP-UP WINDOW APPEARS WITH ALL THE DETAILS OF YOUR api Key. There are some other details like Project name and Project number but you do ot need those now.
Copy the API key and store it somewhere safe on your computer. We will need that to get our project working.
You can also delete the key and then create a new one. You can do that if you think your key is compromised.
Make sure you never distribute any software or project that contains your own private key. Simply said: keep your API key private.
That's all you need doing to get a free API key from Google.
So click on your email adress on the bottom-left side of the page and log-out.
If you want you can have a look at the documentation page of the Gemini API. You can find all kinds of usefull information there. You can find it here:
https://ai.google.dev/gemini-api/docs
The API
Google offers a library for many languages like for example JavaScript and Python.
But we do not need it.
A simple fetch command does the trick.
Here is the complete program.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Gemini Web Chat Demo</title> <style> body { font-family: system-ui, sans-serif; background: #f7f7f7; padding: 2rem; } #container { background: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); max-width: 600px; margin: auto; } textarea { width: 100%; font-family: inherit; font-size: 1rem; padding: 0.6rem; border: 1px solid #ccc; border-radius: 6px; resize: none; /* user can’t drag resize */ overflow: hidden; /* hide scrollbar */ min-height: 2.5rem; } button { margin-top: 0.5rem; padding: 0.4rem 1rem; } #response { margin-top: 1rem; white-space: pre-wrap; background: #f0f0f0; padding: 1rem; border-radius: 6px; min-height: 100px; } </style> </head> <body> <div id="container"> <h2>Ask Gemini</h2> <textarea id="userInput" placeholder="Type your question..."></textarea> <br> <button id="sendBtn">Send</button> <h3>Response:</h3> <div id="response" contenteditable="true"></div> </div> <script> const API_KEY = "HERE-COMES-YOUR-OWN-API-KEY"; // Replace with your key const MODEL = "gemini-2.5-flash";//works const textarea = document.getElementById("userInput"); const sendBtn = document.getElementById("sendBtn"); // Auto-resize textarea textarea.addEventListener("input", () => { textarea.style.height = "auto"; textarea.style.height = textarea.scrollHeight + "px"; }); sendBtn.addEventListener("click", async () => { const input = textarea.value.trim(); if (!input) return alert("Please enter a question."); const responseDiv = document.getElementById("response"); responseDiv.textContent = "Loading..."; try { const res = await fetch( `https://generativelanguage.googleapis.com/v1beta/models/${MODEL}:generateContent?key=${API_KEY}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ contents: [{ parts: [{ text: input }] }] }) } ); const data = await res.json(); const text = data?.candidates?.[0]?.content?.parts?.[0]?.text || "(No response)"; responseDiv.textContent = text; } catch (err) { responseDiv.textContent = "Error: " + err.message; } }); </script> </body> </html>
To try this program just copy it and paste it in your favorite editor. Then save it as Gemini-test.html
Next open the directory where you saved it and click on the icon. Your preferred web-browser will open with the web-page ready to use.
This will work on any webbrowser (Firefox, Chrome etc) on any operating system (Windows or Linux, have not tested on Mac but it should work)
The program is not too coplicated if you have some feeling with Javascript. It starts with HTML and CSS codes that define the page, the input field, the button and the output field.
The real magic happens in the script part and I will high-ite a few things.
const API_KEY = "HERE-COMES-YOUR-OWN-API-KEY"; // Replace with your key
const MODEL = "gemini-2.5-flash";
Do not forget to replace HERE-COMES-YOUR-OWN-API-KEY with your own generated API key.
I used gemini-2.5-flash as the AI system that generates my answers. But you can look up what models work in the Google AI pages.
sendBtn.addEventListener("click", async () => {
const input = textarea.value.trim();
if (!input) return alert("Please enter a question.");
const responseDiv = document.getElementById("response");
responseDiv.textContent = "Loading...";
After putting a question in the input field you will press the Send button. This code checks if the input field is not empty before sending the data to Gemini.
try {
const res = await fetch(
`https://generativelanguage.googleapis.com/v1beta/models/${MODEL}:generateContent?key=${API_KEY}`,
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
contents: [{ parts: [{ text: input }] }]
})
}
);
And here is the fetch command. It is a POST command that sends a JSON string with the contents of the input field.
const data = await res.json();
const text = data?.candidates?.[0]?.content?.parts?.[0]?.text || "(No response)";
responseDiv.textContent = text;
The program then waits for a response which is also in the JSON format.
It then test if there was a valid response and if so fills the response field on the screen with the text.
Sidenote:
Javascript is really not that difficult. But it is an extensive language that can be used for many purposes. Not only for AI like this project but also for IOT projects like demonstrated in other projects on this weblog.
There are also many tricks that makes working with JavaScript a lot easier.
I have bundled more than 500 programming tricks and snippets in a book that is world-wide available through Amazon.
Click this link to learn more or to order this book.
So how does it work.
And look. Despite my spelling mistake Gemini knew what I meant.
After a short wait the answer will emerge in the response field.
As you can see the response is quite extensive.
You can also shorten the answers by altering your question in a way that Gemini forces to provide a short answer. And that is very usable for some other projects I have coming up.
Or ask Gemini to translate a sentence of text into another language.
This is a sentence from the text of this weblog.
And make me redundant.......
This is just part of the answer. The text was much longer and I got the complete HTML code with Javascript as part of the answer.
I just needed to fill in my own API key.
And what I got, just worked fine....
I am not giving you the code. Just get your own API key and try it yourself and see what it comes up with.
Be amazed !!!
I an sure you can come up with a myriad of projects that can use this !!!
Till next time.
Have fun
Luc Volders
