พัฒนาแอป LINE ด้วย AI: สร้างแอปพลิเคชันอัจฉริยะบนแพลตฟอร์ม LINE

LINE Platform (ผู้ใช้)
       |
       v
  LINE Messaging API / LIFF SDK
       |
       v
  API Gateway (Rate Limiting, Auth)
       |
       v
  Application Server (Next.js / Node.js)
       |
       +---> AI Service Layer
       |        |---> NLP Engine (Gemini / GPT)
       |        |---> Vision API
       |        |---> Recommendation Engine
       |
       +---> Data Layer
       |        |---> PostgreSQL
       |        |---> Redis (Cache)
       |        |---> Vector DB (RAG)
       |
       +---> External Services
                |---> LINE Channel API
                |---> LINE Pay
                |---> Cloud Storage

const techStack = {
  frontend: {
    framework: "Next.js 16 (App Router)",
    liffSdk: "@line/liff v2.24+",
    ui: "TailwindCSS + shadcn/ui",
  },
  backend: {
    runtime: "Node.js 22 LTS",
    database: "PostgreSQL + Prisma ORM",
    cache: "Redis / Upstash",
    queue: "BullMQ สำหรับประมวลผล AI แบบ async",
  },
  ai: {
    llm: "Google Gemini 2.5 Pro / OpenAI GPT-4o",
    vision: "Google Cloud Vision API",
    vectorDb: "Pinecone / pgvector",
  },
};

// app/api/webhooks/line/route.ts
import { NextRequest, NextResponse } from "next/server";
import crypto from "crypto";

const CHANNEL_SECRET = process.env.LINE_CHANNEL_SECRET!;

function verifySignature(body: string, signature: string): boolean {
  const hash = crypto
    .createHmac("SHA256", CHANNEL_SECRET)
    .update(body)
    .digest("base64");
  return hash === signature;
}

export async function POST(req: NextRequest) {
  const body = await req.text();
  const signature = req.headers.get("x-line-signature") || "";

  if (!verifySignature(body, signature)) {
    return NextResponse.json({ error: "ลายเซ็นไม่ถูกต้อง" }, { status: 401 });
  }

  const { events } = JSON.parse(body);
  Promise.all(events.map(processEvent)).catch(console.error);
  return NextResponse.json({ status: "ok" });
}

// services/ai-message-handler.ts
import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);

async function generateAIResponse(
  message: string,
  context: ConversationContext
): Promise<string> {
  const model = genAI.getGenerativeModel({ model: "gemini-2.5-pro" });

  const systemPrompt = `คุณเป็นผู้ช่วย LINE ที่เป็นมิตร
ผู้ใช้: ${context.userData.name || "ลูกค้า"}
ภาษา: ${context.userData.language || "ตรวจจับอัตโนมัติ"}

กฎ:
- ตอบในภาษาเดียวกับข้อความผู้ใช้
- จำกัดคำตอบไม่เกิน 300 ตัวอักษร
- เป็นมิตรแต่เป็นมืออาชีพ`;

  const result = await model.generateContent(`${systemPrompt}\n\nผู้ใช้: ${message}`);
  return result.response.text();
}

// services/vision-handler.ts
async function handleImageMessage(event: LineMessageEvent) {
  const imageBuffer = await downloadLineImage(event.message.id);
  const analysis = await processProductImage(imageBuffer);

  if (analysis.products.length > 0) {
    return sendProductCarousel(event.replyToken, analysis.products);
  }

  return replyText(
    event.replyToken,
    `พบ: ${analysis.labels.slice(0, 3).join(", ")} ต้องการความช่วยเหลือเรื่องอะไรคะ?`
  );
}

async function sendRecommendations(userId: string) {
  const profile = await getUserProfile(userId);
  const recommendations = await getRecommendations(profile);

  const flexMessage = {
    type: "flex",
    altText: "แนะนำสำหรับคุณ",
    contents: {
      type: "carousel",
      contents: recommendations.map((product) => ({
        type: "bubble",
        hero: { type: "image", url: product.imageUrl, size: "full" },
        body: {
          type: "box",
          layout: "vertical",
          contents: [
            { type: "text", text: product.name, weight: "bold" },
            { type: "text", text: `${product.price} บาท`, color: "#06C755" },
          ],
        },
        action: { type: "uri", uri: product.url },
      })),
    },
  };

  await pushMessage(userId, flexMessage);
}

// components/LiffAIChat.tsx
"use client";
import { useEffect, useState } from "react";
import liff from "@line/liff";

export function LiffAIChat() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    liff.init({ liffId: process.env.NEXT_PUBLIC_LIFF_ID! });
  }, []);

  async function sendMessage() {
    if (!input.trim() || isLoading) return;
    setIsLoading(true);
    const userMessage = { role: "user" as const, content: input };
    setMessages(prev => [...prev, userMessage]);
    setInput("");

    const response = await fetch("/api/ai/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ message: input, history: messages.slice(-10) }),
    });

    const data = await response.json();
    setMessages(prev => [...prev, { role: "assistant", content: data.reply }]);
    setIsLoading(false);
  }

  return (
    <div className="flex flex-col h-screen">
      <div className="flex-1 overflow-y-auto p-4 space-y-3">
        {messages.map((msg, i) => (
          <div key={i} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
            <div className={`max-w-[80%] p-3 rounded-2xl ${
              msg.role === "user" ? "bg-[#06C755] text-white" : "bg-white border"
            }`}>
              {msg.content}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

async function ragQuery(question: string, userId: string): Promise<string> {
  const embedding = await generateEmbedding(question);
  const relevantDocs = await vectorDb.query({
    vector: embedding,
    topK: 5,
    filter: { locale: getUserLocale(userId) },
  });

  const context = relevantDocs.map(doc => doc.metadata.content).join("\n---\n");

  const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);
  const model = genAI.getGenerativeModel({ model: "gemini-2.5-pro" });

  const prompt = `จากฐานความรู้ต่อไปนี้ ตอบคำถาม
หากคำตอบไม่อยู่ในบริบท ให้บอกตรงๆ

บริบท:
${context}

คำถาม: ${question}`;

  const result = await model.generateContent(prompt);
  return result.response.text();
}

async function routeBySentiment(message: string, userId: string): Promise<"ai" | "human"> {
  const sentiment = await analyzeSentiment(message);

  if (sentiment.emotion === "angry" || sentiment.score < -0.6) {
    await notifyHumanAgent(userId, message, sentiment);
    return "human";
  }

  return "ai";
}