This guide provides instructions for setting up the Gemini 2.0 web console on Linux and MacOS, including solutions to common issues.
Prerequisites ✅
- Node.js and npm: Ensure you have supported versions installed. Use
node -v
andnpm -v
to check. - Gemini AI Key: Obtain your API key from https://aistudio.google.com/apikey. 🗝️
- Google Chrome: Recommended for optimal performance. 🌐
Installing Node.js and npm on Linux (e.g Ubuntu) 🐧
You can install Node.js and npm on Ubuntu using the following methods:
Using apt:
- Update package lists:
sudo apt update
🔄 - Install Node.js and npm:
sudo apt install nodejs npm
Installing Node.js and npm on MacOS 🍎
If necessary, install Node.js and npm using one of these methods:
Official Installer:
- Download the macOS installer from https://nodejs.org. ⬇️
- Run the installer.
- Verify installation with
node -v
andnpm -v
. ✅
nvm:
- Install Node.js:
nvm install 22
(restart your terminal if needed). 🔄 - Verify versions:
node -v
andnpm -v
. ✅
Homebrew:
- Install Node.js:
brew install node@22
. 🍺 - Verify versions:
node -v
andnpm -v
. ✅
Setting Up the Gemini Web Console 🕹️
- Clone the repository:
git clone https://github.com/google-gemini/multimodal-live-api-web-console.git cd multimodal-live-api-web-console
- Update environment variables:
- In the
.env
file, add your API key:# create your own API KEY at https://aistudio.google.com/apikey REACT_APP_GEMINI_API_KEY='<YOUR_GEMINI_API_KEY>'
- Activate the key variable:
source .env
- Activate the key variable:
- In the
- Update
public/index.html
:- Add the following meta tag within the
<head>
section to enable the web console scripts to run:
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:3000 chrome-extension://* blob:;">
- Important: This modifies the Content Security Policy (CSP) to allow the web console to function. To understand the security implications and best practices for CSP, it’s highly recommended to read more about it here: https://developer.chrome.com/docs/privacy-security/csp
- Note: This CSP configuration is suitable for local development and testing. When deploying a production application, you should carefully review and adjust the CSP to ensure proper security and privacy measures are in place.
- Add the following meta tag within the
- Install dependencies:
npm install npm audit --force
- Start the app:
npm start
- Access the console: Open
localhost:3000
in your browser. 💻
You can now use the Gemini 2.0 API web console. See the documentation for examples and further information: https://github.com/google-gemini/multimodal-live-api-web-console