สร้างแชตบอตด้วย Claude API อย่างไร? วางขั้นตอนตั้งแต่รับข้อความถึงตอบกลับ

การสร้างแชตบอตด้วย Claude API ต้องมีส่วนรับข้อความจากผู้ใช้ เซิร์ฟเวอร์เรียก API และส่งคำตอบกลับไปแสดงบนหน้าแชต ผู้ใช้ ComSiam ควรเรียก Claude API จากฝั่งเซิร์ฟเวอร์ เพื่อเก็บ API Key ให้ปลอดภัย และควรวางแผนจัดเก็บประวัติสนทนาหากต้องการให้บอตจำบริบทได้

โครงสร้างการทำงานของแชตบอต

① ผู้ใช้พิมพ์ข้อความในหน้าเว็บหรือแอป
② หน้าแชตส่งข้อความไปยังเซิร์ฟเวอร์ของระบบ
③ เซิร์ฟเวอร์ตรวจข้อมูล แล้วส่งข้อความกับประวัติสนทนาที่จำเป็นไปยัง Claude API
④ เซิร์ฟเวอร์อ่านคำตอบและส่งกลับไปยังหน้าแชต
⑤ หน้าแชตแสดงคำตอบให้ผู้ใช้

API Key ควรอยู่บนเซิร์ฟเวอร์ ไม่ควรใส่ไว้ใน JavaScript ที่ส่งไปยังเบราว์เซอร์ เพราะผู้ใช้สามารถตรวจดูและคัดลอกคีย์ได้

เตรียมโปรเจกต์ Node.js

ติดตั้ง Express และ SDK ของ Anthropic ในโฟลเดอร์โปรเจกต์:

npm init -y
npm install express @anthropic-ai/sdk

กำหนด ANTHROPIC_API_KEY เป็นตัวแปรสภาพแวดล้อมของเซิร์ฟเวอร์ก่อนรันแอป อย่าใส่คีย์จริงไว้ในไฟล์ซอร์สโค้ดหรือ Repository

ตัวอย่าง Endpoint สำหรับรับข้อความและตอบกลับ

สร้างไฟล์ server.mjs:

import express from "express";
import Anthropic from "@anthropic-ai/sdk";

const app = express();
const client = new Anthropic();

app.use(express.json());

app.post("/api/chat", async (req, res) => {
  const userMessage = req.body?.message;

  if (typeof userMessage !== "string" || !userMessage.trim()) {
    return res.status(400).json({ error: "กรุณาส่งข้อความ" });
  }

  try {
    const response = await client.messages.create({
      model: "claude-sonnet-5-5",
      max_tokens: 512,
      messages: [
        { role: "user", content: userMessage.trim() }
      ]
    });

    const answer = response.content
      .filter((block) => block.type === "text")
      .map((block) => block.text)
      .join("\n");

    return res.json({ answer });
  } catch (error) {
    console.error("Claude API request failed:", error);
    return res.status(500).json({ error: "ไม่สามารถสร้างคำตอบได้ในขณะนี้" });
  }
});

app.listen(3000, () => {
  console.log("Chatbot server is running on port 3000");
});

รันเซิร์ฟเวอร์ด้วย:

node server.mjs

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

ทำให้แชตบอตต่อบทสนทนาได้

Messages API ไม่เก็บประวัติสนทนาไว้ให้โดยอัตโนมัติ หากต้องการให้บอตตอบต่อจากข้อความก่อนหน้า แอปต้องเก็บประวัติและส่งข้อความก่อนหน้าที่จำเป็นไปกับคำขอครั้งถัดไป โดยสลับบทบาท user และ assistant ตามลำดับ

ตัวอย่างโครงสร้างบทสนทนา:

const messages = [
  { role: "user", content: "สวัสดี" },
  { role: "assistant", content: "สวัสดีครับ มีอะไรให้ช่วยไหม" },
  { role: "user", content: "ช่วยอธิบายบริการของคุณ" }
];

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

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

สิ่งที่ควรเตรียมก่อนเปิดให้ใช้งานจริง

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

สรุป

แชตบอตที่ใช้ Claude API ประกอบด้วยหน้าแชต เซิร์ฟเวอร์ และ Messages API โดยเซิร์ฟเวอร์รับข้อความ เรียก Claude แล้วส่งคำตอบกลับ หากต้องการสนทนาหลายรอบ แอปต้องจัดเก็บและส่งประวัติที่จำเป็นไปกับคำขอ ผู้ใช้ ComSiam ควรปกป้อง API Key ตรวจอินพุต และติดตามการใช้งานก่อนเปิดระบบให้ผู้ใช้จริง