npx create-next-app@latest ai-webapp --js --tailwind --app --no-src-dir --no-eslint

cd ai-webapp
npm install @google/generative-ai @supabase/supabase-js

code .

NEXT_PUBLIC_GEMINI_API_KEY=AIzaSy_YOUR_KEY_HERE
NEXT_PUBLIC_SUPABASE_URL=https://YOUR_PROJECT_ID.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
GEMINI_API_KEY=AIzaSy_YOUR_KEY_HERE

npm run dev

// lib/supabase.js
import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
)

// app/login/page.js
'use client'
import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { supabase } from '@/lib/supabase'

export default function LoginPage() {
  const router = useRouter()
  const [email, setEmail]       = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading]   = useState(false)
  const [error, setError]       = useState('')

  async function handleLogin(e) {
    e.preventDefault()  // ឈប់ Page Reload
    setLoading(true)
    setError('')

    const { error } = await supabase.auth.signInWithPassword({
      email,
      password
    })

    if (error) {
      setError('Email ឬ Password មិនត្រឹមត្រូវ!')
    } else {
      router.push('/dashboard')  // ទៅ Dashboard
    }
    setLoading(false)
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-900">
      <form onSubmit={handleLogin} className="bg-gray-800 p-8 rounded-2xl w-full max-w-sm">
        <h1 className="text-2xl font-bold text-white mb-6">Login</h1>

        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={e => setEmail(e.target.value)}
          className="w-full bg-gray-700 text-white px-4 py-3 rounded-xl mb-3 outline-none"
          required
        />

        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={e => setPassword(e.target.value)}
          className="w-full bg-gray-700 text-white px-4 py-3 rounded-xl mb-4 outline-none"
          required
        />

        {error && <p className="text-red-400 text-sm mb-3">{error}</p>}

        <button
          type="submit"
          disabled={loading}
          className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-xl"
        >
          {loading ? 'កំពុង Login...' : 'Login'}
        </button>
      </form>
    </div>
  )
}

// app/api/chat/route.js
import { GoogleGenerativeAI } from '@google/generative-ai'

// Initialize Gemini
const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY)

export async function POST(request) {
  try {
    // ទទួល Message ពី Frontend
    const { message, history } = await request.json()

    // Select Model
    const model = genAI.getGenerativeModel({ model: 'gemini-2.0-flash' })

    // Start Chat Session ជាមួយ History
    const chat = model.startChat({
      history: history || []  // Previous messages
    })

    // Send Message → Get Reply
    const result = await chat.sendMessage(message)
    const reply  = result.response.text()

    return Response.json({ reply })

  } catch (error) {
    console.error('Gemini Error:', error)
    return Response.json({ error: 'AI Error!' }, { status: 500 })
  }
}

// app/chat/page.js
'use client'
import { useState } from 'react'

export default function ChatPage() {
  const [messages, setMessages] = useState([])
  const [input, setInput]       = useState('')
  const [loading, setLoading]   = useState(false)

  async function sendMessage() {
    if (!input.trim() || loading) return

    const userMsg = input.trim()
    setInput('')  // Clear input

    // Add User Message to UI
    const newMessages = [...messages, { role: 'user', text: userMsg }]
    setMessages(newMessages)
    setLoading(true)

    try {
      // Build History format for Gemini
      const history = messages.map(m => ({
        role:  m.role === 'user' ? 'user' : 'model',
        parts: [{ text: m.text }]
      }))

      // Call API
      const res  = await fetch('/api/chat', {
        method:  'POST',
        headers: { 'Content-Type': 'application/json' },
        body:    JSON.stringify({ message: userMsg, history })
      })
      const data = await res.json()

      // Add AI Reply to UI
      setMessages([...newMessages, { role: 'ai', text: data.reply }])

    } catch (err) {
      setMessages([...newMessages, { role: 'ai', text: 'Error! សូម Try Again' }])
    }
    setLoading(false)
  }

  return (
    <div className="min-h-screen bg-gray-900 flex flex-col">
      <h1 className="text-white text-2xl font-bold p-4">AI Chat</h1>

      {/* Messages */}
      <div className="flex-1 overflow-y-auto p-4 space-y-3">
        {messages.map((msg, i) => (
          <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
            <div className={`max-w-xs px-4 py-2 rounded-2xl text-sm ${
              msg.role === 'user'
                ? 'bg-blue-600 text-white'
                : 'bg-gray-700 text-gray-100'
            }`}>
              {msg.text}
            </div>
          </div>
        ))}
        {loading && (
          <div className="flex justify-start">
            <div className="bg-gray-700 text-gray-400 px-4 py-2 rounded-2xl text-sm">
              AI កំពុងគិត...
            </div>
          </div>
        )}
      </div>

      {/* Input */}
      <div className="p-4 flex gap-2">
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && sendMessage()}
          placeholder="សួរ AI..."
          className="flex-1 bg-gray-700 text-white px-4 py-3 rounded-xl outline-none"
        />
        <button
          onClick={sendMessage}
          disabled={loading}
          className="bg-blue-600 text-white px-6 py-3 rounded-xl font-bold"
        >
          ផ្ញើ
        </button>
      </div>
    </div>
  )
}

-- Table Save Chat History
CREATE TABLE IF NOT EXISTS ai_chats (
  id         UUID    DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id    UUID    REFERENCES auth.users(id) ON DELETE CASCADE,
  role       TEXT    NOT NULL CHECK (role IN ('user','model')),
  message    TEXT    NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Security: User ឃើញតែ Chats ខ្លួនឯង
ALTER TABLE ai_chats ENABLE ROW LEVEL SECURITY;

CREATE POLICY "User owns chats"
  ON ai_chats FOR ALL
  USING     (auth.uid() = user_id)
  WITH CHECK (auth.uid() = user_id);

// app/api/chat/route.js — Version ដែល Save History
import { GoogleGenerativeAI } from '@google/generative-ai'
import { createClient } from '@supabase/supabase-js'

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY)

export async function POST(request) {
  const { message, history, userId } = await request.json()

  const model  = genAI.getGenerativeModel({ model: 'gemini-2.0-flash' })
  const chat   = model.startChat({ history: history || [] })
  const result = await chat.sendMessage(message)
  const reply  = result.response.text()

  // Save to Supabase (ប្រសិនបើ userId មាន)
  if (userId) {
    const supabase = createClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
    )
    // Save User Message
    await supabase.from('ai_chats').insert({ user_id: userId, role: 'user',  message })
    // Save AI Reply
    await supabase.from('ai_chats').insert({ user_id: userId, role: 'model', message: reply })
  }

  return Response.json({ reply })
}

git add .
git commit -m "update: add new feature"
git push