#การเขียนโปรแกรมเชื่อมต่อ GPT API ด้วย JavaScript

การเชื่อมต่อ GPT API ด้วย JavaScript ช่วยให้เรานำความสามารถของโมเดลภาษาไปใช้ในระบบต่าง ๆ เช่น Chatbot ระบบตอบคำถาม ผู้ช่วยเขียนเนื้อหา ระบบสรุปเอกสาร หรือระบบวิเคราะห์ข้อความ

สำหรับโครงการใหม่ OpenAI แนะนำให้เรียกโมเดลผ่าน Responses API และสามารถใช้งานได้สะดวกผ่านแพ็กเกจ openai บน Node.js

ข้อควรระวัง: API key ต้องอยู่ในฝั่งเซิร์ฟเวอร์เท่านั้น ห้ามฝังไว้ใน JavaScript ที่ทำงานบน Browser, React, Vue หรือโค้ด Frontend เพราะผู้ใช้อาจเปิด Developer Tools แล้วคัดลอก key ไปใช้งานได้

#ภาพรวมการทำงาน

ขั้นตอนการทำงานมีลักษณะดังนี้

  1. ผู้ใช้ส่งข้อความจากโปรแกรมหรือหน้าเว็บ
  2. JavaScript ฝั่ง Backend รับข้อความ
  3. Backend เรียก OpenAI Responses API ด้วย API key
  4. โมเดลประมวลผลและส่งคำตอบกลับ
  5. Backend ส่งเฉพาะผลลัพธ์ที่จำเป็นกลับไปยังผู้ใช้
ผู้ใช้ → Frontend → Node.js Backend → OpenAI API
                                   ←
ผู้ใช้ ← Frontend ← JSON Response ←

#สิ่งที่ต้องเตรียม

  • บัญชี OpenAI API Platform
  • OpenAI API key
  • Node.js รุ่นที่ยังได้รับการสนับสนุน
  • โปรแกรมแก้ไขโค้ด เช่น Visual Studio Code
  • ความรู้พื้นฐานเกี่ยวกับ JavaScript, async/await และ Environment Variable

การสมัคร ChatGPT และการใช้ OpenAI API เป็นคนละส่วนกัน การมีแพ็กเกจ ChatGPT ไม่ได้หมายความว่าจะมีเครดิต API โดยอัตโนมัติ ควรตรวจสอบการตั้งค่า Billing และ Usage ใน API Platform

#1. สร้างโปรเจกต์ Node.js

เปิด Terminal แล้วใช้คำสั่งต่อไปนี้

mkdir gpt-javascript-demo
cd gpt-javascript-demo
npm init -y

กำหนดให้โปรเจกต์ใช้ ES Modules เพื่อให้สามารถเขียน import ได้

npm pkg set type=module

#2. ติดตั้งแพ็กเกจ

ติดตั้ง OpenAI JavaScript SDK และ dotenv

npm install openai dotenv
  • openai ใช้เชื่อมต่อ OpenAI API
  • dotenv ใช้อ่านค่าจากไฟล์ .env เข้าสู่ process.env

#3. ตั้งค่า API key

สร้างไฟล์ .env ที่โฟลเดอร์หลักของโปรเจกต์

OPENAI_API_KEY=ใส่_api_key_ของคุณที่นี่

สร้างไฟล์ .gitignore เพื่อป้องกันการอัปโหลดข้อมูลลับขึ้น Git

node_modules/
.env

ไม่ควรเขียน API key ลงใน Source Code โดยตรง เช่น

// ไม่ควรทำ
const apiKey = "YOUR_OPENAI_API_KEY";

หาก key เคยถูกเผยแพร่หรือ Commit ขึ้น Repository แล้ว ควรยกเลิก key เดิมและสร้าง key ใหม่ทันที

#4. เขียนโปรแกรมเรียก GPT API

สร้างไฟล์ app.js

import "dotenv/config";
import OpenAI from "openai";

if (!process.env.OPENAI_API_KEY) {
  throw new Error("ไม่พบ OPENAI_API_KEY ใน Environment Variable");
}

const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

async function main() {
  try {
    const response = await client.responses.create({
      model: "gpt-5.6",
      instructions:
        "คุณเป็นผู้ช่วยสอนเขียนโปรแกรม ตอบเป็นภาษาไทยและยกตัวอย่างที่เข้าใจง่าย",
      input: "อธิบายความแตกต่างระหว่าง let และ const ใน JavaScript",
    });

    console.log(response.output_text);
  } catch (error) {
    console.error("เรียก OpenAI API ไม่สำเร็จ");
    console.error("Status:", error.status ?? "unknown");
    console.error("Message:", error.message);
    process.exitCode = 1;
  }
}

