This template demonstrates best practices for integrating ToughTongue AI into
a production Next.js application, including secure API key handling, iframe
event management, and state persistence.
Quick Start
1
Clone the template
2
Install dependencies
3
Configure environment
4
Run the app
What’s Included
Personality Test
AI-powered MBTI assessment via embedded ToughTongue scenario
Results Dashboard
Detailed personality analysis with dimension breakdowns
AI Coach
Personalized coaching based on your assessed personality type
Admin Panel
Session management, API balance, and data export
Tech Stack
- Next.js 15 with App Router and Turbopack
- React 19 with TypeScript
- Tailwind CSS 4 with shadcn/ui components
- Zustand for state management with localStorage persistence
- Firebase Auth (optional) for Google OAuth
Application Flow
1. Landing Page (/)
- Hero section with app description
- Interactive MBTI type explorer (16 clickable type cards)
- Modal dialogs with type details
2. Personality Test (/test)
1
User clicks Start
ToughTongue iframe loads with the personality test scenario
2
Session begins
onStart event fires → session ID saved to store3
Conversation completes
onStop or onTerminated fires → session marked complete4
Redirect to Results
View and analyze the completed session
3. Results Dashboard (/results)
- Lists all assessment sessions
- Run AI analysis to get MBTI type breakdown
- “Mark as Final” button saves assessment for coach personalization
4. Personality Coach (/coach)
- Requires a finalized assessment
- Passes personality context via
dynamicVariables - The coach scenario uses this for personalized guidance
5. Admin Panel (/admin)
- Protected by admin token
- View ToughTongue account balance
- List and analyze sessions
- Export data and manage local storage
Next Steps
Project Structure
Understand the file organization
ToughTongue Integration
Learn the integration patterns