Haiku 4.5・ストリーミング・プロンプトキャッシングを組み合わせて個人開発アプリのAPIコストを抑えた記録

import Anthropic from "@anthropic-ai/sdk";
 
const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY, // 環境変数から取得
});

// Before: 詰め込みすぎたシステムプロンプト（問題あり）
const systemPromptV1 = `
あなたは[アプリ名]のアシスタントです。
・ユーザーの入力を受け取り応答してください
・常に日本語で返答してください
・フレンドリーなトーンで
・200文字以内に収めてください
・専門用語は使わないでください
・絵文字を1〜2個使ってください
・ネガティブな発言は避けてください
・ユーザーを励ます内容を含めてください
... (以下続く)
`;
 
// After: 核心的な指示を前半に集約（改善後）
const systemPromptV2 = `
あなたは[アプリ名]のアシスタントです。
ユーザーの入力に対して、日本語で、200文字以内で、明るく励ます返答を生成してください。
 
【必須条件】
- 必ず日本語で返答する
- 200文字以内に収める
- 絵文字を1〜2個使用する
- ポジティブなトーンを保つ
`;

const response = await client.messages.create({
  model: "claude-haiku-4-5-20251001", // Haiku 4.5
  max_tokens: 512,
  system: systemPromptV2,
  messages: [
    {
      role: "user",
      content: userInput,
    },
  ],
});

type ContentRequest = {
  userInput: string;
  expectedLength: "short" | "long"; // ルーティング用フラグ
};
 
async function generateContent(req: ContentRequest): Promise<string> {
  if (req.expectedLength === "short") {
    // 短い出力はストリーミングなし（一括取得の方が体験が良い）
    return await generateWithoutStreaming(req.userInput);
  } else {
    // 長い出力はストリーミング
    return await generateWithStreaming(req.userInput);
  }
}

async function generateWithStreaming(userInput: string): Promise<string> {
  const chunks: string[] = [];
 
  try {
    const stream = await client.messages.stream({
      model: "claude-haiku-4-5-20251001",
      max_tokens: 1024,
      system: systemPromptV2,
      messages: [{ role: "user", content: userInput }],
    });
 
    for await (const chunk of stream) {
      if (
        chunk.type === "content_block_delta" &&
        chunk.delta.type === "text_delta"
      ) {
        chunks.push(chunk.delta.text);
        // リアルタイムでUIに送信する場合はここでWebSocket/SSEに流す
      }
    }
 
    const finalMessage = await stream.finalMessage();
 
    // stop_reason のチェック（"end_turn" 以外は要調査）
    if (finalMessage.stop_reason !== "end_turn") {
      console.warn(
        `Unexpected stop_reason: ${finalMessage.stop_reason}`,
        { input: userInput }
      );
    }
 
    return chunks.join("");
  } catch (error) {
    if (error instanceof Anthropic.APIConnectionError) {
      // 接続断：キャッシュがあればキャッシュを返す、なければリトライ
      console.error("Stream connection error:", error.message);
      throw error;
    }
    throw error;
  }
}

// 誤ったパターン（ユーザー入力の後にキャッシュポイントを置いてしまっている）
const badRequest = {
  model: "claude-haiku-4-5-20251001",
  max_tokens: 256,
  system: [
    {
      type: "text",
      text: systemPromptV2,
    },
  ],
  messages: [
    {
      role: "user",
      content: [
        {
          type: "text",
          text: userInput, // ← ここが毎回変わる
          cache_control: { type: "ephemeral" }, // ← 変動箇所の後なので無意味
        },
      ],
    },
  ],
};
 
// 正しいパターン（固定部分にキャッシュポイントを置く）
const goodRequest = {
  model: "claude-haiku-4-5-20251001",
  max_tokens: 256,
  system: [
    {
      type: "text",
      text: systemPromptV2, // ← ここは固定
      cache_control: { type: "ephemeral" }, // ← 固定部分にポイントを置く
    },
  ],
  messages: [
    {
      role: "user",
      content: userInput, // ← ここは毎回変わってよい
    },
  ],
};

interface UsageStats {
  inputTokens: number;
  outputTokens: number;
  cacheCreationTokens: number;
  cacheReadTokens: number;
}
 
function extractUsage(response: Anthropic.Message): UsageStats {
  return {
    inputTokens: response.usage.input_tokens,
    outputTokens: response.usage.output_tokens,
    cacheCreationTokens: response.usage.cache_creation_input_tokens ?? 0,
    cacheReadTokens: response.usage.cache_read_input_tokens ?? 0,
  };
}
 
