Chatbot Kit

Custom Scenario

Build custom chatbot experiences with personalized AI personalities, tailored 3D environments, and unique user interfaces for your specific use cases.

Custom scenarios allow you to create:

  • Unique AI personalities with custom prompts, moods, and behaviors
  • Custom 3D environments with specialized avatars and animations
  • Tailored user interfaces designed for your specific application
  • Scenario-specific knowledge bases with relevant content and responses
  • Brand-aligned experiences that match your organization's identity

How to create a custom scenario

Step 1: Create Scene Configuration

Create a new SceneConfig file for your scenario:

  1. Duplicate existing config: Copy an existing SceneConfig from /src/components/[existing-scenario]/3d/SceneConfig
  2. Create new folder: Place it in /src/components/[your-scenario]/3d/SceneConfig
  3. Update scenario value: Change the scenario identifier to your custom name
// /src/components/wellness-center/3d/SceneConfig.js (example)
export const SceneConfig = {
  scenario: "wellness-center",
  // ... other configuration options
};

Step 2: Create Entry Point

Set up your scenario's main page:

  1. Create page folder: Add new folder in /pages/[your-scenario]/
  2. Add scenario initialization: Include these essential imports at the top of your main component:
import { SceneConfig } from "@/components/wellness-center/3d/SceneConfig";
import { aiEngine } from "@/store/aiEngine";

// Initialize scenario
aiEngine.getState().setScenario(SceneConfig.scenario);

Step 3: Build UI and 3D Implementation

Choose your implementation approach:

Option A: Duplicate and Customize

  • Copy existing scenario folder structure
  • Modify components to match your design requirements
  • Update styling and branding elements
  • Customize 3D assets and animations

Option B: Build from Scratch

  • Create new components following the existing patterns
  • Implement 3D scene with your custom assets
  • Design unique UI elements and layouts
  • Integrate with the AI engine using established hooks

Step 4: Configure AI Behavior

Set up your scenario's AI personality in n8n:

  1. Access Get Scenario Data workflow (see Get Scenario Data documentation)
  2. Add new scenario entry with your scenario key
  3. Configure AI settings

Example scenario configuration:

{
  "scenario": "wellness-center",
  "prompt": "You are a calm and supportive wellness coach...",
  "mood": ["Peaceful", "Encouraging", "Thoughtful"],
  "animation": ["Meditation", "Gentle_Wave", "Breathing"],
  "rules": "Focus on mental health and wellness topics...",
  "tts-prompt": "Speak in a soothing and gentle tone...",
  "tts-voice": "coral"
}

Customization Options

3D Environment

  • Avatar selection: Choose or create custom 3D characters
  • Environment design: Build themed backgrounds and settings
  • Animation library: Define character movements and gestures
  • Lighting setup: Create mood-appropriate lighting schemes
  • Interactive elements: Add clickable objects and environmental features

AI Personality

  • Conversation style: Formal, casual, playful, professional
  • Expertise domain: Healthcare, education, retail, entertainment
  • Response patterns: Short/long, detailed/brief, technical/simple
  • Emotional range: Define available moods and reactions
  • Knowledge scope: Link specific knowledge bases and content

User Interface

  • Color schemes: Brand-aligned color palettes
  • Typography: Custom fonts and text styling
  • Layout patterns: Unique component arrangements
  • Interactive elements: Custom buttons, forms, and controls
  • Responsive design: Mobile and desktop optimizations

Integration Features

  • External APIs: Connect to third-party services
  • Database connections: Link custom data sources
  • Authentication: Add user login and session management
  • Analytics: Track user interactions and engagement
  • Content management: Dynamic content loading and updates

Best Practices

Development

  • Start with duplication - Use existing scenarios as templates for faster development
  • Maintain consistency - Follow established patterns for AI engine integration
  • Test thoroughly - Verify both UI and AI behavior across different devices
  • Document changes - Keep track of customizations for future updates

AI Configuration

  • Clear prompts - Write specific, detailed personality descriptions
  • Consistent moods - Ensure mood options align with scenario theme
  • Relevant animations - Match 3D animations to conversation context
  • Knowledge curation - Populate knowledge bases with scenario-specific content

Creating custom scenarios allows you to build targeted, engaging chatbot experiences that perfectly match your specific use cases and brand requirements.

Next

Overview