** Недостающий контекст времени выполнения для агентов кодирования ИИ.**

ИИ может читать ваш код, но не может видеть, что происходит во время выполнения. DevInspector предоставляет недостающий контекст: местоположение исходного кода, состояние DOM, стили, сеть, консоль, выход терминала и скриншоты.

Два режима: Используйте ИИ вашей IDE (Cursor, VSCode) через MCP или запустите агенты ИИ непосредственно в браузере через ACP (Claude Code, Codex CLI, Gemini CLI, OpenCode, более).

** Использование кода Клода или другого агента ИИ? ** Установите навык DevInspector, чтобы ваш агент знал, как настроить и устранить неполадки инспектора:

Таблица содержимого

Демо видео

• Социальные медиа
• Ключевые особенности Быстрый старт
• Установка
• Автоматическая настройка
• Рамочная настройка
• Агентские навыки
• Конфигурация Автообновление MCP Config
• Агентская установка
• Пользовательские агенты Конфигурация MCP-серверов
• Что он делает? Два режима рабочего процесса Инструменты MCP Инструменты Custom Inspector
• MCP Prompts
• Архитектура

Демо видео

** Смотреть демо: ** https://www.youtube.com/shorts/TCt2oOtPS_k

Социальные медиа

Twittter/X Post: https://x.com/yaoandyan/status/1995082020431753600

Ключевые особенности

Визуальный контекст и выбор региона

dev-inspector-mcp

The missing runtime context for AI coding agents.

AI can read your code, but can’t see what’s happening at runtime. DevInspector provides the missing context: source code location, DOM state, styles, network, console, terminal output, and screenshots.

Two modes: Use with your IDE’s AI (Cursor, VSCode) via MCP, or run AI agents directly in the browser via ACP (Claude Code, Codex CLI, Gemini CLI, OpenCode, more).

Using Claude Code or another AI agent? Install the DevInspector skill so your agent knows how to set up and troubleshoot the inspector:

npx skills add mcpc-tech/dev-inspector-mcp

Table of Contents

• Demo Video
• Social Media
• Key Features
• Quick Start
  • Installation
  • Automated Setup
  • Framework Setup
• Agent Skills
• Configuration
  • Auto-Update MCP Config
  • Agent Installation
  • Custom Agents
  • MCP Servers Configuration
• What It Does
• Two Workflow Modes
• MCP Tools
• Custom Inspector Tools
• MCP Prompts
• Architecture

Demo Video

Watch the demo: https://www.youtube.com/shorts/TCt2oOtPS_k

Social Media

Twittter/X Post: https://x.com/yaoandyan/status/1995082020431753600

Key Features

Visual Context & Region Selection

Click any element to inspect it, or drag to select a region. AI gets the full context: source code location, computed styles, component hierarchy, IDs, classes, text content, and automatically captures screenshots for pixel-perfect visual understanding.

Page Overview & Accessibility Tree

get_page_info provides AI with a semantic understanding of the page: URL, viewport, and an accessibility tree showing landmarks, headings, forms, and links. AI can navigate the page structure without screenshots.

Universal DevTools Access

AI can access Network and Console logs from any browser (via client-side interception) or full Chrome DevTools (via chrome devtools mcp). It sees what you see, regardless of your environment.