Groq คืออะไร? เริ่มใช้ Free Tier แล้วให้ Claude Code สร้างเว็บแชต AI [2026]

ถ้าคุณค้นคำว่า Groq เพราะเห็นคนเอาไปต่อกับ AI แล้วสงสัยว่ามันคือโมเดลใหม่ หรือเป็นเว็บแชตอีกตัว คำตอบคือไม่ใช่ทั้งสองอย่างครับ

GroqCloud คือบริการ API สำหรับให้แอปส่งคำถามไปยังโมเดล AI ที่รองรับ แล้วรับคำตอบกลับมา ส่วนหน้าตาเว็บ ข้อมูล FAQ และกติกาว่าบอตควรตอบอะไร เรายังต้องสร้างเอง

โปรเจกต์นี้เหมาะกับคนที่ไม่ได้เขียนโค้ดเป็นอาชีพ แต่อยากเห็นภาพตั้งแต่สมัคร สร้าง key ไปจนถึงเปิดเว็บแชตบนเครื่องตัวเองครับ

Groq, Claude Code และ Next.js ทำหน้าที่ต่างกันอย่างไร

ลองคิดว่าเรากำลังเปิดเคาน์เตอร์ตอบคำถามลูกค้าขนาดเล็ก

• Claude Code คือช่างที่ช่วยสร้างโปรเจกต์และเขียนโค้ดตามสเปกที่เราบอก
• Next.js คือโครงเว็บที่มีทั้งหน้าจอแชตและทางส่งคำถามไปฝั่ง server
• ไฟล์ FAQ JSON คือคู่มือคำตอบของร้าน ในตัวอย่างนี้ใช้ข้อมูลภาษาไทยที่แต่งขึ้นทั้งหมด
• GroqCloud API คือช่องทางที่โค้ดฝั่ง server ใช้ส่งบริบทและคำถามไปยังโมเดล AI
• โมเดล AI คือส่วนที่เรียบเรียงคำตอบจากข้อมูล FAQ ที่เราให้ไป

ประเด็นสำคัญคือ GroqCloud ไม่ได้รู้ข้อมูลธุรกิจของเราเองครับ ถ้าไม่ส่งข้อมูล FAQ ที่ถูกต้อง หรือไม่กำหนดกติกาเรื่องคำถามที่ไม่มีคำตอบ โมเดลก็อาจตอบกว้างเกินสิ่งที่เราต้องการได้

เราจะสร้างอะไรในคู่มือนี้

เป้าหมายคือ starter app ขนาดเล็กที่รันบนเครื่องของเราเท่านั้น มีขอบเขตดังนี้

• หน้าเว็บแชตภาษาไทยด้วย Next.js และ TypeScript
• ข้อมูล FAQ สมมติ 8 ข้อในไฟล์ JSON
• API route ฝั่ง server สำหรับเรียก GroqCloud
• ใช้ model ID openai/gpt-oss-20b เป็นค่าเริ่มต้น
• ตอบจาก FAQ ที่ส่งให้เท่านั้น
• ถ้าข้อมูลไม่พอ ให้ตอบว่า “ขออภัยครับ ยังไม่มีข้อมูลเรื่องนี้ในฐานคำถามที่ให้ไว้ กรุณาติดต่อเจ้าหน้าที่”
• ไม่มี RAG, vector database, ระบบสมาชิก หรือการ deploy

นี่เป็น demo สำหรับเรียนรู้ workflow ไม่ใช่ระบบบริการลูกค้าที่พร้อมเปิดให้ลูกค้าใช้งานจริง โค้ดตัวอย่างเปิดสาธารณะไว้ที่ GitHub: groq-claude-code-customer-faq-demo ครับ ภายในมี Prompt ที่ใช้กับ Claude Code, FAQ สมมติ, automated tests และขั้นตอนรันบนเครื่อง

ขั้นที่ 1: สมัคร GroqCloud และสร้าง API key

