Chatterbrain

My Inspiration

Many autistic individuals, like myself, want to improve their social skills but lack a supportive, pressure-free environment to practice. Traditional social skills training often feels clinical, judgmental, or one-size-fits-all. I was inspired to build Chatterbrain to give neurodiverse users a voice by offering a fun, affirming, and customizable way to build communication skills and social confidence.

What it is

Chatterbrain is a social-skills practice app built for autistic users who want a safe place to rehearse real conversations before they happen. Many social situations — setting a boundary with a roommate, talking to a new coworker, responding when someone is upset — are hard to practice without real stakes. You can’t easily “try again” in the moment, and generic chatbots don’t simulate how another person actually talks back. Chatterbrain fills that gap with structured, judgment-free practice you can repeat until a response feels right.

What it does

Users can browse scenarios by social domain (conflict, work, friendships, and more), choose an AI actor with its own personality and voice, and run an encounter: a back-and-forth conversation with adjustable difficulty from Gentle to Realistic to Difficult. While practicing, Chitter helpers offer targeted support — like spotting social cues, checking tone, rephrasing a draft, or suggesting possible replies. You can type or speak your responses. When an encounter ends, you get a review with skill-based feedback and can replay to try a different approach. Chatterbrain turns social practice into something repeatable, private, and low-pressure — closer to a rehearsal space than a lecture.

How We Built It

• Frontend: Built with TypeScript and Next.js, styled using TailwindCSS. Zustand and React handled state management and Shadcn components gave us easy UI extensibility.

• Backend: Supabase (Storage + Auth) manages user accounts, and avatar storage and Prisma + PostgreSQL for database management.

• Integrations & AI: ElevenLabs powers realistic voice previews, while OpenAI drives response generation and user feedback, analysis and recommendations. Cursor helped in speeding up UI development, documentation and API integration.

• Design: A clean, intuitive interface with soft visuals and calming UX was designed to support neurodivergent users in a low-pressure environment. 5 themes are available to choose from for selective users who may like a varied visual experience, like softer tones, darker colors, or less contrast.

• Architecture: Implemented Clean Architecture principles by separating infrastructure from presentation.

Challenges we ran into

• Learning Prisma; some migrations failed requiring database resets.

• Designing a scoring system that feels both meaningful and affirming, without being judgmental.

Accomplishments that we're proud of

Built a complete, interactive learning platform tailored for neurodivergent users.

• Crafted a user interface that balances calm, simplicity, and accessibility.

• Successfully integrated realistic voice narration and AI coach chat interface.

• Developed a small recommendation system that adapts to each user’s goals, interests and skill level.

What we learned

• Gained more hands-on experience with Supabase, OpenAI, and system architecture.
• Expanded our understanding of Next.js specifically how server and client components differ and how they can communicate with each other.

What's next for Chatterbrain

• Group Mode: Simulated group dialogues for more dynamic practice.

• Scenario Builder: Allow users, for example coaches or therapists, to create their own scenarios and help clients who need help with conversations that the Chatterbrains's database may not offer.

• AI Improvements: Offer deeper insights into tone, timing, and social cues. More realistic AI responses during Encounters.

• Gamification: expand gamification with achievements and fun, new practice modes or challenge rounds.

• Community Support: Incorporate tips and feedback from real coaches and fellow users to provide encouragement, guidance, and actionable insights for improvement.

• Smarter Progress Tracking: Refine the scoring system to better reflect user growth. The goal is to give users a clear sense of where they stand, what they’ve achieved, and what specific steps they can take to improve.

Built With

• cursor
• next.js
• shadcn
• supabase
• tailwindcss
• typescript
• vercel
• zustand