Safe Node – Scam & Privacy Education for Kids

Main chat: talk to the “agent.” Staged conversation + instant feedback when you share or refuse personal info. Score in corner.
Same chat terminal in context. Voice message and camera buttons let kids try mic/camera safety demos without leaving the flow.
Agent select—Captain RedHeart and other levels. Unlock by scoring 80%+ on scam-awareness responses. NODE://7 theme.
After granting camera: Game Over screen explains real-world risks. “Back to Safety” returns to chat. Part of the privacy lesson.
Behind the scenes: the real Mr. Whiskers (Level 3 inspiration) keeping an eye on the dev environment. No scammer, just curiosity.

Inspiration

Kids are targets for phishing, fake emergencies, and social engineering every day. "Don't share your password" and "don't talk to strangers" don't show how these attacks work or why saying no matters. We wanted an experience where children could practice spotting scams in a safe, fictional environment—and learn that once they tap "Allow" on a microphone, a site can keep listening even when nothing on screen says "recording." We were inspired by the need for learning by doing: not just rules, but staged conversations, instant feedback, and a clear sense of progress.

What We Learned

Staged prompts work. Telling the model "you're a scammer" wasn't enough; we had to define conversation stages (friendly → rapport → scam tactics) and pass CURRENT STAGE: (n) so the AI didn't ask for an SSN in message one. That made the experience predictable and educational.
Feedback has to be explicit. We learned to analyze the user's reply against what the scammer just asked for: if they refused or questioned it → success; if they agreed to share info or send money → danger. Only those clear outcomes count toward the score, so progress reflects real learning.
Voice is a teachable moment. By sending the same transcript through the chat pipeline and a short "list only personal/sensitive things" prompt, we could show both the in-world response and a privacy lesson ("here's what was 'heard'") without extra UX complexity.
Parents need a single handoff. We learned that a short "for parents & guardians" screen with one instruction—press Start, then give the device to your child—reduces friction and sets the right expectations.

How We Built It

Frontend: Next.js (App Router), React, TypeScript, Tailwind. The flow is: boot screen (parent intro + optional music) → login → handshake → agent select (three levels, unlock by 80% score) → terminal (chat, voice, camera, sidebar HUD). We use the MediaRecorder API for voice, no extra speech libs.
Backend: FastAPI, Python. One router for chat (OpenAI GPT with staged system prompts + stage counter, plus analyze_user_response() for feedback popups) and one for voice (file upload → Whisper transcription → same chat API for the character reply, plus a separate GPT call for the kid-friendly "what was personal" summary).
Progress system: Stage is computed from message count (e.g. pirate: 1–3 → stage 1, 4–6 → 2, 7+ → 3). Scorable events are only success/danger popups. After (\geq 5) scorable attempts, if (\frac{\text{correct}}{\text{attempts}} \geq 0.8), we mark the level complete and unlock the next. Progress is stored in localStorage.
Camera flow: Permission dialog with educational copy; on grant, a short in-app sequence and a "Game Over" screen that explains real-world risks. The sidebar View safety report shows static privacy tips (revoke mic/camera, don't share name/school, watch for pressure to allow access).

Challenges We Faced

Autoplay and music. Browsers often block audio until a user gesture. We fixed it by starting the opening music on the Start button click (first gesture) and keeping it in a ref at the page level until the user reaches the agent-select screen.
Keeping characters on-script. The model sometimes drifted (e.g. too nice or too aggressive). We tightened the prompts with explicit "NO [X]" and "Stage N: do Y, do not do Z," and we inject CURRENT STAGE: (n). Act accordingly. so the model has a clear signal.
Scoring only "real" moments. We didn't want every message to affect the score. We made only success (refused/questioned) and danger (shared/agreed) popups scorable, and only after the scammer had actually asked for info or money in the previous message, so the feedback matches the situation.
Voice + chat in one flow. We wanted voice to feel like typing: same agent, same stages, same feedback. That meant sending the transcript into the existing chat API and reusing the same history and feedback logic, then layering the "websites can still hear you" and "what was heard" messages on top so the story stays clear for kids and judges alike.