Merge pull request #134 from pushkarbw/main

Added Remote MCP Setup Instructions with screenshots

Author: gaurav-singh-9227

README.md

@@ -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