What you'll build
An AI assistant accessible from the internet, where anyone can create an account with Google, chat with the AI, and view their conversation history. You'll implement authentication with Firebase, daily usage limits per user (10 free messages), conversation persistence in Firestore, and a ChatGPT-style interface. When finished, you'll have an app deployed on Vercel that you can share with friends or use as a foundation for your own SaaS product.
Architecture
User → Firebase Auth → Your Next.js app
↓
AI API (Gemini/Claude)
↓
History in DB
Step 1: Ask an AI for the complete app
I need a public AI chat app with:
- Next.js App Router
- Firebase Auth (Google login)
- Limit of 10 messages/day for free users
- Conversation history in Firestore
- ChatGPT-like UI
- API route calling Gemini
- TypeScript and Tailwind CSS
Give me the file structure and complete code.
Key components
| File | Function |
|---|---|
app/api/chat/route.ts | Calls AI API |
lib/firebase.ts | Firebase config |
components/ChatUI.tsx | Chat interface |
hooks/useAuth.ts | Auth hook |
Rate limiting
async function checkRateLimit(userId: string): Promise<boolean> {
const today = new Date().toISOString().split('T')[0]
const ref = doc(db, 'usage', `${userId}_${today}`)
const snap = await getDoc(ref)
if (!snap.exists()) {
await setDoc(ref, { count: 1 })
return true
}
const { count } = snap.data()
if (count >= 10) return false
await updateDoc(ref, { count: count + 1 })
return true
}
Deploy
Vercel + Firebase = free to start.