ShaderToy

What is ShaderToy-MCP?

ShaderToy-MCP is a Model Context Protocol (MCP) server designed to bridge the gap between Large Language Models (LLMs) and ShaderToy, a popular online platform for creating, running, and sharing GLSL shaders. By connecting LLMs like Claude with ShaderToy, this project allows AI models to query and read entire web pages on ShaderToy, enabling them to learn from existing compute shader examples and generate increasingly complex and sophisticated GLSL shaders.

How to use ShaderToy-MCP?

To use ShaderToy-MCP, you first need to install uv (a Python package installer) on your system (Mac or Windows). After installation, you can clone the ShaderToy-MCP project from its GitHub repository. The next step involves integrating it with Claude Desktop by modifying the claude_desktop_config.json file. This configuration includes setting up the mcpServers entry for ShaderToy-MCP, specifying the command to run the server, and providing your ShaderToy API key. Once configured, you can test the integration using example commands within Claude to see how it utilizes the MCP tools.

Key Features of ShaderToy-MCP

• Retrieving Shader Information: The project allows LLMs to retrieve detailed information about any shader available on ShaderToy.
• Searching for Shaders: LLMs can search for shaders on ShaderToy using a search prompt, making it easier to find relevant examples.
• Generating Complex Shaders: By learning from existing shaders on ShaderToy, the LLM can generate complex and intricate GLSL shaders that it would otherwise not be capable of creating.
• MCP Tools: It provides specific MCP tools like get_shader_info() and search_shader() for programmatic interaction.

Use Cases of ShaderToy-MCP

• AI-Assisted Shader Development: Developers and artists can leverage LLMs to assist in the creation of complex GLSL shaders, speeding up the development process.
• Educational Tool: It can serve as an educational tool for LLMs to learn and understand the intricacies of GLSL programming by analyzing real-world examples.
• Creative Content Generation: The project opens up possibilities for generating unique and visually stunning graphical content through AI-driven shader creation.

FAQ from ShaderToy-MCP

Q: What is the purpose of ShaderToy-MCP? A: ShaderToy-MCP aims to enable LLMs to interact with the ShaderToy API, allowing them to learn from existing shaders and generate new, complex GLSL shaders.

Q: What LLMs are supported? A: The README specifically mentions integration with Claude, but the underlying MCP framework might allow for integration with other LLMs that support the protocol.

Q: Do I need a ShaderToy API key? A: Yes, you need to replace the placeholder your_actual_api_key with your actual ShaderToy API key in the configuration file for the server to function correctly.

Q: How do I know if the integration with Claude Desktop is successful? A: After configuring, you should see a hammer icon for the MCP in Claude. You can then test with the provided example commands to verify correct utilization of the MCP tools.

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 ) {}