animawatch (Rishitank)

🎬 AnimaWatch

MCP服务器 手表 网络动画就像人类测试员一样——使用人工智能视觉检测笨拙、口吃和视觉伪影。

建于 快速MCP 利用最新的MCP规范（2025-11-25）功能。

✨ 它的作用

YOU: "Watch the modal animation on this page"
     ↓
ANIMAWATCH:
  1. Records browser interaction as video (Playwright)
  2. Sends video to Vision AI (Gemini FREE or Ollama local)
  3. AI watches the recording like a human would
     ↓
RESULT: "Jank detected at 1.2s - fade-in stutters for 180ms"

🚀 特性

🛠️ MCP能力

工具

资源

提示

🚀 快速开始

1.安装

cd ~/github/animawatch
uv sync
uv run playwright install chromium

2.免费获取Gemini API密钥

1. 首选 谷歌AI工作室
2. 点击“获取API密钥”→ 创建API密钥
3. 复制您的密钥

3.配置

cp .env.example .env
# Edit .env and add your GEMINI_API_KEY

4.添加到您的MCP客户端

克劳德桌面版 (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "animawatch": {
      "command": "uv",
      "args": ["--directory", "/Users/YOUR_USER/github/animawatch", "run", "animawatch"],
      "env": {
        "GEMINI_API_KEY": "your-api-key-here"
      }
    }
  }
}

增强代码 （设置）：

{
  "mcpServers": {
    "animawatch": {
      "command": "uv",
      "args": ["--directory", "/Users/YOUR_USER/github/animawatch", "run", "animawatch"],
      "env": {
        "GEMINI_API_KEY": "your-api-key-here"
      }
    }
  }
}

📖 用法示例

观看动画问题

"Watch the modal animation on https://example.com for any jank"

执行操作然后观看

"Click the hamburger menu on https://example.com and watch the slide-in animation"

专注于特定领域

"Watch https://example.com with focus on scroll behavior"

可访问性检查

"Check accessibility on https://example.com"

访问以前的结果

"Show me the analysis from animawatch://analyses/abc123"

🔧 配置

🏠 100%本地与Olama

要完全在本地运行（无API调用）：

# Install Ollama
brew install ollama
ollama serve

# Pull a vision model
ollama pull qwen2.5-vl:7b

# Configure
export VISION_PROVIDER=ollama
export OLLAMA_MODEL=qwen2.5-vl:7b

备注：Ollama不支持直接视频分析，因此它将分析屏幕截图/帧。

💰 成本

🏗️ 建筑

┌─────────────────────────────────────────────────────────────┐
│                       AnimaWatch                            │
│                    (FastMCP Server)                         │
├─────────────────────────────────────────────────────────────┤
│  Lifespan Context (AppContext)                              │
│  ├── BrowserRecorder (Playwright)                           │
│  ├── VisionProvider (Gemini/Ollama)                         │
│  ├── recordings: dict[id, Path]                             │
│  └── analyses: dict[id, str]                                │
├─────────────────────────────────────────────────────────────┤
│  Tools       │  Resources              │  Prompts           │
│  ─────────   │  ─────────────────────  │  ──────────────    │
│  watch       │  animawatch://recordings│  animation_diagnosis│
│  screenshot  │  animawatch://analyses  │  page_analysis     │
│  record      │  animawatch://config    │  accessibility_check│
│  analyze_video│                        │                    │
│  check_access│                         │                    │
└─────────────────────────────────────────────────────────────┘

📄 许可证

麻省理工学院