สถาปัตยกรรมระบบ
เว็บนี้สร้างอย่างไร ข้อมูลมาจากไหน ค้นหาทำงานอย่างไร และ AI agent ในเบราว์เซอร์เรียกใช้เว็บเป็นเครื่องมือได้อย่างไร
- ขั้นของวงจรชีวิตลูกค้า
- 9
- หัวข้อ
- 31
- Prompt จากหนังสือ
- 620
- วลีสถานการณ์สำหรับค้นหา
- 1326
- เครื่องมือ WebMCP
- 14
ข้อมูล
แหล่งข้อมูลมี 2 ชั้น ชั้นแรกคือ data/crm.json ที่ parse จาก 500 CRM Prompts Book (9 ขั้น 25 หัวข้อ 500 prompt) บวกหัวข้อใหม่ที่เพิ่มจากการค้นคว้าปี 2026 ชั้นที่สองคือ data/knowledge/<slug>.json หัวข้อละไฟล์ เป็นผลจากการค้นคว้าเพิ่ม (ถาม-ตอบ KPI ขั้นตอน ข้อผิดพลาด Mega Prompt บริบทไทย สิ่งที่ทีมข้อมูลต้องเตรียม แหล่งอ้างอิง) ทุกหน้า render เป็น static ตอน build จึงโหลดเร็วและเปิดได้แม้ไม่มี server
ค้นหาด้วย AI ในเบราว์เซอร์
ช่องค้นหาในหน้า หัวข้อ รับ "สถานการณ์" ไม่ใช่คีย์เวิร์ด และทำงานทั้งหมดในเบราว์เซอร์ของผู้ใช้ ไม่ส่งข้อความไปที่ server ใด ๆ ประกอบด้วย 3 ชั้นที่รวมอันดับกันด้วย Reciprocal Rank Fusion:
- 1. ค้นคำแบบมีอันดับตัดคำไทยด้วย Intl.Segmenter แล้วจัดอันดับ BM25 (MiniSearch) ชื่อหัวข้อและประโยค "เมื่อทีมพูดว่า" มีน้ำหนักมากกว่าเนื้อหา
- 2. คลังวลีสถานการณ์หัวข้อละ 30–40 ประโยคที่คนมักพิมพ์เมื่อติดเรื่องนั้น (1326 วลี) ผลลัพธ์จะบอกว่า "ตรงกับ" วลีไหน
- 3. ค้นตามความหมายโมเดล embedding หลายภาษา (multilingual-e5-small ตัดคลังคำให้เหลือเฉพาะไทย/อังกฤษ ราว 35MB) รันใน Web Worker ด้วย Transformers.js โหลดเงียบ ๆ หลังหน้าเว็บนิ่ง ระหว่างโหลดยังค้นได้ตามปกติ เวกเตอร์ของหัวข้อ คำถามถาม-ตอบ และวลีทั้งหมดคำนวณไว้ล่วงหน้าตอน build
WebMCP
ทุกหน้าลงทะเบียนเครื่องมือแบบอ่านอย่างเดียว 14 ตัวผ่าน document.modelContext ตามร่างมาตรฐาน WebMCP (W3C WebML CG) เพื่อให้ AI agent ในเบราว์เซอร์ที่รองรับ เรียกใช้เว็บนี้เป็นเครื่องมือได้โดยตรง ทดสอบได้ใน Edge Canary/Dev หรือ Chrome Canary ที่เปิด flag WebMCP แล้วดูที่ DevTools → Application → WebMCP เบราว์เซอร์ทั่วไปไม่ได้รับผลกระทบ
| เครื่องมือ | รับ | คืน |
|---|---|---|
| search_topics | สถานการณ์เป็นภาษาคน | หัวข้อที่ตรง พร้อมวลีที่ตรงและ URL (ใช้ระบบค้นคำ + คลังวลีในเบราว์เซอร์) |
| search_faq | คำถาม | ถาม-ตอบที่ตรงที่สุดจากทุกหัวข้อ พร้อม Prompt ต่อยอดและ URL |
| search_kpis | ชื่อหรือความหมายของ KPI | สูตร ค่าอ้างอิง เหตุผลที่ต้องดู และหัวข้อที่มา |
| list_topics | ขั้น (ไม่บังคับ) | หัวข้อทั้งหมดพร้อมสรุปหนึ่งบรรทัด |
| get_topic | slug | สรุป อะไรเปลี่ยนไป ประโยชน์ ศัพท์ KPI ขั้นตอน ข้อผิดพลาด บริบทไทย สิ่งที่ทีมข้อมูลต้องเตรียม แหล่งอ้างอิง |
| get_faq | slug | ถาม-ตอบทุกข้อ พร้อม Prompt ต่อยอด |
| get_prompts | slug | Prompt 20 รายการจากหนังสือ + Mega Prompt |
| fill_prompt | รหัส prompt เช่น 14.3 หรือชื่อ Mega Prompt หรือข้อความ + ค่าที่จะเติม | prompt ที่เติมช่องว่างแล้ว และช่องที่ยังขาด |
| get_related_topics | slug | หัวข้อในขั้นเดียวกัน ขั้นถัดไป และหัวข้อที่เนื้อหาอ้างถึง |
| list_trends | ธีม (ไม่บังคับ) | อะไรเปลี่ยนไปปี 2025–2026 ทุกหัวข้อ พร้อมแหล่งอ้างอิง |
| list_updates | วันที่ (ไม่บังคับ) | ประวัติการอัปเดต และหัวข้อที่ค้นคว้าใหม่หลังวันนั้น |
| get_starter_path | ประเภทธุรกิจ (ไม่บังคับ) | เส้นทางเริ่มต้นสำหรับเจ้าของธุรกิจ ทีละขั้น พร้อมสิ่งที่จะเจอ สิ่งที่ควรทำ หัวข้อที่ควรอ่าน เครื่องมือที่ใช้ และ prompt |
| list_tools | หมวด ไทย/ต่างประเทศ ประเภท ขนาด แผนฟรี (ไม่บังคับ) | ซอฟต์แวร์และผู้ให้บริการ CRM ตามหมวด พร้อมเกณฑ์เลือก ราคา ข้อควรรู้ และลิงก์ที่มา |
| open_topic | slug | เปิดหน้าหัวข้อนั้นในแท็บนี้ |
แอปมือถือ
/mobile เป็นหน้าจอแยกสำหรับมือถือโดยเฉพาะ มี top bar แท็บล่าง หน้าค้นหาเต็มจอ และหน้าหัวข้อแบบแท็บ ไม่ใช่แค่ย่อหน้าเดสก์ท็อปให้พอดีจอ เมื่อเปิดหน้าเดสก์ท็อปบนจอ ≤ 760px สคริปต์เล็ก ๆ จะสลับไปหน้าแอปที่ตรงกันก่อน render และถ้าผู้ใช้เลือก "เว็บเต็ม" จะจำค่านั้นไว้ ค้นหา AI และ WebMCP ทำงานเหมือนกันทั้งสองมุมมอง
ที่ปรึกษา AI
เวอร์ชัน static นี้ปิดที่ปรึกษา AI เพราะไม่มี server สำหรับ /api/chat เมื่อ deploy แบบ Node/Docker จะเปิดให้อัตโนมัติ
โครงสร้างโค้ด
app/(site)/ หน้าแรก · topics · topics/[slug] ×31 · prompts · advisor · updates · architecture app/mobile/ แอปมือถือ: หน้าแรก · search · prompts · updates · g/[group] · t/[slug] app/api/chat/ endpoint stream คำตอบ (เฉพาะโหมด server) components/ Catalog (ค้นหา) · Faq · MegaPrompts · PromptList · Chat · WebMcp · WebMcpBadge lib/search/ tokenize · lexical (BM25 + วลี) · semantic · worker · RRF data/ crm.json · knowledge/*.json · search-phrases.json · changelog.json scripts/ build-knowledge · fetch/build search model · build-search-index · eval-search tests/ ตรวจข้อมูล + ชุดคำค้นที่ติดป้ายคำตอบ