Web AI Assistant（RAG：資料庫檢索 + LLM 聊天）

串接架構（前端 / 後端 / DB / 模型）

• 前端：useChat 建聊天 UI（可做右下浮動 widget）
• 後端：Route Handler / Server Action 以 server-side 方式呼叫模型，並做使用者驗證與資料查詢
• 資料庫：Prisma + PostgreSQL，搭配 pgvector 儲存 embedding 做語意搜尋
• LLM：可用 OpenAI 或 Groq（或其他供應商），由 Vercel AI SDK 統一封裝串流回傳

RAG 流程（電商：查訂單 / 推薦商品）

RAG 的核心是：在回答前先「檢索」資料，再把結果注入 prompt，最後由模型做「總結」或「建議」。

1. 使用者提問：例如「我的訂單怎麼了？」
2. 取得身份：從 session 取得 userId，避免越權查詢
3. 檢索資料：用 SQL + pgvector（或先用一般查詢）找出最相關的訂單/產品摘要
4. 注入提示詞：把檢索結果作為 context
5. LLM 生成：回覆以資料為依據，避免胡亂推測

你可以把資料先壓縮成摘要（summary），把 embedding 只對摘要做；這樣檢索更快，context 更乾淨。

實作步驟（落地順序）

1. 準備套件：安裝 AI SDK、Prisma、pgvector 與（可選）檢索工具
2. DB Schema：新增 Vector 欄位存 embedding
3. 資料入庫：訂單/產品建立或更新時生成 embedding
4. 聊天 API：在 /api/chat 檢索資料並注入 prompt，再串流回傳
5. 前端 Widget：右下浮動聊天介面，上線後可逐步加入工具（查物流、查退貨政策）

npm i ai @ai-sdk/openai @ai-sdk/pgvector langchain prisma @prisma/pgvector

Prisma Schema（pgvector 儲存 embedding）

以下示意在 Order 存摘要與 embedding。實務上也可建立獨立的「向量索引表」（documents），把訂單/產品/FAQ 統一成一種 document schema。

model Order {
  id        String        @id @default(uuid())
  userId    String
  summary   String
  embedding Vector(1536)
  // ...其他欄位（status, total, createdAt, items...）
}

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

Embedding：資料入庫與更新策略

• 何時生成：訂單建立時、狀態更新時、產品上架/改價/改文案時
• 存什麼：建議存 summary（單行可讀的描述），避免把完整 JSON 都塞進 embedding input
• 維護：當 summary 變更就重算 embedding，否則檢索會偏掉

import { openai } from '@ai-sdk/openai';
import { prisma } from '@/lib/prisma';

export async function embedOrder(order: any) {
  const { embedding } = await openai.embeddings.create({
    model: 'text-embedding-3-small',
    input: `${order.userName}訂${order.items.join(',')}金額NT$${order.total}`,
  });

  await prisma.order.create({
    data: {
      ...order,
      embedding,
    },
  });
}

聊天 API（/api/chat：檢索 + 注入 context + 生成）

重點是：先查出 relevant context，再把 context 與使用者最新問題一起交給模型。回覆要偏向「可操作」：提供訂單狀態、追蹤方式、推薦理由與下一步。

import { openai } from '@ai-sdk/openai';
import { generateText } from 'ai';
import { prisma } from '@/lib/prisma';
import { auth } from '@/lib/auth';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const session = await auth();
  const userId = session?.user.id;

  const relevantOrders = await prisma.order.findMany({
    where: { userId },
    select: { summary: true },
    orderBy: { createdAt: 'desc' },
    take: 3,
  });

  const context = relevantOrders.map(o => o.summary).join('\n');
  const question = messages[messages.length - 1]?.content;

  const { text } = await generateText({
    model: openai('gpt-4o-mini'),
    prompt: `你是商城客服AI。\n用戶歷史訂單：\n${context}\n\n最新問題：${question}\n\n回覆親切，提供查詢/推薦/退貨幫助。`,
    temperature: 0.7,
  });

  return Response.json({ text });
}

注意事項（純文字整理）

• 不要把任何敏感資料（密碼、token、付款資訊）注入 prompt。
• 檢索必須以 userId 限縮，避免資料外洩。
• 把回覆做成「可驗證」：帶訂單編號、狀態、下一步建議。

前端聊天 Widget（useChat：串流互動）

Widget 建議做成右下浮動，並能在手機上切換為全螢幕；初期只要支援問答與基本推薦即可，上線後再逐步加入工具（查物流、查退貨、推薦配件）。

'use client';
import { useChat } from 'ai/react';

export function ChatWidget() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/chat',
  });

  return (
    <div className="fixed bottom-4 right-4 w-80 h-96 bg-white shadow-lg rounded-lg p-4">
      <div className="space-y-2 mb-4 max-h-64 overflow-y-auto">
        {messages.map(m => (
          <div key={m.id} className={m.role === 'user' ? 'text-right' : 'text-left'}>
            {m.content}
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} className="w-full p-2 border" />
      </form>
    </div>
  );
}

電商應用情境（最常見的 3 類）

• 訂單查詢：問「我的 iPhone 訂單？」→ 回覆訂單狀態、出貨與追蹤方式
• 推薦：基於產品/購買歷史的 embedding，推薦配件或相似商品
• 售後：退貨規則、保固、常見 FAQ；把政策與條款當成可檢索資料

轉換提升的做法（純文字整理）

• 把推薦做成可行動：直接給「前往商品頁」與「加入購物車」引導。
• 把問題分流：能自助解決的先回答；需要人工的提供「轉接客服」選項。
• 把購物意圖辨識：例如詢問規格/相容性 → 推薦對應型號與配件。

安全與營運（成本、限制、監控）

• 成本：主要取決於 tokens 與 embedding 次數；建議加上快取與限流。
• 內容安全：避免把 PII、付款資料、token 放進 prompt；回覆時也避免完整曝露敏感資訊。
• 監控：記錄每次 query、檢索到的 documents、回覆與耗時，方便調 prompt 與查錯。
• 回覆品質：加入「不確定就請使用者提供訂單號」的策略，避免胡猜。

開始專案

如果你要在網站或電商上加聊天 AI，我們可以用「先上線可用的 RAG（訂單查詢 + 推薦 + FAQ）」為第一階段，第二階段再加入工具呼叫、後台知識庫管理、以及更精準的向量檢索與快取策略。