@browserstack/mcp-server 2.2.5-beta.3 → 2.2.6-beta.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 +32 -194
- package/dist/server-factory.js +1 -6
- package/dist/tools/accessibility.js +62 -576
- package/dist/tools/accessiblity-utils/accessibility-rag.d.ts +12 -0
- package/dist/tools/accessiblity-utils/accessibility-rag.js +59 -0
- package/dist/tools/accessiblity-utils/report-fetcher.d.ts +7 -116
- package/dist/tools/accessiblity-utils/report-fetcher.js +29 -268
- package/dist/tools/accessiblity-utils/report-parser.d.ts +1 -41
- package/dist/tools/accessiblity-utils/report-parser.js +43 -142
- package/dist/tools/appautomate-utils/appium-sdk/config-generator.d.ts +0 -2
- package/dist/tools/appautomate-utils/appium-sdk/config-generator.js +5 -15
- package/dist/tools/appautomate-utils/appium-sdk/constants.d.ts +1 -2
- package/dist/tools/appautomate-utils/appium-sdk/constants.js +1 -6
- package/dist/tools/appautomate-utils/appium-sdk/handler.js +1 -11
- package/dist/tools/appautomate-utils/appium-sdk/instructions.d.ts +1 -3
- package/dist/tools/appautomate-utils/appium-sdk/instructions.js +2 -2
- package/dist/tools/appautomate-utils/appium-sdk/languages/nodejs.d.ts +1 -3
- package/dist/tools/appautomate-utils/appium-sdk/languages/nodejs.js +6 -19
- package/dist/tools/appautomate-utils/native-execution/appautomate.d.ts +2 -7
- package/dist/tools/appautomate-utils/native-execution/appautomate.js +12 -15
- package/dist/tools/appautomate-utils/native-execution/constants.d.ts +1 -2
- package/dist/tools/appautomate-utils/native-execution/constants.js +1 -6
- package/dist/tools/appautomate.js +16 -29
- package/dist/tools/testmanagement-utils/create-testrun.d.ts +1 -1
- package/dist/tools/testmanagement-utils/update-testrun.d.ts +1 -1
- package/dist/tools/tool-handoff.d.ts +2 -3
- package/dist/tools/tool-handoff.js +2 -3
- package/package.json +1 -1
- package/dist/lib/accessibility-routing.d.ts +0 -5
- package/dist/lib/accessibility-routing.js +0 -5
- package/dist/tools/accessiblity-utils/app-report-fetcher.d.ts +0 -341
- package/dist/tools/accessiblity-utils/app-report-fetcher.js +0 -731
- package/dist/tools/accessiblity-utils/paginate.d.ts +0 -21
- package/dist/tools/accessiblity-utils/paginate.js +0 -44
- package/dist/tools/appautomate-utils/appium-sdk/languages/accessibility.d.ts +0 -2
- package/dist/tools/appautomate-utils/appium-sdk/languages/accessibility.js +0 -32
package/README.md
CHANGED
|
@@ -37,21 +37,48 @@ Stay in flow—keep all project context in one place and trigger actions directl
|
|
|
37
37
|
|
|
38
38
|
## ⚡️ One Click MCP Setup
|
|
39
39
|
|
|
40
|
-
Click on the buttons below to install MCP in your respective IDE:
|
|
40
|
+
Click on the buttons below to install MCP in your respective IDE or assistant:
|
|
41
41
|
|
|
42
|
-
<a href="http://mcp.browserstack.com/one-click-setup?client=vscode"><img src="assets/one-click-vs-code.png" alt="Install in VS Code" width="160" height="80"></a> <a href="http://mcp.browserstack.com/one-click-setup?client=cursor"><img src="assets/one-click-cursor.png" alt="Install in Cursor" width="150" height="70"></a>
|
|
42
|
+
<a href="http://mcp.browserstack.com/one-click-setup?client=vscode"><img src="assets/one-click-vs-code.png" alt="Install in VS Code" width="160" height="80"></a> <a href="http://mcp.browserstack.com/one-click-setup?client=cursor"><img src="assets/one-click-cursor.png" alt="Install in Cursor" width="150" height="70"></a> <a href="https://chatgpt.com/plugins/plugin_asdk_app_6a8bf7703f1881918317add0244840a8"><img src="assets/one-click-chatgpt.png" alt="Install in ChatGPT" width="160" height="80"></a> <a href="#-agent-assisted-setup"><img src="assets/one-click-claude.png" alt="Add to Claude" width="150" height="70"></a>
|
|
43
43
|
|
|
44
44
|
> **Note:** The hosted Remote MCP server (`mcp.browserstack.com`) is now fully stateless over Streamable HTTP — any Streamable-HTTP client (Claude, Cursor, VS Code, ChatGPT) connects with no configuration change.
|
|
45
45
|
|
|
46
|
-
####
|
|
46
|
+
#### Prerequisites
|
|
47
|
+
- A BrowserStack account. [Sign up](https://www.browserstack.com/users/sign_up) if you don't have one; open-source projects can get a [free plan](https://www.browserstack.com/open-source).
|
|
48
|
+
- Your `username` and `access_key` from [Account Settings](https://www.browserstack.com/accounts/profile/details).
|
|
49
|
+
|
|
50
|
+
For manual setup in any MCP client, see [Install the MCP server locally](https://www.browserstack.com/docs/browserstack-mcp-server/get-started/local-mcp) or [Set up the remote MCP server](https://www.browserstack.com/docs/browserstack-mcp-server/get-started/remote-mcp-server).
|
|
51
|
+
|
|
52
|
+
#### Note : Ensure you are using Node version >= `22`
|
|
47
53
|
- Check your node version using `node --version`. Recommended version: `v22.15.0` (LTS)
|
|
48
54
|
- To Upgrade Node :
|
|
49
55
|
- 1. On macOS `(Homebrew) - brew update && brew upgrade node or if using (nvm) - nvm install 22.15.0 && nvm use 22.15.0 && nvm alias default 22.15.0`
|
|
50
56
|
- 2. On Windows `(nvm-windows) : nvm install 22.15.0 && nvm use 22.15.0`
|
|
51
57
|
- 👉 <a href="https://nodejs.org/en/download" target="_blank">Or directly download the Node.js LTS Installer</a>
|
|
52
58
|
|
|
53
|
-
|
|
54
|
-
|
|
59
|
+
## 🪄 Agent-assisted setup
|
|
60
|
+
|
|
61
|
+
Most AI agents can add the BrowserStack MCP server, connect to it, and walk you through sign-in without manual config. Paste this prompt into your agent:
|
|
62
|
+
|
|
63
|
+
```text
|
|
64
|
+
Add the BrowserStack MCP server to this agent, following the setup guide at
|
|
65
|
+
https://www.browserstack.com/docs/browserstack-mcp-server/get-started/remote-mcp-server
|
|
66
|
+
and using the server URL https://mcp.browserstack.com/mcp. Once it is added, start the
|
|
67
|
+
BrowserStack sign-in flow so I can log in.
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
To add it yourself, use your client's command or menu:
|
|
71
|
+
|
|
72
|
+
| Client | Command or configuration |
|
|
73
|
+
|---|---|
|
|
74
|
+
| Claude Code | `claude mcp add --scope user --transport http browserstack https://mcp.browserstack.com/mcp`, then run `/mcp` in a session and sign in |
|
|
75
|
+
| Claude Desktop / claude.ai | Settings → Connectors → Add custom connector, with the URL `https://mcp.browserstack.com/mcp` |
|
|
76
|
+
| ChatGPT | Install the [BrowserStack plugin](https://chatgpt.com/plugins/plugin_asdk_app_6a8bf7703f1881918317add0244840a8) |
|
|
77
|
+
| Codex | `codex mcp add browserstack --url https://mcp.browserstack.com/mcp`, then `codex mcp login browserstack` to sign in |
|
|
78
|
+
| VS Code / GitHub Copilot | `code --add-mcp '{"name":"browserstack","type":"http","url":"https://mcp.browserstack.com/mcp"}'`, then start the server from the MCP view and sign in |
|
|
79
|
+
| Cursor | Add `"browserstack": { "url": "https://mcp.browserstack.com/mcp" }` under `mcpServers` in `~/.cursor/mcp.json`, then sign in from Cursor Settings → MCP |
|
|
80
|
+
| Any other MCP client | Point it at `https://mcp.browserstack.com/mcp` |
|
|
81
|
+
|
|
55
82
|
## 💡 Usage Examples
|
|
56
83
|
|
|
57
84
|
### 📱 Manual App Testing
|
|
@@ -179,136 +206,6 @@ Generate test cases from PRDs, convert manual tests to low-code automation, and
|
|
|
179
206
|
```
|
|
180
207
|
|
|
181
208
|
|
|
182
|
-
## 🛠️ Installation
|
|
183
|
-
|
|
184
|
-
### 📋 Prerequisites for MCP Setup
|
|
185
|
-
|
|
186
|
-
- Node.js version >= `20.9` (see the note under [One Click MCP Setup](#️-one-click-mcp-setup) above).
|
|
187
|
-
- A BrowserStack account (steps below).
|
|
188
|
-
|
|
189
|
-
To install with one click, use the **Install in VS Code** / **Install in Cursor** buttons under [One Click MCP Setup](#️-one-click-mcp-setup) at the top of this page.
|
|
190
|
-
|
|
191
|
-
### **Alternate ways to Setup MCP server**
|
|
192
|
-
|
|
193
|
-
1. **Create a BrowserStack Account**
|
|
194
|
-
|
|
195
|
-
- Sign up for [BrowserStack](https://www.browserstack.com/users/sign_up) if you don't have an account already.
|
|
196
|
-
|
|
197
|
-
- ℹ️ If you have an open-source project, we'll be able to provide you with a [free plan](https://www.browserstack.com/open-source).
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
- Once you have an account (and purchased appropriate plan), note down your `username` and `access_key` from [Account Settings](https://www.browserstack.com/accounts/profile/details).
|
|
201
|
-
|
|
202
|
-
2. **Install the MCP Server**
|
|
203
|
-
|
|
204
|
-
- VSCode (Copilot - Agent Mode): `.vscode/mcp.json`:
|
|
205
|
-
|
|
206
|
-
- Locate or Create the Configuration File:
|
|
207
|
-
In the root directory of your project, look for a folder named .vscode. This folder is usually hidden so you will need to find it as mentioned in the expand.
|
|
208
|
-
|
|
209
|
-
- If this folder doesn't exist, create it.
|
|
210
|
-
|
|
211
|
-
- Inside the .vscode folder, create a new file named mcp.json
|
|
212
|
-
|
|
213
|
-
- Add the Configuration: Open the mcp.json file and then add the following JSON content.
|
|
214
|
-
|
|
215
|
-
- Replace the username and <access_key> with your BrowserStack credentials.
|
|
216
|
-
|
|
217
|
-
```json
|
|
218
|
-
{
|
|
219
|
-
"servers": {
|
|
220
|
-
"browserstack": {
|
|
221
|
-
"command": "npx",
|
|
222
|
-
"args": ["-y", "@browserstack/mcp-server@latest"],
|
|
223
|
-
"env": {
|
|
224
|
-
"BROWSERSTACK_USERNAME": "<username>",
|
|
225
|
-
"BROWSERSTACK_ACCESS_KEY": "<access_key>"
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
```
|
|
231
|
-
|
|
232
|
-
- In VSCode, make sure to click on `Start` button in the MCP Server to start the server.
|
|
233
|
-

|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
#### ** Alternate way to setup MCP on VSCode Copilot
|
|
237
|
-
|
|
238
|
-
1.Click on the gear icon to Select Tools
|
|
239
|
-
<div align="center">
|
|
240
|
-
<img src="assets/select_tools.png" alt="Select Tools" height="100">
|
|
241
|
-
</div>
|
|
242
|
-
2. A tool menu would appear at the top-centre, scroll down on the menu at the top and then Click on Add MCP Server
|
|
243
|
-
<div align="center">
|
|
244
|
-
<img src="assets/add_mcp_server.png" alt="Add MCP Server" height="100">
|
|
245
|
-
</div>
|
|
246
|
-
3. Select NPM package option (Install fron an NPM package) - 3rd in the list
|
|
247
|
-
<div align="center">
|
|
248
|
-
<img src="assets/select_npm_package.png" alt="Select NPM Package" height="100">
|
|
249
|
-
</div>
|
|
250
|
-
4. Enter NPM Package Name (@browserstack/mcp-server)
|
|
251
|
-
<div align="center">
|
|
252
|
-
<img src="assets/enter_npm_package.png" alt="Enter NPM Package" height="100">
|
|
253
|
-
</div>
|
|
254
|
-
5. Enter browserstack user name and access key
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
* For Cursor: `.cursor/mcp.json`:
|
|
260
|
-
|
|
261
|
-
```json
|
|
262
|
-
{
|
|
263
|
-
"mcpServers": {
|
|
264
|
-
"browserstack": {
|
|
265
|
-
"command": "npx",
|
|
266
|
-
"args": ["-y", "@browserstack/mcp-server@latest"],
|
|
267
|
-
"env": {
|
|
268
|
-
"BROWSERSTACK_USERNAME": "<username>",
|
|
269
|
-
"BROWSERSTACK_ACCESS_KEY": "<access_key>"
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
```
|
|
275
|
-
|
|
276
|
-
- For Claude Desktop: `~/claude_desktop_config.json`:
|
|
277
|
-
|
|
278
|
-
```json
|
|
279
|
-
{
|
|
280
|
-
"mcpServers": {
|
|
281
|
-
"browserstack": {
|
|
282
|
-
"command": "npx",
|
|
283
|
-
"args": ["-y", "@browserstack/mcp-server@latest"],
|
|
284
|
-
"env": {
|
|
285
|
-
"BROWSERSTACK_USERNAME": "<username>",
|
|
286
|
-
"BROWSERSTACK_ACCESS_KEY": "<access_key>"
|
|
287
|
-
}
|
|
288
|
-
}
|
|
289
|
-
}
|
|
290
|
-
}
|
|
291
|
-
```
|
|
292
|
-
- For Cline
|
|
293
|
-
|
|
294
|
-
Click the “MCP Servers” icon in the navigation bar
|
|
295
|
-
Select the “Installed” tab. Click the “Configure MCP Servers” button at the bottom of the pane.
|
|
296
|
-
|
|
297
|
-
```json
|
|
298
|
-
{
|
|
299
|
-
"mcpServers": {
|
|
300
|
-
"browserstack": {
|
|
301
|
-
"command": "npx",
|
|
302
|
-
"args": ["-y", "@browserstack/mcp-server@latest"],
|
|
303
|
-
"env": {
|
|
304
|
-
"BROWSERSTACK_USERNAME": "<username>",
|
|
305
|
-
"BROWSERSTACK_ACCESS_KEY": "<access_key>"
|
|
306
|
-
}
|
|
307
|
-
}
|
|
308
|
-
}
|
|
309
|
-
}
|
|
310
|
-
```
|
|
311
|
-
|
|
312
209
|
## 🧭 Core Tools
|
|
313
210
|
|
|
314
211
|
Five core tools let your AI assistant find and run any BrowserStack workflow. Your assistant loads every tool an MCP server exposes at the start of each session, so one tool per workflow would fill your context window and slow down the whole session. Instead, your assistant uses the core tools to search a catalog of BrowserStack tools in plain language and run the one it needs.
|
|
@@ -342,65 +239,6 @@ Remote MCP comes with all the functionalities of an MCP server without the hassl
|
|
|
342
239
|
- ❌ No Local Testing support (cannot test apps behind VPNs, firewalls, or localhost). If you have to do Local Testing, you would have to use a BrowserStack Local MCP server.
|
|
343
240
|
- ❌ Latency can be slightly higher, but nothing considerable — you generally won’t notice it in normal use.
|
|
344
241
|
|
|
345
|
-
### Installation Steps:
|
|
346
|
-
|
|
347
|
-
- On VSCode (Copilot - Agent Mode): `.vscode/mcp.json`:
|
|
348
|
-
|
|
349
|
-
- Locate or Create the Configuration File:
|
|
350
|
-
- In the root directory of your project, look for a folder named .vscode. This folder is usually hidden so you will need to find it as mentioned in the expand.
|
|
351
|
-
- If this folder doesn't exist, create it.
|
|
352
|
-
- Inside the .vscode folder, create a new file named mcp.json
|
|
353
|
-
- To setup Remote BrowserStack MCP instead of local BrowserStack MCP you can add the following JSON content :
|
|
354
|
-
<div align="center">
|
|
355
|
-
<img src="assets/remotemcp_json_file.png" alt="Remote MCP JSON file" height="300" width="300">
|
|
356
|
-
</div>
|
|
357
|
-
|
|
358
|
-
### Alternative way to Setup Remote MCP
|
|
359
|
-
|
|
360
|
-
- Step 1.Click on the gear icon to Select Tools
|
|
361
|
-
|
|
362
|
-
<div align="center">
|
|
363
|
-
<img src="assets/select_tools.png" alt="Select Tools" height="300" width="300">
|
|
364
|
-
</div>
|
|
365
|
-
|
|
366
|
-
- Step 2. A tool menu would appear at the top-centre, scroll down on the menu at the top and then Click on Add MCP Server
|
|
367
|
-
|
|
368
|
-
<div align="center">
|
|
369
|
-
<img src="assets/add_mcp_server.png" alt="Add MCP Server" height="300" width="300">
|
|
370
|
-
</div>
|
|
371
|
-
|
|
372
|
-
- Step 3. Click on HTTP option
|
|
373
|
-
<div align="center">
|
|
374
|
-
<img src="assets/http_option.png" alt="HTTP Option" height="300" width="300">
|
|
375
|
-
</div>
|
|
376
|
-
|
|
377
|
-
- Step 4. Paste Remote MCP Server URL : https://mcp.browserstack.com/mcp
|
|
378
|
-
<div align="center">
|
|
379
|
-
<img src="assets/server_url.png" alt="Remote MCP Server URL" height="300" width="300">
|
|
380
|
-
</div>
|
|
381
|
-
|
|
382
|
-
- Step 5. Give server id as : browserstack
|
|
383
|
-
|
|
384
|
-
<div align="center">
|
|
385
|
-
<img src="assets/server_id.png" alt="Remote MCP Server ID" height="300" width="300">
|
|
386
|
-
</div>
|
|
387
|
-
|
|
388
|
-
- Step 6. In VSCode Click on start MCP Server and then click on "Allow"
|
|
389
|
-
|
|
390
|
-
<div align="center">
|
|
391
|
-
<img src="assets/authentication1.png" alt="authentication1" height="300" width="300">
|
|
392
|
-
</div>
|
|
393
|
-
|
|
394
|
-
<div align="center">
|
|
395
|
-
<img src="assets/authentication2.png" alt="authentication2" height="300" width="300">
|
|
396
|
-
</div>
|
|
397
|
-
|
|
398
|
-
<div align="center">
|
|
399
|
-
<img src="assets/signin_success.png" alt="Sign_in_success" height="300" width="300">
|
|
400
|
-
</div>
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
242
|
## ⚠️ Important Notes
|
|
405
243
|
|
|
406
244
|
- The BrowserStack MCP Server is under active development and currently supports a subset of the MCP spec. More features will be added soon.
|
package/dist/server-factory.js
CHANGED
|
@@ -21,7 +21,6 @@ import addCapabilityRegistryTools from "./tools/capability-registry/register.js"
|
|
|
21
21
|
import { instrumentToolLatency } from "./lib/tool-latency.js";
|
|
22
22
|
import { nodeUpgradeNotice } from "./lib/node-version-notice.js";
|
|
23
23
|
import { FEEDBACK_INSTRUCTION } from "./lib/feedback-hint.js";
|
|
24
|
-
import { ACCESSIBILITY_ROUTING_INSTRUCTION } from "./lib/accessibility-routing.js";
|
|
25
24
|
import addFeedbackTools from "./tools/feedback.js";
|
|
26
25
|
/**
|
|
27
26
|
* Wrapper class for BrowserStack MCP Server
|
|
@@ -38,11 +37,7 @@ export class BrowserStackMcpServer {
|
|
|
38
37
|
name: "BrowserStack MCP Server",
|
|
39
38
|
version: packageJson.version,
|
|
40
39
|
}, {
|
|
41
|
-
instructions: [
|
|
42
|
-
nodeUpgradeNotice(),
|
|
43
|
-
FEEDBACK_INSTRUCTION,
|
|
44
|
-
ACCESSIBILITY_ROUTING_INSTRUCTION,
|
|
45
|
-
]
|
|
40
|
+
instructions: [nodeUpgradeNotice(), FEEDBACK_INSTRUCTION]
|
|
46
41
|
.filter(Boolean)
|
|
47
42
|
.join("\n"),
|
|
48
43
|
});
|