AI 功能設計:別讓 token 吃掉利潤

Step 1:Supabase 加額度欄位

在 Supabase SQL Editor 執行:

-- 在 profiles 資料表加額度欄位(如果你在第 3 課已建 profiles)
ALTER TABLE profiles
  ADD COLUMN IF NOT EXISTS credits_remaining INTEGER NOT NULL DEFAULT 10,
  ADD COLUMN IF NOT EXISTS credits_reset_at TIMESTAMPTZ NOT NULL DEFAULT (date_trunc('month', now()) + interval '1 month');

-- 建索引,查詢快一點
CREATE INDEX IF NOT EXISTS profiles_credits_idx ON profiles(id, credits_remaining);

-- RLS 規則:用戶只能讀自己的 credits
CREATE POLICY "users read own credits"
  ON profiles FOR SELECT
  USING (auth.uid() = id);

也可以把上面這段直接丟給 Claude Code:

幫我在 Supabase 的 profiles 資料表加 credits_remaining(整數,預設 10)和 credits_reset_at(時間戳)欄位,
並加上 RLS 政策讓用戶只能讀自己的 credits。給我完整 SQL。

Step 2:建立扣額度的後端 API

建立 app/api/rewrite/route.ts:

import { NextRequest, NextResponse } from "next/server";
import Anthropic from "@anthropic-ai/sdk";
import { createClient } from "@/lib/supabase/server";

const anthropic = new Anthropic();

// 系統 prompt 獨立出來,方便後面加 cache_control
const SYSTEM_PROMPT = `你是一位專業的繁體中文文字編輯。
請改寫用戶提供的段落,讓文字更精煉、更有說服力。
保持原意,不要加入額外資訊。只回傳改寫後的文字,不要加說明。`;

export async function POST(req: NextRequest) {
  const supabase = await createClient();

  // 1. 確認登入
  const { data: { user }, error: authError } = await supabase.auth.getUser();
  if (authError || !user) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  // 2. 查詢並扣除額度(單一 SQL 操作,避免 race condition)
  const { data: profile, error: creditError } = await supabase
    .from("profiles")
    .select("credits_remaining")
    .eq("id", user.id)
    .single();

  if (creditError || !profile) {
    return NextResponse.json({ error: "Profile not found" }, { status: 404 });
  }

  if (profile.credits_remaining < 1) {
    return NextResponse.json(
      { error: "額度不足,請升級方案或等下個月重置" },
      { status: 402 }
    );
  }

  // 3. 取得輸入
  const { text } = await req.json();
  if (!text || text.length > 3000) {
    return NextResponse.json(
      { error: "輸入文字需在 3,000 字以內" },
      { status: 400 }
    );
  }

  try {
    // 4. 呼叫 Claude API(含 prompt caching)
    const message = await anthropic.messages.create({
      model: "claude-sonnet-4-6",
      max_tokens: 1024,
      system: [
        {
          type: "text",
          text: SYSTEM_PROMPT,
          cache_control: { type: "ephemeral" }, // 開啟 5 分鐘 TTL caching
        },
      ],
      messages: [{ role: "user", content: text }],
    });

    const result = (message.content[0] as { type: string; text: string }).text;

    // 5. 扣除額度(AI 呼叫成功才扣)
    await supabase
      .from("profiles")
      .update({ credits_remaining: profile.credits_remaining - 1 })
      .eq("id", user.id);

    return NextResponse.json({
      result,
      credits_remaining: profile.credits_remaining - 1,
    });
  } catch (err) {
    // AI 呼叫失敗不扣額度
    console.error("AI API error:", err);
    return NextResponse.json(
      { error: "AI 服務暫時無法使用,請稍後再試" },
      { status: 503 }
    );
  }
}

注意 cache_control: { type: "ephemeral" } 這個參數:它告訴 Anthropic「把這個 system 區塊快取起來」。第一次呼叫會寫入快取(寫入費 1.25x),之後 5 分鐘內命中快取只收 10% 費用。你的系統 prompt 越長,效果越顯著。

Step 3:用 Upstash 加 Rate Limit 防濫用

先安裝套件:

npm install @upstash/ratelimit @upstash/redis

到 upstash.com 免費建一個 Redis 資料庫,把 UPSTASH_REDIS_REST_URL 和 UPSTASH_REDIS_REST_TOKEN 加進 .env.local 和 Vercel 環境變數。

然後建立 middleware.ts(放在專案根目錄,與 app/ 同層):

