ChatKit จาก OpenAI: สร้างหน้าสนทนา AI สำหรับเว็บแอป

• 1. สถานะปัจจุบันที่ควรทราบก่อนเริ่มต้น
• 2. ChatKit รับผิดชอบส่วนใดของระบบ
• 3. ความสามารถสำคัญ
  • ปรับหน้าตาให้เข้ากับผลิตภัณฑ์
  • แสดงผลเป็น Widgets
  • เรียก Actions จากการโต้ตอบ
  • รองรับไฟล์แนบเมื่อกำหนดระบบอัปโหลด
• 4. สถาปัตยกรรมตัวอย่าง: ผู้ช่วยแจ้งบั๊ก
• 5. แนวทางเริ่มต้นสำหรับแอปใหม่
  • ขั้นที่ 1: กำหนดขอบเขตของผู้ช่วย
  • ขั้นที่ 2: ติดตั้งส่วนประกอบ
  • ขั้นที่ 3: สร้าง ChatKit server
  • ขั้นที่ 4: เปิด endpoint สำหรับ ChatKit
  • ขั้นที่ 5: ปรับข้อความและรูปแบบของ UI
  • ขั้นที่ 6: เพิ่ม Widget และ Action ที่มีประโยชน์
• 6. หากมีระบบที่ใช้ Agent Builder อยู่แล้ว
• 7. ตัวอย่างการประยุกต์ด้านการสอนและ Software Engineering
• 8. ประเด็นที่ควรทดสอบ
• 9. เลือกใช้ ChatKit เมื่อใด
• เอกสารอ้างอิง

การสร้างผู้ช่วย AI สำหรับเว็บไซต์มีงานมากกว่าการส่งข้อความไปยังโมเดล นักพัฒนายังต้องจัดการหน้าสนทนา การแสดงคำตอบระหว่างประมวลผล ประวัติข้อความ ปุ่มสั่งงาน และการเชื่อมต่อกับระบบหลังบ้าน

ChatKit เป็นชุดเครื่องมือของ OpenAI สำหรับฝังและปรับแต่งประสบการณ์สนทนา AI ในแอปพลิเคชัน ช่วยให้นักพัฒนามีส่วนติดต่อสำหรับผู้ใช้ แล้วนำไปเชื่อมกับตรรกะของเอเจนต์และข้อมูลของระบบตนเอง [1]

ตัวอย่างที่นำไปประยุกต์ได้ ได้แก่ ผู้ช่วยตอบคำถามเอกสาร ผู้ช่วยบริการนักศึกษา ระบบติดตามงานสนับสนุน และผู้ช่วยแจ้งข้อบกพร่องของซอฟต์แวร์

#1. สถานะปัจจุบันที่ควรทราบก่อนเริ่มต้น

เอกสารทางการระบุว่า ChatKit ยังใช้งานได้ ขณะที่ Agent Builder อยู่ในกระบวนการยุติบริการ และมีกำหนดปิดวันที่ 30 พฤศจิกายน 2026 [7]

สำหรับแอปใหม่ เอกสาร ChatKit แนะนำให้เชื่อมกับเอเจนต์ที่ทำงานบนเซิร์ฟเวอร์ของผู้พัฒนาเองผ่านแนวทาง Advanced integration ส่วนการเชื่อม workflow ที่ OpenAI โฮสต์ไว้ใช้สำหรับระบบเดิมในช่วงเปลี่ยนผ่าน [1][2]

บทความเก่าที่เริ่มจากการสร้าง workflow ใหม่ใน Agent Builder จึงควรอ่านประกอบสถานะปัจจุบันก่อนนำมาทำตาม

#2. ChatKit รับผิดชอบส่วนใดของระบบ

มองระบบผู้ช่วย AI เป็นสามส่วน ได้แก่ หน้าสนทนา การประมวลผลของเอเจนต์ และข้อมูลหรือบริการที่เอเจนต์เรียกใช้

ChatKit Python SDK รองรับการเชื่อมบริการเอเจนต์ รวมถึงบริการที่สร้างด้วย Agents SDK ส่วนการค้นข้อมูลและกฎทางธุรกิจต้องออกแบบใน backend ที่เชื่อมต่อ [1][2]