main();

รันโปรแกรมด้วยคำสั่ง

node app.js

ตัวโปรแกรมจะอ่าน API key จาก .env แล้วส่งคำสั่งไปยังโมเดล จากนั้นอ่านคำตอบที่รวมเป็นข้อความจาก response.output_text

#อธิบายโค้ดส่วนสำคัญ

#สร้าง OpenAI Client

const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

ออบเจ็กต์ client เป็นตัวกลางสำหรับเรียก OpenAI API ส่วน SDK สามารถอ่าน OPENAI_API_KEY จาก Environment Variable ได้โดยอัตโนมัติด้วย ดังนั้นสามารถเขียนแบบย่อได้เช่นกัน

const client = new OpenAI();

#เรียก Responses API

const response = await client.responses.create({
  model: "gpt-5.6",
  input: "สวัสดี GPT",
});

ค่าหลักที่ใช้ ได้แก่

พารามิเตอร์ หน้าที่
model ระบุโมเดลที่ต้องการใช้
instructions กำหนดบทบาท กติกา รูปแบบ และแนวทางการตอบ
input ข้อความหรือข้อมูลที่ผู้ใช้ส่งให้โมเดล

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

#อ่านข้อความผลลัพธ์

console.log(response.output_text);

ไม่ควรยึดตำแหน่ง response.output[0].content[0].text เป็นหลัก เพราะ output อาจประกอบด้วยข้อความ Tool Call หรือข้อมูลประเภทอื่น SDK จึงมี output_text เพื่อรวมผลลัพธ์ข้อความให้ใช้งานได้สะดวก

#5. สร้าง Backend API ด้วย Express

ถ้าต้องการเชื่อมต่อจากหน้าเว็บ ควรให้ Browser เรียก Backend ของเรา แล้วให้ Backend เป็นผู้เรียก OpenAI API อีกทอดหนึ่ง

ติดตั้ง Express

npm install express

สร้างไฟล์ server.js

import "dotenv/config";
import express from "express";
import OpenAI from "openai";

if (!process.env.OPENAI_API_KEY) {
  throw new Error("ไม่พบ OPENAI_API_KEY");
}

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

app.use(express.json({ limit: "20kb" }));

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

  if (typeof message !== "string" || message.trim() === "") {
    return res.status(400).json({
      error: "กรุณาส่ง message ที่เป็นข้อความ",
    });
  }

  if (message.length > 4_000) {
    return res.status(400).json({
      error: "ข้อความยาวเกินกว่าที่ระบบกำหนด",
    });
  }

  try {
    const response = await client.responses.create({
      model: "gpt-5.6",
      instructions:
        "คุณเป็นผู้ช่วยตอบคำถามด้านการเขียนโปรแกรม ตอบเป็นภาษาไทยอย่างกระชับ",
      input: message,
    });

    return res.json({
      answer: response.output_text,
      responseId: response.id,
    });
  } catch (error) {
    console.error("OpenAI API error:", error.status, error.message);

    const status = error.status === 429 ? 429 : 500;

    return res.status(status).json({
      error:
        status === 429
          ? "มีคำขอมากเกินไป กรุณาลองใหม่ภายหลัง"
          : "ระบบไม่สามารถประมวลผลคำขอได้",
    });
  }
});

app.listen(3000, () => {
  console.log("Server: http://localhost:3000");
});

รัน Backend

node server.js

ทดสอบด้วย curl

curl -X POST http://localhost:3000/api/chat \
  -H "Content-Type: application/json" \
  -d '{"message":"อธิบาย async/await แบบสั้น ๆ"}'

ตัวอย่างผลลัพธ์

{
  "answer": "async/await เป็นรูปแบบการเขียนโค้ด asynchronous..."
}

#6. เรียก Backend จากหน้าเว็บ

JavaScript ฝั่ง Browser ควรเรียก /api/chat ของระบบเรา ไม่ใช่เรียก OpenAI API โดยตรง

async function askGPT(message) {
  const response = await fetch("/api/chat", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ message }),
  });

  const data = await response.json();

  if (!response.ok) {
    throw new Error(data.error ?? "เกิดข้อผิดพลาด");
  }

  return data.answer;
}

