ການເຊື່ອມຕໍ່ AI ເຂົ້າໃນ Next.js Web Applications ດ້ວຍ Vercel AI SDK

ໃນຍຸກປະຈຸບັນ, ການສ້າງແອັບພລິເຄຊັນເວັບໃຫ້ມີຄວາມສະຫຼາດ (Smart Web Apps) ບໍ່ແມ່ນເລື່ອງທີ່ໄກຕົວອີກຕໍ່ໄປ. ລອງນຶກພາບເບິ່ງວ່າ ຖ້າທ່ານກຳລັງສ້າງເວັບໄຊອີຄອມເມີຊ (E-commerce) ຂາຍກາເຟປາກຊ່ອງ ຫຼື ເວັບໄຊແນະນຳການທ່ອງທ່ຽວໃນນະຄອນຫຼວງວຽງຈັນ, ມັນຈະດີສໍ່າໃດຖ້າເວັບໄຊຂອງທ່ານມີ AI Chatbot ທີ່ສາມາດຕອບຄຳຖາມລູກຄ້າໄດ້ແບບສົດໆ (Real-time).

ໜຶ່ງໃນສິ່ງທ້າທາຍສຳລັບນັກພັດທະນາ (Developers) ຄືການເຮັດໃຫ້ AI ຕອບກັບແບບ “Streaming” (ຄືກັນກັບຕອນທີ່ເຮົາໃຊ້ ChatGPT ທີ່ຕົວໜັງສືຄ່ອຍໆພິມອອກມາ) ເພື່ອບໍ່ໃຫ້ຜູ້ໃຊ້ຕ້ອງລໍຖ້າດົນ. ໃນບົດຄວາມນີ້, ເຮົາຈະມາຮຽນຮູ້ວິທີການນຳໃຊ້ Next.js ຮ່ວມກັບ Vercel AI SDK ເພື່ອສ້າງຟັງຊັນ Text Generation ແບບ Streaming ໄປສະແດງຜົນຢູ່ໜ້າ Frontend ແບບງ່າຍໆ ແລະ ມີປະສິດທິພາບ.

ກຽມຄວາມພ້ອມກ່ອນເລີ່ມຕົ້ນ (Prerequisites)

ເນື່ອງຈາກບົດຄວາມນີ້ຢູ່ໃນລະດັບປານກາງ (Intermediate), ທ່ານຄວນມີພື້ນຖານດັ່ງນີ້:

• ຄວາມເຂົ້າໃຈພື້ນຖານກ່ຽວກັບ React ແລະ Next.js (App Router).
• ໄດ້ຕິດຕັ້ງ Node.js ລຸ້ນລ່າສຸດໄວ້ໃນເຄື່ອງ.
• ມີ OpenAI API Key (ຫຼື ສາມາດໃຊ້ Model ອື່ນໆເຊັ່ນ: Anthropic, Google Gemini ທີ່ຮອງຮັບໂດຍ AI SDK).

ຂັ້ນຕອນທີ 1: ສ້າງໂປຣເຈັກ ແລະ ຕິດຕັ້ງ Packages

ເລີ່ມຕົ້ນດ້ວຍການສ້າງໂປຣເຈັກ Next.js ໃໝ່ ແລະ ຕິດຕັ້ງ Vercel AI SDK ເຊິ່ງປະກອບມີຕົວ Core SDK (ai) ແລະ ຕົວເຊື່ອມຕໍ່ກັບ OpenAI (@ai-sdk/openai).

npx create-next-app@latest lao-ai-assistant
cd lao-ai-assistant
npm install ai @ai-sdk/openai

ຫຼັງຈາກນັ້ນ, ໃຫ້ສ້າງໄຟລ໌ .env.local ຢູ່ຮາກ (Root) ຂອງໂປຣເຈັກ ເພື່ອເກັບ API Key ຂອງທ່ານ:

OPENAI_API_KEY=your_openai_api_key_here

ຂັ້ນຕອນທີ 2: ສ້າງ Backend API Route ສຳລັບສົນທະນາ

