Spline MCP Server

Implementation Reference

• src/tools/scene-tools.js:83-114 (registration)

  Registration of the exportSceneCode MCP tool with input schema and handler function that delegates to runtimeManager.generateRuntimeCode

  server.tool(
    'exportSceneCode',
    {
      sceneId: z.string().min(1).describe('Scene ID'),
      format: z.enum(['vanilla', 'react', 'next']).default('vanilla')
        .describe('Export format'),
    },
    async ({ sceneId, format }) => {
      try {
        const code = runtimeManager.generateRuntimeCode(sceneId, format);
        
        return {
          content: [
            { 
              type: 'text', 
              text: code 
            }
          ]
        };
      } catch (error) {
        return {
          content: [
            { 
              type: 'text', 
              text: `Error generating code: ${error.message}` 
            }
          ],
          isError: true
        };
      }
    }
  );

• src/tools/scene-tools.js:85-89 (schema)

  Zod input schema defining sceneId (required string) and format (optional enum: 'vanilla', 'react', 'next', defaults to 'vanilla')

  {
    sceneId: z.string().min(1).describe('Scene ID'),
    format: z.enum(['vanilla', 'react', 'next']).default('vanilla')
      .describe('Export format'),
  },

• src/tools/scene-tools.js:90-113 (handler)

  MCP tool handler function that invokes runtimeManager.generateRuntimeCode and returns the generated code as text content or error

  async ({ sceneId, format }) => {
    try {
      const code = runtimeManager.generateRuntimeCode(sceneId, format);
      
      return {
        content: [
          { 
            type: 'text', 
            text: code 
          }
        ]
      };
    } catch (error) {
      return {
        content: [
          { 
            type: 'text', 
            text: `Error generating code: ${error.message}` 
          }
        ],
        isError: true
      };
    }
  }

• src/utils/runtime-manager.js:81-202 (helper)

  Core helper function that generates the runtime integration code for the Spline scene in specified format (vanilla JS, React, or Next.js), constructing the scene URL and providing example interaction code.

    generateRuntimeCode(sceneId, format = 'vanilla') {
      const sceneUrl = `https://prod.spline.design/${sceneId}/scene.splinecode`;
      
      if (format === 'vanilla') {
        return `
  import { Application } from '@splinetool/runtime';
  
  // Create a new Application instance
  const canvas = document.getElementById('canvas3d');
  const spline = new Application(canvas);
  
  // Load the scene
  spline.load('${sceneUrl}').then(() => {
    console.log('Scene loaded successfully');
    
    // Access the Spline Application API
    // Get an object by name
    const myObject = spline.findObjectByName('Cube');
    
    // Or get an object by ID
    // const myObject = spline.findObjectById('...');
    
    // Interact with the object
    if (myObject) {
      // Modify properties
      myObject.position.y += 1;
      myObject.rotation.y = Math.PI / 4;
      
      // Listen for events
      spline.addEventListener('mouseDown', (e) => {
        if (e.target === myObject) {
          console.log('Object clicked!');
        }
      });
      
      // Emit events
      myObject.emitEvent('mouseDown');
    }
  });
  `;
      } else if (format === 'react') {
        return `
  import React, { useRef } from 'react';
  import Spline from '@splinetool/react-spline';
  
  export default function Scene() {
    const objectRef = useRef();
    
    function onLoad(splineApp) {
      console.log('Scene loaded successfully');
      
      // Save references to objects
      objectRef.current = splineApp.findObjectByName('Cube');
    }
    
    function handleClick() {
      if (objectRef.current) {
        // Modify object properties
        objectRef.current.position.y += 1;
      }
    }
  
    return (
      <div style={{ width: '100%', height: '100%' }}>
        <button onClick={handleClick}>Move Object Up</button>
        <Spline 
          scene="${sceneUrl}" 
          onLoad={onLoad}
          onMouseDown={(e) => {
            console.log('Mouse down on:', e.target.name);
          }}
        />
      </div>
    );
  }
  `;
      } else if (format === 'next') {
        return `
  import React, { useRef } from 'react';
  import dynamic from 'next/dynamic';
  
  // Import Spline component with no SSR
  const Spline = dynamic(() => import('@splinetool/react-spline/next'), {
    ssr: false,
    loading: () => <div>Loading 3D scene...</div>
  });
  
  export default function Scene() {
    const objectRef = useRef();
    
    function onLoad(splineApp) {
      console.log('Scene loaded successfully');
      
      // Save references to objects
      objectRef.current = splineApp.findObjectByName('Cube');
    }
    
    function handleClick() {
      if (objectRef.current) {
        // Modify object properties
        objectRef.current.position.y += 1;
      }
    }
  
    return (
      <div style={{ width: '100%', height: '100%' }}>
        <button onClick={handleClick}>Move Object Up</button>
        <Spline 
          scene="${sceneUrl}" 
          onLoad={onLoad}
          onMouseDown={(e) => {
            console.log('Mouse down on:', e.target.name);
          }}
        />
      </div>
    );
  }
  `;
      } else {
        throw new Error(`Unsupported format: ${format}`);
      }
    }