Visualdiff

Name: Visualdiff
Author: CloudCorpRecords

โดย CloudCorpRecordsรุ่น 0.1.0i★ –iรันบนเครื่อง

ชื่อใน registryio.github.CloudCorpRecords/visualdiff

ติดตั้ง

ภาพรวม

คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)

SnapDiff visual diffs: verify UI changes, compare pages, screenshots, HTML to image.

สามเสาของ PopNx MCP

สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน

เสียงผู้ใช้iยังไม่มีรีวิวรีวิวเปิดพร้อมระบบบัญชีในขั้นถัดไป
ผลตรวจเบื้องต้นของเราiผ่าน 1 จาก 1 ข้อตรวจจากข้อมูลที่เปิดอยู่ ยังไม่ได้สแกนโค้ด
การใช้งานiยังไม่ได้วัด★ –

ใช้ทำอะไรได้

ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry

การเชื่อมต่อ: รันบนเครื่อง
ช่องทาง (transport): stdio
หมวด: ออกแบบ ภาพ และเสียง

ติดตั้ง

เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง

ก่อนติดตั้ง

ผลตรวจเบื้องต้น: ผ่าน 1 จาก 1 ข้อ
รันในเครื่องคุณด้วยสิทธิ์ของผู้ใช้คุณ (ไฟล์ อินเทอร์เน็ต แอปต่าง ๆ)
ทะเบียนไม่ได้ระบุ key ที่ต้องใส่

ต้องเตรียมก่อน

npmติดตั้ง Node.js (มีคำสั่ง npx) ในเครื่อง

คุณใช้แอปไหน

ClaudeClaude CodeCursorVS CodeChatGPT

เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”

เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json

{
  "mcpServers": {
    "visualdiff": {
      "command": "npx",
      "args": [
        "-y",
        "@reneturcios/visualdiff",
        "mcp"
      ]
    }
  }
}

พิมพ์คำสั่งนี้ใน Terminal

claude mcp add visualdiff -- npx -y @reneturcios/visualdiff mcp

เปิดใน Cursor

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json

{
  "mcpServers": {
    "visualdiff": {
      "command": "npx",
      "args": [
        "-y",
        "@reneturcios/visualdiff",
        "mcp"
      ]
    }
  }
}

เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง

เปิดใน VS Code

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .vscode/mcp.json ของโปรเจกต์

{
  "servers": {
    "visualdiff": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@reneturcios/visualdiff",
        "mcp"
      ]
    }
  }
}

ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น

ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

ทำอะไรได้บ้าง

รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 7 พ.ย. 2569

✓ ผ่าน
ตัวตนผู้ทำตรงกับ repo
ชื่อใน registry ยืนยันด้วยบัญชี GitHub CloudCorpRecords ซึ่งเป็นเจ้าของ repo
… ยังไม่ตรวจ
ยังมีคนดูแล
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
… ยังไม่ตรวจ
มีสัญญาอนุญาต (license)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
– ไม่เกี่ยว
endpoint ตอบ
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
– ไม่เกี่ยว
ล็อกอินแบบ OAuth
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
… ยังไม่ตรวจ
คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต

เทียบกับตัวอื่นในหมวด ออกแบบ ภาพ และเสียงi

ดาวมากกว่า 0% ของอีก 2186 ตัวในหมวดนี้
ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 87% ของอีก 2186 ตัวในหมวดนี้
ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 100% ของอีก 2186 ตัวในหมวดนี้

เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo

คำถามที่พบบ่อย

Visualdiff ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น

ต้องใช้กุญแจหรือรหัสอะไรบ้าง?

registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก

ตัวนี้รันบนเครื่องหรือบนคลาวด์?

รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)

ยังมีคนดูแลอยู่ไหม?

repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.1.0) เข้า registry 5 วันที่ผ่านมา

ใช้กับโปรแกรมไหนได้บ้าง?

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js, Docker ในเครื่องด้วย

มีตัวไหนใช้แทนได้บ้าง?

ในหมวดเดียวกันมี Figma Context MCP, Claude Real Video, Figma MCP Server

ตัวที่ใช้แทนได้

server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว

อ่านการ์ด:★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi

Figma Context MCP

โดย GLips

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

รันบนเครื่อง★ 16,165MITอัปเดต 5 เดือนที่ผ่านมา

ติดตั้ง

Claude Real Video

โดย HUANGCHIHHUNGLeo

Let any LLM watch a video locally — and search everything it has ever watched.