import { NextRequest, NextResponse } from "next/server";
import { Ratelimit } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL!,
  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
});

// 每個用戶每分鐘最多 5 次 AI 呼叫(sliding window 較精準)
const ratelimit = new Ratelimit({
  redis,
  limiter: Ratelimit.slidingWindow(5, "1 m"),
  analytics: true, // 在 Upstash Console 看流量圖
});

export async function middleware(req: NextRequest) {
  // 只對 AI API 做 rate limit
  if (!req.nextUrl.pathname.startsWith("/api/rewrite")) {
    return NextResponse.next();
  }

  // 用 Authorization header 的 token 當識別 key
  // 比用 IP 更準確——同 NAT 底下的多人不會互相影響
  const authHeader = req.headers.get("authorization") ?? "";
  const identifier = authHeader || req.ip ?? "anonymous";

  const { success, limit, remaining, reset } = await ratelimit.limit(identifier);

  if (!success) {
    return NextResponse.json(
      { error: "請求太頻繁,請稍後再試" },
      {
        status: 429,
        headers: {
          "X-RateLimit-Limit": limit.toString(),
          "X-RateLimit-Remaining": remaining.toString(),
          "X-RateLimit-Reset": reset.toString(),
        },
      }
    );
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/api/rewrite/:path*"],
};

Step 4:前端顯示剩餘額度

在 React 元件裡呼叫 API 並即時更新剩餘額度:

"use client";
import { useState } from "react";

export default function RewriteEditor() {
  const [text, setText] = useState("");
  const [result, setResult] = useState("");
  const [credits, setCredits] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  async function handleRewrite() {
    if (!text.trim()) return;
    setLoading(true);
    setError("");

    const res = await fetch("/api/rewrite", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ text }),
    });

    const data = await res.json();
    setLoading(false);

    if (!res.ok) {
      // 額度不足:引導升級
      if (res.status === 402) {
        setError("額度已用完!本月剩餘 0 點。請升級方案繼續使用。");
      } else if (res.status === 429) {
        setError("操作太頻繁,請等 1 分鐘後再試。");
      } else {
        setError(data.error ?? "發生錯誤");
      }
      return;
    }

    setResult(data.result);
    setCredits(data.credits_remaining);
  }

  return (
    <div className="space-y-4">
      {credits !== null && (
        <p className="text-sm text-gray-500">
          本月剩餘額度:{credits} 點
          {credits <= 3 && (
            <span className="text-orange-500 ml-2">快用完了,考慮升級</span>
          )}
        </p>
      )}
      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="貼上要改寫的段落(上限 3,000 字)"
        className="w-full h-40 p-3 border rounded-lg"
        maxLength={3000}
      />
      <button
        onClick={handleRewrite}
        disabled={loading || !text.trim()}
        className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50"
      >
        {loading ? "改寫中..." : "AI 改寫(1 點)"}
      </button>
      {error && <p className="text-red-500 text-sm">{error}</p>}
      {result && (
        <div className="p-4 bg-gray-50 rounded-lg">
          <p className="text-sm font-medium text-gray-600 mb-2">改寫結果:</p>
          <p className="whitespace-pre-wrap">{result}</p>
        </div>
      )}
    </div>
  );
}

Step 5:每月額度自動重置

用 Supabase 的 pg_cron 擴充(Pro 方案支援,免費方案要用外部 cron):

-- 啟用 pg_cron(Supabase Pro 方案在 Dashboard > Extensions 開啟)
SELECT cron.schedule(
  'reset-monthly-credits',
  '0 0 1 * *',  -- 每月 1 日 00:00 UTC
  $$
    UPDATE profiles
    SET
      credits_remaining = CASE
        WHEN subscription_plan = 'free' THEN 10
        WHEN subscription_plan = 'basic' THEN 100
        WHEN subscription_plan = 'pro' THEN 500
        ELSE 10
      END,
      credits_reset_at = date_trunc('month', now()) + interval '1 month'
    WHERE credits_reset_at <= now();
  $$
);

如果你用 Supabase 免費方案,改用 Vercel Cron Jobs 替代:在 vercel.json 加:

{
  "crons": [
    {
      "path": "/api/cron/reset-credits",
      "schedule": "0 0 1 * *"
    }
  ]
}

然後建立 /api/cron/reset-credits/route.ts,在裡面做同樣的 Supabase update——記得用 CRON_SECRET 環境變數驗證這個 endpoint 只能由 Vercel 呼叫,不能讓外部隨便觸發。