Okay, I can help you set up a basic web application to interact with the Gemini API. This will involve an HTML frontend, some CSS for styling, and JavaScript to handle the API communication using the `@google/generative-ai` package. We'll use Vite as a simple development server. **IMPORTANT:** You will need a Gemini API key. 1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) to create one. 2. Once you have the key, add it as a secret in this environment. Click the "Secrets" tab (usually represented by a key icon 🔑 in the sidebar), create a new secret named `VITE_GEMINI_API_KEY`, and paste your API key as the value. { "name": "gemini-chat-app", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "devDependencies": { "vite": "^5.2.0" }, "dependencies": { "@google/generative-ai": "^0.11.3" } } Ask Gemini

Ask Gemini AI

body { font-family: sans-serif; background-color: #f0f0f0; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } #app { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); width: 100%; max-width: 600px; } h1 { text-align: center; color: #333; margin-bottom: 20px; } .chat-container { display: flex; flex-direction: column; } #chat-log { height: 400px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px; padding: 15px; margin-bottom: 15px; background-color: #f9f9f9; } .message { margin-bottom: 15px; padding: 10px 15px; border-radius: 18px; max-width: 80%; line-height: 1.4; } .user-message { background-color: #007bff; color: white; align-self: flex-end; margin-left: auto; /* Push user messages to the right */ border-bottom-right-radius: 5px; } .ai-message { background-color: #e9e9eb; color: #333; align-self: flex-start; margin-right: auto; /* Push AI messages to the left */ border-bottom-left-radius: 5px; } .input-area { display: flex; gap: 10px; } #user-input { flex-grow: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; resize: none; /* Prevent manual resizing */ font-size: 1rem; height: 50px; /* Initial height */ box-sizing: border-box; } #send-button { padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; transition: background-color 0.2s; } #send-button:hover { background-color: #218838; } #send-button:disabled { background-color: #aaa; cursor: not-allowed; } #loading, #error-message { text-align: center; margin-top: 10px; padding: 10px; border-radius: 4px; } #loading { color: #555; } #error-message { color: #D8000C; background-color: #FFD2D2; } .hidden { display: none; } import { GoogleGenerativeAI, HarmCategory, HarmBlockThreshold } from "@google/generative-ai"; const chatLog = document.getElementById('chat-log'); const userInput = document.getElementById('user-input'); const sendButton = document.getElementById('send-button'); const loadingIndicator = document.getElementById('loading'); const errorMessageDiv = document.getElementById('error-message'); const API_KEY = import.meta.env.VITE_GEMINI_API_KEY; const MODEL_NAME = "gemini-1.5-flash"; // Or "gemini-pro" or other compatible models let genAI; let chat; function initializeChat() { if (!API_KEY) { showError("API Key not found. Please set it in the Secrets tab (VITE_GEMINI_API_KEY)."); sendButton.disabled = true; userInput.disabled = true; return false; } try { genAI = new GoogleGenerativeAI(API_KEY); // Configuration for the chat session const generationConfig = { temperature: 0.9, topK: 1, topP: 1, maxOutputTokens: 2048, }; const safetySettings = [ { category: HarmCategory.HARM_CATEGORY_HARASSMENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE }, { category: HarmCategory.HARM_CATEGORY_HATE_SPEECH, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE }, { category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE }, { category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE }, ]; chat = genAI.getGenerativeModel({ model: MODEL_NAME }) .startChat({ generationConfig, safetySettings, history: [] }); // Start with empty history console.log("Gemini Chat initialized successfully."); return true; } catch (error) { console.error("Error initializing Generative AI:", error); showError(`Failed to initialize AI: ${error.message}`); sendButton.disabled = true; userInput.disabled = true; return false; } } function addMessage(sender, message) { const messageElement = document.createElement('div'); messageElement.classList.add('message', sender === 'user' ? 'user-message' : 'ai-message'); // Basic Markdown-like formatting for **bold** and *italic* // More complex markdown would require a library message = message .replace(/\*\*(.*?)\*\*/g, '$1') // Bold .replace(/\*(.*?)\*/g, '$1'); // Italic // Handle potential code blocks (simple version) message = message.replace(/([\s\S]*?)```/g, '

$1

'); message = message.replace(/`([^`]+)`/g, '$1'); // Convert newlines to
for HTML display message = message.replace(/\n/g, '
'); messageElement.innerHTML = message; // Use innerHTML carefully chatLog.appendChild(messageElement); chatLog.scrollTop = chatLog.scrollHeight; // Scroll to the bottom } function showLoading(isLoading) { loadingIndicator.classList.toggle('hidden', !isLoading); sendButton.disabled = isLoading; userInput.disabled = isLoading; } function showError(message) { errorMessageDiv.textContent = message; errorMessageDiv.classList.remove('hidden'); // Hide error after some time setTimeout(() => { errorMessageDiv.classList.add('hidden'); errorMessageDiv.textContent = ''; }, 5000); } async function sendMessage() { const message = userInput.value.trim(); if (!message || !chat) { return; } addMessage('user', message); userInput.value = ''; // Clear input showLoading(true); errorMessageDiv.classList.add('hidden'); // Hide previous errors try { console.log("Sending message to Gemini:", message); const result = await chat.sendMessage(message); const response = await result.response; const text = response.text(); console.log("Received response from Gemini:", text); addMessage('ai', text); } catch (error) { console.error("Error sending message:", error); let displayError = `An error occurred: ${error.message}`; // Check for specific safety-related errors (structure might vary) if (error.message && error.message.includes('SAFETY')) { displayError = "The response was blocked due to safety settings."; } else if (error.message && error.message.includes('API key not valid')) { displayError = "Invalid API Key. Please check your key in the Secrets tab."; } showError(displayError); addMessage('ai', `Sorry, I encountered an error. ${displayError}`); // Add error message to chat } finally { showLoading(false); userInput.focus(); // Keep focus on input } } // --- Event Listeners --- sendButton.addEventListener('click', sendMessage); userInput.addEventListener('keypress', (event) => { // Send message on Enter key, unless Shift+Enter is pressed if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); // Prevent default newline insertion sendMessage(); } }); // --- Initialization --- if (initializeChat()) { addMessage('ai', 'Hello! How can I help you today?'); } else { addMessage('ai', 'AI initialization failed. Please check the console and ensure your API key is set correctly in the Secrets.'); } # Add your Gemini API Key as a secret named VITE_GEMINI_API_KEY # Example: VITE_GEMINI_API_KEY=AIzaSy... VITE_GEMINI_API_KEY="" After setting up your API key as a secret: 1. Run `npm install` in the terminal to install the dependencies. 2. Run `npm run dev` to start the development server. You should then be able to open the provided URL in your browser and start chatting with the Gemini AI.