ShaderToy MCPサーバー

「ShaderToy」MCPサーバーは何をするのか？

ShaderToy-MCPは、AIアシスタントとShaderToy（GLSLシェーダーの作成・実行・共有ができる人気ウェブサイト）をつなぐMCP（モデルコンテキストプロトコル）サーバーです。Claudeのような大規模言語モデル（LLM）をMCP経由でShaderToyに接続することで、AIがShaderToyのWebページ全体を検索・閲覧し、単体のAIでは難しい複雑なシェーダーの生成や改良を実現します。この統合によってシェーダーアーティストやAI開発者の開発効率が向上し、ShaderToyのコンテンツにシームレスにアクセスしながら、洗練されたシェーダーの作成・探索・共有が可能となります。

プロンプト一覧

リポジトリ内にプロンプトテンプレートに関する情報はありません。

リソース一覧

利用可能なファイルやドキュメントには明示的なリソース定義は見つかりませんでした。

ツール一覧

リポジトリ内にMCPツールの詳細を記載したserver.pyファイルや明示的なツール一覧は存在しません。

このMCPサーバーのユースケース

• シェーダー生成: AIアシスタントがShaderToyのリポジトリを検索し、Webコンテキストを参考にしながら複雑なGLSLシェーダーを生成できます。
• シェーダー探索: ShaderToyのシェーダーをAIによる要約や解説で効率よく探索・分析できます。
• クリエイティブコーディング支援: AIが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サーバーをワークフローに統合するには、まずフローに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スコア