Spline设计代码生成工具

一个为Spline.design 3D场景生成运行时代码的工具,支持Vanilla JS、React和Next.js,适用于3D网页开发。

  • by aydinfer
  • JavaScript
  • 本地部署
  • 85 星标
  • 更新于
在 GitHub 查看 aydinfer/spline-mcp-server

使用说明

Spline.design MCP服务器(已存档)

此项目已存档。 Spline.design不提供公共REST API,这使得该服务器的大部分功能无法运行。详见下文。

为什么存档

此MCP服务器旨在通过Claude以编程方式控制Spline.design 3D场景。然而, Spline不提供公共REST API 用于场景操纵。调用的约130个工具 api.spline.design 目标端点不存在,将因网络错误而失败。

Spline的实际开发工具是:

  • 代码API --客户端JavaScript运行时(@splinetool/runtime)它只适用于带有canvas元素的浏览器。它可以操纵导出场景中的对象,但不能创建场景或对象。
  • 实时API -Spline编辑器中的一个功能,用于从Spline向外部服务进行出站API调用。不是入站API。

这两者都无法实现MCP服务器尝试的服务器端编程控制。

什么有效

10 代码生成工具 生成 @splinetool/runtime Vanilla JS、React和Next.JS的代码。然而,Claude已经可以在没有MCP服务器的情况下编写这段代码,这使得这些工具变得多余。

安装

使用npx(适用于Claude Desktop)

将此添加到您的Claude Desktop MCP配置中:

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

本地开发

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

你能用它做什么

让Claude为您的项目生成Spline运行时代码:

  • “生成一个React组件,加载我的样条线场景并向对象添加点击处理程序”
  • “编写在悬停时旋转对象的动画代码”
  • “使用基于变量的状态管理创建交互式场景”
  • “使用Spline集成生成Next.js代码”

Claude将使用代码生成工具来生成工作 @splinetool/runtime 您可以直接在web项目中使用的代码。

样条曲线运行时API参考

这 @splinetool/runtime 提供了以下方法(代码生成工具的目标):

方法 说明
findObjectByName(name) 按名称查找对象
findObjectById(uuid) 按ID查找对象
getAllObjects() 列出所有场景对象
emitEvent(event, nameOrUuid) 在对象上触发事件
addEventListener(event, cb) 监听现场事件
setVariable(name, value) 设置场景变量
getVariable(name) 获取场景变量
setZoom(value) 控制缩放级别
play() / stop() 控件渲染

对象暴露 position, rotation, scale, visible,以及 intensity 物业。

项目结构

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

许可证

该项目根据MIT许可证获得许可——请参阅 许可证 文件以获取详细信息。