Rork × Claude API：Prompt Caching と Extended Thinking で高品質AIアプリを実装する

// ❌ 絶対にやってはいけない — APIキーの直書き
const response = await fetch('https://api.anthropic.com/v1/messages', {
  headers: {
    'x-api-key': 'YOUR_API_KEY', // ← プレースホルダー。実際のキーをここに書かない
  },
});
 
// ✅ 正しい設計 — バックエンド（Supabase Edge Function等）経由
const response = await fetch('https://your-project.supabase.co/functions/v1/claude-proxy', {
  headers: {
    'Authorization': `Bearer ${supabaseAnonKey}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ userMessage: message }),
});

// supabase/functions/claude-proxy/index.ts
import Anthropic from 'npm:@anthropic-ai/sdk@0.39.0';
 
const client = new Anthropic({
  apiKey: Deno.env.get('ANTHROPIC_API_KEY'),
});
 
Deno.serve(async (req) => {
  if (req.method !== 'POST') {
    return new Response('Method not allowed', { status: 405 });
  }
 
  const { userMessage, conversationHistory, enableExtendedThinking } = await req.json();
 
  // ここでPrompt Cachingを設定（後述）
  // ...
});

// supabase/functions/claude-proxy/index.ts（Prompt Caching対応版）
 
const SYSTEM_PROMPT_BASE = `
あなたはRorkアプリ開発の専門家AIアシスタントです。
ユーザーのモバイルアプリ開発に関する質問に、具体的で実践的な回答をします。
 
## 専門知識
- React Native / Expo によるクロスプラットフォーム開発
- Supabase / Firebase によるバックエンド構築
- App Store / Google Play の審査・公開プロセス
- Stripe によるサブスクリプション課金の実装
- UI/UX設計とパフォーマンス最適化
 
## 回答スタイル
- コード例を必ず含める
- エラーが起きやすい箇所を事前に警告する
- 初心者にも理解しやすい平易な言葉を使う
（...長大なシステムプロンプトが続く場合、ここに全文を含める...）
`.trim();
 
// 長大なドキュメントやFAQをコンテキストとして追加する場合
const KNOWLEDGE_BASE = `
## Extended Thinkingの実装
 
### thinking設定でClaudeを「考えさせる」
 
Extended Thinkingを有効にするには、`thinking`パラメータを追加します。`budget_tokens`で思考トークンの上限を指定できます。
 
```typescript
// Extended Thinking対応のEdge Function
async function callClaudeWithThinking(
  userMessage: string,
  thinkingBudget: number = 8000
) {
  const response = await client.messages.create({
    model: 'claude-sonnet-4-6', // Extended ThinkingはSonnet系推奨
    max_tokens: thinkingBudget + 4096, // 思考トークン + 回答トークンの合計
    thinking: {
      type: 'enabled',
      budget_tokens: thinkingBudget, // 思考に使うトークンの上限（1024〜100000）
    },
    system: [
      {
        type: 'text',
        text: SYSTEM_PROMPT_BASE,
        cache_control: { type: 'ephemeral' }, // キャッシュとExtended Thinkingの併用も可能
      },
    ],
    messages: [{ role: 'user', content: userMessage }],
  });
 
  // レスポンスには思考ブロックと回答ブロックが含まれる
  const thinkingBlocks = response.content.filter(b => b.type === 'thinking');
  const textBlocks = response.content.filter(b => b.type === 'text');
 
  return {
    thinking: thinkingBlocks.map(b => (b as any).thinking).join('\n'),
    answer: textBlocks.map(b => (b as any).text).join('\n'),
    usage: response.usage,
  };
}

// 質問の複雑さを簡易判定するユーティリティ
function assessComplexity(message: string): 'simple' | 'moderate' | 'complex' {
  const complexKeywords = [
    '設計', 'アーキテクチャ', '比較', '最適化', '数学', '計算',
    'why', 'explain', 'compare', 'optimize', 'design', 'architecture',
    'どちらが', 'どのように', 'なぜ', '分析', 'evaluate',
  ];
 
  const complexityScore = complexKeywords.filter(kw =>
    message.toLowerCase().includes(kw)
  ).length;
 
  const isLong = message.length > 200; // 長い質問は複雑な可能性が高い
 
  if (complexityScore >= 2 || (complexityScore >= 1 && isLong)) return 'complex';
  if (complexityScore >= 1 || isLong) return 'moderate';
  return 'simple';
}
 
// 複雑さに応じて設定を変える統合関数
async function callClaude(userMessage: string, history: any[]) {
  const complexity = assessComplexity(userMessage);
 
  switch (complexity) {
    case 'complex':
      // Extended Thinking + Prompt Cachingの両方を使用
      return callClaudeWithThinking(userMessage, 16000); // 思考に16Kトークン
 
    case 'moderate':
      // Extended Thinkingなし、Prompt Cachingのみ
      return callClaudeWithCache(userMessage, history);
 
    case 'simple':
    default:
      // 通常リクエスト（最速・最安）
      return client.messages.create({
        model: 'claude-haiku-4-5-20251001', // 簡単な質問はHaikuで十分
        max_tokens: 1024,
        messages: [...history, { role: 'user', content: userMessage }],
      });
  }
}

// app/components/ThinkingIndicator.tsx
import React, { useEffect, useRef } from 'react';
import { View, Text, Animated, StyleSheet } from 'react-native';
 
interface ThinkingIndicatorProps {
  isThinking: boolean;
  thinkingText?: string; // 思考内容を途中で表示する場合（上級者向け）
}
 
export function ThinkingIndicator({ isThinking, thinkingText }: ThinkingIndicatorProps) {
  const dotOpacity = useRef(new Animated.Value(0)).current;
 
  useEffect(() => {
    if (!isThinking) return;
 
    const animation = Animated.loop(
      Animated.sequence([
        Animated.timing(dotOpacity, { toValue: 1, duration: 600, useNativeDriver: true }),
        Animated.timing(dotOpacity, { toValue: 0.3, duration: 600, useNativeDriver: true }),
      ])
    );
    animation.start();
    return () => animation.stop();
  }, [isThinking]);
 
  if (!isThinking) return null;
 
  return (
    <View style={styles.container}>
      <Animated.View style={[styles.dot, { opacity: dotOpacity }]} />
      <Text style={styles.label}>深く考えています...</Text>
      {thinkingText && (
        <Text style={styles.thinkingPreview} numberOfLines={2}>
          {thinkingText}
        </Text>
      )}
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 12,
    backgroundColor: '#F0F4FF',
    borderRadius: 12,
    marginVertical: 8,
    gap: 8,
  },
  dot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#7C6AF4',
  },
  label: {
    fontSize: 14,
    color: '#5B52B5',
    fontWeight: '500',
  },
  thinkingPreview: {
    fontSize: 11,
    color: '#888',
    fontStyle: 'italic',
    flex: 1,
  },
});

// Edge Function — ストリーミング対応版
Deno.serve(async (req) => {
  const { userMessage, enableExtendedThinking } = await req.json();
 
  const stream = await client.messages.stream({
    model: 'claude-sonnet-4-6',
    max_tokens: enableExtendedThinking ? 20000 : 4096,
    ...(enableExtendedThinking && {
      thinking: { type: 'enabled', budget_tokens: 10000 },
    }),
    system: [
      {
        type: 'text',
        text: SYSTEM_PROMPT_BASE,
        cache_control: { type: 'ephemeral' },
      },
    ],
    messages: [{ role: 'user', content: userMessage }],
  });
 
  // SSE（Server-Sent Events）形式でクライアントにストリーム
  const readable = new ReadableStream({
    async start(controller) {
      const encoder = new TextEncoder();
      for await (const chunk of stream) {
        if (chunk.type === 'content_block_delta') {
          if (chunk.delta.type === 'thinking_delta') {
            // 思考中のイベント
            controller.enqueue(encoder.encode(
              `data: ${JSON.stringify({ type: 'thinking', text: chunk.delta.thinking })}\n\n`
            ));
          } else if (chunk.delta.type === 'text_delta') {
            // 回答テキストのイベント
            controller.enqueue(encoder.encode(
              `data: ${JSON.stringify({ type: 'text', text: chunk.delta.text })}\n\n`
            ));
          }
        }
      }
      controller.enqueue(encoder.encode('data: [DONE]\n\n'));
      controller.close();
    },
  });
 
  return new Response(readable, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
    },
  });
});

// app/hooks/useStreamingChat.ts — Rork側のストリーミング受信
import { useState, useCallback } from 'react';
 
export function useStreamingChat() {
  const [streamingText, setStreamingText] = useState('');
  const [thinkingText, setThinkingText] = useState('');
  const [isThinking, setIsThinking] = useState(false);
  const [isStreaming, setIsStreaming] = useState(false);
 
  const sendMessage = useCallback(async (userMessage: string, enableThinking: boolean) => {
    setStreamingText('');
    setThinkingText('');
    setIsThinking(enableThinking);
    setIsStreaming(true);
 
    try {
      const response = await fetch(
        `${process.env.EXPO_PUBLIC_SUPABASE_URL}/functions/v1/claude-stream`,
        {
          method: 'POST',
          headers: {
            Authorization: `Bearer ${process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY}`,
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ userMessage, enableExtendedThinking: enableThinking }),
        }
      );
 
      const reader = response.body!.getReader();
      const decoder = new TextDecoder();
 
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
 
        const chunk = decoder.decode(value);
        const lines = chunk.split('\n').filter(line => line.startsWith('data: '));
 
        for (const line of lines) {
          const data = line.replace('data: ', '');
          if (data === '[DONE]') {
            setIsThinking(false);
            setIsStreaming(false);
            return;
          }
 
          const parsed = JSON.parse(data);
          if (parsed.type === 'thinking') {
            setThinkingText(prev => prev + parsed.text);
          } else if (parsed.type === 'text') {
            setIsThinking(false); // 回答が始まったら「考え中」を解除
            setStreamingText(prev => prev + parsed.text);
          }
        }
      }
    } catch (err) {
      console.error('Streaming error:', err);
      setIsStreaming(false);
      setIsThinking(false);
    }
  }, []);
 
  return { streamingText, thinkingText, isThinking, isStreaming, sendMessage };
}

// lib/claudeRetry.ts — エクスポネンシャルバックオフ付きリトライ
async function callClaudeWithRetry<T>(
  fn: () => Promise<T>,
  maxRetries: number = 3
): Promise<T> {
  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    try {
      return await fn();
    } catch (error: any) {
      const isRateLimitError = error.status === 429;
      const isServerError = error.status >= 500;
 
      if (attempt === maxRetries || (!isRateLimitError && !isServerError)) {
        throw error;
      }
 
      // レート制限の場合はRetry-Afterヘッダーを優先
      const retryAfter = error.headers?.['retry-after'];
      const waitMs = retryAfter
        ? parseInt(retryAfter) * 1000
        : Math.min(1000 * Math.pow(2, attempt), 30000); // 最大30秒
 
      console.log(`Rate limited. Retrying after ${waitMs}ms (attempt ${attempt + 1}/${maxRetries})`);
      await new Promise(resolve => setTimeout(resolve, waitMs));
    }
  }
  throw new Error('Max retries exceeded');
}
 
// 使用例
const result = await callClaudeWithRetry(() =>
  callClaudeWithCache(userMessage, conversationHistory)
);