Dom Ghost

DOM ACCESS & AI INTEGRATION

Quickstart Steps

Resources

Getting Started: Watch How It Works

A quick video introduction to Dom Ghost

This tutorial video walks you through the complete process of installing the extension, setting up the MCP server, and working with Claude Code to manipulate web pages.

Step 1: Browser Extension

Install and configure the Chrome extension

The browser extension provides DOM access and screenshot capabilities directly from your visited websites.

1Installation Steps

Until we get verified on the google chrome extensions store, you have to install the extension manually.

Click 'Install Extension' Below.
Unzip the Extension You Downloaded.
Open a New Chrome Tab and Go to chrome://extensions
Enable Developer Mode.
Click on the Load Unpacked Button.
Select the Unzipped Extension Folder.
Confirm Extension Addition.

2Usage Steps

Once added to your browser, click on the extension and open it.
Enter your API token.
Click the 'Use On This Tab' button on the extension when on the page you want to interact with

✦Features

Capture full-page screenshots
Access the page's DOM structure
Manipulate DOM elements
Query element properties
Simulate user interactions
Use Workflows for automated tasks
Work with Claude Code and other AI tools

Step 2: MCP Server Setup

Configure your MCP server to access website data

Run this command to add MCP capabilities to your AI client:

npx dom-ghost-mcp YOUR_API_TOKEN

How It Works

The MCP server connects your AI tools (like Claude) to your browser extension, allowing the AI to:

✓Take screenshots of your current page
✓Access and query the DOM structure
✓Manipulate DOM elements
✓Get computed styles for elements
✓View event listeners attached to elements
...And Much More!

Click the command to copy it to your clipboard

Step 3: Claude Code Examples

See how Claude uses MCP to understand and modify web pages

(Your API Key is automatically inserted into the configuration examples below)

Adding DOM Ghost MCP to Claude Code

Using dom-ghost-mcp with Claude Code CLI:


claude mcp add-json dom-ghost-mcp "{\"args\":[\"dom-ghost-mcp@latest\",\"YOUR_API_KEY\"], \"type\":\"stdio\",\"command\":\"npx\"}"

Using dom-ghost-mcp with a config file (Used by Claude Desktop & Cursor IDE):

For Claude Desktop, click File > Settings > Developer > Edit Config, and add:


{
  "mcpServers": {
    "dom-ghost-mcp": {
      "command": "npx",
      "args": ["dom-ghost-mcp@latest", "YOUR_API_KEY"]
    }
  }
}

Using DOM Ghost with an AI Agent:

Workflow Approach

To start a workflow, start your prompt with use the 'frontend_workflow' tool:, like this:

use the 'start_workflow' tool: Please update my button to do...

Natural Interaction

Simply work with Claude as you normally would and let the agent decide when to use DOM Ghost tools based on your requests.

Claude Code can analyze your website's HTML, CSS, and JavaScript to diagnose issues

Documentation

Learn how to use the API and browser extension

Work In Progress

Integration Guide

Integrate with popular AI platforms and development tools.

Compatible With:

Claude 3 (Opus, Sonnet, Haiku)
GPT-4 with function calling
Ollama local models
Any MCP compatible AI assistant

View Full Documentation

hello