LINE App Development with AI: Build LIFF & Mini App Solutions

LINE Platform (Users)
       |
       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 (Google Cloud Vision)
       |        |---> Recommendation Engine
       |        |---> Custom ML Models
       |
       +---> Data Layer
       |        |---> PostgreSQL (User data, conversations)
       |        |---> Redis (Cache, sessions)
       |        |---> Vector DB (RAG embeddings)
       |
       +---> External Services
                |---> LINE Channel API
                |---> Payment Gateway (LINE Pay)
                |---> Cloud Storage (GCS / S3)

// recommended-stack.ts
const techStack = {
  frontend: {
    framework: "Next.js 16 (App Router)",
    liffSdk: "@line/liff v2.24+",
    ui: "TailwindCSS + shadcn/ui",
    state: "React Server Components + Zustand",
  },
  backend: {
    runtime: "Node.js 22 LTS",
    api: "Next.js API Routes / Hono",
    database: "PostgreSQL + Prisma ORM",
    cache: "Redis / Upstash",
    queue: "BullMQ for async AI processing",
  },
  ai: {
    llm: "Google Gemini 2.5 Pro / OpenAI GPT-4o",
    vision: "Google Cloud Vision API",
    embeddings: "text-embedding-004",
    vectorDb: "Pinecone / pgvector",
    speech: "Google Cloud Speech-to-Text",
  },
  deployment: {
    hosting: "Vercel / Google Cloud Run",
    cdn: "Vercel Edge Network",
    monitoring: "Sentry + Langfuse (LLM tracing)",
  },
};

// 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: "Invalid signature" }, { status: 401 });
  }

  const { events } = JSON.parse(body);

  // Process events asynchronously for faster response
  Promise.all(events.map(processEvent)).catch(console.error);

  return NextResponse.json({ status: "ok" });
}

async function processEvent(event: LineEvent) {
  switch (event.type) {
    case "message":
      return handleMessage(event);
    case "postback":
      return handlePostback(event);
    case "follow":
      return handleFollow(event);
    default:
      console.log("Unhandled event type:", event.type);
  }
}

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

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

interface ConversationContext {
  userId: string;
  history: { role: "user" | "assistant"; content: string }[];
  userData: { name?: string; language?: string; preferences?: string[] };
}

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

  const systemPrompt = `You are a helpful LINE assistant for a business.
User: ${context.userData.name || "Customer"}
Language: ${context.userData.language || "auto-detect"}
Previous context: ${context.history.slice(-5).map(h => h.content).join(" | ")}

Rules:
- Respond in the same language as the user message
- Keep responses under 300 characters for optimal LINE display
- Include relevant product links when appropriate
- Be friendly but professional`;

  const chat = model.startChat({
    history: context.history.map((h) => ({
      role: h.role === "assistant" ? "model" : "user",
      parts: [{ text: h.content }],
    })),
    generationConfig: { maxOutputTokens: 500, temperature: 0.7 },
  });

  const result = await chat.sendMessage(`${systemPrompt}\n\nUser: ${message}`);
  return result.response.text();
}

// services/vision-handler.ts
import vision from "@google-cloud/vision";

const visionClient = new vision.ImageAnnotatorClient();

async function processProductImage(imageBuffer: Buffer): Promise<{
  labels: string[];
  products: ProductMatch[];
  text: string | null;
}> {
  const [labelResult] = await visionClient.labelDetection({
    image: { content: imageBuffer.toString("base64") },
  });

  const [textResult] = await visionClient.textDetection({
    image: { content: imageBuffer.toString("base64") },
  });

  const labels = labelResult.labelAnnotations?.map((l) => l.description!) || [];
  const text = textResult.fullTextAnnotation?.text || null;

  // Match labels against product database
  const products = await matchProducts(labels);

  return { labels, products, text };
}

async function handleImageMessage(event: LineMessageEvent) {
  const imageBuffer = await downloadLineImage(event.message.id);
  const analysis = await processProductImage(imageBuffer);

  if (analysis.products.length > 0) {
    // Send carousel of matching products
    return sendProductCarousel(event.replyToken, analysis.products);
  }

  return replyText(
    event.replyToken,
    `I found: ${analysis.labels.slice(0, 3).join(", ")}. How can I help you with this?`
  );
}

// services/recommendation-engine.ts
interface UserProfile {
  userId: string;
  viewHistory: string[];
  purchaseHistory: string[];
  preferences: string[];
  demographics: { age?: number; location?: string };
}

async function getRecommendations(
  profile: UserProfile,
  limit: number = 5
): Promise<Product[]> {
  // Combine collaborative filtering with content-based approach
  const [collaborative, contentBased] = await Promise.all([
    getCollaborativeRecommendations(profile.userId, limit),
    getContentBasedRecommendations(profile.preferences, limit),
  ]);

  // Merge and deduplicate, scoring by relevance
  const scored = mergeRecommendations(collaborative, contentBased, profile);

  return scored.slice(0, limit);
}

