LINE應用開發：用AI建構LIFF應用與迷你應用程式完整指南

LINE平台（使用者）
       |
       v
  LINE Messaging API / LIFF SDK
       |
       v
  API閘道器（速率限制、認證）
       |
       v
  應用伺服器（Next.js / Node.js）
       |
       +---> AI服務層
       |        |---> NLP引擎（Gemini / GPT）
       |        |---> Vision API
       |        |---> 推薦引擎
       |
       +---> 資料層
       |        |---> PostgreSQL
       |        |---> Redis（快取）
       |        |---> Vector DB（RAG）
       |
       +---> 外部服務
                |---> LINE Channel API
                |---> LINE Pay
                |---> 雲端儲存

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處理）",
  },
  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字以內以適配LINE顯示
- 友好且專業`;

  const result = await model.generateContent(`${systemPrompt}\n\n使用者：${message}`);
  return result.response.text();
}

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);
}

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}

使用與問題相同的語言回答。保持簡潔以適配LINE訊息。`;

  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";
}