The Complete Production SOP: How to Deploy and Run Spline 3D Web Interactive Embeds in Autonomous AI Agents

'use client';

import dynamic from 'next/dynamic';
import { useRef, useState, useCallback } from 'react';
import type { Application } from '@splinetool/runtime';

const Spline = dynamic(() => import('@splinetool/react-spline'), {
  ssr: false,
  loading: () => (
    <div className="flex h-[500px] w-full items-center justify-center bg-slate-950/20 backdrop-blur-sm rounded-xl border border-slate-800">
      <span className="animate-pulse text-sm text-slate-400">Initializing 3D viewport...</span>
    </div>
  ),
});

interface SplineSceneWrapperProps {
  sceneUrl: string;
  onSceneReady?: (app: Application) => void;
}

export function SplineSceneWrapper({ sceneUrl, onSceneReady }: SplineSceneWrapperProps) {
  const splineAppRef = useRef<Application | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);

  const handleLoad = useCallback((splineApp: Application) => {
    splineAppRef.current = splineApp;
    setIsLoaded(true);
    if (onSceneReady) {
      onSceneReady(splineApp);
    }
  }, [onSceneReady]);

  return (
    <div className="relative w-full h-[500px] overflow-hidden rounded-xl">
      <Spline scene={sceneUrl} onLoad={handleLoad} />
    </div>
  );
}