การมีหน้าสนทนาพร้อมใช้ช่วยลดงานด้าน UI ได้มาก แต่คุณภาพคำตอบยังขึ้นอยู่กับคำสั่งของเอเจนต์ เครื่องมือ ข้อมูล และการประเมินผลของแอป

#3. ความสามารถสำคัญ

#ปรับหน้าตาให้เข้ากับผลิตภัณฑ์

นักพัฒนากำหนดธีม สี ตัวอักษร ความหนาแน่นขององค์ประกอบ และข้อความเริ่มต้นได้ รวมถึงเพิ่มคำถามแนะนำเพื่อช่วยให้ผู้ใช้เริ่มต้นสนทนา [3]

สำหรับเว็บบริการนักศึกษา คำถามเริ่มต้นอาจเป็น “ค้นหารายวิชา” หรือ “สอบถามขั้นตอนยื่นคำร้อง” ส่วนระบบ QA อาจเริ่มด้วย “แจ้งบั๊ก” และ “ติดตามสถานะบั๊ก”

#แสดงผลเป็น Widgets

Widgets ใช้แสดงข้อมูลในรูปแบบองค์ประกอบ เช่น การ์ด รายการ และปุ่ม นักพัฒนาสามารถเลือกแบบที่มีอยู่ ปรับแม่แบบ หรือสร้างการจัดวางที่เหมาะกับผลิตภัณฑ์ [4]

ตัวอย่างเชิงออกแบบ: แทนที่จะแสดงผลการค้นหาบั๊กเป็นข้อความยาว แอปอาจส่งการ์ดที่แสดงหมายเลขบั๊ก ชื่อปัญหา สถานะ และปุ่มเปิดรายละเอียด

#เรียก Actions จากการโต้ตอบ

Actions ทำให้ปุ่มหรือองค์ประกอบของหน้าสนทนาส่งคำสั่งไปยังระบบได้โดยไม่ต้องให้ผู้ใช้พิมพ์ข้อความใหม่ เซิร์ฟเวอร์สามารถตอบกลับด้วยข้อมูลใหม่หรืออัปเดต widget ตามการทำงานที่กำหนด [5]

ตัวอย่างคือปุ่ม “ดูรายละเอียด” ส่งรหัสบั๊กไปให้ backend จากนั้น backend ตรวจสิทธิ์และส่งข้อมูลที่อนุญาตกลับมา

#รองรับไฟล์แนบเมื่อกำหนดระบบอัปโหลด

การแนบไฟล์ต้องเปิดใช้งานผ่านการตั้งค่า สำหรับ custom backend ต้องเตรียมส่วนจัดเก็บและจัดการไฟล์ให้สอดคล้องกับ FileStore และวิธีอัปโหลดที่เลือก [2][3]

การรับไฟล์เข้าแชตและการนำเนื้อหาไฟล์ไปตอบคำถามเป็นคนละขั้นตอน หากต้องการถามตอบจาก PDF ต้องออกแบบการอ่านไฟล์ การค้นข้อมูล และการนำหลักฐานเข้าสู่เอเจนต์เพิ่มเติม

#4. สถาปัตยกรรมตัวอย่าง: ผู้ช่วยแจ้งบั๊ก

แผนภาพนี้เป็นข้อเสนอการออกแบบสำหรับการเรียนรู้ ไม่ใช่สถาปัตยกรรมที่ OpenAI บังคับให้ใช้

flowchart TD
    U["ผู้ใช้เว็บแอป"] --> C["ChatKit UI"]
    C --> S["ChatKit server"]
    S --> A["บริการเอเจนต์"]
    S --> H["ประวัติการสนทนา"]
    A --> Q["เครื่องมือค้นและบันทึกบั๊ก"]
    A --> R["เครื่องมือค้นคู่มือด้วย RAG"]
    Q --> D["ฐานข้อมูลโครงการ"]
    R --> K["เอกสารที่ผู้ใช้มีสิทธิ์อ่าน"]

