Skip to main content
The starter template provides a clean abstraction for ToughTongue AI integration in the lib/ttai/ module.

Module Structure


Scenario Configuration

Define your scenarios in lib/ttai/constants.ts:

Building Embed URLs

The client.ts file provides URL builder functions:

URL Builder Implementation


Iframe Event Handling

The template provides a helper for listening to iframe events:

Event Listener Implementation


TTAIIframe Component

The components/TTAIIframe.tsx component wraps the iframe with proper permissions:

Component Implementation

The allow attribute grants:
  • microphone: Voice conversations
  • camera: Video features (if enabled)
  • display-capture: Screen sharing (if enabled)

Server-Side API Client

The app/api/ttai/client.ts file handles server-side API calls:

API Routes

The starter provides these API routes:

Example: Analyze Route


Dynamic Variables

Pass context to scenarios using URL parameters:
The scenario can reference these via {{userName}} and {{userPersonalityAssessment}} in the AI instructions.

Next Steps

State & Auth

State management and authentication

Deployment

Deploy to production