1 · Setup (about 15 minutes, once)
- Install Claude Code: the coding agent that builds the app for you.
- Install Node.js 20 or newer: the free runtime the app runs on.
- Get a Claude API key: then add a few dollars of API credit (billed separately from a Claude subscription).
- Get a Fish Audio API key: then add API credit with the 80%-off link above.
- Paste the build prompt into Claude Code, in an empty folder.
- Add your keys yourself. Claude Code makes a
.env file: paste both keys there, not into the chat, and never share it. - Run it in Chrome with the command Claude Code gives you.
2 · The build prompt (paste into Claude Code)
THE BUILD PROMPT · INTERVIEWBuild me a local web app called Interview Panel: a mock internship interview with three AI interviewers, each with their own voice.
How it works:
1. I upload my resume (PDF or text) and paste the internship description.
2. Claude reads both and writes 4 opening questions grounded in my resume. Show me the resume facts it pulled, too.
3. Each question is spoken out loud. I answer by voice: transcribe me with Chrome's built-in speech recognition (Web Speech API). Space starts and stops my answer, and there's a "type instead" box.
4. Two follow-ups: the Recruiter asks what I personally did, then the Hiring manager pushes for evidence that it worked. I answer again.
5. The Coach gives feedback: reassuring first, then firm, ending with exactly what to fix. "Try again" lets me redo my answer, and the Coach compares the two.
The panel (Fish Audio voice ids, from the "Fish Official" voices in the public library):
- Recruiter, friendly and curious: 9a9cf47702da476aa4629e2506d4a857 (Hannah)
- Hiring manager, skeptical and direct: bf322df2096a46f18c579d0baa36f41d (Adrian)
- Coach, reassuring then firm: e3cd384158934cc9a01029cd7d278634 (Laura)
Tech:
- Node 20+, one small server, plain HTML/CSS/JS, no build step. Read ANTHROPIC_API_KEY and FISH_API_KEY from a .env file and never send the keys to the browser.
- Claude writes every word, using the official @anthropic-ai/sdk with model claude-opus-5-5 (make it a setting; claude-sonnet-5-5 is cheaper). Stream the text.
- Every spoken line comes back as ROLE: [direction] words, for example COACH: [reassuring] That's a real example. [firm] Now give me the number. Lines stay under 25 words and sound like people talking. Never invent facts about me.
- Voice each line with Fish Audio: POST https://api.fish.audio/v1/tts with the headers "Authorization: Bearer FISH_API_KEY" and "model: drama-3", JSON body {"text": the line with its brackets, "reference_id": the voice id, "format": "mp3"}. Drama 3 reads the brackets as delivery directions.
- Cache every voiced line on disk (hash of text + voice) so replays are free.
Screen:
- Three interviewer cards that light up while that voice plays, with "Voice generated by Fish Audio" showing.
- The conversation as a transcript, plus a Script drawer with the exact text sent to Drama 3 for each line.
- A cost estimate before anything is voiced (Drama 3 bills per character, brackets included) and a running "spent so far".
Make it clean, dark and modern. When it's done, give me the command to start it and the URL to open in Chrome.3 · Direct the voices
Write the emotion in brackets at the start of a line, and add a second tag where the tone should change:
RECRUITER[friendly, curious] Okay, what did you personally change?
HIRING MANAGER[skeptical, direct] And how do you know that actually worked?
COACH[reassuring, warm] You have a useful example. [firm, direct] Now get specific. What did you do, and what changed?
That's the Coach line from my video: one sentence, two tones. Drama 3 switches on the second tag. Tags to try: [warm], [skeptical], [excited], [slower], [firm], [sigh], [pause]. Fish Audio's Drama 3 page also shows tags that wrap words, like <whisper>…</whisper>.
4 · Tips
- Use your real resume. The questions come from it, so a vague resume gets vague questions.
- Answer with a number. The Hiring manager will ask "how do you know it worked?" Have the result ready.
- Always press Try again. The second answer is where you actually get better.
5 · If something breaks
- The mic doesn't work: Use Chrome, allow the microphone for the page (the icon in the address bar), or type instead.
- 401 from Fish Audio: The key is wrong. Re-copy it into .env and restart the app.
- 402 from Fish Audio: No API credit yet. API credit is separate from the Fish Audio app plans.
- Changed .env, nothing happened: Stop the app and start it again. Keys are read when it starts.
Each round costs real money, about 4 cents for me. Chrome's speech recognition may send your audio to Google to transcribe it. Three AI voices are practice, not a real hiring panel, so use them to find your weak answers, then practise those with a person. Paid partnership with Fish Audio. The Fish Audio link is my affiliate link. Offer details are from Fish Audio's Drama 3 launch post (checked Nov 2, 2026) and can change, so check the price before you buy.