// キャッシュヒット率の計算
function calculateCacheHitRate(stats: UsageStats[]): number {
  const totalRequests = stats.length;
  const cacheHits = stats.filter((s) => s.cacheReadTokens > 0).length;
  return (cacheHits / totalRequests) * 100;
}

// キャッシュウォームアップ関数
// アプリ起動時やキャッシュ失効前に呼び出す
async function warmUpCache(): Promise<void> {
  try {
    await client.messages.create({
      model: "claude-haiku-4-5-20251001",
      max_tokens: 1, // 最小限のトークン（コスト抑制）
      system: [
        {
          type: "text",
          text: systemPromptV2,
          cache_control: { type: "ephemeral" },
        },
      ],
      messages: [
        {
          role: "user",
          content: "ping", // ダミーメッセージ
        },
      ],
    });
    console.log("Cache warmed up at:", new Date().toISOString());
  } catch (error) {
    // ウォームアップ失敗はクリティカルではないため、エラーを飲み込む
    console.warn("Cache warmup failed:", error);
  }
}
 
// 4分ごとにキャッシュを更新（5分の有効期限の少し前）
setInterval(warmUpCache, 4 * 60 * 1000);

interface GenerateOptions {
  userInput: string;
  streaming: boolean;
  onStreamChunk?: (chunk: string) => void; // ストリーミング時のコールバック
}
 
async function generateOptimized(
  options: GenerateOptions
): Promise<{ text: string; usage: UsageStats }> {
  const { userInput, streaming, onStreamChunk } = options;
 
  const systemConfig = [
    {
      type: "text" as const,
      text: systemPromptV2,
      cache_control: { type: "ephemeral" } as const,
    },
  ];
 
  if (streaming && onStreamChunk) {
    // ストリーミングモード
    const chunks: string[] = [];
    let finalUsage: UsageStats | null = null;
 
    const stream = await client.messages.stream({
      model: "claude-haiku-4-5-20251001",
      max_tokens: 256,
      system: systemConfig,
      messages: [{ role: "user", content: userInput }],
    });
 
    for await (const chunk of stream) {
      if (
        chunk.type === "content_block_delta" &&
        chunk.delta.type === "text_delta"
      ) {
        chunks.push(chunk.delta.text);
        onStreamChunk(chunk.delta.text);
      }
    }
 
    const finalMessage = await stream.finalMessage();
    finalUsage = extractUsage(finalMessage);
 
    return { text: chunks.join(""), usage: finalUsage };
  } else {
    // 非ストリーミングモード（短い出力向け）
    const response = await client.messages.create({
      model: "claude-haiku-4-5-20251001",
      max_tokens: 256,
      system: systemConfig,
      messages: [{ role: "user", content: userInput }],
    });
 
    const text =
      response.content[0].type === "text" ? response.content[0].text : "";
    const usage = extractUsage(response);
 
    return { text, usage };
  }
}

async function generateWithRetry(
  options: GenerateOptions,
  maxRetries = 3
): Promise<{ text: string; usage: UsageStats }> {
  let lastError: Error | null = null;
 
  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {
      return await generateOptimized(options);
    } catch (error) {
      lastError = error as Error;
 
      if (error instanceof Anthropic.RateLimitError) {
        // レート制限：指数バックオフで待機
        const waitMs = Math.pow(2, attempt) * 1000;
        console.warn(`Rate limit hit. Waiting ${waitMs}ms before retry...`);
        await new Promise((resolve) => setTimeout(resolve, waitMs));
        continue;
      }
 
      if (error instanceof Anthropic.APIConnectionError) {
        // 接続エラー：短い待機後にリトライ
        await new Promise((resolve) => setTimeout(resolve, 500));
        continue;
      }
 
      // その他のエラーはリトライしない
      throw error;
    }
  }
 
  throw lastError ?? new Error("Max retries exceeded");
}

let lastRequestAt = 0;
 
export function markRequest(): void {
  lastRequestAt = Date.now();
}
 
// 直近4分間に実リクエストが無かったときだけウォームアップする
async function warmUpIfIdle(): Promise<void> {
  const idleMs = Date.now() - lastRequestAt;
  if (idleMs < 4 * 60 * 1000) {
    return; // 自然にヒットが発生している。書き込みを足さない
  }
  await warmUpCache();
}
 
setInterval(warmUpIfIdle, 60 * 1000); // 判定は1分ごと、実行は必要なときだけ