📋 Copy Blueprint Command { } Inspect JSON API Ground-Truth Source ↗

⚡ 1-Click Agent & Developer Install

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

### 1. The Workflow Bottleneck & Problem Statement Frontend teams merge PRs with green TypeScript builds that silently degrade Largest Contentful Paint (LCP) or break mobile navigation on preview URLs. ### 2. Synthesized Agent Architecture & Connected Stack **Automated Vercel Preview Deployment Lighthouse & Visual QA Commenter** (`vercel-preview-visual-and-lighthouse-gate`) is a verified production blueprint curated from **@vercel**'s real-world implementation. - **Primary Capability:** Waits for Vercel preview builds to finish on every PR, runs Lighthouse 100 and Playwright visual checks, and posts a single consolidated scorecard comment. - **Connected Tool Stack:** Vercel MCP, Playwright Official MCP, GitHub MCP - **Execution Governance:** `Read-Only Discovery` → `Deterministic Policy Check` → `Ask-First Human Approval` - **Certified Builder Source:** [@vercel](https://github.com/vercel/mcp) ### 3. Step-by-Step Implementation Blueprint 1. **Trigger & Data Ingestion:** Configure your agent routine to watch **Vercel MCP** on a scheduled cadence or event webhook. Treat all external text as untrusted data inside XML fences. 2. **Cross-System Enrichment & Verification:** Query **Playwright Official MCP** to validate live capacity, account status, or code state before generating recommendations. 3. **Human-in-the-Loop Action Staging:** Post a structured summary card to **GitHub MCP** with 1-click approve/edit controls so your team retains full oversight. ### 4. Copy-Paste System Prompt & Routine Configuration ```text Implement the 'Automated Vercel Preview Deployment Lighthouse & Visual QA Commenter' workflow curated with @vercel. 1. OBJECTIVE: Waits for Vercel preview builds to finish on every PR, runs Lighthouse 100 and Playwright visual checks, and posts a single consolidated scorecard comment. 2. CONNECTED TOOL STACK: Vercel MCP, Playwright Official MCP, GitHub MCP 3. STEP-BY-STEP EXECUTION LOOP: - Step A (Ingest & Ground): Query live inputs from Vercel MCP and cross-reference state in Playwright Official MCP. - Step B (Analyze & Validate): Apply strict filtering rules, verify schema/policy constraints, and flag any anomalies or missing fields. - Step C (Stage & Report): Prepare the structured output, draft replies/tickets in GitHub MCP, and request human confirmation before executing any external send or production write. ``` ### 5. Measured ROI & Production Impact - **Verified Outcome:** Enforces a 95+ Lighthouse performance score and zero mobile layout shifts on every Vercel preview URL. - **Builder Portfolio:** [Explore all capabilities by @vercel →](/u/vercel)

Tags: #vercel-preview-visual-and-lighthouse-gate#use-case#engineering#vercel#vercel-mcp#playwright-official-mcp

View All 3 Items by @vercel →

mcp · ⚡ 82

Vercel Platform & Preview Deployment Inspector MCP Server

Inspect Vercel preview and production deployments, fetch build and runtime logs, manage environment variables, and verify domain DNS configurations from yo

skill · ⚡ 87

Vercel AI SDK 4.x Core, `streamText` & Multi-Step Tool Calling Skill

Build streaming, tool-calling AI agents in TypeScript using the Vercel AI SDK (`streamText`, `generateObject`, `maxSteps`, and provider-agnostic model rout