◉ AI Models/2026-04-03Advanced

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

Master Claude API's Prompt Caching and Extended Thinking to dramatically improve your Rork app's AI quality. Covers cost reduction up to 90%, response speed optimization, and high-accuracy reasoning with production-ready code examples.

Claude API¹¹ Prompt Caching Extended Thinking Anthropic⁴ AI Implementation Rork Max²²⁹ Cost Optimization³

✦ Premium Article

Setup and context: How Claude's Advanced Features Transform Your App

If you've built an AI-powered app with Rork Max, you've probably run into two common pain points: API costs spiraling out of control, or AI responses that aren't quite good enough for complex questions. Anthropic's Claude API offers two powerful features that directly address both problems — Prompt Caching and Extended Thinking.

Prompt Caching lets you cache repeated portions of your prompts on Anthropic's servers, reducing API costs by up to 90% while significantly improving response latency. Extended Thinking, introduced with Claude 3.7 Sonnet, enables the model to engage in an internal reasoning process before responding — delivering dramatically higher accuracy on complex tasks like multi-step problem solving, architectural design, and analytical comparisons.

This guide provides production-ready implementations of both features for Rork Max apps. It's written for developers who already understand Claude API basics (see Building an AI Assistant App with Claude API) and want to take their implementation further.

Understanding Prompt Caching

Why Prompt Caching Matters

In a standard Claude API request, every token in your input is processed and billed on each request. If you're sending a lengthy system prompt or retrieving large documents via RAG and including them in every request, costs accumulate fast.

With Prompt Caching, the Claude API server stores a portion of your input. When subsequent requests hit that cache, processing is skipped for those tokens — delivering three concrete benefits:

Cost reduction: Cached input tokens are billed at approximately 10% of the standard input token rate
Faster responses: Time to first token drops dramatically on cache hits (often 80%+ improvement)
Practical large-context use: You can include extensive documentation or knowledge bases without worrying about token costs

Scenarios Where Prompt Caching Shines

These use cases see the biggest wins from Prompt Caching:

Tutorial apps: AI assistants backed by full technical documentation or textbooks
Customer support bots: Bots that embed detailed FAQs and product specs in their system prompt
Legal or medical apps: Specialized apps that hold large regulatory documents or clinical guidelines as context
Code analysis tools: Development assistants that receive entire codebases as context

✦

Thank you for reading this far.

Continue Reading

What follows includes implementation code, benchmarks, and practical content we hope you'll find useful. This site runs without ads — server and development costs are supported entirely by members like you. If it's been helpful, we'd be truly grateful for your support.

WHAT YOU'LL LEARN

✦Reduce API costs by up to 90% using Prompt Caching while improving response speed for production Rork apps

✦Integrate Extended Thinking into Rork apps for complex multi-step reasoning, code generation, and strategic analysis

✦Production-ready patterns for streaming UI, error handling, rate limit management, and dynamic complexity routing

Secure payment via Stripe · Cancel anytime

✦

Unlock This Article

Get full access to the rest of this article. Buy once, read anytime. This site is ad-free — your support goes directly toward keeping it running.

Unlock all articles with Membership →

Understanding Extended Thinking

Building an AI That Actually "Thinks"

Extended Thinking is a capability of Claude 3.7 Sonnet. While standard Claude generates a response directly from input, Extended Thinking enables the model to produce an internal chain of thought (thinking tokens) before delivering its final answer. This thinking process is included in the API response, letting you show a "thinking in progress" state or use it for debugging.

Extended Thinking is particularly effective in these scenarios:

Math and logic problems: Multi-step calculations or proofs
Code generation: High-quality, architecturally sound code
Comparative analysis and decision support: Evaluating multiple options with nuanced tradeoffs
Long-form planning: Travel itineraries, business plans, learning curricula
Scientific and engineering problems: Complex calculations in physics, chemistry, or engineering

Important caveat: Extended Thinking consumes more tokens, so enabling it universally isn't cost-effective. Simple Q&A and casual conversation work fine without it. The best pattern is dynamically routing based on complexity — which we'll implement below.

Setup and Configuration in Rork Max

Prerequisites

To follow along with the implementation examples:

Rork Max account (Claude code mode required)
Anthropic API key (paid plan recommended)
Expo SDK 52+
Node.js 18+ (for local validation)

Secure API Key Management

Never hardcode API keys in your app's source code. For Rork Max apps, the recommended architecture routes Claude API calls through Supabase Edge Functions or your own backend.

// ❌ 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 }),
});

For a complete guide on building secure Supabase backends, see Supabase Edge Functions, RLS, and API Design Guide for Rork Max.

Base Edge Function Setup

// 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
  // ...
});

Implementing Prompt Caching

Adding cache_control to Your Requests

To enable Prompt Caching, add cache_control: { type: "ephemeral" } at specific points in your API request. You can set up to 4 cache breakpoints per request.

// 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,
  };
}

Dynamic Complexity Routing

Rather than enabling Extended Thinking for every request, route intelligently based on question complexity. This balances cost and quality.

// 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 }],
      });
  }
}

Thinking Progress UI in React Native

Extended Thinking can add 5–15+ seconds of wait time. A polished "thinking" animation keeps users engaged rather than frustrated.

// 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,
  },
});

Streaming UI Optimization

Streaming for Better Perceived Performance

Extended Thinking can introduce noticeable latency before the first token of the final answer arrives. The streaming API dramatically improves perceived responsiveness — users see thinking tokens flowing in real time, then the answer text begins immediately once reasoning completes.

// 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 };
}

Cost Optimization and Rate Limit Strategies

Understanding the Cost Math

