ShaderToy MCP

What is ShaderToy MCP about?

ShaderToy MCP provides Model Context Protocol (MCP) tools that let an LLM retrieve information about any shader on ShaderToy, search the ShaderToy catalogue, and synthesize new, sophisticated GLSL shaders by learning from existing examples.

How to use ShaderToy MCP?

1. Install uv (the lightweight Python package manager) on your machine.
   • macOS: brew install uv
   • Windows: powershell -c "irm https://astral.sh/uv/install.ps1 | iex" and add the uv binary to your PATH.
2. Clone the repository:

   git clone https://github.com/wilsonchenghy/ShaderToy-MCP.git
   

3. Configure Claude Desktop (or any MCP‑compatible client) by adding an entry to claude_desktop_config.json that points to the server script and supplies your ShaderToy API key.
4. Once the configuration is saved, the client will display a hammer icon. Click it and invoke the MCP tools such as get_shader_info() or search_shader() in your prompts.

Key features of ShaderToy MCP

• Retrieve detailed metadata for any ShaderToy shader (author, source code, preview image, etc.).
• Perform keyword‑based searches across the entire ShaderToy library.
• Generate new shader code that follows the exact ShaderToy mainImage signature, automatically crediting source inspirations.
• Seamlessly integrate with Claude Desktop (or other LLM interfaces) via MCP.

Use cases of ShaderToy MCP

• Creative coding assistance: Ask an LLM to create a shader for a specific visual effect; the model can reference existing shaders for style and technique.
• Educational exploration: Query the internals of popular shaders to learn GLSL tricks and rendering concepts.
• Rapid prototyping: Search for shaders that match a description and adapt their code directly in your project.
• Automated content generation: Build pipelines that generate themed shaders (e.g., ocean, mountains, digital rain) for games or visual installations.

FAQ from the ShaderToy MCP

Q: Do I need a ShaderToy account? A: Only an API key is required. Obtain it from the ShaderToy developer portal and set it in the SHADERTOY_APP_KEY environment variable.

Q: Can I run the server on Linux? A: Yes. Install uv for your distribution and follow the same steps as macOS/Windows.

Q: What languages are supported for the generated shader? A: The output follows ShaderToy’s GLSL fragment‑shader format, using the void mainImage( out vec4 fragColor, in vec2 fragCoord ) entry point.

Q: How does the LLM get access to the shader data? A: The LLM calls the MCP tools (get_shader_info, search_shader) which internally invoke the ShaderToy API and return structured results.

Q: Is there a way to limit the number of search results? A: The search_shader tool accepts optional parameters (e.g., limit) that you can include in your prompt to control output size.

ShaderToy-MCP

MCP Server for ShaderToy, a website for creating, running and sharing GLSL shader (https://www.shadertoy.com/). It connects LLM like Claude with ShaderToy through Model Context Protocol (MCP), allowing the LLM to query and read the entire web page, allowing it to make increasingly complex shader it normally isn't capable of.

Example of the complex shader it generates:

---

Ocean (https://www.shadertoy.com/view/tXs3Wf)

---

Mountains (https://www.shadertoy.com/view/W3l3Df)

---

Matrix Digital Rain (https://www.shadertoy.com/view/33l3Df)

Features

• Retriving info on any shader on ShaderToy
• Search for shader available on ShaderToy through a search prompt
• Generate complex shaders by learning from existing shaders on ShaderToy

MCP Tools

• get_shader_info()
• search_shader()

Installation

On Mac, please install uv as

brew install uv

On Windows

powershell -c "irm https://astral.sh/uv/install.ps1 | iex" 

and then

set Path=C:\Users\nntra\.local\bin;%Path%

Otherwise installation instructions are on their website: Install uv

Claude Desktop Integration

Git clone the project with git clone https://github.com/wilsonchenghy/ShaderToy-MCP.git

Go to Claude > Settings > Developer > Edit Config > claude_desktop_config.json to include the following:

{
    "mcpServers": {
        "ShaderToy_MCP": {
          "command": "uv",
          "args": [
            "run",
            "--with",
            "mcp[cli]",
            "mcp",
            "run",
            "<path_to_project>/ShaderToy-MCP/src/ShaderToy-MCP/server.py"
          ],
          "env": {
            "SHADERTOY_APP_KEY": "your_actual_api_key"  // Replace with your API key
          }
        }
    }
}

Once the config file has been set on Claude, you will see a hammer icon for the MCP. Test with the example commands to see if it correctly utilize the MCP tools.

Example Commands

Generate shader code of a {object}, if it is based on someone's work on ShaderToy, credit it, make the code follow the ShaderToy format: void mainImage( out vec4 fragColor, in vec2 fragCoord ) {}