Building an AI Chat Application

Frontend chat UI၊ backend endpoint နဲ့ conversation history ပါဝင်တဲ့ AI chat application အခြေခံတည်ဆောက်မည်။

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

Chat app တစ်ခုမှာ message input တင်မကပါဘူး။ UI state၊ backend authentication၊ conversation history၊ loading/error state နဲ့ content safety ပါပါတယ်။ Key ကို server မှာထားပြီး browser က ကိုယ့် API route ကိုသာခေါ်ရပါတယ်။

နေ့စဉ်ဘဝနဲ့ ချိတ်ကြည့်မယ်

ပထမ version မှာ history အနည်းငယ်သာပို့ပြီး message length ကန့်သတ်ပါ။ Streaming၊ database history နဲ့ moderation ကို နောက်မှထည့်နိုင်ပါတယ်။ အလုပ်လုပ်တဲ့သေးငယ်တဲ့ vertical slice ကို အရင်ပြီးအောင်လုပ်ပါ။

• Message input နှင့် submit state
• Server-side AI route
• Loading၊ error နှင့် empty response state
• History limit နှင့် privacy notice

အတူတူ လက်တွေ့စမ်းမယ်

import OpenAI from "openai";

const client = new OpenAI();

export async function POST(request: Request) {
  const { message } = await request.json();
  if (typeof message !== "string" || message.length > 2000) {
    return Response.json({ error: "Invalid message" }, { status: 400 });
  }
  const result = await client.responses.create({
    model: "gpt-5.6",
    input: message,
  });
  return Response.json({ answer: result.output_text });
}

Frontend က POST request ပို့ပြီး AI answer JSON ကို ပြသနိုင်မည်။

OpenAI API Quickstart — OpenAI

OpenAI — Text generation — OpenAI