Here's how Prompt Caching affects your API costs (approximate values as of April 2026 — always verify with Anthropic's official pricing page):

Approximate cost structure for Claude Sonnet:

Standard input tokens (~$3/M tokens): billed for every token in every request
Cache write tokens (~$3.75/M tokens): billed when a cache entry is created (first request)
Cache read tokens (~$0.30/M tokens): only 10% of standard input token cost!

Example: A 5,000-token system prompt sent 100 times per day:

Without caching: 5,000 × 100 × $3/M = $1.50/day
With caching (1 write + 99 hits): 5,000 × $3.75/M + 5,000 × 99 × $0.30/M = $0.167/day

That's roughly 89% cost reduction — translating to ~$45/month down to ~$5/month for this scenario alone.

Exponential Backoff for Rate Limits

Production apps need robust rate limit handling. Here's a clean retry implementation:

// 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)
);

Monitoring and Observability

Tracking Cache Performance in Production

Once you've deployed Prompt Caching, you need visibility into whether it's actually working. Log cache usage metadata from every API response and surface aggregated stats in a backend dashboard.

// 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);
}

A/B Testing: Measuring Quality Uplift from Extended Thinking

To justify the cost of Extended Thinking, you want empirical evidence of quality improvement for your specific use case. A simple A/B framework lets you collect user ratings split by whether Extended Thinking was used.

// 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 },
});

Analyze your collected ratings weekly. If Extended Thinking responses consistently score 0.5+ points higher (on a 5-point scale) for complex questions, the additional token cost is almost certainly worth it for that query type.

Real-World Use Cases

Use Case 1: AI Programming Mentor

For a Rork-based app development tutorial app, you can cache the full text of Expo and React Native documentation (potentially hundreds of thousands of tokens). Users get accurate, documentation-grounded answers at a fraction of the cost of processing those tokens on every request.

Use Case 2: AI Business Plan Advisor

An app that helps entrepreneurs evaluate business plans is a great candidate for Extended Thinking. When a user submits a business plan and asks "Is this viable?", Extended Thinking lets Claude reason through market fit, competitive landscape, financial projections, and risk factors before responding — producing advice that feels genuinely thoughtful and earns user trust, which drives premium plan conversions.

Use Case 3: Legal and Compliance Review Bot

Legal accuracy is critical. Extended Thinking helps Claude take the time to interpret regulatory language carefully, reducing the chance of missed nuance. Pairing this with cached legal documents makes the combination both high-quality and cost-effective.

For more on advanced AI-driven monetization strategies, see Advanced In-App AI Recommendations and Monetization Design.

Frequently Asked Questions

Q1. Does Prompt Caching work with all Claude models?

No. Anthropic enables Prompt Caching only on specific models. As of April 2026, it's available on Claude 3.5 Sonnet, Claude 3.7 Sonnet, and certain Claude 3 Haiku versions. Always check Anthropic's official documentation before building around this feature, as supported models may change.

Q2. How much slower does Extended Thinking make responses?

It depends on budget_tokens. With a budget of 8,000 tokens, expect 5–15 additional seconds before the first text token. For complex questions where quality matters, this tradeoff is worth it. Combining Extended Thinking with streaming reduces the perceived wait significantly — users see reasoning flowing in real time rather than staring at a blank screen.

Q3. Where should I place cache breakpoints for best results?

Place your longest, most stable content before each cache breakpoint — typically your system prompt and knowledge base. For conversation history, add a cache breakpoint after the second-to-last message. This caches the stable historical context while keeping the latest user message uncached (since it changes on every request). Remember the 4-breakpoint maximum per request.

Q4. Can I use Extended Thinking and Prompt Caching simultaneously?

Yes, they work independently. The thinking parameter and cache_control fields don't interfere with each other. Note that thinking tokens themselves are not cached — Prompt Caching benefits apply to your system prompt and knowledge base portions, not to the internal reasoning output.

Q5. Should I show users the raw thinking content?

For most users, no — a clean "thinking..." animation is far better UX than walls of internal reasoning text. That said, showing thinking content can be a compelling feature for power users or developer tools. Consider making it optional, perhaps accessible by tapping a "show reasoning" toggle after the response arrives.

Summary

This guide covered two of Claude API's most powerful features for building high-quality, cost-efficient AI apps in Rork Max.

Key takeaways:

Prompt Caching requires only adding cache_control: { type: "ephemeral" } to your stable content — system prompts and knowledge bases — and can reduce API costs by up to 90%
Extended Thinking is activated with thinking: { type: "enabled", budget_tokens: N } and delivers dramatically better accuracy on complex reasoning tasks
Dynamic complexity routing is the production-ready pattern: use Haiku for simple messages, Sonnet + Caching for moderate questions, and Sonnet + Extended Thinking for complex ones
Streaming UI transforms perceived performance by surfacing thinking progress and streaming answer tokens in real time

Together, these techniques solve both the cost problem and the quality problem that hold many AI app developers back. Start with Prompt Caching (it requires minimal code changes and delivers immediate ROI), then layer in Extended Thinking for your app's most demanding interactions.

To go deeper on Claude AI implementation, check out Building an Intelligent Assistant App with Claude API and Function Calling and Building an AI Chat App with RAG and Knowledge Base. For a comprehensive foundation in AI app architecture, AI-Powered App Development: A Practical Guide is a well-organized resource that covers the full stack from API integration to production deployment.

Thank You for Reading

Rork Lab is ad-free, supported entirely by members like you. We publish practical guides daily with implementation code, benchmarks, and production-ready patterns. If you've found it useful, we'd love to have you on board.