Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -456,7 +456,64 @@ As of now we support 20 tools.
```text
Upload PRD from /Users/xyz/Desktop/login-flow.pdf and use BrowserStack AI to generate test cases
```
## Remote MCP Setup

- VSCode (Copilot - Agent Mode): `.vscode/mcp.json`:

- Locate or Create the Configuration File:
- 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.
- If this folder doesn't exist, create it.
- Inside the .vscode folder, create a new file named mcp.json
- To setup Remote BrowserStack MCP instead of local BrowserStack MCP you can add the following JSON content :
<div align="center">
<img src="assets/remotemcp_json_file.png" alt="Remote MCP JSON file" height="300" width="300">
</div>

### Alternative way to Setup Remote MCP

- Step 1.Click on the gear icon to Select Tools

<div align="center">
<img src="assets/select_tools.png" alt="Select Tools" height="300" width="300">
</div>

- 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

<div align="center">
<img src="assets/add_mcp_server.png" alt="Add MCP Server" height="300" width="300">
</div>

- Step 3. Click on HTTP option
<div align="center">
<img src="assets/http_option.png" alt="HTTP Option" height="300" width="300">
</div>

- Step 4. Paste Remote MCP Server URL : https://mcp.browserstack.com/mcp
<div align="center">
<img src="assets/server_url.png" alt="Remote MCP Server URL" height="300" width="300">
</div>

- Step 5. Give server id as : browserstack

<div align="center">
<img src="assets/server_id.png" alt="Remote MCP Server ID" height="300" width="300">
</div>

- Step 6. In VSCode Click on start MCP Server and then click on "Allow"

<div align="center">
<img src="assets/authentication1.png" alt="authentication1" height="300" width="300">
</div>

<div align="center">
<img src="assets/authentication2.png" alt="authentication2" height="300" width="300">
</div>

<div align="center">
<img src="assets/signin_success.png" alt="Sign_in_success" height="300" width="300">
</div>



## 🤝 Recommended MCP Clients

Expand Down
Binary file added assets/authentication1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/authentication2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/http_option.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/remotemcp_json_file.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/server_id.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/server_url.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/signin_success.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.