motif MCP offre à Claude Code la capacité de visionner des vidéos pour la reproduction de bugs UI

Claude Code ne peut pas lire de vidéos nativement, ce qui rend le diagnostic des bugs visuels d'interface—survols, animations, comportement de défilement—fastidieux car il faut décrire le bug avec des mots. motif est un nouveau serveur MCP qui résout ce problème en vous permettant de pointer Claude Code vers un enregistrement d'écran du bug.

Comment ça marche

Vous enregistrez le bug, pointez motif vers le fichier, et il renvoie trois choses : ce qui se passe visuellement, la cause racine, et un diff. Il utilise Gemini 2.5 Flash en interne car ce modèle traite la vidéo comme une séquence d'images plutôt qu'une simple capture d'écran—une distinction importante pour les bugs impliquant un dépassement de 200 ms ou un état de survol qui se réinitialise au mauvais moment.

Configuration

Vous avez besoin d'une clé API Gemini. Ajoutez ensuite deux lignes à votre mcp.json :

{
  "mcpServers": {
    "motif": {
      "command": "npx",
      "args": ["motif-mcp"],
      "env": {
        "GEMINI_API_KEY": "votre-clé-ici"
      }
    }
  }
}

Ensuite, l'interface est simple : dites à Claude Code de regarder l'enregistrement.

Essayez-le

Exécutez npx motif-mcp pour commencer. Le projet est encore à un stade précoce, donc les retours sont les bienvenus.

À qui ça s'adresse

Aux développeurs utilisant Claude Code pour le travail front-end qui souhaitent éviter l'étape de description manuelle des bugs pour les problèmes visuels.