◉RORK LABJP
●GPT-6.1 SOL — Added to Rork's model menu (09-29) with Low, Medium and High effort; included on Pro and Max●SONNET 5.5 — Claude Sonnet 5.5 is selectable: strong at UI design and faster than Sonnet 5 (09-28)●SDK 58 — Beta since 09/15 with no stable date yet; running projects in Expo Go has required login since 09/03●WIDGET — A write-up traces an iOS widget that renders black only in production builds●OBSERVE — EAS Observe now records native crashes too (SDK 57.0.21 or later, 10/07)●NEW — My App Open Ad Only Showed When the App…●GPT-6.1 SOL — Added to Rork's model menu (09-29) with Low, Medium and High effort; included on Pro and Max●SONNET 5.5 — Claude Sonnet 5.5 is selectable: strong at UI design and faster than Sonnet 5 (09-28)●SDK 58 — Beta since 09/15 with no stable date yet; running projects in Expo Go has required login since 09/03●WIDGET — A write-up traces an iOS widget that renders black only in production builds●OBSERVE — EAS Observe now records native crashes too (SDK 57.0.21 or later, 10/07)●NEW — My App Open Ad Only Showed When the App…
Articles/AI Models
◉ AI Models/2026-04-08Advanced

Building an Immersive AI Language Learning App with Rork — Whisper Speech Recognition × Claude Conversational AI × ElevenLabs TTS

Production implementation notes for an immersive language learning app integrating Whisper, Claude, and ElevenLabs in Rork Max. Covers CEFR-adaptive curriculum, SM-2 spaced repetition, streaming latency optimization, and a freemium pricing model that holds a 55 percent margin.

Rork Max236AI Language LearningWhisper4Claude API11ElevenLabsTTSSpeech RecognitionReact Native239Indie Dev40EdTech

✦ Premium Article

What I Wished Existed While Preparing Solo Exhibitions in Europe

In 2024, while coordinating exhibitions in Berlin and Milan with local galleries, I kept hitting the same wall. I had prepped with the usual language apps, but the moment the video calls started I could not catch their intonation, and my own pronunciation did not land. The reason was obvious in hindsight: most apps over-index on reading practice and under-deliver on real-time speaking and listening loops.

As Masaki Hirokawa, an indie developer who has been shipping iOS and Android apps since 2014 (dolice.design), I sat down with those notes and asked: could Whisper, Claude, and ElevenLabs together inside Rork Max close that gap at an indie scale? This guide is the design document that came out of that experiment, written so you can move from API keys to production without re-doing the research. The flashcard-style basics live in the Rork Language Learning App Tutorial; from here we focus only on the next step.

The three AI APIs we combine are:

  • OpenAI Whisper API — speech-to-text transcription with word-level confidence values that we will repurpose for pronunciation scoring
  • Anthropic Claude API — adaptive conversation simulation, grammar feedback, and curriculum generation that respond to the learner's CEFR level (A1 through C2)
  • ElevenLabs TTS API — native-quality voice synthesis so listening and speaking practice happen in the same screen

One thing I will say upfront. It is tempting to assume that the voice AI quality is everything, but after running these pipelines against real users I am convinced the bigger factors for retention are loop latency and learning consistency. I will return to that observation throughout the guide.


System Architecture — Integrating Three AI APIs

Overall Structure

The immersive language learning app architecture consists of four layers:

  • Presentation Layer: React Native (Expo) UI components — conversation screen, lesson screen, progress dashboard
  • Orchestration Layer: Middleware logic controlling the AI API call sequence, managing the Whisper → Claude → TTS pipeline
  • AI Service Layer: Individual API clients for Whisper (STT), Claude (conversation/analysis), and ElevenLabs (TTS)
  • Data Persistence Layer: Supabase for learning history, progress tracking, and user profiles

Pipeline Flow

A typical learning session where the user speaks in English follows this pipeline:

// Full AI language learning pipeline flow
// pipeline/LessonPipeline.ts
 
interface LessonPipelineResult {
  transcription: string;        // Whisper transcription output
  pronunciationScore: number;   // Pronunciation score (0-100)
  feedback: ConversationFeedback; // Claude's feedback
  audioResponse: string;        // ElevenLabs audio as Base64
  nextPrompt: string;           // Next conversation prompt
}
 
export async function processUserUtterance(
  audioBlob: Blob,
  conversationHistory: Message[],
  userProfile: LearnerProfile
): Promise<LessonPipelineResult> {
  // Step 1: Whisper converts speech to text
  const transcription = await transcribeWithWhisper(audioBlob);
 
  // Step 2: Claude evaluates pronunciation + generates response
  const claudeResponse = await analyzeAndRespond({
    userText: transcription.text,
    expectedPhrase: conversationHistory.at(-1)?.expectedResponse,
    history: conversationHistory,
    learnerLevel: userProfile.level,
    targetLanguage: userProfile.targetLanguage,
  });
 
  // Step 3: ElevenLabs synthesizes the response as speech
  const audioResponse = await synthesizeSpeech(
    claudeResponse.responseText,
    userProfile.preferredVoice
  );
 
  return {
    transcription: transcription.text,
    pronunciationScore: claudeResponse.pronunciationScore,
    feedback: claudeResponse,
    audioResponse,
    nextPrompt: claudeResponse.nextPrompt,
  };
}

The key design principle here is the sequential dependency: Whisper's output feeds into Claude, and Claude's output feeds into ElevenLabs. Because each API call is serial, latency optimization becomes critical — we'll address this later with streaming responses.


✦

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
✦A three-stage Whisper x Claude x ElevenLabs pipeline you can copy-paste, plus the full Claude system prompt that adapts behavior across CEFR A1 to C2
✦A robust pronunciation scoring function built from Whisper word probabilities, along with the SM-2 spaced repetition and adaptive curriculum scoring code
✦API cost breakdown of about $0.05 per session, and the freemium design that keeps a 55 percent gross margin while shipping streaming TTS for sub-second perceived latency
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.

or
Unlock all articles with Membership →
Share

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.

  • ✦Copy-paste ready implementation code
  • ✦New advanced guides published daily
  • ✦$5/mo or $10 for lifetime access
View Membership →

Related Articles

◉ AI Models2026-05-05
Build an AI Interview Coach App with Rork Max: Voice Recording, Claude Evaluation & Progress Tracking
How I built a production-ready AI interview coach app with Rork Max — expo-audio recording, Whisper transcription, Claude evaluation, a JSON extractor measured against six response shapes, and a free tier that is counted on the server.
◉ AI Models2026-04-29
Building a Talking AI Companion App with Rork and ElevenLabs
Text-only companion apps tend to lose half their users within the first three days. Adding a real voice through ElevenLabs changes the experience entirely. Here's a hands-on guide to wiring it up in a Rork app, with caching tactics and paywall design that actually work.
◉ AI Models2026-04-17
We Stopped Sending Push Notifications and Churn Dropped — Building an AI-Powered Churn Prediction System in Rork Max
Learn how to build a churn prediction system in Rork Max using Supabase Edge Functions, Claude API for personalized messages, and OneSignal for targeted delivery. Full implementation with code.