รันบนเครื่อง★ 2,284MITอัปเดต 2 เดือนที่ผ่านมา

ติดตั้ง

Figma MCP Server

โดย figma

server ทางการของ Figma ส่งข้อมูลงานออกแบบให้ AI อ่าน เพื่อเปลี่ยนแบบเป็นโค้ดหรืออธิบายแบบได้ตรงขึ้น ต่อผ่านคลาวด์ของ Figma

รันบนคลาวด์★ 2,152อัปเดต 13 เดือนที่ผ่านมา

ติดตั้ง

README จากผู้ทำ

เปิดอ่าน README

ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ

visualdiff

visualdiff wraps the SnapDiff visual-testing API: verify that a UI change matches what you meant to do, diff two pages (or a page against a stored baseline), capture a screenshot of any URL, and render raw HTML/CSS straight to an image. One binary serves a command-line interface and a stdio MCP server.

An API key is required. Set SNAPDIFF_API_KEY to a key from the SnapDiff dashboard; calls fail before any request is made when it is missing. The API base URL can be overridden with SNAPDIFF_API_URL; when it is not set, calls go to https://api.snapdiff.ai/v1.

Install

npx @reneturcios/visualdiff screenshot https://example.com

Or run the container image:

docker run -i -e SNAPDIFF_API_KEY=sk_live_... ghcr.io/cloudcorprecords/visualdiff

The container defaults to the MCP server (see below). Pass CLI arguments to use it as a CLI instead.

CLI

export SNAPDIFF_API_KEY=sk_live_...

visualdiff verify myproj pricing https://staging.example.com/pricing "added a yearly billing toggle" visualdiff compare https://staging.example.com --before https://www.example.com visualdiff compare http://localhost:3000 --project myproj --page-name homepage visualdiff screenshot https://example.com --width 800 --full-page visualdiff html-to-image " Hello " --css "h1 { color: navy; }" --width 1200 --height 630

visualdiff --version

Commands print the upstream JSON payload. Exit codes: 0 on success, 1 when a call fails (including a missing API key or an upstream API error), 2 for usage errors.

MCP server

One bin serves both faces. The mcp subcommand starts a stdio MCP server:

npx -y @reneturcios/visualdiff mcp

MCP client configuration:

"mcpServers": { "visualdiff": { "command": "npx", "args": ["-y", "@reneturcios/visualdiff", "mcp"], "env": { "SNAPDIFF_API_KEY": "sk_live_..." } } } }

Tools

Tool	Input	What it returns
`snapdiff_verify_ui_change`	`project`, `page_name`, `after`, `intent` (all required); optional `intent_regions`, `branch`, `threshold`, `match_tolerance_percent`, `ignore_selectors`, `full_page`	A verdict (`pass`, `expected_change_detected`, `unexpected_regression`, `no_change_detected`, or `needs_human_review`), a `next_action`, and a `review_url`. Requires a project with a stored page baseline.
`snapdiff_compare_pages`	`after` (required); plus `before`, or `project` + `page_name` for baseline mode; optional `branch`, `threshold`, `ignore_selectors`, `full_page`	A diff percentage plus a highlighted diff image.
`snapdiff_capture_screenshot`	`url` (required); optional `full_page`, `dark_mode`, `selector`, `width`	A screenshot of the page.
`snapdiff_html_to_image`	`html` (required); optional `css`, `width`, `height`	The rendered image (OG cards, social images, email headers).

Each tool is sent as a POST to a per-tool endpoint under the base URL with the API key as a Bearer token. Optional arguments that are not supplied are omitted from the request body entirely.

Development

npm install

npm run build # tsc -> dist/ npm test # node test runner over test/*.test.ts, no network (fake fetch fixtures) npm run dev # run the CLI from source via tsx

License

MIT — see LICENSE.

Visualdiff

ภาพรวม

สามเสาของ PopNx MCP

ใช้ทำอะไรได้

ติดตั้ง

ก่อนติดตั้ง

ทำอะไรได้บ้าง

ผลตรวจเบื้องต้นi

ตัวตนผู้ทำตรงกับ repo

ยังมีคนดูแล

มีสัญญาอนุญาต (license)

endpoint ตอบ

ล็อกอินแบบ OAuth

คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง

เทียบกับตัวอื่นในหมวด ออกแบบ ภาพ และเสียงi

คำถามที่พบบ่อย

ตัวที่ใช้แทนได้

Figma Context MCP

Claude Real Video

Figma MCP Server

README จากผู้ทำ

visualdiff

Install

CLI

MCP server

Tools

Development

License