const answer = await askGPT("ช่วยอธิบาย Array.map()");
console.log(answer);

สถาปัตยกรรมแบบนี้ทำให้ API key อยู่ใน Backend และช่วยให้เราควบคุม Authentication, Rate Limit, Input Validation, Logging และค่าใช้จ่ายได้

#7. สนทนาต่อเนื่องด้วย previous_response_id

หากต้องการให้คำถามถัดไปอ้างอิงคำตอบก่อนหน้า สามารถส่ง response.id กลับไปในคำขอรอบใหม่

const first = await client.responses.create({
  model: "gpt-5.6",
  input: "อธิบาย Closure ใน JavaScript",
  store: true,
});

console.log(first.output_text);

const second = await client.responses.create({
  model: "gpt-5.6",
  previous_response_id: first.id,
  input: "ขอตัวอย่างที่ใช้กับ Event Handler",
  store: true,
});

console.log(second.output_text);

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

#การจัดการข้อผิดพลาดที่พบบ่อย

สถานะ สาเหตุที่พบบ่อย แนวทางแก้ไข
400 Input หรือพารามิเตอร์ไม่ถูกต้อง อ่านข้อความ Error และตรวจสอบรูปแบบ Request
401 API key ไม่ถูกต้อง ถูกยกเลิก หรือไม่มีสิทธิ์ ตรวจสอบ Environment Variable และสิทธิ์ของ key
429 เรียกถี่เกิน Rate Limit หรือโควตาไม่เพียงพอ ลดความถี่ ใช้ Exponential Backoff และตรวจสอบ Usage/Billing
500 ระบบปลายทางเกิดข้อผิดพลาดชั่วคราว รอสักครู่แล้วลองใหม่
503 บริการมีภาระงานสูง ลดอัตราการเรียกและ Retry ด้วย Backoff

ไม่ควรส่ง Error ภายใน Stack Trace หรือรายละเอียดของ API key กลับไปยังผู้ใช้

#แนวทางสำหรับระบบ Production

  1. เก็บ Secret อย่างปลอดภัย
    ใช้ Environment Variable หรือ Secret Manager ของ Cloud Platform

  2. ตรวจสอบ Input
    จำกัดชนิดข้อมูล ความยาว และขนาด Request ก่อนเรียกโมเดล

  3. เพิ่ม Authentication
    อย่าเปิด Endpoint ให้บุคคลทั่วไปเรียกใช้งานโดยไม่มีการยืนยันตัวตน

  4. กำหนด Rate Limit
    จำกัดจำนวนคำขอต่อผู้ใช้หรือ IP เพื่อลดการใช้งานผิดปกติ

  5. ควบคุมค่าใช้จ่าย
    ติดตาม Usage กำหนด Budget Alert และเลือกโมเดลให้เหมาะกับงาน

  6. ใช้ Retry อย่างมีขอบเขต
    Retry เฉพาะข้อผิดพลาดชั่วคราว เช่น 429, 500 และ 503 พร้อม Exponential Backoff

  7. ทำ Logging โดยไม่เก็บข้อมูลลับ
    บันทึกเวลา สถานะ ระยะเวลาประมวลผล และ Request ID แต่ไม่บันทึก API key

  8. ทดสอบ Prompt ก่อนเปลี่ยน Production
    เก็บ Prompt ใน Source Code ที่มี Version Control และสร้างชุดทดสอบสำหรับตรวจสอบคุณภาพคำตอบ

#โครงสร้างโปรเจกต์ตัวอย่าง

gpt-javascript-demo/
├── .env
├── .gitignore
├── app.js
├── server.js
├── package.json
└── node_modules/

#สรุป

หัวใจของการเชื่อมต่อ GPT API ด้วย JavaScript คือ

  1. ติดตั้ง openai SDK
  2. เก็บ OPENAI_API_KEY ใน Environment Variable
  3. สร้าง OpenAI Client ใน Node.js Backend
  4. เรียก client.responses.create()
  5. อ่านคำตอบจาก response.output_text
  6. ให้ Frontend เรียกผ่าน Backend เพื่อไม่ให้ API key รั่วไหล

เมื่อเริ่มต้นได้แล้ว สามารถต่อยอดไปสู่ Chatbot ระบบถาม–ตอบจากเอกสาร ระบบสร้างเนื้อหา ผู้ช่วยเขียนโปรแกรม หรือระบบ AI Agent ได้

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