domsight-mcp 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +103 -0
- package/dist/mcp-server.js +30600 -0
- package/package.json +43 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Sylvester Amaechi
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
# domsight-mcp
|
|
2
|
+
|
|
3
|
+
Give your AI coding assistant eyes. DOMSight is an MCP server that lets AI tools like Claude Code see and control your browser in real-time.
|
|
4
|
+
|
|
5
|
+
**Your AI can now:**
|
|
6
|
+
- See console errors without you copy-pasting them
|
|
7
|
+
- Take screenshots of your app and tell you what's wrong
|
|
8
|
+
- Fill out forms, click buttons, and test full user flows
|
|
9
|
+
- Inspect elements, read the DOM, and debug layout issues
|
|
10
|
+
|
|
11
|
+
## Quick Start
|
|
12
|
+
|
|
13
|
+
### 1. Install
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install -g domsight-mcp
|
|
17
|
+
npx playwright install chromium
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### 2. Add to your project
|
|
21
|
+
|
|
22
|
+
Create or edit `.mcp.json` in your project root:
|
|
23
|
+
|
|
24
|
+
```json
|
|
25
|
+
{
|
|
26
|
+
"mcpServers": {
|
|
27
|
+
"domsight": {
|
|
28
|
+
"command": "domsight-mcp"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### 3. Use it
|
|
35
|
+
|
|
36
|
+
Start your dev server, open Claude Code, and just ask:
|
|
37
|
+
|
|
38
|
+
> "Connect to localhost:3000 and check for any errors"
|
|
39
|
+
|
|
40
|
+
> "Take a screenshot of the dashboard"
|
|
41
|
+
|
|
42
|
+
> "Fill out the signup form and test if registration works"
|
|
43
|
+
|
|
44
|
+
> "The login button isn't working — can you check why?"
|
|
45
|
+
|
|
46
|
+
Claude Code will use DOMSight's tools automatically. No copy-pasting, no manual DevTools.
|
|
47
|
+
|
|
48
|
+
## Available Tools
|
|
49
|
+
|
|
50
|
+
| Tool | Description |
|
|
51
|
+
|---|---|
|
|
52
|
+
| `connect_to_url` | Launch a browser and navigate to a URL |
|
|
53
|
+
| `capture_dom` | Capture visible text, console errors, network errors, and rendered HTML |
|
|
54
|
+
| `take_screenshot` | Take a full-page screenshot (returned as image) |
|
|
55
|
+
| `inspect_element` | Inspect elements by CSS selector — get styles, bounding box, HTML |
|
|
56
|
+
| `click_element` | Click any element on the page |
|
|
57
|
+
| `type_text` | Type into input fields (forms, search bars, etc.) |
|
|
58
|
+
| `navigate` | Navigate to a new URL without reconnecting |
|
|
59
|
+
| `select_option` | Select from dropdown menus |
|
|
60
|
+
| `wait_for` | Wait for elements to appear or a fixed delay |
|
|
61
|
+
| `get_console_errors` | Get all console errors and warnings |
|
|
62
|
+
| `get_network_errors` | Get all failed network requests (4xx, 5xx) |
|
|
63
|
+
| `disconnect` | Close the browser |
|
|
64
|
+
|
|
65
|
+
## Example: Automated Registration Test
|
|
66
|
+
|
|
67
|
+
Here's what Claude Code did with DOMSight on a real Next.js + Express app:
|
|
68
|
+
|
|
69
|
+
1. Connected to `localhost:3000/signup`
|
|
70
|
+
2. Filled 8 form fields (company name, email, password, etc.)
|
|
71
|
+
3. Took a screenshot to verify
|
|
72
|
+
4. Clicked "Get Started"
|
|
73
|
+
5. Waited for OTP page
|
|
74
|
+
6. Verified redirect to dashboard
|
|
75
|
+
|
|
76
|
+
All automated. Zero manual intervention.
|
|
77
|
+
|
|
78
|
+
## Requirements
|
|
79
|
+
|
|
80
|
+
- Node.js 18+
|
|
81
|
+
- Chrome or Chromium (installed via `npx playwright install chromium`)
|
|
82
|
+
- An MCP-compatible AI tool (Claude Code, Cursor, etc.)
|
|
83
|
+
|
|
84
|
+
## How It Works
|
|
85
|
+
|
|
86
|
+
DOMSight launches a headless Chromium browser via Playwright, connects to your local dev server, and exposes browser capabilities as MCP tools. Your AI assistant calls these tools directly — it can see the page, read errors, interact with elements, and take screenshots.
|
|
87
|
+
|
|
88
|
+
```
|
|
89
|
+
Your App (localhost:3000)
|
|
90
|
+
|
|
|
91
|
+
v
|
|
92
|
+
Playwright Headless Browser
|
|
93
|
+
|
|
|
94
|
+
v
|
|
95
|
+
DOMSight MCP Server (stdio)
|
|
96
|
+
|
|
|
97
|
+
v
|
|
98
|
+
Claude Code / Cursor / AI Assistant
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
## License
|
|
102
|
+
|
|
103
|
+
MIT
|