A browser extension and MCP server that captures live web pages as structured, agent-ready UI context for AI coding assistants.
ViewGraph is worth checking the docs before setup with strong trust signals. Check agent compatibility and use-case fit before adding it to your workflow.
Repository setup guidance
gh repo view sourjya/viewgraph --webOpen the official repository or website.
Check the README for package manager, auth, and platform requirements.
Try it in a small test task inside your agent workflow.
ViewGraph is a tool that helps AI coding agents understand web pages. It captures the structure, styles, and layout of any webpage and gives it to the AI in a compact format. This saves tokens and makes the AI more efficient at tasks like testing, auditing, and code review.
ViewGraph is a developer super assistant that captures live web pages as structured, agent-ready UI context. It combines layout, DOM-like structure, selectors, styles, spatial relationships, screenshots, and metadata to help coding agents generate tests, audit interfaces, compare changes, and build faster. The tool consists of a browser extension (Chrome/Firefox) and an MCP server that exposes 41 tools and 12 prompt templates. It works with any MCP-compatible agent such as Kiro, Claude Code, Cursor, Windsurf, Cline, and Aider. ViewGraph aims to reduce token waste by up to 97% by providing only the essential UI context agents need, making agentic coding more environmentally sustainable. It also includes Playwright and Vitest integrations for capturing DOM snapshots during tests.
Strong trust signals; still review the README and permissions before production use.
Last commit was about 68 days ago.
6 GitHub stars indicate community interest.
0 open issues signal maintenance load.
AGPL-3.0 license detected.
Generate end-to-end tests by capturing page structure and selectors.
Audit web interfaces for accessibility issues and missing test IDs.
Compare UI changes across different versions or branches.
Provide structured context to AI agents for code review and debugging.
Capture and annotate web pages for documentation or bug reports.
The extension captures page content which may include sensitive data; avoid using on pages with personal or confidential information.
The MCP server runs locally; ensure it is not exposed to untrusted networks.
6
Stars
1
Forks
0
Issues
AGPL-3.0
License
Extract any website's complete design system with one command.
Argos is an open source visual testing platform that detects unintended UI changes to help teams maintain quality.
Generate design system documentation for UI components directly from your AI agent, rendering into Figma or portable .md files.
A browser extension and MCP server that captures live web pages as structured, agent-ready UI context for AI coding assistants.
AI-assisted developers using MCP-compatible coding agents., QA engineers automating UI testing and accessibility audits., Full-stack developers who need to quickly understand and modify web interfaces.
The setup section provides repository-level starting guidance, not a guarantee of an independently verified installation. Check the official README and release notes.
The extension captures page content which may include sensitive data; avoid using on pages with personal or confidential information. The MCP server runs locally; ensure it is not exposed to untrusted networks.
Similar or complementary options to evaluate include design-extract, Argos, uSpec.
Jun 7, 2026
2 security/trust notes recorded.
Setup difficulty is 3/5.