hoverify-mcp 0.1.0 → 0.1.1
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/README.md +159 -29
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,45 +2,178 @@
|
|
|
2
2
|
|
|
3
3
|
Lets coding agents use [Hoverify](https://tryhoverify.com) in your own browser: audit a page for SEO, accessibility and AI search, inspect an element's HTML and CSS, and take screenshots. It works on logged-in pages, staging and `localhost`, because it runs in the browser you already have open.
|
|
4
4
|
|
|
5
|
-
It's a standard MCP server over stdio, so any MCP
|
|
5
|
+
It's a standard MCP server over stdio, so it works with any agent that runs local MCP servers: Claude Code, Codex, Cursor, VS Code, Gemini CLI, OpenCode, Grok Build, Muse Code and the others listed below.
|
|
6
6
|
|
|
7
7
|
## Requirements
|
|
8
8
|
|
|
9
9
|
- The Hoverify extension for Chrome or Firefox, signed in with an active license
|
|
10
10
|
- Node.js 18 or later
|
|
11
|
+
- An agent that runs local (stdio) MCP servers
|
|
11
12
|
|
|
12
13
|
## Setup
|
|
13
14
|
|
|
14
15
|
1. In the Hoverify popup, open **AI agent** and switch on **Connect to agent**.
|
|
15
|
-
2. Add the server to your agent
|
|
16
|
+
2. Add the server to your agent, as shown for each agent below.
|
|
17
|
+
3. The first time the agent connects, the Hoverify icon shows a **!**. Click it and choose **Allow**.
|
|
16
18
|
|
|
17
|
-
|
|
18
|
-
claude mcp add hoverify -- npx -y hoverify-mcp
|
|
19
|
-
```
|
|
19
|
+
You only allow once per computer: every agent on it shares the same key, so the next ones connect without asking. **Forget** on the AI agent page disconnects them all, and Hoverify asks again next time. The connection switches itself off after 30 minutes without calls.
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
### Add it to your agent
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
{
|
|
25
|
-
"mcpServers": {
|
|
26
|
-
"hoverify": {
|
|
27
|
-
"command": "npx",
|
|
28
|
-
"args": ["-y", "hoverify-mcp"]
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
```
|
|
23
|
+
Every agent runs the same thing: the command `npx` with the arguments `-y hoverify-mcp`. Most agents take it in this shape:
|
|
33
24
|
|
|
34
|
-
|
|
25
|
+
```json
|
|
26
|
+
{
|
|
27
|
+
"mcpServers": {
|
|
28
|
+
"hoverify": {
|
|
29
|
+
"command": "npx",
|
|
30
|
+
"args": ["-y", "hoverify-mcp"]
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
claude plugin marketplace add UnveelWorks/hoverify-mcp
|
|
38
|
-
claude plugin install hoverify@hoverify
|
|
39
|
-
```
|
|
36
|
+
Agents with an add command:
|
|
40
37
|
|
|
41
|
-
|
|
38
|
+
| Agent | Command |
|
|
39
|
+
|---|---|
|
|
40
|
+
| Claude Code | `claude mcp add hoverify -- npx -y hoverify-mcp` |
|
|
41
|
+
| Codex (CLI, IDE extension and app) | `codex mcp add hoverify -- npx -y hoverify-mcp` |
|
|
42
|
+
| Amp | `amp mcp add hoverify -- npx -y hoverify-mcp` |
|
|
43
|
+
| Cline CLI | `cline mcp add hoverify --yes -- npx -y hoverify-mcp` |
|
|
44
|
+
| Devin CLI | `devin mcp add hoverify -s user -- npx -y hoverify-mcp` |
|
|
45
|
+
| Factory Droid | `droid mcp add hoverify "npx -y hoverify-mcp"` |
|
|
46
|
+
| Gemini CLI | `gemini mcp add -s user hoverify npx -y hoverify-mcp` |
|
|
47
|
+
| GitHub Copilot CLI | `copilot mcp add hoverify -- npx -y hoverify-mcp` |
|
|
48
|
+
| Grok Build | `grok mcp add hoverify -- npx -y hoverify-mcp` |
|
|
49
|
+
| Kilo Code | `kilo mcp add hoverify -- npx -y hoverify-mcp` |
|
|
50
|
+
| OpenCode | `opencode mcp add hoverify -- npx -y hoverify-mcp` |
|
|
51
|
+
| Qwen Code | `qwen mcp add hoverify npx -y hoverify-mcp` |
|
|
52
|
+
| VS Code | `code --add-mcp '{"name":"hoverify","type":"stdio","command":"npx","args":["-y","hoverify-mcp"]}'` |
|
|
53
|
+
|
|
54
|
+
Gemini CLI starts MCP servers only in folders you've trusted, so accept its trust prompt in your project.
|
|
55
|
+
|
|
56
|
+
Agents that take the config above in a file or a settings screen:
|
|
57
|
+
|
|
58
|
+
| Agent | Where it goes |
|
|
59
|
+
|---|---|
|
|
60
|
+
| Claude Desktop | Settings > Developer > Edit Config, then restart the app |
|
|
61
|
+
| Antigravity | `~/.gemini/config/mcp_config.json`, or `.agents/mcp_config.json` in a project |
|
|
62
|
+
| Cline in VS Code | MCP Servers > Configure > Configure MCP Servers |
|
|
63
|
+
| Cursor | `~/.cursor/mcp.json`, or `.cursor/mcp.json` in a project |
|
|
64
|
+
| Devin Desktop (formerly Windsurf) | Its MCP settings, or `devin mcp add` as above |
|
|
65
|
+
| JetBrains AI Assistant | Settings > Tools > AI Assistant > Model Context Protocol (MCP) > Add |
|
|
66
|
+
| Junie | `~/.junie/mcp/mcp.json`, or `.junie/mcp/mcp.json` in a project |
|
|
67
|
+
| Kiro | `~/.kiro/settings/mcp.json`, or `.kiro/settings/mcp.json` in a project |
|
|
68
|
+
| Warp | Settings > Agents > MCP servers > Add, or `~/.warp/.mcp.json` |
|
|
69
|
+
|
|
70
|
+
Agents with their own format:
|
|
71
|
+
|
|
72
|
+
- **OpenCode**, to share it with a project in `opencode.json` (the add command above writes your global config). Kilo Code takes the same `mcp` block in `kilo.jsonc`.
|
|
73
|
+
|
|
74
|
+
```json
|
|
75
|
+
{
|
|
76
|
+
"$schema": "https://opencode.ai/config.json",
|
|
77
|
+
"mcp": {
|
|
78
|
+
"hoverify": {
|
|
79
|
+
"type": "local",
|
|
80
|
+
"command": ["npx", "-y", "hoverify-mcp"],
|
|
81
|
+
"enabled": true
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
- **VS Code**, to share it with a project in `.vscode/mcp.json`:
|
|
88
|
+
|
|
89
|
+
```json
|
|
90
|
+
{
|
|
91
|
+
"servers": {
|
|
92
|
+
"hoverify": {
|
|
93
|
+
"type": "stdio",
|
|
94
|
+
"command": "npx",
|
|
95
|
+
"args": ["-y", "hoverify-mcp"]
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
- **Zed**, in its settings file:
|
|
102
|
+
|
|
103
|
+
```json
|
|
104
|
+
{
|
|
105
|
+
"context_servers": {
|
|
106
|
+
"hoverify": {
|
|
107
|
+
"command": "npx",
|
|
108
|
+
"args": ["-y", "hoverify-mcp"]
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
- **Muse Code**, in `~/.config/muse/settings.json`, which must keep `"schema_version": 1`:
|
|
115
|
+
|
|
116
|
+
```json
|
|
117
|
+
{
|
|
118
|
+
"schema_version": 1,
|
|
119
|
+
"mcp_servers": {
|
|
120
|
+
"hoverify": {
|
|
121
|
+
"transport": "stdio",
|
|
122
|
+
"command": "npx",
|
|
123
|
+
"args": ["-y", "hoverify-mcp"]
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
- **Goose**, through `goose configure` or in `~/.config/goose/config.yaml`:
|
|
130
|
+
|
|
131
|
+
```yaml
|
|
132
|
+
extensions:
|
|
133
|
+
hoverify:
|
|
134
|
+
name: hoverify
|
|
135
|
+
type: stdio
|
|
136
|
+
cmd: npx
|
|
137
|
+
args: ["-y", "hoverify-mcp"]
|
|
138
|
+
enabled: true
|
|
139
|
+
timeout: 300
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
The environment variables below (`HOVERIFY_MCP_PORT`, `HOVERIFY_HOME`, `HOVERIFY_BROWSER`) go in the server's `env` block: `environment` in OpenCode and Kilo Code, `envs` in Goose. Add commands take them as `--env NAME=value`, or `-e NAME=value` in Gemini CLI, Qwen Code and Grok Build, placed before the server's command:
|
|
42
143
|
|
|
43
|
-
|
|
144
|
+
```sh
|
|
145
|
+
codex mcp add hoverify --env HOVERIFY_MCP_PORT=48000 -- npx -y hoverify-mcp
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
Cline CLI and Devin CLI have no env flag, so add them to the config file; Cline keeps them inside the server's `transport` block. Codex and Copilot CLI don't pass your shell's variables on to the server, so set them in the config rather than in your shell.
|
|
149
|
+
|
|
150
|
+
### Teach your agent the workflow
|
|
151
|
+
|
|
152
|
+
[`skills/hoverify`](skills/hoverify) is an [Agent Skill](https://agentskills.io) that teaches the agent the audit-and-fix loop and how to design screenshots.
|
|
153
|
+
|
|
154
|
+
In Claude Code, the plugin installs the server and the skill together:
|
|
155
|
+
|
|
156
|
+
```sh
|
|
157
|
+
claude plugin marketplace add UnveelWorks/hoverify-mcp
|
|
158
|
+
claude plugin install hoverify@hoverify
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
In other agents, or in Claude Code without the plugin, copy the folder into the agent's skills folder:
|
|
162
|
+
|
|
163
|
+
| Folder | Read by |
|
|
164
|
+
|---|---|
|
|
165
|
+
| `~/.claude/skills/` | Claude Code |
|
|
166
|
+
| `~/.agents/skills/` | Codex, Cursor, VS Code, GitHub Copilot CLI, Gemini CLI, OpenCode, Amp, Zed, Warp, Junie, Factory Droid, Kilo Code, Devin, Grok Build, Muse Code, Goose |
|
|
167
|
+
| `~/.cline/skills/` | Cline |
|
|
168
|
+
| `~/.kiro/skills/` | Kiro |
|
|
169
|
+
| `~/.qwen/skills/` | Qwen Code |
|
|
170
|
+
|
|
171
|
+
```sh
|
|
172
|
+
git clone --depth 1 https://github.com/UnveelWorks/hoverify-mcp.git /tmp/hoverify-mcp
|
|
173
|
+
mkdir -p ~/.agents/skills && cp -R /tmp/hoverify-mcp/skills/hoverify ~/.agents/skills/
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
To share it with a project instead, put it in the project's `.agents/skills/`.
|
|
44
177
|
|
|
45
178
|
### More than one browser
|
|
46
179
|
|
|
@@ -122,19 +255,16 @@ Screenshots are saved as PNG files in your system's temp folder, under `hoverify
|
|
|
122
255
|
|
|
123
256
|
## Running from source
|
|
124
257
|
|
|
125
|
-
Straight from GitHub, without cloning (it builds on install):
|
|
126
|
-
|
|
127
|
-
```sh
|
|
128
|
-
claude mcp add hoverify -- npx -y github:UnveelWorks/hoverify-mcp
|
|
129
|
-
```
|
|
258
|
+
Straight from GitHub, without cloning (it builds on install): in your agent's config, use the arguments `-y github:UnveelWorks/hoverify-mcp` in place of `-y hoverify-mcp`.
|
|
130
259
|
|
|
131
260
|
Or from a clone:
|
|
132
261
|
|
|
133
262
|
```sh
|
|
134
263
|
npm install
|
|
135
264
|
npm run build
|
|
136
|
-
claude mcp add hoverify -- node /path/to/hoverify-mcp/dist/index.js
|
|
137
265
|
npm test
|
|
138
266
|
```
|
|
139
267
|
|
|
268
|
+
Then point your agent at the command `node` with the argument `/path/to/hoverify-mcp/dist/index.js`.
|
|
269
|
+
|
|
140
270
|
A release bumps the version in `package.json`, `server.json` (twice), `.claude-plugin/plugin.json` and the pinned `npx` version in `.mcp.json`.
|
package/package.json
CHANGED