ShaderToy MCP 服务器

“ShaderToy” MCP 服务器能做什么？

ShaderToy-MCP 是一款 MCP（模型上下文协议）服务器，旨在将 AI 助手与 ShaderToy（一个流行的 GLSL 着色器创作、运行与分享网站）连接起来。通过 MCP 将类似 Claude 这样的 LLM（大语言模型）接入 ShaderToy，使 AI 能够查询并读取完整的 ShaderToy 网页，从而生成和优化复杂着色器，突破 AI 单独运行时的能力边界。此集成为着色器艺术家和 AI 开发者带来了更顺畅的开发体验，便于访问 ShaderToy 内容，实现更高级的着色器创作、探索与分享。

提示模板列表

仓库中未提供任何关于提示模板的信息。

资源列表

在可用文件或文档中未找到明确的资源定义。

工具列表

仓库中未找到明确的工具列表或包含 MCP 工具详情的 server.py 文件。

该 MCP 服务器的应用场景

• 着色器生成：AI 助手可通过查询 ShaderToy 资源库并结合网页上下文，生成复杂的 GLSL 着色器，用于灵感参考或直接应用。
• 着色器探索：用户可以借助 AI 的总结与解释，更高效地探索与分析 ShaderToy 上的着色器。
• 创意编程辅助：AI 通过 MCP 获取 ShaderToy 示例与文档，协助用户调试或扩展着色器代码。
• AI 着色器展示：便捷地将 AI 生成的着色器直接分享到 ShaderToy，实现 AI 创作与社区分享的闭环。

搭建方法

Windsurf

1. 确保已安装 Node.js 与 Windsurf。
2. 定位你的 .windsurf/config.json 配置文件。
3. 使用以下 JSON 片段添加 ShaderToy MCP 服务器：

   {
     "mcpServers": {
       "shadertoy": {
         "command": "npx",
         "args": ["@shadertoy/mcp-server@latest"]
       }
     }
   }
   

4. 保存文件并重启 Windsurf。
5. 在 Windsurf 界面中验证配置是否生效。

Claude

1. 确保已安装 Claude 与 Node.js。
2. 编辑 Claude 的 config.json 设置。
3. 插入 ShaderToy MCP 服务器配置：

   {
     "mcpServers": {
       "shadertoy": {
         "command": "npx",
         "args": ["@shadertoy/mcp-server@latest"]
       }
     }
   }
   

4. 保存配置并重启 Claude。
5. 在 Claude 界面中确认服务器已上线。

Cursor

1. 安装 Node.js 和 Cursor。
2. 在用户目录找到 cursor.config.json。
3. 添加如下片段：

   {
     "mcpServers": {
       "shadertoy": {
         "command": "npx",
         "args": ["@shadertoy/mcp-server@latest"]
       }
     }
   }
   

4. 保存并重启 Cursor。
5. 确保 ShaderToy MCP 服务器已出现在服务器列表中。

Cline

1. 安装 Node.js 与 Cline。
2. 打开 .cline/config.json 文件。
3. 添加 ShaderToy MCP 服务器：

   {
     "mcpServers": {
       "shadertoy": {
         "command": "npx",
         "args": ["@shadertoy/mcp-server@latest"]
       }
     }
   }
   

4. 保存并重启 Cline。
5. 通过 Cline 的诊断功能确认服务器正在运行。

API 密钥安全配置（示例）

{
  "mcpServers": {
    "shadertoy": {
      "command": "npx",
      "args": ["@shadertoy/mcp-server@latest"],
      "env": {
        "SHADERTOY_API_KEY": "${SHADERTOY_API_KEY}"
      },
      "inputs": {
        "apiKey": "${SHADERTOY_API_KEY}"
      }
    }
  }
}

注意： 请将你的 API 密钥存储在环境变量中以保障安全。

如何在 FlowHunt 流程中使用 MCP

在 FlowHunt 中集成 MCP

要将 MCP 服务器集成进 FlowHunt 工作流，首先在你的流程中添加 MCP 组件，并将其连接到 AI 代理：

点击 MCP 组件，打开配置面板。在系统 MCP 配置部分，按如下 JSON 格式填写你的 MCP 服务器信息：

{
  "shadertoy": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

配置完成后，AI 代理即可作为工具使用该 MCP，获得其全部功能。请记得将 “shadertoy” 替换为你的 MCP 服务器实际名称，并将 URL 替换为你自己的 MCP 服务器地址。

总览

综上所述，ShaderToy-MCP 提供了清晰的总览和搭建指南，但缺乏提示模板、工具和资源的详细文档。其主要价值在于将 LLM 与 ShaderToy 连接，但若能补充更多文档和 MCP 功能支持会更理想。综合 MCP 实用性与文档评分为 4/10。

MCP 评分