Skip to content

Commit d9d4d0f

Browse files
committed
Update README and add new assets
1 parent feb6f2b commit d9d4d0f

File tree

5 files changed

+39
-0
lines changed

5 files changed

+39
-0
lines changed

README.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,13 @@ Generate test cases from PRDs, convert manual tests to low-code automation, and
138138
139139
## 🛠️ Installation
140140
141+
### **One Click MCP Setup**
142+
141143
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install_Server-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](http://mcp.browserstack.com/one-click-setup?client=vscode)   [![Install in Cursor](https://img.shields.io/badge/Cursor-Install_Server-24bfa5?style=flat-square&color=000000&logo=visualstudiocode&logoColor=white)](http://mcp.browserstack.com/one-click-setup?client=cursor)
142144
145+
146+
### **Alternate ways to Setup MCP server**
147+
143148
1. **Create a BrowserStack Account**
144149
145150
- Sign up for [BrowserStack](https://www.browserstack.com/users/sign_up) if you don't have an account already.
@@ -150,9 +155,19 @@ Generate test cases from PRDs, convert manual tests to low-code automation, and
150155
- 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).
151156
152157
2. Ensure you are using Node version >= `18.0`. Check your node version using `node --version`. Recommended version: `v22.15.0` (LTS)
158+
153159
3. **Install the MCP Server**
154160
155161
- VSCode (Copilot - Agent Mode): `.vscode/mcp.json`:
162+
163+
1. Locate or Create the Configuration File:
164+
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.
165+
166+
2. If this folder doesn't exist, create it.
167+
168+
3. Inside the .vscode folder, create a new file named mcp.json
169+
170+
4. Add the Configuration: Open the mcp.json file and add the following JSON content. Replace <username> and <access_key> with your BrowserStack credentials.
156171
157172
```json
158173
{
@@ -172,6 +187,30 @@ Generate test cases from PRDs, convert manual tests to low-code automation, and
172187
- In VSCode, make sure to click on `Start` button in the MCP Server to start the server.
173188
![Start MCP Server](assets/vscode_install.png)
174189
190+
191+
#### ** Alternate way to setup MCP on VSCode Copilot
192+
193+
1. Click on the gear icon to Select Tools
194+
<div align="center">
195+
<img src="assets/select_tools.png" alt="Select Tools" height="100">
196+
</div>
197+
2. Click on Add MCP Server
198+
<div align="center">
199+
<img src="assets/add_mcp_server.png" alt="Add MCP Server" height="100">
200+
</div>
201+
3. Select NPM package (Install fron an NPM package)
202+
<div align="center">
203+
<img src="assets/select_npm_package.png" alt="Select NPM Package" height="100">
204+
</div>
205+
4. Enter NPM Package Name (@browserstack/mcp-server)
206+
<div align="center">
207+
<img src="assets/enter_npm_package.png" alt="Enter NPM Package" height="100">
208+
</div>
209+
5. Enter browserstack user name and access key
210+
211+
212+
213+
175214
* For Cursor: `.cursor/mcp.json`:
176215
177216
```json

assets/add_mcp_server.png

8.57 KB
Loading

assets/enter_npm_package.png

14.5 KB
Loading

assets/select_npm_package.png

44.1 KB
Loading

assets/select_tools.png

17.8 KB
Loading

0 commit comments

Comments
 (0)