Spline.design Integration Server

You can connect, control, and automate Spline.design 3D scenes from a dedicated MCP server. It supports full model context protocol integration, webhook-driven data visuals, and a minimal mode for essential tasks, all via a unified CLI or runtime API compatible with Claude Desktop and other MCP clients.

How to use

Connect your MCP client to the server in MCP mode to start working with Spline.design scenes. Use the stdio transport when interacting with Claude Desktop, or run in a standalone webhook mode to receive real-time data.

Start in MCP mode with stdio transport to enable full model context and runtime features. This allows you to programmatically control objects, materials, events, and behaviors directly from your MCP client.

To test webhooks or real-time data visualizations, run the webhook mode and use the provided web UI to create, edit, and test webhooks that feed data into your Spline.design scene.

From your MCP client, you can manage objects (create/modify/delete), control transform properties, generate runtime code for interactions, and configure complex events and actions to drive scene behavior.

How to install

Prerequisites: Node.js and npm should be installed on your machine.

Clone the server repository, install dependencies, and prepare environment configuration.

git clone https://github.com/yourusername/spline-mcp-server.git
cd spline-mcp-server

# Install dependencies
npm install

# Configure environment variables
cp config/.env.example .env

Start the server in MCP mode to connect with Claude Desktop using stdio transport.

node bin/cli.js --mode mcp --transport stdio

To run in other modes, you can use the following commands. Start in MCP mode with HTTP transport if you prefer remote HTTP communication, or switch to the webhook mode for data-driven visuals.

# MCP mode with HTTP transport
node bin/cli.js --mode mcp --transport http --port 3000

# Webhook server mode
node bin/cli.js --mode webhook --port 3000

# Minimal mode
node bin/cli.js --mode minimal

Notes and additional details

The server provides multiple modes to fit your workflow: MCP for Claude Desktop integration, Webhook for external data-driven visualizations, and Minimal for essential functionality. You can start and test in any order depending on your use case.

If you plan to work with Claude Desktop, ensure you run in MCP mode with stdio transport when connecting to the MCP endpoint. For webhook-based workflows, use the dedicated web interface to create and test webhooks that push data into scenes.

Examples and usage patterns

Create, modify, and delete 3D objects in a Spline.design scene through the MCP interface. Configure transforms, appearances, and visibility, then generate ready-to-use code for React, Next.js, or plain JavaScript to embed interactions in your application.

Set up event chains with 20+ event types and 15+ actions to build complex interactive experiences. Leverage the runtime API to script animations, custom events, and scene manipulations.

Connect webhooks to external services like Zapier or IFTTT to reflect real-time data changes in your Spline.design scene. Use the Webhook UI to configure endpoints and test data flow.

Security and maintenance tips

Keep dependencies up to date and review environment variable configurations to protect sensitive data used by your MCP clients and webhooks.

Use strong transport security for HTTP mode when exposing endpoints to untrusted networks. Regularly rotate any API keys or tokens used by runtime code generation and webhook handlers.

Available tools

object_manager

Create, modify, and delete 3D objects with control over position, rotation, scale, and visibility.

runtime_api_integration

Direct integration with the runtime API to generate ready-to-use code and drive scene interactions.

material_system

Manage layered materials and shading options across all supported material types.

event_action_system

Support 20+ event types and 15+ action types to build complex interactions and conditional logic.

webhook_integration

Create and test webhooks to receive external data and drive real-time visualizations.