SEO Content AI Generator

import React, { useState, useCallback } from ‘react’;import { Loader2, Zap, Search, MessageSquare, BookOpen, AlertTriangle } from ‘lucide-react’;// API Configurationconst MODEL_NAME = ‘gemini-2.5-flash-preview-09-2025’;const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/{MODEL_NAME}:generateContent`;const MAX_RETRIES = 5;const apiKey = “”; // Canvas environment will provide the key if necessaryconst fetchWithBackoff = async (url, options, retries = 0) => { try { const response = await fetch(url, options); if (response.status === 429 && retries < MAX_RETRIES) { const delay = Math.pow(2, retries) * 1000 + Math.random() * 1000; // console.warn(`Rate limit hit (429). Retrying in {delay / 1000}s… (Attempt {retries + 1})`); await new Promise(resolve => setTimeout(resolve, delay)); return fetchWithBackoff(url, options, retries + 1); } if (!response.ok) { throw new Error(`API call failed with status: {response.status}`); } return response; } catch (error) { if (retries < MAX_RETRIES) { const delay = Math.pow(2, retries) * 1000 + Math.random() * 1000; // console.error(`Fetch error: {error.message}. Retrying in {delay / 1000}s… (Attempt {retries + 1})`); await new Promise(resolve => setTimeout(resolve, delay)); return fetchWithBackoff(url, options, retries + 1); } throw new Error(`Failed to fetch content after {MAX_RETRIES} retries.`); }};const App = () => { const [userQuery, setUserQuery] = useState(”); const [systemInstruction, setSystemInstruction] = useState(‘Act as a world-class content expert specializing in local business SEO. Your response must be highly engaging, provide objective analysis, and be formatted in detailed Markdown for a web page.’); const [useGrounding, setUseGrounding] = useState(true); const [response, setResponse] = useState(null); const [sources, setSources] = useState([]); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const generateContent = useCallback(async () => { if (!userQuery.trim()) { setError(‘Please enter a query.’); return; } setIsLoading(true); setResponse(null); setSources([]); setError(null); const payload = { contents: [{ parts: [{ text: userQuery }] }], systemInstruction: { parts: [{ text: systemInstruction }] }, }; // Add Google Search grounding tool if enabled if (useGrounding) { payload.tools = [{ “google_search”: {} }]; } const options = { method: ‘POST’, headers: { ‘Content-Type’: ‘application/json’ }, body: JSON.stringify(payload) }; try { const fullApiUrl = apiKey ? `{API_URL}?key={apiKey}` : API_URL; const apiResponse = await fetchWithBackoff(fullApiUrl, options); const result = await apiResponse.json(); const candidate = result.candidates?.[0]; if (candidate && candidate.content?.parts?.[0]?.text) { const generatedText = candidate.content.parts[0].text; setResponse(generatedText); // Extract grounding sources let extractedSources = []; const groundingMetadata = candidate.groundingMetadata; if (groundingMetadata && groundingMetadata.groundingAttributions) { extractedSources = groundingMetadata.groundingAttributions .map(attribution => ({ uri: attribution.web?.uri, title: attribution.web?.title, })) .filter(source => source.uri && source.title); // Ensure sources are valid } setSources(extractedSources); } else { setError(‘Generation failed or returned an empty response.’); console.error(“API Response Error:”, result); } } catch (err) { setError(err.message || ‘An unexpected error occurred during content generation.’); } finally { setIsLoading(false); } }, [userQuery, systemInstruction, useGrounding]); return (

                                {response}                            

);};export default App;