ShaderToy MCP-Server

Was macht der “ShaderToy” MCP-Server?

ShaderToy-MCP ist ein MCP-Server (Model Context Protocol), der KI-Assistenten mit ShaderToy verbindet, einer beliebten Plattform zum Erstellen, Ausführen und Teilen von GLSL-Shadern. Indem große Sprachmodelle (LLMs) wie Claude über MCP mit ShaderToy verbunden werden, ermöglicht dieser Server der KI, komplette ShaderToy-Webseiten abzufragen und zu lesen. So kann die KI komplexe Shader generieren und weiterentwickeln, die über ihre alleinigen Fähigkeiten hinausgehen. Diese Integration verbessert den Workflow von Shader-Künstlern und KI-Entwicklern, indem sie nahtlosen Zugriff auf ShaderToys Inhalte bietet und so eine noch anspruchsvollere Shader-Erstellung, -Erkundung und -Teilen ermöglicht.

Liste der Prompts

Im Repository sind keine Informationen zu Prompt-Vorlagen enthalten.

Liste der Ressourcen

In den verfügbaren Dateien oder der Dokumentation sind keine expliziten Ressourcendefinitionen zu finden.

Liste der Tools

Im Repository ist keine explizite Tool-Liste oder eine server.py-Datei mit Details zu MCP-Tools vorhanden.

Anwendungsfälle dieses MCP-Servers

• Shader-Generierung: Ermöglicht KI-Assistenten, komplexe GLSL-Shader zu generieren, indem sie das ShaderToy-Repository abfragen und Webkontext als Inspiration oder Referenz nutzen.
• Shader-Erkundung: Nutzer können Shader von ShaderToy effizienter mit KI-gestützter Zusammenfassung und Erklärung erkunden und analysieren.
• Creative Coding-Hilfe: Die KI kann Nutzer beim Debuggen oder Erweitern von Shader-Code unterstützen, indem sie ShaderToy-Beispiele und Dokumentationen über MCP abruft.
• Teilen von KI-erstellten Shadern: Erleichtert das direkte Teilen von KI-generierten Shadern auf ShaderToy und schließt damit den Kreis zwischen KI-Erstellung und Community-Sharing.

Einrichtung

Windsurf

1. Stellen Sie sicher, dass Node.js und Windsurf installiert sind.
2. Suchen Sie Ihre Konfigurationsdatei .windsurf/config.json.
3. Fügen Sie den ShaderToy MCP-Server mit folgendem JSON-Snippet hinzu:

   {
     "mcpServers": {
       "shadertoy": {
         "command": "npx",
         "args": ["@shadertoy/mcp-server@latest"]
       }
     }
   }
   

4. Speichern Sie die Datei und starten Sie Windsurf neu.
5. Überprüfen Sie die Einrichtung in der Windsurf-Oberfläche.

Claude

1. Stellen Sie sicher, dass Claude und Node.js installiert sind.
2. Bearbeiten Sie die config.json-Einstellungen von Claude.
3. Fügen Sie die ShaderToy MCP-Server-Konfiguration ein:

   {
     "mcpServers": {
       "shadertoy": {
         "command": "npx",
         "args": ["@shadertoy/mcp-server@latest"]
       }
     }
   }
   

4. Speichern Sie die Konfiguration und starten Sie Claude neu.
5. Bestätigen Sie in der Claude-Oberfläche, dass der Server verfügbar ist.

Cursor

1. Installieren Sie Node.js und Cursor.
2. Suchen Sie cursor.config.json in Ihrem Benutzerverzeichnis.
3. Fügen Sie diesen Ausschnitt ein:

   {
     "mcpServers": {
       "shadertoy": {
         "command": "npx",
         "args": ["@shadertoy/mcp-server@latest"]
       }
     }
   }
   

4. Speichern und starten Sie Cursor neu.
5. Vergewissern Sie sich, dass ShaderToy MCP-Server in der Serverliste erscheint.

Cline

1. Installieren Sie Node.js und Cline.
2. Öffnen Sie die Datei .cline/config.json.
3. Fügen Sie den ShaderToy MCP-Server hinzu:

   {
     "mcpServers": {
       "shadertoy": {
         "command": "npx",
         "args": ["@shadertoy/mcp-server@latest"]
       }
     }
   }
   

4. Speichern und starten Sie Cline neu.
5. Überprüfen Sie über die Diagnose von Cline, ob der Server läuft.

API-Keys absichern (Beispiel)

{
  "mcpServers": {
    "shadertoy": {
      "command": "npx",
      "args": ["@shadertoy/mcp-server@latest"],
      "env": {
        "SHADERTOY_API_KEY": "${SHADERTOY_API_KEY}"
      },
      "inputs": {
        "apiKey": "${SHADERTOY_API_KEY}"
      }
    }
  }
}

Hinweis: Speichern Sie Ihre API-Keys in Umgebungsvariablen, um die Sicherheit zu gewährleisten.

So nutzen Sie diesen MCP in Flows

MCP in FlowHunt nutzen

Um MCP-Server in Ihren FlowHunt-Workflow zu integrieren, fügen Sie zunächst die MCP-Komponente zu Ihrem Flow hinzu und verbinden Sie sie mit Ihrem KI-Agenten:

Klicken Sie auf die MCP-Komponente, um das Konfigurationspanel zu öffnen. Im Bereich für die System-MCP-Konfiguration tragen Sie Ihre MCP-Serverdetails in folgendem JSON-Format ein:

{
  "shadertoy": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

Nach der Konfiguration kann der KI-Agent diesen MCP als Tool mit Zugriff auf alle seine Funktionen und Möglichkeiten nutzen. Denken Sie daran, “shadertoy” durch den tatsächlichen Namen Ihres MCP-Servers und die URL durch Ihre eigene MCP-Server-URL zu ersetzen.

Übersicht

Basierend auf obigen Punkten bietet ShaderToy-MCP eine klare Übersicht und Einrichtungshilfe, es fehlen jedoch Dokumentationen zu Prompt-Vorlagen, Tools und Ressourcen. Der Hauptnutzen liegt in der Verbindung von LLMs mit ShaderToy. Eine erweiterte Dokumentation und explizite MCP-Feature-Unterstützung wären wünschenswert. Ich bewerte diesen MCP-Server mit 4/10 für allgemeinen MCP-Nutzen und Dokumentation.

MCP-Bewertung