กระบวนการเมื่อผู้ใช้ถามว่า “บั๊กเข้าสู่ระบบไม่ได้แก้ถึงไหนแล้ว” อาจเป็นดังนี้

1. แอปตรวจสอบการเข้าสู่ระบบ และส่งคำขอพร้อมบริบทของผู้ใช้ไปยัง ChatKit server
2. บริการเอเจนต์เลือกเครื่องมือค้นบั๊กตามคำถาม
3. เครื่องมือค้นเฉพาะโครงการที่ผู้ใช้มีสิทธิ์เข้าถึง
4. backend ส่งข้อมูลสถานะพร้อมหมายเลขอ้างอิงกลับมา
5. ChatKit แสดงคำตอบและการ์ดสำหรับเปิดรายละเอียด

หากมีงานเขียนข้อมูล เช่น สร้างบั๊กใหม่ ควรแสดงข้อมูลที่จะบันทึกให้ผู้ใช้ตรวจสอบ และให้ backend ตรวจสิทธิ์อีกครั้งก่อนบันทึกตามกติกาของแอป

#5. แนวทางเริ่มต้นสำหรับแอปใหม่

#ขั้นที่ 1: กำหนดขอบเขตของผู้ช่วย

เริ่มจากงานที่มีขอบเขตชัดเจน เช่น “ค้นและติดตามบั๊กในโครงการที่ผู้ใช้เป็นสมาชิก” จากนั้นระบุข้อมูลที่ต้องใช้ เครื่องมือที่อนุญาต และลักษณะคำตอบที่ต้องการ

ตัวอย่างข้อกำหนดสำหรับห้องปฏิบัติการ:

• ผู้ใช้ค้นบั๊กตามคำสำคัญหรือหมายเลขได้
• ทุกผลลัพธ์ต้องแสดงหมายเลขอ้างอิงจากข้อมูลจริง
• ผู้ใช้เห็นเฉพาะโครงการที่เป็นสมาชิก
• ถ้าไม่พบข้อมูล ให้บอกว่าไม่พบและขอรายละเอียดเพิ่มเติม

#ขั้นที่ 2: ติดตั้งส่วนประกอบ

React binding ของ ChatKit ใช้แพ็กเกจต่อไปนี้ [1]

npm install @openai/chatkit-react

ส่วน ChatKit server ใช้แพ็กเกจ Python ตามคู่มือ Advanced integration [2]

pip install openai-chatkit

หากเลือกสร้างเอเจนต์ด้วย Agents SDK และเปิด endpoint ด้วย FastAPI ให้ติดตั้งแพ็กเกจขององค์ประกอบเหล่านั้นตามคู่มือที่เกี่ยวข้องด้วย ควรตรึงเวอร์ชันในโปรเจ็กต์หลังทดสอบการทำงานร่วมกันแล้ว

#ขั้นที่ 3: สร้าง ChatKit server

แกนสำคัญในคู่มือคือการสร้างคลาสที่สืบทอด ChatKitServer และเขียนเมธอด respond สำหรับส่งเหตุการณ์ตอบกลับ ตัวช่วย stream_agent_response ใช้เชื่อมผลการทำงานของ Agents SDK ไปยัง ChatKit ได้ [2]

สิ่งที่แอปต้องเตรียมประกอบกันมีดังนี้

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

#ขั้นที่ 4: เปิด endpoint สำหรับ ChatKit

ตัวอย่างต่อไปนี้แสดงเฉพาะส่วนรับคำขอของ FastAPI โดยสมมติว่าแอปสร้าง chatkit_server และฟังก์ชันตรวจสอบผู้ใช้ไว้แล้ว รูปแบบการส่งผลลัพธ์อ้างอิงคู่มือ Advanced integration [2]

from typing import Annotated

from fastapi import Depends, FastAPI, Request, Response
from fastapi.responses import StreamingResponse
from chatkit.server import StreamingResult

app = FastAPI()

# ต้องสร้างสองส่วนนี้ในแอปของคุณก่อน:
# - chatkit_server: instance ของ ChatKitServer ที่มี respond และ Store
# - get_current_user: dependency ที่ตรวจสอบ session/token จริง