1. เข้า GroqCloud Console แล้วสร้างบัญชี
2. เปิดหน้า API Keys
3. สร้าง key สำหรับโปรเจกต์ทดลองนี้ แล้วคัดลอกไปเก็บใน password manager หรือพื้นที่ที่คุณควบคุมได้
4. อย่าวาง key ลงใน Prompt ของ Claude Code, source code, screenshot หรือ GitHub

Groq แนะนำให้ตั้ง API key เป็น environment variable แทนการเขียน key ลงในโค้ดโดยตรง เพราะช่วยลดความเสี่ยงที่ key จะติดไปกับ codebase ครับ

ขั้นที่ 2: ให้ Claude Code สร้างเว็บแชต FAQ

เตรียม Node.js และ Claude Code บนเครื่องให้พร้อม จากนั้นสร้างโฟลเดอร์ว่าง เปิด Terminal ในโฟลเดอร์นั้น แล้วเริ่ม Claude Code

mkdir groq-faq-chatbot
cd groq-faq-chatbot
claude

คัดลอก Prompt ด้านล่างให้ Claude Code ได้เลยครับ ที่สำคัญคือ ไม่ต้องใส่ API key จริงลงใน Prompt

ช่วยสร้าง local-only customer FAQ chatbot ตามข้อกำหนดนี้

เป้าหมาย
- สร้าง Next.js app ด้วย TypeScript และ App Router
- ใช้งานบนเครื่อง local เท่านั้น ห้าม deploy
- UI ภาษาไทย เรียบง่าย responsive และมีช่องพิมพ์คำถาม

ข้อมูล
- สร้าง data/faqs.json จำนวน 8 รายการ
- ใช้ชื่อสินค้าและนโยบายที่แต่งขึ้นทั้งหมด ห้ามอ้างว่าเป็นข้อมูลธุรกิจจริง
- แต่ละรายการมี id, category, question และ answer
- ยังไม่ใช้ RAG, vector database, database หรือ external knowledge base

Groq
- ใช้แพ็กเกจ groq-sdk ฝั่ง server เท่านั้น
- ใช้ model ID openai/gpt-oss-20b
- เรียกโมเดลจาก Next.js Route Handler ฝั่ง server เท่านั้น
- อ่าน key จาก process.env.GROQ_API_KEY
- ห้ามส่ง key ไป browser, client component, log หรือ response
- เก็บ model ID ไว้ใน config จุดเดียวเพื่อให้เปลี่ยนรุ่นได้ง่าย

กติกาการตอบ
- ส่ง FAQ ทั้งชุดเป็น context ให้โมเดล
- ตอบจาก FAQ ที่ให้เท่านั้น
- ถ้าหาคำตอบไม่ได้หรือข้อมูลไม่พอ ให้ตอบข้อความนี้ตรง ๆ:
  ขออภัยครับ ยังไม่มีข้อมูลเรื่องนี้ในฐานคำถามที่ให้ไว้ กรุณาติดต่อเจ้าหน้าที่
- ห้ามแต่งราคา นโยบาย สถานะคำสั่งซื้อ หรือข้อมูลติดต่อเพิ่มเอง

ความปลอดภัยและ UX
- สร้าง .env.example โดยใช้ค่าปลอม GROQ_API_KEY=ใส่-key-ของคุณที่นี่
- ตรวจว่า .env.local ถูก ignore โดย Git
- ห้ามอ่านหรือแสดงค่าจาก .env.local
- ปิดปุ่มส่งระหว่างรอคำตอบ และรับทีละ 1 request
- จัดการ input ว่าง, request timeout, API error และ HTTP 429 ด้วยข้อความภาษาไทยที่เข้าใจง่าย
- ไม่ต้องทำ login, analytics หรือเก็บประวัติสนทนา

การตรวจงาน
- เพิ่ม test สำหรับคำถามที่ไม่มีข้อมูลและ fallback
- รัน lint, test และ production build ให้ผ่าน
- สร้าง README อธิบายวิธีใส่ key, รัน local, ทดสอบ และเปลี่ยน model ID
- สรุปไฟล์ที่สร้าง คำสั่งที่รัน และผลตรวจจริง
- ถ้ามีขั้นตอนไหนทำไม่ได้ ให้รายงานตรง ๆ ห้ามแต่งผลทดสอบ

