Getting Started with Gemini 2.0 on Linux and MacOS šŸ’»

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Ā andĀ npm -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:

  1. Update package lists:Ā sudo apt updateĀ šŸ”„
  2. 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:

  1. Download the macOS installer fromĀ https://nodejs.org. ā¬‡ļø
  2. Run the installer.
  3. Verify installation withĀ node -vĀ andĀ npm -v. āœ…

nvm:

  1. Install Node.js:Ā nvm install 22Ā (restart your terminal if needed). šŸ”„
  2. Verify versions:Ā node -vĀ andĀ npm -v. āœ…

Homebrew:

  1. Install Node.js:Ā brew install node@22. šŸŗ
  2. Verify versions:Ā node -vĀ andĀ npm -v. āœ…

Setting Up the Gemini Web Console šŸ•¹ļø

  1. Clone the repository:git clone https://github.com/google-gemini/multimodal-live-api-web-console.git cd multimodal-live-api-web-console
  2. 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
  3. 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.
  4. Install dependencies:npm install npm audit --force
  5. Start the app:npm start
  6. 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