ໃນ Next.js App Router, ເຮົາຈະສ້າງ Route Handler ເພື່ອຮັບຂໍ້ຄວາມຈາກຜູ້ໃຊ້ ແລະ ສົ່ງໄປຫາ OpenAI, ຈາກນັ້ນຈຶ່ງ Stream ຜົນລັບກັບຄືນມາ.

ໃຫ້ສ້າງໄຟລ໌ app/api/chat/route.ts ແລ້ວໃສ່ໂຄດດັ່ງລຸ່ມນີ້:

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

// ກຳນົດເວລາສູງສຸດໃຫ້ API ເຮັດວຽກ (ເປັນວິນາທີ)
export const maxDuration = 30;

export async function POST(req: Request) {
  // ຮັບເອົາ array ຂອງ messages ຈາກ Frontend
  const { messages } = await req.json();

  // ເອີ້ນໃຊ້ streamText ເພື່ອສ້າງ Streaming response
  const result = await streamText({
    model: openai('gpt-4o'),
    system: 'ເຈົ້າເປັນຜູ້ຊ່ວຍ AI ທີ່ຊ່ຽວຊານດ້ານການທ່ອງທ່ຽວໃນປະເທດລາວ ເຊັ່ນ: ນະຄອນຫຼວງວຽງຈັນ, ຫຼວງພະບາງ ແລະ ປາກເຊ. ໃຫ້ຕອບເປັນພາສາລາວທີ່ສຸພາບ ແລະ ເປັນທຳມະຊາດທີ່ສຸດ.',
    messages,
  });

  // ສົ່ງຂໍ້ມູນທີ່ຖືກ Stream ກັບຄືນໄປຫາ Frontend
  return result.toDataStreamResponse();
}

ສິ່ງທີ່ເກີດຂຶ້ນໃນໂຄດນີ້:

• ເຮົາໃຊ້ streamText ເຊິ່ງເປັນຟັງຊັນຫຼັກຂອງ Vercel AI SDK ໃນການຈັດການກັບຂໍ້ມູນແບບ Stream.
• ເຮົາໄດ້ເພີ່ມ system prompt ເພື່ອໃຫ້ AI ເຂົ້າໃຈບໍລິບົດຂອງລາວ (Lao Context) ໂດຍກຳນົດໃຫ້ມັນເປັນຜູ້ຊ່ວຍດ້ານການທ່ອງທ່ຽວລາວ.

ຂັ້ນຕອນທີ 3: ເຊື່ອມຕໍ່ Frontend ດ້ວຍ useChat Hook

ດຽວນີ້ ເຮົາມາເຮັດໜ້າສາທິດ (UI) ທີ່ໃຫ້ຜູ້ໃຊ້ພິມຖາມ-ຕອບໄດ້. Vercel AI SDK ໄດ້ກຽມ React Hook ທີ່ຊື່ວ່າ useChat ມາໃຫ້ແລ້ວ, ເຊິ່ງມັນຈະຈັດການເລື່ອງ State ຂອງຂໍ້ຄວາມ ແລະ ການຮັບຂໍ້ມູນ Streaming ໃຫ້ເຮົາອັດຕະໂນມັດ.

ເຂົ້າໄປແກ້ໄຂໄຟລ໌ app/page.tsx:

'use client';

import { useChat } from 'ai/react';