Prompt นี้ตั้งใจล็อกขอบเขตให้เล็กครับ เราไม่ได้ขอระบบค้นเอกสาร ไม่ได้ต่อฐานข้อมูล และไม่ได้เปิดให้ลูกค้าจริงเข้ามาใช้ เป้าหมายแรกคือทำให้เส้นทาง คำถาม → API route → GroqCloud → คำตอบจาก FAQ ทำงานก่อน

ขั้นที่ 3: ใส่ API key ฝั่ง server

เมื่อ Claude Code สร้างโปรเจกต์เสร็จ ให้คัดลอกไฟล์ .env.example เป็น .env.local แล้วเปลี่ยนเฉพาะค่าด้านหลังเครื่องหมายเท่ากับเป็น key ของคุณ

GROQ_API_KEY=ใส่-key-ของคุณที่นี่

ข้อความด้านบนเป็น placeholder ไม่ใช่ key จริงครับ หลังใส่ค่าแล้ว ให้ตรวจอีกครั้งว่า .env.local อยู่ใน .gitignore และไม่ถูก Git track

จากนั้นรันเว็บบนเครื่องตามคำสั่งใน README โดยทั่วไปจะเป็น:

npm run dev

เปิด http://localhost:3000 ใน browser แล้วลองถามคำถามจาก FAQ

ขั้นที่ 4: ทดสอบให้บอตรู้ว่าอะไรควรตอบ และอะไรไม่ควรเดา

เว็บแชตที่ตอบได้ 1 คำถามยังไม่ถือว่าผ่านครับ ผมแนะนำให้ทดสอบอย่างน้อย 5 แบบ

1. ถามตรงกับ FAQ เพื่อดูว่าคำตอบหลักถูกต้อง
2. ถามด้วยคำพูดอีกแบบ เช่น เปลี่ยน “คืนสินค้าได้ไหม” เป็น “ซื้อแล้วเปลี่ยนใจส่งคืนได้หรือเปล่า”
3. ถามเรื่องที่ไม่มีในข้อมูล เช่น ขอเช็กเลขพัสดุ เพื่อยืนยันว่าได้ข้อความ fallback แทนการเดา
4. ส่งช่องว่างหรือข้อความยาวผิดปกติ เพื่อดูว่า UI และ API route จัดการได้
5. จำลอง API error หรือ HTTP 429 เพื่อดูว่าผู้ใช้ได้รับข้อความที่เข้าใจง่ายและลองใหม่ได้ภายหลัง

Starter repo ผ่าน npm test จำนวน 16 tests, npm run lint และ npm run build แล้วครับ Automated tests ใช้ mock provider จึงไม่ยิง Groq API จริงหรือใช้ API key จริง ส่วน system prompt และ test จะตรวจข้อความ fallback ว่าตรงกับ “ไม่พบข้อมูลนี้ใน FAQ กรุณาติดต่อเจ้าหน้าที่”

นอกจากนี้ผมทดสอบ live API ด้วย model openai/gpt-oss-20b แล้ว: คำถามเรื่องเวลาเปิดร้านได้คำตอบจาก FAQ สมมติ และคำถามเรื่องเลขพัสดุได้ข้อความ fallback แทนการเดา ภาพด้านบนถ่ายจาก flow นี้ครับ หลังทดสอบควร revoke temporary key ทันที

Free tier มี limit เท่าไร

คำตอบที่ปลอดภัยคือ อย่าจำตัวเลขจากบทความครับ ให้ดูหน้า Limits ในบัญชีของคุณก่อนทดสอบทุกครั้ง

Groq แบ่ง rate limit เป็นหลายแบบ เช่น จำนวน request ต่อนาที, request ต่อวัน, token ต่อนาที และ token ต่อวัน ขีดจำกัดใช้ในระดับ organization และเราจะติด limit ทันทีที่แตะเพดานใดเพดานหนึ่งก่อน

