motif MCP confere ao Claude Code capacidade de assistir vídeos para reprodução de bugs de UI

O Claude Code não consegue assistir vídeos nativamente, o que torna tedioso diagnosticar bugs visuais de UI — estados de hover, animações, comportamento de rolagem — porque você precisa descrever o bug em palavras. motif é um novo servidor MCP que resolve isso permitindo que você aponte o Claude Code para uma gravação de tela do bug.

Como funciona

Você grava o bug, aponta o motif para o arquivo, e ele retorna três coisas: o que está acontecendo visualmente, a causa raiz e um diff. Ele usa Gemini 2.5 Flash internamente porque esse modelo processa vídeo como uma sequência de quadros em vez de uma única captura de tela — uma distinção que importa para bugs envolvendo um overshoot de 200ms ou um estado de hover que reseta no momento errado.

Configuração

Você precisa de uma chave de API Gemini. Depois, adicione duas linhas ao seu mcp.json:

{
  "mcpServers": {
    "motif": {
      "command": "npx",
      "args": ["motif-mcp"],
      "env": {
        "GEMINI_API_KEY": "sua-chave-aqui"
      }
    }
  }
}

Depois disso, a interface é simples: diga ao Claude Code para assistir à gravação.

Experimente

Execute npx motif-mcp para começar. O projeto está em estágio inicial, então feedback é bem-vindo.

Para quem é

Desenvolvedores usando Claude Code para trabalho de front-end que querem pular a etapa de descrição manual do bug para problemas visuais.