generateEventListenerCode

Implementation Reference

• src/tools/state-event-tools.js:307-341 (registration)

  Registration of the MCP tool 'generateEventListenerCode' including input schema (sceneId, eventName) and handler that delegates to runtimeManager.generateEventListenerCode and returns the generated code as text content.

  server.tool(
    'generateEventListenerCode',
    {
      sceneId: z.string().min(1).describe('Scene ID'),
      eventName: z.enum([
        'mouseDown', 'mouseUp', 'mouseOver', 'mouseOut', 'mouseMove',
        'touchStart', 'touchEnd', 'touchMove',
        'keyDown', 'keyUp', 'collision', 'sceneStart'
      ]).describe('Event name'),
    },
    async ({ sceneId, eventName }) => {
      try {
        const code = runtimeManager.generateEventListenerCode(sceneId, eventName);
        
        return {
          content: [
            { 
              type: 'text', 
              text: code 
            }
          ]
        };
      } catch (error) {
        return {
          content: [
            { 
              type: 'text', 
              text: `Error generating code: ${error.message}` 
            }
          ],
          isError: true
        };
      }
    }
  );

• src/tools/state-event-tools.js:309-316 (schema)

  Zod schema for tool inputs: sceneId (string) and eventName (enum of supported Spline events).

  {
    sceneId: z.string().min(1).describe('Scene ID'),
    eventName: z.enum([
      'mouseDown', 'mouseUp', 'mouseOver', 'mouseOut', 'mouseMove',
      'touchStart', 'touchEnd', 'touchMove',
      'keyDown', 'keyUp', 'collision', 'sceneStart'
    ]).describe('Event name'),
  },

• src/tools/state-event-tools.js:317-339 (handler)

  MCP tool handler function that invokes runtimeManager.generateEventListenerCode and formats the result as MCP content response.

  async ({ sceneId, eventName }) => {
    try {
      const code = runtimeManager.generateEventListenerCode(sceneId, eventName);
      
      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:575-614 (helper)

  Helper method in RuntimeManager class that generates template JavaScript code for loading a Spline scene and attaching an event listener for the specified eventName, with example handlers for common objects.

    generateEventListenerCode(sceneId, eventName) {
      const sceneUrl = `https://prod.spline.design/${sceneId}/scene.splinecode`;
      
      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');
    
    // Add event listener
    spline.addEventListener('${eventName}', (e) => {
      console.log('Event triggered:', e);
      
      // Get information about the target object
      const targetObject = e.target;
      console.log('Target object:', targetObject.name, targetObject.id);
      
      // Respond to the event
      if (targetObject.name === 'Cube') {
        // Handle cube-specific event
        targetObject.scale.multiplyScalar(1.1); // Grow by 10%
      } else if (targetObject.name === 'Sphere') {
        // Handle sphere-specific event
        targetObject.material.color.set('#ff0000'); // Change to red
      }
      
      // You can also emit events on other objects
      const otherObject = spline.findObjectByName('OtherObject');
      if (otherObject) {
        otherObject.emitEvent('mouseDown');
      }
    });
  });
  `;
    }