シェーダートイ-MCP

GLSLシェーダーを作成、実行、共有するためのウェブサイトShaderToy（ https://www.shadertoy.com/ ）用のMCPサーバー。ClaudeなどのLLMとShaderToyをModel Context Protocol（MCP）を介して接続することで、LLMがWebページ全体をクエリして読み取ることができるようになり、通常は不可能な複雑なシェーダーの作成が可能になります。

生成される複雑なシェーダーの例:

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

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

マトリックス デジタルレイン( https://www.shadertoy.com/view/33l3Df )

特徴

• ShaderToy上の任意のシェーダーの情報を取得する

• 検索プロンプトからShaderToyで利用可能なシェーダーを検索する

• ShaderToyの既存のシェーダーから学習して複雑なシェーダーを生成する

Related MCP server: touchdesigner-mcp

MCPツール

• get_shader_info()

• search_shader()

インストール

Macの場合は、uvを次のようにインストールしてください。

brew install uv

Windowsの場合

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

その後

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

それ以外の場合、インストール手順はウェブサイトに掲載されています: Install uv

クロードデスクトップ統合

git clone https://github.com/wilsonchenghy/ShaderToy-MCP.gitを使用してプロジェクトを Git クローンします。

Claude > 設定 > 開発者 > 構成の編集 > claude_desktop_config.json に移動して、以下を追加します。

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

Claude で設定ファイルを設定すると、MCP のハンマーアイコンが表示されます。サンプルコマンドを使用して、MCP ツールが正しく使用されているかどうかを確認してください。

コマンド例

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