@app.post("/chatkit")
async def chatkit_endpoint(
    request: Request,
    user: Annotated[dict, Depends(get_current_user)],
):
    context = {"user_id": user["id"]}
    result = await chatkit_server.process(
        await request.body(),
        context,
    )

    if isinstance(result, StreamingResult):
        return StreamingResponse(
            result,
            media_type="text/event-stream",
        )

    return Response(
        content=result.json,
        media_type="application/json",
    )

โค้ดนี้ยังไม่สามารถรันเดี่ยว ๆ ได้ เพราะไม่ได้รวม ChatKitServer, Store และระบบ authentication โดยจงใจแสดงเฉพาะจุดเชื่อมต่อ HTTP ตัวอย่างไม่ได้ผ่านการทดสอบกับ OpenAI API ในการจัดทำบทความนี้

การส่ง user_id เข้า context เป็นเพียงการส่งบริบท แอปต้องใช้ข้อมูลนี้ตรวจสิทธิ์ใน Store และเครื่องมือทุกจุดที่อ่านหรือแก้ไขข้อมูลด้วย

#ขั้นที่ 5: ปรับข้อความและรูปแบบของ UI

ตัวอย่างนี้เป็น options ส่วนหน้าตาที่นำไปประกอบกับการตั้งค่า API ของ integration ที่เชื่อมสำเร็จแล้ว สามารถส่งผ่าน useChatKit หรือ setOptions ตามวิธีที่ใช้งาน [3]

const appearanceOptions = {
  theme: {
    colorScheme: "light",
    color: {
      accent: { primary: "#0D9488", level: 2 },
    },
    radius: "round",
  },
  composer: {
    placeholder: "พิมพ์คำถามเกี่ยวกับบั๊กในโครงการ…",
  },
  startScreen: {
    greeting: "ต้องการให้ช่วยเรื่องใดในโครงการ?",
    prompts: [
      {
        name: "ติดตามบั๊ก",
        prompt: "ช่วยค้นหาบั๊กที่ยังเปิดอยู่ในโครงการของฉัน",
        icon: "search",
      },
      {
        name: "เตรียมรายงานบั๊ก",
        prompt: "ช่วยจัดรูปแบบรายงานบั๊กจากรายละเอียดที่ฉันจะส่งให้",
        icon: "write",
      },
    ],
  },
};

ตัวอย่างนี้ไม่ได้รวมการตั้งค่า endpoint หรือการยืนยันตัวตน และการกำหนดข้อความเป็นภาษาไทยเป็นการปรับข้อความของแอป ไม่ได้หมายความว่าข้อความทุกส่วนของ ChatKit ถูกแปลเป็นภาษาไทยโดยอัตโนมัติ

#ขั้นที่ 6: เพิ่ม Widget และ Action ที่มีประโยชน์

ตัวอย่าง Python ต่อไปนี้กำหนดปุ่มที่ส่งรหัสบั๊กไปกับ Action โดยดัดแปลงรูปแบบจากคู่มือ Actions [5]

from chatkit.types import ActionConfig
from chatkit.widgets import Button

details_button = Button(
    label="ดูรายละเอียดบั๊ก",
    onClickAction=ActionConfig(
        type="bug.view",
        payload={"bug_id": 42},
    ),
)

ต้องนำปุ่มไปประกอบเป็น widget ที่เซิร์ฟเวอร์ส่งกลับ และเขียนตัวจัดการ action บน ChatKitServer เพิ่มเติม ตัวจัดการควรตรวจว่าผู้ใช้มีสิทธิ์ดูบั๊กหมายเลข 42 แล้วจึงโหลดข้อมูล

การมีปุ่มในหน้าสนทนาไม่ได้ทำให้ฐานข้อมูลเปลี่ยนแปลงเอง การทำงานจริงขึ้นอยู่กับ handler และบริการของแอป

#6. หากมีระบบที่ใช้ Agent Builder อยู่แล้ว

