Connect LLMs to ShaderToy for GLSL Shader Creation
Query ShaderToy shaders and let Claude learn from existing GLSL code to generate complex, original shaders.
Why it matters
Enable Large Language Models to interact with the ShaderToy platform, allowing them to query shader information and generate complex GLSL shaders.
Outcomes
What it gets done
Retrieve information about any ShaderToy shader.
Search for shaders on ShaderToy using search queries.
Generate complex GLSL shaders by analyzing existing ShaderToy examples.
Integrate LLMs with the ShaderToy website for shader development.
Install
Add it to your toolbox
Run in your project directory:
curl -fsSL https://spark.entire.vc/get/vb-shadertoy | bash Capabilities
Tools your agent gets
Retrieves information about any shader on ShaderToy
Searches for shaders available on ShaderToy by search query
Overview
ShaderToy MCP Server
ShaderToy-MCP lets Claude query and search ShaderToy's GLSL shader library, using real shader examples to generate more sophisticated original shader code. Use it when Claude needs to write a GLSL shader informed by real ShaderToy examples. Requires a ShaderToy API key set via SHADERTOY_APP_KEY.
What it does
ShaderToy-MCP connects Claude to ShaderToy, the website for creating and sharing GLSL shaders, letting Claude look up shader details and search the site's shader library - then use what it learns from existing shaders to generate more complex GLSL shader code than it could produce unaided.
When to use - and when NOT to
Use it when you want Claude to write a GLSL shader for a specific effect - waves, mountains, digital rain, or any visual concept - by first pulling reference and inspiration from real shaders published on ShaderToy. A typical prompt: "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) {}". Do not use it without a ShaderToy API key set via SHADERTOY_APP_KEY - it's required to query the site's data.
Capabilities
get_shader_info(): retrieve information on a specific shader on ShaderToy.search_shader(): search for shaders available on ShaderToy via a search prompt.
How to install
Install uv:
brew install uv # macOS
# or on Windows: powershell -c "irm https://astral.sh/uv/install.ps1 | iex"
Clone the repo and configure Claude Desktop:
git clone https://github.com/wilsonchenghy/ShaderToy-MCP.git
{
"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" }
}
}
}
Who it's for
Creative coders and shader artists who want Claude to write more sophisticated GLSL shaders by drawing on real examples from the ShaderToy community instead of generating from scratch.
Source README
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 ) {}
FAQ
Common questions
Discussion
Questions & comments · 0
Sign In Sign in to leave a comment.