Share
Explore

Student Lab: Building a Gemini-Powered Node.js Web App

This lab will guide you through setting up a simple Node.js application using the Express framework to interact with the Gemini API. The application will take a user prompt via a simple web page, send it to the Gemini model, and display the generated response.
image.png

Deploying to with npm -publish

image.png

Part 1: Getting Your Free Gemini API Key

You need an API key to communicate with the Gemini model.
Steps:
Log In: Navigate to the Google AI Studio environment (you can find this by searching for "Google AI Studio API Key"). You will need to log in with a standard Google Account.
Generate Key: Follow the prompts to review and accept the terms of service. On the dashboard, click the button to Create API Key.
Copy and Secure: Immediately copy the generated key. This is the only time you will see the full key. Save it in a secure location (like a dedicated password manager or a .env file for this project).
Security Note: You must NEVER commit your API key directly into your code or push it to public version control systems like GitHub. We will use an environment variable to keep it secure.

info
The platform you need to access to get your free API key is Google AI Studio.
Here are the details and the direct URL:

Google AI Studio Access Details

Key Generation Process

Once you log in using the URL above, the process is streamlined:
Sign In: Use your Google account credentials.
Review Terms: You will be prompted to read and accept the terms of service.
Create Key: On the API keys dashboard, click the "Create API Key" button.
Copy: Your unique key string will be generated instantly. Copy this key immediately and store it safely, as you will not be able to view the full string again.
This key is what you will use to set the GEMINI_API_KEY environment variable needed to run the Node.js application.

The URL for getting the API key is not gemini.google.com. That site is for the consumer-facing chat application.
The correct and most direct URL for generating the free developer API key is:
https://aistudio.google.com/app/apikey
Once you log in with your standard Google Account at that link, you'll be taken straight to the page where you can generate your key under the generous free tier.
image.png

Part 2: Setting up the Node.js Project

We will use Node.js and the Express framework for our web server.
Steps:
You can get the completed code here:

Create Project Directory:
mkdir gemini-express-lab
cd gemini-express-lab


Initialize Project:
npm init -y


(This creates a package.json file.)
Install Dependencies:
npm install express


Set Environment Variable (Key):
For the server code to work, you must set your API key as an environment variable named GEMINI_API_KEY.
Linux/macOS:
export GEMINI_API_KEY="YOUR_API_KEY_HERE"


Windows (Command Prompt):
set GEMINI_API_KEY="YOUR_API_KEY_HERE"


Windows (PowerShell):
$env:GEMINI_API_KEY="YOUR_API_KEY_HERE"


Note: Replace "YOUR_API_KEY_HERE" with the key you copied in Part 1. This variable is only set for the current terminal session.
Create Code File: Create a new file named express_gemini_app.js and paste the code from Part 3 into it.

Part 3: The Express Application (express_gemini_app.js)

The code below sets up an Express server with two main parts:
Serving the simple HTML form (/).
Handling the API request logic (/generate).

Part 4: Running the Application

Ensure you have completed steps 4 and 5 in Part 2.
Run the server from your terminal:
node express_gemini_app.js


Test: Open your web browser and navigate to http://localhost:3000.
Enter a query (e.g., "Write a short poem about coding") and submit the form to see the response from the Gemini API!

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.