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}`); } }