Getting Started with Google Gemini Free AI API Using React.js (Vite) | Google Gemini Free API | React.js tutorial

Google Gemini AI is a powerful tool offering generative AI capabilities to developers. This tutorial walks you through integrating the free Google Gemini API with a modern React.js project using Vite.

Table of Contents

• What is Google Gemini AI?
• Why Use Vite with React.js?
• Setting Up the Project
• Integrating Google Gemini AI API
• Code Implementation
• Best Practices for SEO Optimization
• FAQs

What is Google Gemini AI?

Google Gemini AI is an advanced AI service that provides robust capabilities like:

• Natural Language Processing (NLP)
• Image and Video Analysis
• Code Generation
• Generative AI for Content Creation

It's an excellent tool for developers looking to add intelligent features to their applications.

Why Use Vite with React.js?

Vite is a modern development environment for JavaScript projects, providing:

• Faster Builds: Leveraging ES modules for fast Hot Module Replacement (HMR).
• Lightweight Setup: Minimal configurations compared to traditional bundlers like Webpack.
• React Compatibility: Effortlessly works with React.js for building dynamic applications.

Setting Up the Project

Follow these steps to create a React.js app with Vite:

1. Install Vite

Run the following commands to set up Vite:

npm create vite@latest google-gemini-react --template react 

cd google-gemini-react 

npm install

2. Start Development Server

Launch the development server:

npm run dev

Integrating Google Gemini AI API

1. Get API Access

1. Visit the Google Gemini AI page.
2. Sign up for free access and obtain your API key.

2. Install Axios for API Requests

Install Axios for handling HTTP requests:

npm install axios

Code Implementation

1. Set Up Environment Variables

Create a .env file in the root directory and add your API key:

VITE_GEMINI_API_KEY=your-google-gemini-api-key

2. Create API Service

In the src directory, create a file src\ApiComponent.jsx:

import React, { useState } from 'react'; import axios from 'axios'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'; import ReactMarkdown from 'react-markdown'; import { ClipLoader } from 'react-spinners'; const ApiComponent = () => { const [prompt, setPrompt] = useState(''); const [response, setResponse] = useState(''); const [error, setError] = useState(null); const [code, setCode] = useState(''); const [loading, setLoading] = useState(false); // New state for loading const handleSubmit = async () => { setLoading(true); // Set loading to true when API request starts const apiKey = process.env.VITE_API_KEY; // Replace with your actual API key const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${apiKey}`; const requestBody = { contents: [ { parts: [{ text: prompt }], }, ], }; try { const result = await axios.post(url, requestBody, { headers: { 'Content-Type': 'application/json', }, }); console.log('Response:', result); const content = result.data?.candidates?.[0]?.content?.parts?.[0]?.text || ''; setResponse(content); // Extract code from the response setCode(extractCode(content)); setError(null); } catch (err) { setError(err.message || 'Something went wrong!'); setResponse(''); } finally { setLoading(false); // Set loading to false when request finishes } }; const handleCopy = (text) => { navigator.clipboard.writeText(text); alert('Code copied to clipboard!'); }; // Function to extract code from the response const extractCode = (content) => { const codeRegex = /```(.*?)```/gs; const match = content.match(codeRegex); if (match) { return match .map((code) => code.replace(/```/g, '').trim()) // Remove backticks and trim whitespace .join('\n'); // Join multiple code blocks if necessary } return ''; }; return ( <div className="container mx-auto p-6 bg-gray-800 min-h-screen"> <h1 className="text-3xl text-center text-white font-semibold mb-6"> Generate Code and Explanation </h1> <div className="max-w-2xl mx-auto"> <input type="text" value={prompt} onChange={(e) => setPrompt(e.target.value)} placeholder="Enter your prompt..." className="w-full p-4 border rounded-md shadow-sm mb-4 bg-gray-700 text-white" /> <button onClick={handleSubmit} className="w-full p-4 bg-gray-900 text-white font-semibold rounded-md hover:bg-gray-700 focus:outline-none mb-6" > Generate </button> {loading && ( <div className="text-center mb-6"> <ClipLoader size={50} color="#fff" loading={loading} /> <p className="mt-2 text-white">Processing your request...</p> </div> )} {error && ( <div className="bg-red-200 text-red-800 p-4 rounded-md mb-6"> <strong>Error: </strong> {error} </div> )} {response && ( <div className="bg-gray-900 text-white shadow-md p-6 rounded-lg mt-6"> {/* Explanation Section */} <div className="mb-8"> <h2 className="text-xl font-semibold text-white mb-4">Explanation (Markdown Format)</h2> <div className="prose text-white"> <ReactMarkdown>{response}</ReactMarkdown> </div> </div> {/* Code Block Section */} {code && ( <div className="mb-8"> <h3 className="text-lg font-semibold text-white mb-4">Code Snippet</h3> <SyntaxHighlighter language="php" style={vscDarkPlus} customStyle={{ borderRadius: '8px', padding: '20px', backgroundColor: '#1E293B', // Darker background for the code block border: '1px solid #374151', // Border color }} > {code} </SyntaxHighlighter> <button onClick={() => handleCopy(code)} className="mt-4 px-6 py-2 bg-green-600 text-white font-semibold rounded-md hover:bg-green-700 focus:outline-none" > Copy Code </button> </div> )} {/* Sections for Model, View, Controller Files */} <div className="mt-8 p-6 border border-gray-700 rounded-lg bg-gray-800"> <h3 className="text-lg font-semibold text-white mb-4">Model File:</h3> <pre className="bg-gray-900 text-white p-4 rounded-md"> {`class ExampleModel { // Logic for fetching data }`} </pre> <h3 className="text-lg font-semibold text-white mb-4">View File:</h3> <pre className="bg-gray-900 text-white p-4 rounded-md"> {`<div>{{ data }}</div>`} </pre> <h3 className="text-lg font-semibold text-white mb-4">Controller File:</h3> <pre className="bg-gray-900 text-white p-4 rounded-md"> {`public function show($id) { return view('viewName', ['data' => $data]); }`} </pre> </div> </div> )} </div> </div> ); }; export default ApiComponent;

3.Update src\App.jsx

Import and render the src\App.jsx

import './Index.css' import ApiComponent from './ApiComponent'; function App() { return ( <> <ApiComponent /> </> ) } export default App

FAQs

1. Is Google Gemini AI API free?

Yes, Google Gemini offers free-tier access with limited API usage. Check the Google Gemini Pricing for details.

2. Why use Vite instead of Create React App?

Vite offers faster builds and a lightweight setup, making it ideal for modern projects.

3. Can I use this tutorial with TypeScript?

Absolutely! Add TypeScript support during Vite setup by using the react-ts template.