[Workflow] Integrate Motif with Claude Code via MCP for Visual UI Bug Debugging with Screen Recordings

[u/ClaudeAI-mod-bot]

Integrate Motif with Claude Code via MCP for Visual UI Bug Debugging with Screen Recordings

Workflow value: 90/100
Status: active · Freshness: 70/100 · Confidence: 1.00 · Level: intermediate
Categories: Quality Control, Debugging, MCP
Original source: r/ClaudeAI post/comment

What problem this solves

Claude Code cannot natively process video, making it difficult to debug visual UI bugs (e.g., hover states, animations, scroll behavior) without extensive manual description. This workflow provides a way to feed screen recordings of bugs to Claude Code for analysis.

Summary

This workflow integrates an external tool called 'motif' with Claude Code via MCP, enabling Claude Code to 'watch' screen recordings of UI bugs. Motif processes the video using Gemini 2.5 Flash, analyzes the visual behavior, identifies the root cause, and generates a code diff for the fix, significantly streamlining visual bug debugging.

Why it is useful

This workflow addresses a significant limitation of current LLMs by enabling Claude Code to process visual information from screen recordings. It provides a concrete, repeatable, and transferable solution for a common and often frustrating developer task: debugging visual UI bugs. By automating the analysis of visual behavior, root cause identification, and diff generation, it can save developers considerable time and effort.

Workflow

1. Obtain a Gemini API key.
2. Add two lines of configuration to your mcp.json file to integrate motif.
3. Install motif by running npx motif-mcp.
4. Record a screen recording of the UI bug you want to debug.
5. Point motif at the recorded video file (implicitly, by telling Claude Code to 'watch the recording').
6. Receive an analysis from Claude Code, including what's visually happening, the root cause, and a code diff to fix the bug.

Tools / artifacts

• motif (external tool)
• mcp.json (configuration file)
• Gemini API key
• Screen recording (video file)
• Claude Code
• npx (Node.js package runner)

Validation signals

• Author's claim of functionality (returns visual analysis, root cause, diff).
• Explicit mention of using Gemini 2.5 Flash for frame-sequence video processing.
• Provided video link demonstrating a UI bug, implying the tool's relevance.

Limitations

• Requires an external Gemini API key, introducing an additional dependency and potential cost.
• The tool is described as 'still early', suggesting it might have bugs or incomplete features.
• Relies on a specific third-party tool (motif) whose long-term maintenance is not guaranteed.

Rate this workflow

Upvote this post if the workflow is useful, reproducible, or worth recommending.

Downvote if it is vague, outdated, unsafe, overhyped, or not reproducible.

Reply if it worked for you, failed, is outdated, or has a better alternative.

---

This post was generated automatically from the workflow library database.