Motiv MCP verleiht Claude Code die Fähigkeit, Videos anzusehen, um UI-Fehler zu reproduzieren

Claude Code kann nativ keine Videos abspielen, was die Diagnose von visuellen UI-Fehlern – Hover-Zustände, Animationen, Scrollverhalten – mühsam macht, weil man den Fehler in Worten beschreiben muss. Motif ist ein neuer MCP-Server, der dieses Problem löst, indem Sie Claude Code auf eine Bildschirmaufnahme des Fehlers verweisen können.

Wie es funktioniert

Sie zeichnen den Fehler auf, verweisen Motif auf die Datei, und es liefert drei Dinge: was visuell passiert, die Ursache und einen Diff. Im Hintergrund wird Gemini 2.5 Flash verwendet, da dieses Modell Video als Bildsequenz und nicht als Einzelbild verarbeitet – ein entscheidender Unterschied bei Fehlern, die einen 200-ms-Überschwinger oder einen Hover-Zustand beinhalten, der zum falschen Zeitpunkt zurückgesetzt wird.

Einrichtung

Sie benötigen einen Gemini-API-Schlüssel. Fügen Sie dann zwei Zeilen zu Ihrer mcp.json hinzu:

{
  "mcpServers": {
    "motif": {
      "command": "npx",
      "args": ["motif-mcp"],
      "env": {
        "GEMINI_API_KEY": "your-key-here"
      }
    }
  }
}

Danach ist die Schnittstelle einfach: Sagen Sie Claude Code, es solle die Aufnahme ansehen.

Ausprobieren

Führen Sie npx motif-mcp aus, um zu starten. Das Projekt befindet sich in einer frühen Phase, daher ist Feedback willkommen.

Für wen es geeignet ist

Entwickler, die Claude Code für Frontend-Arbeiten nutzen und den manuellen Schritt der Fehlerbeschreibung bei visuellen Problemen überspringen möchten.