🚀 Launch in Grok Bot (x.ai/bot) ↗ 📋 Copy x.ai/bot Link { } Inspect JSON API Ground-Truth Source ↗

⚡ 1-Click Agent & Developer Install

Zero Auth · Ready for Grok Bot, Claude Code & Cursor

### Overview & Operational Goal **Dynamic OpenGraph & X Card Visual QA Bot** (`open-graph-social-card-visual-qa-bot`) is a verified Grok Bot template designed and tested with **@iraiansar** ([`x.com/iraiansar`](https://x.com/iraiansar)). Renders every new blog and directory route in headless Playwright to verify `og:image` dimensions, typography contrast, and X card previews. ### Required MCP Connectors & Permissions - **Required Connectors:** Playwright MCP, Visual Sentinel MCP, GitHub MCP - **Routine / Trigger Schedule:** `Webhook / On Content Publish` - **Safety & Approval Boundary:** **Ask-First / Human-in-the-Loop** — never executes irreversible external sends, destructive deletions, or financial transactions without explicit user approval. ### Copy-Paste System Prompt (`x.ai/bot/`) ```markdown You are Dynamic OpenGraph & X Card Visual QA Bot (open-graph-social-card-visual-qa-bot), an autonomous creative-video agent running on Grok Bot. Mission: Renders every new blog and directory route in headless Playwright to verify `og:image` dimensions, typography contrast, and X card previews. On every scheduled run (Webhook / On Content Publish) or user invocation: (1) Query read-only state across Playwright MCP, Visual Sentinel MCP, GitHub MCP; (2) Cross-verify timestamps, identifiers, and metrics against source records with zero fabrication; (3) Synthesize a concise, prioritized executive report with exact links and diffs; (4) Stage any external messages, ticket updates, or configuration changes for explicit human approval before execution. ``` ### Step-by-Step Deployment Guide 1. Click **Open in Grok Bot** (`https://x.ai/bot/TO-Svcax199Isfhex7jcu`) or create a new agent in your workspace. 2. Paste the **System Prompt** above into the agent instructions block. 3. Connect the required MCP integrations (Playwright MCP, Visual Sentinel MCP, GitHub MCP) and verify read-only discovery first. 4. Configure the routine schedule (`Webhook / On Content Publish`) and run a single manual test turn to validate the output schema.

Tags: #playwright-mcp#visual-sentinel-mcp#github-mcp#grok-bot#creative-video

View All 9 Items by @iraiansar →

mcp · ⚡ 89

Visual Sentinel MCP — Automated UI Pixel-Diff & Layout QA Server

Capture multi-viewport Playwright screenshots, run perceptual pixel-diff comparisons against baseline snapshots, and detect CSS overflow or dark-mode contr

use case · ⚡ 93

Automated Multi-Viewport Visual Regression & Overflow Gate on Every PR

Runs Playwright and Visual Sentinel MCP against preview deployments on every pull request to block CSS overflow, z-index collisions, and dark-mode regressi

template · ⚡ 83

SVG Icon System & Asset Bundle Optimizer

Watches repository icon and SVG asset folders, runs SVGO path minification, enforces `currentColor` stroke rules, and generates typed React icon components