AI Closing Cost Calculator with Gemini API (Web Version)
Core Concept
We’ll build a web-based closing cost calculator that uses Gemini API directly in the browser to:
-
Calculate standard closing costs
-
Explain each cost component in simple terms
-
Provide personalized tips
What You Need
-
Google API key (free tier available)
-
Basic HTML/JavaScript knowledge
-
Web hosting (even GitHub Pages works)
Implementation Steps
1. Basic HTML Structure
<!DOCTYPE html> <html> <head> <title>AI Closing Cost Calculator</title> <style> body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; } .calculator { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .results { margin-top: 30px; border-top: 1px solid #ccc; padding-top: 20px; } .cost-item { cursor: pointer; padding: 8px; margin: 5px 0; border-radius: 4px; } .cost-item:hover { background-color: #f0f0f0; } #ai-response { margin-top: 20px; padding: 15px; background: #f8f8f8; border-radius: 5px; } </style> </head> <body> <h1>Smart Closing Cost Calculator</h1> <div class="calculator"> <div> <h3>Enter Property Details</h3> <label>Home Price ($):</label> <input type="number" id="homePrice" value="300000"> <label>Loan Amount ($):</label> <input type="number" id="loanAmount" value="240000"> <label>State:</label> <select id="state"> <option value="CA">California</option> <option value="TX">Texas</option> <option value="FL">Florida</option> <option value="NY">New York</option> </select> <button onclick="calculateCosts()">Calculate</button> </div> <div> <h3>Additional Options</h3> <label>Are you a first-time homebuyer?</label> <select id="experience"> <option value="first-time">Yes, first-time</option> <option value="experienced">No, experienced</option> </select> <label>Loan Type:</label> <select id="loanType"> <option value="conventional">Conventional</option> <option value="FHA">FHA</option> <option value="VA">VA</option> </select> </div> </div> <div class="results" id="results" style="display:none;"> <h2>Estimated Closing Costs</h2> <div id="costBreakdown"></div> <div id="ai-response"></div> </div> <!-- Load Gemini API --> <script src="https://www.gstatic.com/generative-ai-web/gemini-web-v1.js"></script> <script src="app.js"></script> </body> </html>
2. JavaScript (app.js)
// Initialize Gemini const genAI = new GeminiWeb('YOUR_API_KEY'); // Basic cost calculations function calculateBaseCosts() { const homePrice = parseFloat(document.getElementById('homePrice').value); const loanAmount = parseFloat(document.getElementById('loanAmount').value); const state = document.getElementById('state').value; return { lenderFees: loanAmount * 0.01, // 1% appraisal: 500, // Flat fee titleInsurance: homePrice * 0.002, // 0.2% escrow: homePrice * 0.002, recordingFees: state === 'CA' ? 150 : 100, // Varies by state transferTax: calculateTransferTax(state, homePrice), total: function() { return this.lenderFees + this.appraisal + this.titleInsurance + this.escrow + this.recordingFees + this.transferTax; } }; } function calculateTransferTax(state, price) { const rates = { 'CA': 0.0011, 'TX': 0.0015, 'FL': 0.0007, 'NY': 0.004 }; return price * (rates[state] || 0.001); } // Display results function displayResults(costs) { const breakdown = document.getElementById('costBreakdown'); breakdown.innerHTML = ''; for (const [key, value] of Object.entries(costs)) { if (typeof value !== 'function') { const item = document.createElement('div'); item.className = 'cost-item'; item.innerHTML = `<strong>${formatName(key)}:</strong> $${value.toFixed(2)}`; item.onclick = () => explainCost(key); breakdown.appendChild(item); } } const total = document.createElement('div'); total.className = 'cost-item total'; total.innerHTML = `<strong>TOTAL ESTIMATED COSTS:</strong> $${costs.total().toFixed(2)}`; breakdown.appendChild(total); document.getElementById('results').style.display = 'block'; explainContext(); } function formatName(key) { return key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase()); } // Main calculation function function calculateCosts() { const costs = calculateBaseCosts(); displayResults(costs); } // AI Explanation Functions async function explainCost(costItem) { const homePrice = document.getElementById('homePrice').value; const state = document.getElementById('state').value; const experience = document.getElementById('experience').value; const prompt = `Explain ${costItem} in home closing to ${experience} buyer in ${state} for $${homePrice} home. Keep it under 3 sentences. Include if negotiable and typical range.`; const response = await genAI.generateText(prompt); document.getElementById('ai-response').innerHTML = `<h3>About ${formatName(costItem)}</h3><p>${response}</p>`; } async function explainContext() { const inputs = { price: document.getElementById('homePrice').value, loan: document.getElementById('loanAmount').value, state: document.getElementById('state').value, type: document.getElementById('loanType').value, experience: document.getElementById('experience').value }; const prompt = `Give 2-3 brief tips for ${inputs.experience} buyer getting ${inputs.type} loan in ${inputs.state} for $${inputs.price} home with $${inputs.loan} loan. Focus on closing cost savings.`; const response = await genAI.generateText(prompt); document.getElementById('ai-response').innerHTML += `<h3>Personalized Tips</h3><p>${response}</p>`; }
How It Works
-
User Inputs:
-
Home price, loan amount, location, and loan type
-
Experience level (first-time vs experienced buyer)
-
-
Basic Calculations:
-
Standard formulas for common closing costs
-
State-specific adjustments
-
-
AI Enhancements:
-
Click any cost item for instant explanation
-
Automatic personalized tips based on inputs
-
All explanations generated by Gemini in real-time
-
Deployment
-
Get a Gemini API key from Google AI Studio
-
Replace
YOUR_API_KEY
in the JavaScript -
Upload both files to any web hosting:
-
GitHub Pages
-
Netlify
-
Vercel
-
Traditional web host
-
Advanced Add-Ons (Optional)
-
Save/Load Scenarios:
function saveScenario() { const inputs = { /* collect form values */ }; localStorage.setItem('lastScenario', JSON.stringify(inputs)); }
-
More Detailed Calculations:
function calculateLoanTypeAdjustments(baseCosts) { const type = document.getElementById('loanType').value; if (type === 'FHA') baseCosts.lenderFees *= 1.5; if (type === 'VA') baseCosts.lenderFees *= 0.8; }
-
Market Data Comparison:
async function getLocalAverages() { const prompt = `Give average ${document.getElementById('state').value} closing costs for ${ document.getElementById('homePrice').value} home as bullet points`; // Call Gemini... }