หน้าเอกสาร rate limits ของ Groq ระบุด้วยว่าตารางสาธารณะเป็นเพียงภาพรวมและอาจมีข้อยกเว้น ตัวเลขที่ตรงกับบัญชีของคุณต้องดูในหน้า Limits ของ GroqCloud Console ดังนั้นผมจะไม่เขียนตัวเลข Free tier แบบถาวรไว้ในบทความนี้ครับ

สำหรับ demo เล็ก ๆ ให้ส่งทีละ request, ปิดปุ่มระหว่างรอ และจัดการ HTTP 429 อย่างสุภาพก็พอ ถ้าจะเปิดให้หลายคนใช้พร้อมกัน ค่อยประเมิน usage และแผนบริการใหม่

ราคาและการอัปเกรดต้องดูอะไร

Groq มี Free tier สำหรับเริ่มทดลอง ส่วนราคาแบบชำระเงินคิดตามโมเดลและปริมาณ input/output ที่ใช้ ราคาเปลี่ยนได้ จึงควรดูหน้า Groq Pricing ก่อนตัดสินใจทุกครั้ง

หากอัปเกรดจาก Free tier เป็น Developer tier เอกสาร Billing FAQs ระบุว่าต้องเพิ่ม payment method และเป็นการใช้งานแบบคิดตาม usage ครับ สำหรับงานทดลองในบทความนี้ยังไม่จำเป็นต้องอัปเกรด

Model ID เปลี่ยนได้ อย่าฝังไว้หลายจุด

อีกเรื่องที่มือใหม่มักพลาดคือคิดว่าชื่อโมเดลจะอยู่เหมือนเดิมตลอด

Groq แยกโมเดลเป็น Production และ Preview โดย Preview มีไว้ประเมินและอาจหยุดให้บริการได้โดยแจ้งล่วงหน้าไม่นาน ส่วนเมื่อโมเดลถูก deprecate จะมีวัน shutdown และรุ่นที่แนะนำให้ย้ายไปใช้ แอปที่ผูกกับ model ID เก่าจึงอาจต้องแก้เป็นครั้งคราว

ณ วันที่ตรวจข้อมูลบทความนี้ ผมเลือก openai/gpt-oss-20b เพราะปรากฏในตัวอย่างหน้า Overview และอยู่ในรายการ Production Models แต่ก่อนเริ่มทำจริง ให้เปิดหน้า Models และ Deprecations เช็กอีกครั้งเสมอครับ

ทำไม demo นี้ยังไม่ใช่ระบบบริการลูกค้าจริง

การมีช่องแชตที่ตอบ FAQ ได้ เป็นเพียงชิ้นแรกครับ ระบบที่ใช้กับลูกค้าจริงยังมีคำถามอีกเยอะ เช่น

• ข้อความจากเว็บ, LINE และ Facebook จะเข้ากล่องเดียวกันอย่างไร
• จะรู้ได้อย่างไรว่าคนที่คุยอยู่เป็นลูกค้าคนเดิมใน CRM
• ใครแก้ Knowledge Base ได้ และใครต้องอนุมัติ
• เมื่อ AI ไม่แน่ใจ จะส่งต่อให้ทีมไหน
• พนักงานแต่ละคนเห็นข้อมูลลูกค้าได้แค่ไหน
• จะเก็บประวัติ, log และตรวจคำตอบย้อนหลังอย่างไร

ถ้าคุณต้องการเรียนรู้ ผมแนะนำให้สร้าง demo นี้ครับ เพราะจะทำให้เข้าใจ API key, server route, model และ rate limit แบบจับต้องได้

แต่ถ้าเป้าหมายคือเอาไปใช้กับงานขายและบริการลูกค้าจริง โดยไม่อยากสร้าง inbox, CRM, LINE, Facebook, Knowledge Base และสิทธิ์ทีมเองทั้งหมด ลอง คุยกับ Data-Espresso เรื่อง CustomerOS ได้ครับ เราจะเริ่มจาก workflow ที่ธุรกิจต้องใช้จริง ไม่ได้เริ่มจากการเพิ่ม chatbot อีกหนึ่งตัว

คำถามที่พบบ่อยเกี่ยวกับ Groq

