Dev Peek MCP Server

This package provides a Model Context Protocol (MCP) server that acts as a bridge between the Dev Peek Chrome Extension and AI tools. It allows AI assistants to inspect, edit, and understand the web page you are currently working on.

Features

• Context Awareness: The AI can read your website's structure without you needing to copy-paste code.
• Live Editing: AI tools can make changes to the DOM and styles in real-time.
• Stable Element References: Elements are fingerprinted with a data-devpeek-id attribute, providing a stable way to reference elements across multiple operations.

Installation

To install the package globally from the local source, run the following command from the mcp-server directory:

npm install -g .

This will make the dev-peek-mcp and dev-peek-setup commands available in your system's PATH.

Usage

To start the MCP server, run the following command in your terminal:

dev-peek-mcp

This will start a WebSocket server on ws://localhost:8080. The Dev Peek extension will automatically connect to this server.

Troubleshooting

Port Conflict Errors

If you see an error like Port 8080 appears in use or your IDE reports that the server exited unexpectedly, it means you have more than one instance of the server trying to run at the same time.

Solution: The best practice is to let your IDE (e.g., VS Code) manage the server process.

• Stop any manual dev-peek-mcp processes running in your terminal.
• Rely on your IDE's MCP extension to automatically start and stop the server in the background.

If you prefer to run the server manually, you will need to disable the auto-start feature for this server in your IDE's settings.

MCP Protocol

The server exposes the following resources and tools:

Resources

• page://dom: A simplified, semantic representation of the current DOM tree.
• page://selected: The styles and details of the currently selected element in Dev Peek.

Tools

• select_element: Select and highlight an element by CSS selector or devpeekId.
• identify_element: Assign a persistent devpeekId to an element.
• update_style: Update a CSS style property of an element.
• update_text: Update the text content of an element.
• scroll_to: Scroll an element into view.
• undo: Undo the last change for an element.
• get_element_attributes: Get all attributes of an element.
• get_computed_style: Get the computed style of an element.

Development

To build the server, run:

npm run build

To run the setup script for configuring AI tools, run:

dev-peek-setup

This script will automatically detect and configure the following AI tools:

• Claude Desktop: If the Claude Desktop application is found, the script will automatically update its configuration to use the Dev Peek MCP server.
• Gemini CLI: If the gemini command is available, the script will run gemini mcp add to register the server.

If the script is unable to automatically configure a tool, it will provide manual setup instructions.