Spline 3D Design

by aydinfer

3 stars
670 downloads
Not rated
GitHub

About

Connects to Spline 3D design tool API for creating, manipulating, and exporting 3D scenes with support for animations, model imports, and event-based interactions.

Details

Author
aydinfer
Repository
aydinfer/spline-mcp-server
GitHub stars
3
Downloads
670
License
MIT License
Categories
Design, Developer Tools, AI, Infrastructure, API, Other
Tags
#integration, #mobile

- 10 code generation tools for @splinetool/runtime
- Generates Vanilla JS, React, and Next.js code
- Emits working code for interactive scene control
- Provides prompts for common Spline runtime tasks

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

  1. Download and install Highlight from highlightai.com/download
  2. Navigate to the plugins tab and select "Add Custom Plugin"
  3. Configure the plugin with the settings below
    Plugin Name Spline 3D Design
    Command (node, npx, python, etc.) npx
    Arguments
    • Argument 1 -y
    • Argument 2 spline-mcp-server

    Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.

  4. Enable "Start Automatically" if you want the plugin to start when Highlight launches

From the repository

Configure Claude Desktop by adding the server entry to your MCP config with npx -y spline-mcp-server. For local development, clone the repository, run npm install and npm start. Then ask Claude to generate Spline runtime code for web projects (e.g., React components with click handlers, hover animations, Next.js integration).

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        "spline 3d design": {
            "cwd": "string (optional)",
            "env": {},
            "args": [
                "-y",
                "spline-mcp-server"
            ],
            "shell": false,
            "command": "npx"
        }
    }
}

Linux

{
    "cwd": "string (optional)",
    "env": [],
    "args": [
        "-y",
        "spline-mcp-server"
    ],
    "shell": false,
    "command": "npx"
}

Macos

{
    "cwd": "string (optional)",
    "env": [],
    "args": [
        "-y",
        "spline-mcp-server"
    ],
    "shell": false,
    "command": "npx"
}

Windows

{
    "cwd": "string (optional)",
    "env": [],
    "args": [
        "/c",
        "npx",
        "-y",
        "spline-mcp-server"
    ],
    "shell": false,
    "command": "cmd"
}

Spline.design MCP Server (Archived)

> This project is archived. Spline.design does not provide a public REST API, making most of this server's functionality non-operational. See below for details.

Why archived

This MCP server was built to programmatically control Spline.design 3D scenes through Claude. However, Spline does not offer a public REST API for scene manipulation. The ~130 tools that call api.spline.design target endpoints that don't exist and will fail with network errors.

Spline's actual developer tools are:

- Code API — A client-side JavaScript runtime (@splinetool/runtime) that only works in a browser with a canvas element. It can manipulate objects in exported scenes but cannot create scenes or objects.
- Real-time API — A feature inside the Spline editor for making outbound API calls from Spline to external services. Not an inbound API.

Neither of these enables the kind of server-side programmatic control this MCP server attempts.

What does work

10 code generation tools generate @splinetool/runtime code for Vanilla JS, React, and Next.js. However, Claude can already write this code without an MCP server, making these tools redundant.

Installation

Using npx (for Claude Desktop)

Add this to your Claude Desktop MCP config:

{
  "mcpServers": {
    "spline": {
      "command": "npx",
      "args": ["-y", "spline-mcp-server"]
    }
  }
}

Local development

git clone https://github.com/aydinfer/spline-mcp-server.git
cd spline-mcp-server
npm install
npm start

What you can do with it

Ask Claude to generate Spline runtime code for your projects:

- "Generate a React component that loads my Spline scene and adds click handlers to objects"
- "Write animation code that rotates an object on hover"
- "Create an interactive scene with variable-based state management"
- "Generate Next.js code with Spline integration"

Claude will use the code generation tools to produce working @splinetool/runtime code you can use directly in your web projects.

Spline Runtime API Reference

The @splinetool/runtime provides these methods (which the code generation tools target):

| Method | Description |
|---|---|
| findObjectByName(name) | Find an object by name |
| findObjectById(uuid) | Find an object by ID |
| getAllObjects() | List all scene objects |
| emitEvent(event, nameOrUuid) | Trigger an event on an object |
| addEventListener(event, cb) | Listen for scene events |
| setVariable(name, value) | Set a scene variable |
| getVariable(name) | Get a scene variable |
| setZoom(value) | Control zoom level |
| play() / stop() | Control rendering |

Objects expose position, rotation, scale, visible, and intensity properties.

Project Structure

spline-mcp-server/
├── src/
│   ├── tools/             # MCP tool implementations
│   │   └── design/        # Advanced design tools (pending API)
│   ├── utils/             # API client and runtime manager
│   ├── prompts/           # Prompt templates
│   ├── resources/         # MCP resources
│   └── index.js           # Main server entry point
├── bin/cli.js             # CLI entry point
├── docs/                  # Documentation
└── package.json

License

This project is licensed under the MIT License — see the LICENSE file for details.

No reviews yet — be the first

Sign in to leave a review

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.