motif MCP gives Claude Code video-watching ability for UI bug reproduction

Claude Code can't natively watch video, which makes diagnosing visual UI bugs — hover states, animations, scroll behavior — tedious because you have to describe the bug in words. motif is a new MCP server that solves this by letting you point Claude Code at a screen recording of the bug.

How it works

You record the bug, point motif at the file, and it returns three things: what's visually happening, the root cause, and a diff. It uses Gemini 2.5 Flash under the hood because that model processes video as a frame sequence rather than a single screenshot — a distinction that matters for bugs involving a 200ms overshoot or a hover state that resets at the wrong time.

Setup

You need a Gemini API key. Then add two lines to your mcp.json:

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

After that, the interface is simply: tell Claude Code to watch the recording.

Try it

Run npx motif-mcp to get started. The project is early stage, so feedback is welcome.

Who it's for

Developers using Claude Code for front-end work who want to skip the manual bug description step for visual issues.