๐ŸŒ

Public AI Chat with Auth

๐Ÿ‘จโ€๐Ÿณ Chefโฑ๏ธ 45 minutes

๐Ÿ“‹ Suggested prerequisites

  • โ€ขAI Chat with web interface
  • โ€ขFirebase Auth

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

FileFunction
app/api/chat/route.tsCalls AI API
lib/firebase.tsFirebase config
components/ChatUI.tsxChat interface
hooks/useAuth.tsAuth 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.


Next step

โ†’ Blog with Next.js + MDX