Groq คือโมเดล AI หรือไม่

ไม่ใช่โมเดลตัวเดียวครับ GroqCloud เป็นบริการ API ที่รองรับโมเดลหลายรายการ แอปของเราต้องระบุ model ID ที่ต้องการใช้

GroqCloud Free tier ใช้ได้ฟรีตลอดไปไหม

เอกสารมี Free plan สำหรับเริ่มใช้งาน แต่ไม่ควรตีความว่าเงื่อนไขและ limit จะคงเดิมตลอดครับ ให้ตรวจหน้า Limits, Pricing และ Billing ในบัญชีก่อนใช้งานจริง

ต้องใส่บัตรเพื่อทำตามบทความนี้ไหม

บทความนี้ตั้งใจใช้ Free tier และไม่ต้องอัปเกรดเป็น Developer tier ครับ หากคุณเลือกอัปเกรด เอกสาร Groq ระบุว่าต้องเพิ่ม payment method ก่อน

ใส่ GROQ_API_KEY ใน JavaScript ฝั่ง browser ได้ไหม

ไม่ควรครับ ให้ browser ส่งคำถามเข้า Next.js API route แล้วให้ server เป็นฝ่ายอ่าน environment variable และเรียก GroqCloud ถ้า key หลุดใน source code, screenshot หรือ repository ให้ยกเลิก key เดิมและสร้างใหม่

Claude Code กับ Groq ทำหน้าที่เหมือนกันไหม

ไม่เหมือนกันครับ ใน workflow นี้ Claude Code ช่วยสร้างและตรวจโค้ด ส่วนเว็บที่รันเสร็จแล้วเรียกโมเดลผ่าน GroqCloud API

ทำไมไม่ใช้ RAG ตั้งแต่แรก

เพราะตัวอย่างมี FAQ เพียงไม่กี่ข้อ การส่งข้อมูลสมมติทั้งชุดเป็น context ทำให้เห็น flow ได้ง่ายกว่า เมื่อข้อมูลโตขึ้น ค่อยประเมินระบบค้นคืนเอกสาร, การจัดเวอร์ชัน Knowledge Base และสิทธิ์เข้าถึงอีกครั้ง

ถ้าโมเดลถูกยกเลิกต้องทำอย่างไร

เปิดหน้า Models และ Deprecations ดู replacement ที่ Groq แนะนำ เปลี่ยน model ID ใน config แล้วรันชุดทดสอบเดิมซ้ำก่อนใช้งานครับ

เว็บตัวอย่างนี้พร้อมให้ลูกค้าใช้แล้วหรือยัง

ยังครับ ขอบเขตในบทความเป็น local demo ใช้ FAQ สมมติ ไม่มี deployment, login, CRM, inbox หลายช่องทาง, team permissions หรือระบบส่งต่อเจ้าหน้าที่

สรุป

Groq ทำให้เราเรียกโมเดล AI ผ่าน API ได้ แต่ API อย่างเดียวไม่ได้กลายเป็นระบบบริการลูกค้าโดยอัตโนมัติครับ เรายังต้องออกแบบข้อมูล กติกาคำตอบ ความปลอดภัย การรับมือ rate limit และทางส่งต่อให้คน

ถ้าอยากเริ่มแบบไม่หลง ผมแนะนำเส้นทางนี้: สร้าง key, ให้ Claude Code ทำ Next.js local demo, เก็บ key ฝั่ง server, ใช้ FAQ สมมติ, บังคับ unknown-answer fallback แล้วทดสอบจากผลจริง

เริ่มเล็กให้ flow ถูกก่อนครับ แล้วค่อยตัดสินใจว่าจะสร้างระบบงานทั้งหมดเอง หรือใช้ CustomerOS มาช่วยเชื่อมงานลูกค้าให้เป็นระบบเดียว

แหล่งข้อมูลทางการจาก Groq

• Groq Docs: Overview
• Groq Docs: Quickstart
• Groq Docs: Supported Models
• Groq Docs: Rate Limits
• Groq Docs: Model Deprecation
• Groq Pricing
• Groq Docs: Billing FAQs