Skip to main content
The Next.js starter template is a complete MBTI personality assessment application with Firebase Auth, Zustand state management, and modern UI components.
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

npx degit tough-tongue/docs/nextjs-minimal my-ttai-app
cd my-ttai-app
2

Install dependencies

pnpm install
3

Configure environment

cp .env.example .env.local
Add your ToughTongue AI API key:
.env.local
TOUGH_TONGUE_API_KEY=your_api_key_here
Get your API key from the Developer Portal.
4

Run the app

pnpm dev
Visit http://localhost:3000

​
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 store
3

Conversation completes

onStop or onTerminated fires → session marked complete
4

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