แนวทาง hosted เดิมใช้ backend สร้าง ChatKit session โดยระบุ workflow และผู้ใช้ จากนั้นส่ง client_secret ให้ frontend ใช้เชื่อมต่อ ค่าระบุผู้ใช้ต้องได้มาจากผู้ใช้ที่ backend ตรวจสอบแล้ว [1]

เมื่อวางแผนย้าย เอกสาร Migration แนะนำให้เปิด workflow เลือก Code → Agents SDK แล้วคัดลอกโค้ด Python หรือ TypeScript มาพัฒนาในแอปของตนเอง [6]

ขั้นตอนที่เสนอสำหรับทีมพัฒนา:

1. บันทึกพฤติกรรมเดิมด้วยคำถามตัวอย่างและผลลัพธ์ที่คาดหวัง
2. ส่งออกโค้ดของ workflow และตรวจเครื่องมือหรือบริการที่พึ่งพา
3. จัดเตรียม runtime, authentication และการจัดเก็บข้อมูลของ backend ใหม่
4. เชื่อม ChatKit frontend เข้ากับ ChatKit server ของแอป
5. เปรียบเทียบคำตอบ การเรียกเครื่องมือ และสิทธิ์การเข้าถึงก่อนเปลี่ยนระบบ

การส่งออกโค้ดเป็นจุดตั้งต้น เอกสารไม่ได้รับประกันว่าพฤติกรรมทุกอย่างจะย้ายมาเหมือนเดิมโดยไม่ต้องปรับและทดสอบ [6]

#7. ตัวอย่างการประยุกต์ด้านการสอนและ Software Engineering

ส่วนนี้เป็นข้อเสนอของผู้เขียนสำหรับนำ ChatKit ไปใช้ ไม่ใช่ฟีเจอร์ที่เปิดมาให้ครบโดยอัตโนมัติ

สำหรับการอบรม อาจเริ่มจากผู้ช่วยค้นข้อมูลแบบอ่านอย่างเดียว แล้วเพิ่มปุ่มเปิดรายละเอียด ก่อนขยายไปสู่งานเขียนข้อมูลเมื่อออกแบบสิทธิ์และการยืนยันข้อมูลเรียบร้อยแล้ว

#8. ประเด็นที่ควรทดสอบ

ข้อเสนอการทดสอบต่อไปนี้แยกพฤติกรรมของ UI ออกจากความถูกต้องของเอเจนต์ เพื่อให้ตรวจหาสาเหตุของปัญหาได้ง่ายขึ้น

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

#9. เลือกใช้ ChatKit เมื่อใด

ChatKit เหมาะกับแอปที่ต้องการเพิ่มหน้าสนทนา AI พร้อมองค์ประกอบแบบโต้ตอบ และต้องการใช้เวลาพัฒนากับตรรกะของผู้ช่วยและการเชื่อมระบบข้อมูล

ก่อนเลือกใช้ ให้ทดลองกับโจทย์จริงหนึ่งงาน เช่น ค้นบั๊กและเปิดรายละเอียด เพื่อประเมินความเหมาะสมของ UI วิธีจัดเก็บข้อมูล และต้นทุนของระบบที่เชื่อมต่อ สำหรับค่าใช้จ่ายของโมเดล เครื่องมือ และโครงสร้างพื้นฐาน ให้ตรวจตามบริการที่เลือกใช้และอัตราปัจจุบัน

แก่นของการใช้งานคือให้ ChatKit จัดประสบการณ์สนทนา แล้วเชื่อมเข้ากับเอเจนต์ ข้อมูล และกฎของแอปอย่างชัดเจน สำหรับงานใหม่ ณ วันที่ตรวจสอบบทความนี้ ให้เริ่มจากแนวทาง custom server integration ตามเอกสารทางการ [1][2]

#เอกสารอ้างอิง

1. OpenAI — ChatKit
2. OpenAI — Advanced integrations with ChatKit
3. OpenAI — Theming and customization in ChatKit
4. OpenAI — ChatKit widgets
5. OpenAI — Actions in ChatKit
6. OpenAI — Migrate from Agent Builder
7. OpenAI — Deprecations