Overview
Legal AI คือ POC ระบบค้นคว้ากฎหมายไทยที่ใช้ RAG (Retrieval-Augmented Generation) ดึงเนื้อหามาตราจริงจาก Database มาเป็น context ให้ AI ตอบ — ไม่ใช่แค่ generate จากความรู้ทั่วไป แต่อ้างอิงกฎหมายจริงที่ scrape มาจากสำนักงานคณะกรรมการกฤษฎีกา (OCS)
Design Thinking Process
ทำไมทนายความถึงต้องการเครื่องมือแบบนี้
ทนายความกับการค้นคว้ากฎหมาย — ปัญหาที่ซ่อนอยู่
ทนายความไทยต้องค้นกฎหมาย 84,000+ มาตรา จากหลายพ.ร.บ. เพื่อเตรียมคดีหนึ่งคดี การค้นหาแบบเดิมใช้ keyword search บนเว็บ OCS ซึ่งต้องรู้ชื่อพ.ร.บ.ที่แน่นอน หรือเลข "มาตรา" ที่ต้องการ — ถ้าไม่รู้ก็หาไม่เจอ
"ถ้า AI ตอบกฎหมายผิด อาจทำให้แพ้คดี"
ChatGPT ตอบกฎหมายได้ แต่มักอ้างมาตราผิด หรือ hallucinate กฎหมายที่ไม่มีอยู่จริง ซึ่งอันตรายมากสำหรับงานทนายความ — ต้องการระบบที่ อ้างอิงกฎหมายจริง ที่ตรวจสอบได้
RAG — ให้ AI อ้างอิงจากฐานข้อมูลจริง
ใช้ RAG (Retrieval-Augmented Generation) แทนการให้ AI ตอบจากความรู้ทั่วไป:
• Scrape กฎหมาย 1,811 ฉบับ 84,376 มาตราจาก OCS
• Full-text search + Vector search (pgvector) หามาตราที่เกี่ยวข้อง
• ส่งเนื้อมาตราจริงเป็น context ให้ GPT-4o
• สั่งให้ AI อ้างอิงเฉพาะมาตราที่ปรากฏใน context เท่านั้น
3-Panel Layout — Chat + Citations + Law Viewer
ออกแบบ Chat Page เป็น 3 ส่วน: Sidebar (ประวัติแชท), Chat Area (ถาม-ตอบ AI พร้อม Citation Cards), Law Viewer Panel (ดูเนื้อกฎหมายจริง) — กด Citation Card แล้วเปิดดูเนื้อกฎหมายจริงได้ทันทีโดยไม่ต้องออกจากหน้าแชท
Comparison Testing — Legal AI vs Gemini Pro
ใช้ Playwright ทดสอบ 5 คำถามกฎหมายเปรียบเทียบ Legal AI กับ Gemini Pro:
• Legal AI: Structured output (citations + summary) ดีกว่า — เห็นมาตราอ้างอิงชัดเจน
• Gemini: เนื้อหาละเอียดกว่า ครบกว่า
• Next: เพิ่ม Vector Search เพื่อดึงมาตราที่เกี่ยวข้องได้แม่นยำขึ้น
Chat Interface
ถามเป็นภาษาคน — ได้คำตอบพร้อม Citation Cards ที่กดดูกฎหมายจริงได้
Key Features
ฟีเจอร์หลักที่ออกแบบมาเพื่อทนายความ
RAG Architecture
ระบบ Retrieval-Augmented Generation ที่ทำให้ AI อ้างอิงกฎหมายจริง
hybrid_searchDatabase Schema
Supabase (PostgreSQL) + pgvector + Row Level Security
| Table | Rows | Description |
|---|---|---|
| law_sections | 84,376 | เนื้อหารายมาตรา (deduplicated) + vector embeddings |
| laws | 1,811 | กฎหมายจาก OCS ครบ 5 หมวด |
| conversations | dynamic | แชทของ user (RLS: user-only) |
| messages | dynamic | ข้อความ user + ai + citations (RLS: user-only) |
| releases | 1 | Release notes (public read) |
| system_stats | 4 | ตัวเลข stats หน้าแรก |
Prompt Engineering
ปรับ prompt ถึง v13 เพื่อให้ AI ตอบแม่นยำสำหรับทนายความ
const promptRules = {
verification: "ONLY cite sections that APPEAR in DB context",
lawNames: "Use EXACT law name from database",
audience: "User is a lawyer - don't suggest 'consult a lawyer'",
format: "400-600 words, ## headings, warnings, follow-up",
model: "GPT-4o primary, GPT-4o-mini fallback",
};
⚖ Comparison: Legal AI vs Gemini Pro (5 Questions)
OCS Scraper
ดึงข้อมูลกฎหมายจากสำนักงานคณะกรรมการกฤษฎีกา
for (const law of laws) {
const doc = await fetch(`OCS_API/getLawDoc?id=${law.id}`);
const sections = parseSections(doc);
await supabase.from('law_sections')
.upsert(sections, { onConflict: 'law_id,section_number' });
}
// Result: 1,811 laws, 84,376 sections (deduplicated)
Development Timeline
สร้างจาก 0 ถึง production-ready POC
Project Structure
Frontend (React 19 + Vite) + Backend (Supabase Edge Functions)
├── App.tsx // Routes + ProtectedRoute
├── pages/
│ ├── LandingPage.tsx // Hero + stats + login
│ ├── ChatPage.tsx // 3-panel chat interface
│ └── ReleasesPage.tsx // Release notes
├── components/
│ ├── chat/
│ │ ├── ChatSidebar.tsx // History grouped by date
│ │ ├── ChatMessage.tsx // Markdown + citations
│ │ ├── CitationCard.tsx // Color-coded law refs
│ │ └── LawViewer.tsx // Real law content panel
│ └── landing/ // Landing page sections
├── lib/
│ ├── supabase.ts // Client init
│ └── api.ts // All CRUD functions
supabase/
├── migrations/001-006 // Schema + pgvector
└── functions/chat/ // Edge Function v13
scripts/
├── scrape-ocs.ts // Law list from OCS API
├── scrape-sections.ts // 84K sections via getLawDoc
└── generate-embeddings.ts // pgvector embeddings
Lessons Learned
สิ่งที่ได้เรียนรู้จากการสร้าง Legal AI
