Rork × Claude API: Complete Implementation Guide for Prompt Caching and Extended Thinking

// ❌ Never do this — hardcoded API key
const response = await fetch('https://api.anthropic.com/v1/messages', {
  headers: {
    'x-api-key': 'YOUR_API_KEY', // Use a placeholder, never a real key
  },
});
 
// ✅ Correct approach — call through a backend proxy
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 configuration shown below
  // ...
});

// supabase/functions/claude-proxy/index.ts (with Prompt Caching)
 
const SYSTEM_PROMPT_BASE = `
You are an expert AI assistant for Rork app development.
You answer user questions about mobile app development with concrete, actionable advice.
 
## Expertise
- Cross-platform development with React Native / Expo
- Backend setup with Supabase / Firebase
- App Store / Google Play submission and review processes
- Subscription billing with Stripe
- UI/UX design and performance optimization
 
## Response Style
- Always include code examples
- Warn proactively about common errors
- Use clear language accessible to developers of all levels
(... a long system prompt continues here ...)
`.trim();
 
// Large knowledge base or documentation
const KNOWLEDGE_BASE = `
 
## Implementing Extended Thinking
 
### Enabling the Thinking Parameter
 
To activate Extended Thinking, add the `thinking` parameter to your API request and set `budget_tokens` to control how much token budget Claude can spend on internal reasoning.
 
```typescript
// Extended Thinking implementation in Edge Function
async function callClaudeWithThinking(
  userMessage: string,
  thinkingBudget: number = 8000
) {
  const response = await client.messages.create({
    model: 'claude-sonnet-4-6', // Sonnet models are recommended for Extended Thinking
    max_tokens: thinkingBudget + 4096, // Must be larger than budget_tokens
    thinking: {
      type: 'enabled',
      budget_tokens: thinkingBudget, // Range: 1024–100000
    },
    system: [
      {
        type: 'text',
        text: SYSTEM_PROMPT_BASE,
        cache_control: { type: 'ephemeral' }, // Caching and Extended Thinking work together
      },
    ],
    messages: [{ role: 'user', content: userMessage }],
  });
 
  // Response includes both thinking blocks and text blocks
  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,
  };
}

// Lightweight complexity assessor
function assessComplexity(message: string): 'simple' | 'moderate' | 'complex' {
  const complexKeywords = [
    'design', 'architecture', 'compare', 'optimize', 'analyze', 'explain',
    'why', 'best way', 'tradeoff', 'evaluate', 'strategy', 'implement',
    'difference between', 'pros and cons', 'recommend',
  ];
 
  const complexityScore = complexKeywords.filter(kw =>
    message.toLowerCase().includes(kw)
  ).length;
 
  const isLong = message.length > 300;
 
  if (complexityScore >= 2 || (complexityScore >= 1 && isLong)) return 'complex';
  if (complexityScore >= 1 || isLong) return 'moderate';
  return 'simple';
}
 
// Unified routing function
async function callClaude(userMessage: string, history: any[]) {
  const complexity = assessComplexity(userMessage);
 
  switch (complexity) {
    case 'complex':
      // Extended Thinking + Prompt Caching
      return callClaudeWithThinking(userMessage, 16000);
 
    case 'moderate':
      // Prompt Caching only — no extended thinking overhead
      return callClaudeWithCache(userMessage, history);
 
    case 'simple':
    default:
      // Standard request with a smaller model for maximum speed and cost efficiency
      return client.messages.create({
        model: 'claude-haiku-4-5-20251001',
        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}>Thinking deeply...</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 — Streaming version
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 }],
  });
 
  // Stream as Server-Sent Events (SSE)
  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-side SSE consumer
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); // Switch from thinking state to answering state
            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;
      }
 
      // Respect the Retry-After header if present, otherwise use exponential backoff
      const retryAfter = error.headers?.['retry-after'];
      const waitMs = retryAfter
        ? parseInt(retryAfter) * 1000
        : Math.min(1000 * Math.pow(2, attempt), 30000);
 
      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');
}
 
// Usage
const result = await callClaudeWithRetry(() =>
  callClaudeWithCache(userMessage, conversationHistory)
);

// lib/cacheMonitor.ts — Production cache telemetry
interface CacheMetrics {
  requestId: string;
  timestamp: number;
  model: string;
  inputTokens: number;
  cacheWriteTokens: number;
  cacheReadTokens: number;
  outputTokens: number;
  cacheHitRate: number;
  estimatedCostSaved: number; // USD
}
 
function computeCacheMetrics(usage: any, model: string): CacheMetrics {
  const cacheReadTokens = usage.cache_read_input_tokens ?? 0;
  const cacheWriteTokens = usage.cache_creation_input_tokens ?? 0;
 
  // Approximate cost difference between cached and uncached reads
  // (verify exact rates on Anthropic's pricing page)
  const standardRatePerMillion = 3.0;
  const cacheReadRatePerMillion = 0.30;
  const estimatedCostSaved =
    (cacheReadTokens / 1_000_000) * (standardRatePerMillion - cacheReadRatePerMillion);
 
  const totalInput = usage.input_tokens + cacheReadTokens;
  const cacheHitRate = totalInput > 0 ? cacheReadTokens / totalInput : 0;
 
  return {
    requestId: crypto.randomUUID(),
    timestamp: Date.now(),
    model,
    inputTokens: usage.input_tokens,
    cacheWriteTokens,
    cacheReadTokens,
    outputTokens: usage.output_tokens,
    cacheHitRate,
    estimatedCostSaved,
  };
}
 
// Log to your analytics backend (e.g., Supabase, Segment, custom endpoint)
async function logCacheMetrics(metrics: CacheMetrics) {
  await supabase.from('ai_cache_metrics').insert(metrics);
}

// app/components/ResponseRating.tsx
import { useState } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { supabase } from '@/lib/supabase';
 
interface ResponseRatingProps {
  responseId: string;
  usedExtendedThinking: boolean;
}
 
export function ResponseRating({ responseId, usedExtendedThinking }: ResponseRatingProps) {
  const [rated, setRated] = useState(false);
 
  const submitRating = async (rating: 1 | 2 | 3 | 4 | 5) => {
    await supabase.from('response_ratings').insert({
      response_id: responseId,
      rating,
      used_extended_thinking: usedExtendedThinking,
      rated_at: new Date().toISOString(),
    });
    setRated(true);
  };
 
  if (rated) return <Text style={styles.thanks}>Thanks for your feedback!</Text>;
 
  return (
    <View style={styles.container}>
      <Text style={styles.label}>Was this response helpful?</Text>
      <View style={styles.stars}>
        {[1, 2, 3, 4, 5].map(star => (
          <TouchableOpacity key={star} onPress={() => submitRating(star as any)}>
            <Text style={styles.star}>★</Text>
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { padding: 12, alignItems: 'center' },
  label: { fontSize: 13, color: '#666', marginBottom: 8 },
  stars: { flexDirection: 'row', gap: 8 },
  star: { fontSize: 24, color: '#FFB800' },
  thanks: { fontSize: 13, color: '#888', textAlign: 'center', padding: 8 },
});