export default function ChatPage() {
  // useChat ຈະເຊື່ອມຕໍ່ໄປຫາ /api/chat ໂດຍອັດຕະໂນມັດ
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      <h1 className="text-2xl font-bold mb-6 text-center text-blue-600">
        AI ຜູ້ຊ່ວຍທ່ອງທ່ຽວລາວ 🇱🇦
      </h1>

      <div className="flex-1 overflow-y-auto mb-8">
        {messages.map(m => (
          <div key={m.id} className={`mb-4 p-4 rounded-lg flex flex-col ${m.role === 'user' ? 'bg-gray-100 items-end' : 'bg-blue-50 items-start'}`}>
            <span className="text-xs text-gray-500 mb-1">
              {m.role === 'user' ? 'ນັກທ່ອງທ່ຽວ' : 'ຜູ້ຊ່ວຍ AI'}
            </span>
            <span className="whitespace-pre-wrap">{m.content}</span>
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit} className="fixed bottom-0 w-full max-w-md p-2 mb-8 bg-white">
        <input
          className="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          value={input}
          placeholder="ຖາມກ່ຽວກັບສະຖານທີ່ໃນລາວ ເຊັ່ນ: ວັດຊຽງທອງ..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

ເປັນຫຍັງ useChat ຈຶ່ງສະດວກສະບາຍ?

ປົກກະຕິແລ້ວຖ້າເຮົາຕ້ອງຂຽນລະບົບ Streaming ເອງ, ເຮົາຈະຕ້ອງຈັດການກັບ Web Streams API, ອ່ານຂໍ້ມູນເທື່ອລະ Chunk ແລ້ວມາຕໍ່ກັນ (Concatenate) ໃສ່ State ຂອງ React. ມັນຫຍຸ້ງຍາກຫຼາຍ! ແຕ່ useChat hook ຈັດການທຸກຢ່າງນີ້ໃຫ້ເຮົາພາຍໃຕ້ສະຖາປັດຕະຍະກຳທີ່ຊັບຊ້ອນ, ເຮັດໃຫ້ນັກພັດທະນາສາມາດໂຟກັສໄປທີ່ການສ້າງ UI ທີ່ສວຍງາມ ແລະ ຕອບໂຈດຜູ້ໃຊ້ໄດ້ເລີຍ.

Key Takeaways (ຂັ້ນຕອນສຳຄັນທີ່ຄວນຈື່)

• Vercel AI SDK: ເປັນເຄື່ອງມືທີ່ຊ່ວຍໃຫ້ນັກພັດທະນາເຊື່ອມຕໍ່ LLMs ເຂົ້າກັບແອັບພລິເຄຊັນໄດ້ງ່າຍຂຶ້ນ ໂດຍສະເພາະການເຮັດ Streaming data.
• streamText Function: ໃຊ້ໃນຝັ່ງ Backend ປະສົມປະສານກັບ Provider ເຊັ່ນ OpenAI ເພື່ອສົ່ງຂໍ້ມູນກັບຄືນຫາ Client ແບບ Real-time.
• useChat Hook: ເປັນພະເອກໃນຝັ່ງ Frontend ທີ່ຊ່ວຍຈັດການ State ຂອງຂໍ້ຄວາມສົນທະນາ ແລະ ການເຊື່ອມຕໍ່ API ໃຫ້ອັດຕະໂນມັດ ໂດຍບໍ່ຕ້ອງອອກແຮງຂຽນກົນໄກ Streaming ເອງ.
• Context ຂອງທຸລະກິດ: ຢ່າລືມຕັ້ງຄ່າ System Prompt ເພື່ອໃຫ້ AI ຕອບຄຳຖາມກົງກັບທຸລະກິດຂອງທ່ານເຊັ່ນ: ການຂາຍເຄື່ອງອອນລາຍ, ຮ້ານອາຫານ ຫຼື ທຸລະກິດທ່ອງທ່ຽວໃນປະເທດລາວ.

ສະຫຼຸບ

ການເຊື່ອມຕໍ່ AI ເຂົ້າໃນເວັບແອັບພລິເຄຊັນບໍ່ເຄີຍງ່າຍຂະໜາດນີ້ມາກ່ອນ. ດ້ວຍການຮ່ວມມືກັນລະຫວ່າງ Next.js ແລະ Vercel AI SDK, ບັນດານັກພັດທະນາໃນລາວສາມາດສ້າງນັດຕະກຳໃໝ່ໆເພື່ອຍົກລະດັບປະສົບການຂອງຜູ້ໃຊ້ເຖິງຂີດສຸດ. ບໍ່ວ່າທ່ານຈະເຮັດແອັບພລິເຄຊັນຈອງປີ້ລົດໄຟ ລາວ-ຈີນ ຫຼື ແອັບຊ່ວຍລູກຄ້າເລືອກຊື້ຜະລິດຕະພັນທ້ອງຖິ່ນ, ການເຮັດ Streaming Text Generation ຈະເຮັດໃຫ້ເວັບໄຊຂອງທ່ານເບິ່ງເປັນມືອາຊີບ ແລະ ຕອບສະໜອງໄດ້ຢ່າງວ່ອງໄວທັນໃຈ.