'use client'; // Required for Next.js App Router

import { Live2DCompanion } from 'live2d-companion/react';
import "live2d-companion/react.css";

export default function MyCompanion() {
  return (
    <div style={{ position: 'fixed', bottom: 0, right: 0, zIndex: 50 }}>
      <Live2DCompanion
        modelUrl="https://cdn.jsdelivr.net/gh/LPH1110/live2d-registry@main/kiana_kaslana/model.json"
      />
    </div>
  );
}

import { useState } from 'react';
import { Live2DCompanion } from 'live2d-companion/react';
import "live2d-companion/react.css";

const MODELS = [
  'https://cdn.jsdelivr.net/gh/LPH1110/live2d-registry@main/nina/model.json',
  'https://cdn.jsdelivr.net/gh/LPH1110/live2d-registry@main/kiana_kaslana/model.json',
];

export default function CompanionSwitcher() {
  const [modelIndex, setModelIndex] = useState(0);

  return (
    <div>
      <button onClick={() => setModelIndex((prev) => (prev + 1) % MODELS.length)}>
        Switch Character
      </button>
      <Live2DCompanion modelUrl={MODELS[modelIndex]} />
    </div>
  );
}

<Live2DCompanion
  modelUrl="/models/character/model.model3.json"
  dialogueData={{
    interactions: {
      flick_head: ["Hey, that's a little tickly!", "Please be gentle~"],
      tap_face: ["My face is right here.", "A little warning next time?"],
    },
    ui_elements: {
      shake: ["Let's go!", "Ready when you are."],
    },
    idleRemarks: ["I'm waiting here for your next command.", "What should we explore next?"],
  }}
/>

import { Live2DCompanionCore } from 'live2d-companion';
import "live2d-companion/react.css";

const canvas = document.getElementById('live2d-canvas') as HTMLCanvasElement;

const companion = new Live2DCompanionCore(canvas, {
  audioBaseUrl: '/audio',
  volume: 0.5,
});

companion.onLoaded = () => console.log('Model ready');
companion.onResize = (w, h) => console.log(`Canvas resized to ${w}x${h}`);
companion.onBubbleMessage = (msg) => {
  // msg is a string when showing, null when hiding
  document.getElementById('bubble')!.textContent = msg ?? '';
};

// Initial model load
companion.init('/models/my_character/model.model3.json');

<Live2DCompanion
  // Required
  modelUrl="/models/character/model.model3.json"

  // Layout (React wrapper only)
  width="100%"               // Container width — default: '100%'
  height="100%"              // Container height — default: '100%'
  className=""               // CSS class on the outer container div
  bubbleClassName=""          // CSS class on the speech bubble div
  bubbleStyle={{}}            // Replace the default bubble inline styles entirely

  // Canvas & Model
  canvasWidth={300}           // Internal canvas pixel width — default: 300
  canvasHeight={400}          // Internal canvas pixel height — default: 400
  modelScale={0.1}            // Model scale factor — default: 0.1
  modelAnchor={[0.5, 1]}      // [x, y] anchor point — default: [0.5, 1] (bottom-center)

  // Interaction
  hitAreaMap={{                // Map hit area names → motion group names
    head: 'flick_head',       //   default mapping shown here
    face: 'tap_face',
    breast: 'tap_breast',
    belly: 'tap_belly',
    leg: 'tap_leg',
  }}

  // Audio
  audioBaseUrl="/companion"   // Base path for audio files — default: '/companion'
  volume={0.6}                // Audio volume (0.0 to 1.0) — default: 0.6
  audioPathResolver={         // Custom function to resolve audio file paths
    (base, category, motion, index) =>
      `${base}/${category}/${motion}/${index}.mp3`
  }

  // Dialogue (opt-in)
  dialogueData={{             // Only used when you want speech bubbles
    interactions: {           //   Shown when user taps the model directly
      flick_head: ["Ouch!", "Hey!"],
    },
    ui_elements: {            //   Shown when triggered via companionBus
      shake: ["Let's go!"],
    },
    idleRemarks: [            //   Shown during idle animations
      "Still there?",
      "...",
    ],
  }}

  // Timing
  idleIntervalMinMs={30000}   // Min idle interval (ms) — default: 30000
  idleIntervalMaxMs={60000}   // Max idle interval (ms) — default: 60000
  motionDebounceMs={500}      // Min time between event bus motions — default: 500

  // Cubism SDK
  cubism2CoreUrl="https://..."  // CDN URL for Cubism 2 runtime
  cubism4CoreUrl="https://..."  // CDN URL for Cubism 4 runtime
/>

const companion = new Live2DCompanionCore(canvas, {
  // Same options as above, minus: width, height, className, bubbleClassName, bubbleStyle
  // (those are React-only layout props)
});

companion.onLoaded = () => { /* model is ready */ };
companion.onResize = (width, height) => { /* canvas dimensions updated */ };
companion.onBubbleMessage = (msg: string | null) => { /* render your own bubble UI */ };

await companion.init('/models/character/model.model3.json');

// Update options or dialogue dynamically
companion.updateOptions({ volume: 0.8 });

// Switch model dynamically without context loss
await companion.loadModel('/models/another_character/model.model3.json');

// Later:
companion.destroy();

<Live2DCompanion
  modelUrl="/model.json"
  audioBaseUrl="/voices"
  audioPathResolver={(base, category, motion, index) =>
    `${base}/${motion}_${category}_${index}.wav`
    // Resolves to: /voices/flick_head_interactions_1.wav
  }
/>