// Send personalized recommendations via LINE Flex Message
async function sendRecommendations(userId: string) {
  const profile = await getUserProfile(userId);
  const recommendations = await getRecommendations(profile);

  const flexMessage = {
    type: "flex",
    altText: "Recommended for you",
    contents: {
      type: "carousel",
      contents: recommendations.map((product) => ({
        type: "bubble",
        hero: {
          type: "image",
          url: product.imageUrl,
          size: "full",
          aspectRatio: "20:13",
        },
        body: {
          type: "box",
          layout: "vertical",
          contents: [
            { type: "text", text: product.name, weight: "bold", size: "md" },
            { type: "text", text: `${product.price} THB`, 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);
  const [profile, setProfile] = useState<liff.Profile | null>(null);

  useEffect(() => {
    liff.init({ liffId: process.env.NEXT_PUBLIC_LIFF_ID! }).then(async () => {
      if (liff.isLoggedIn()) {
        const userProfile = await liff.getProfile();
        setProfile(userProfile);
      }
    });
  }, []);

  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,
        userId: profile?.userId,
        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 bg-gray-50">
      <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 shadow-sm"
              }`}
            >
              {msg.content}
            </div>
          </div>
        ))}
      </div>
      <div className="p-4 border-t bg-white">
        <div className="flex gap-2">
          <input
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && sendMessage()}
            placeholder="Ask me anything..."
            className="flex-1 px-4 py-2 border rounded-full"
          />
          <button
            onClick={sendMessage}
            disabled={isLoading}
            className="px-6 py-2 bg-[#06C755] text-white rounded-full"
          >
            Send
          </button>
        </div>
      </div>
    </div>
  );
}

// Share AI-generated content back to LINE chat
async function shareAIResult(result: AIAnalysisResult) {
  if (!liff.isApiAvailable("shareTargetPicker")) return;

  await liff.shareTargetPicker([
    {
      type: "flex",
      altText: "AI Analysis Result",
      contents: {
        type: "bubble",
        body: {
          type: "box",
          layout: "vertical",
          contents: [
            { type: "text", text: "AI Analysis", weight: "bold", size: "xl" },
            { type: "separator", margin: "md" },
            { type: "text", text: result.summary, wrap: true, margin: "md" },
            {
              type: "text",
              text: `Confidence: ${(result.confidence * 100).toFixed(1)}%`,
              color: "#06C755",
              margin: "sm",
            },
          ],
        },
        footer: {
          type: "box",
          layout: "vertical",
          contents: [
            {
              type: "button",
              action: { type: "uri", label: "View Details", uri: result.detailUrl },
              style: "primary",
              color: "#06C755",
            },
          ],
        },
      },
    },
  ]);
}

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

async function ragQuery(
  question: string,
  userId: string
): Promise<string> {
  // 1. Generate embedding for the question
  const embedding = await generateEmbedding(question);

  // 2. Search vector database for relevant documents
  const relevantDocs = await vectorDb.query({
    vector: embedding,
    topK: 5,
    filter: { locale: getUserLocale(userId) },
  });

  // 3. Build context from retrieved documents
  const context = relevantDocs
    .map((doc) => doc.metadata.content)
    .join("\n---\n");

  // 4. Generate answer using LLM with retrieved context
  const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);
  const model = genAI.getGenerativeModel({ model: "gemini-2.5-pro" });

  const prompt = `Based on the following knowledge base, answer the question.
If the answer is not in the context, say so honestly.

Context:
${context}

Question: ${question}

Answer in the same language as the question. Keep it concise for LINE messaging.`;

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

// services/multimodal-handler.ts
async function handleMultiModalMessage(event: LineEvent) {
  const { type } = event.message;

  switch (type) {
    case "text":
      return processTextWithAI(event);

    case "image":
      const imageBuffer = await downloadContent(event.message.id);
      const imageAnalysis = await analyzeImage(imageBuffer);
      return generateResponse(event, imageAnalysis);

    case "audio":
      const audioBuffer = await downloadContent(event.message.id);
      const transcript = await speechToText(audioBuffer);
      return processTextWithAI({ ...event, message: { text: transcript } });

    case "video":
      const videoBuffer = await downloadContent(event.message.id);
      const frames = await extractKeyFrames(videoBuffer);
      const videoAnalysis = await analyzeVideoFrames(frames);
      return generateResponse(event, videoAnalysis);

    case "location":
      return handleLocationWithAI(event);
  }
}

// services/sentiment-router.ts
interface SentimentResult {
  score: number; // -1 (negative) to 1 (positive)
  magnitude: number;
  emotion: "happy" | "neutral" | "frustrated" | "angry";
}

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

  // Route angry or highly negative customers to human agents
  if (sentiment.emotion === "angry" || sentiment.score < -0.6) {
    await notifyHumanAgent(userId, message, sentiment);
    return "human";
  }

  // AI handles neutral and positive interactions
  return "ai";
}

// middleware/ai-rate-limiter.ts
import { Ratelimit } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";

const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(20, "1 m"), // 20 AI requests per minute per user
  analytics: true,
});

async function checkRateLimit(userId: string): Promise<boolean> {
  const { success, remaining } = await ratelimit.limit(userId);

  if (!success) {
    // Fallback to cached or rule-based response
    console.log(`Rate limited user ${userId}, ${remaining} remaining`);
  }

  return success;
}