https://github.com/adtac/domshot
MCP server to fetch browser screenshots of DOM elements
https://github.com/adtac/domshot
Last synced: about 2 months ago
JSON representation
MCP server to fetch browser screenshots of DOM elements
- Host: GitHub
- URL: https://github.com/adtac/domshot
- Owner: adtac
- Created: 2025-05-27T23:22:27.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2025-05-27T23:50:40.000Z (4 months ago)
- Last Synced: 2025-07-30T15:23:56.211Z (2 months ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# domshot
MCP server to fetch browser screenshots of DOM elements.
https://github.com/user-attachments/assets/1ab36d65-32be-42f5-b3fc-97618c2e96a7
### Installation
```bash
$ git clone https://github.com/adtac/domshot.git
$ claude mcp add domshot -- $PWD/domshot/mcp.sh
```
Restart Claude.
### Usage
Paste this in the **Console** tab of **Chrome DevTools** on the page you want to give Claude access:
```js
const el = document.createElement("script"); el.src = "http://localhost:8000/embed.js"; document.head.appendChild(el);
```
Then ask Claude to call `get_browser_screenshot` and describe the result.
See example
```
$ claude
╭───────────────────────────────────────────────────╮
│ ✻ Welcome to Claude Code! │
│ │
│ /help for help, /status for your current setup │
│ │
│ cwd: /Users/user/src/tmp/domshot │
╰───────────────────────────────────────────────────╯
> call get_browser_screenshot tool and describe the result
⏺ I'll call the browser screenshot tool and describe what I see.
⏺ domshot:get_browser_screenshot (MCP)
⎿
⎿ [Image]
⏺ The screenshot shows a simple red webpage with the text "RED" displayed in white text, centered on a solid
red background.
```
### License
MIT