Branch pushkar (#118)

* Update README and add new assets

* Update README

* Update README

* Update README

* Update README

* Update README

* Update README

* Update README

* Update README

* Update README

* Update README

* Update README.md

* Update README.md

Author: pushkarbw

README.md

@@ -35,6 +35,10 @@ Manage, execute, debug tests, and even fix code using plain English prompts.
 #### Reduced context switching:
 Stay in flow—keep all project context in one place and trigger actions directly from your IDE or LLM.
 
+## ⚡️ One Click MCP Setup
+
+[![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)
+
 ## 💡 Usage Examples
 
 ### 📱 Manual App Testing
@@ -138,8 +142,13 @@ Generate test cases from PRDs, convert manual tests to low-code automation, and
 
 ## 🛠️ Installation
 
+### **One Click MCP Setup**
+
 [![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)
 
+
+### **Alternate ways to Setup MCP server**
+
 1. **Create a BrowserStack Account**
 
    - Sign up for [BrowserStack](https://www.browserstack.com/users/sign_up) if you don't have an account already.
@@ -150,9 +159,21 @@ Generate test cases from PRDs, convert manual tests to low-code automation, and
    - 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).
 
 2. Ensure you are using Node version >= `18.0`. Check your node version using `node --version`. Recommended version: `v22.15.0` (LTS)
+
 3. **Install the MCP Server**
 
    - 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
+      
+      - Add the Configuration: Open the mcp.json file and then add the  following JSON content. 
+      
+      - Replace the username and <access_key> with your BrowserStack   credentials.
 
    ```json
    {
@@ -172,6 +193,30 @@ Generate test cases from PRDs, convert manual tests to low-code automation, and
    - In VSCode, make sure to click on `Start` button in the MCP Server to start the server.
      ![Start MCP Server](assets/vscode_install.png)
 
+   
+   #### ** Alternate way to setup MCP on VSCode Copilot
+
+   1.Click on the gear icon to Select Tools
+    <div align="center">
+      <img src="assets/select_tools.png" alt="Select Tools" height="100"> 
+    </div>
+   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="100"> 
+    </div>
+   3. Select NPM package option (Install fron an NPM package) - 3rd in the list
+    <div align="center">
+      <img src="assets/select_npm_package.png" alt="Select NPM Package" height="100"> 
+    </div>
+   4. Enter NPM Package Name (@browserstack/mcp-server)
+    <div align="center">
+      <img src="assets/enter_npm_package.png" alt="Enter NPM Package" height="100"> 
+    </div>
+   5. Enter browserstack user name and access key
+   
+   
+   
+   
    * For Cursor: `.cursor/mcp.json`:
 
    ```json
@@ -233,6 +278,186 @@ To install BrowserStack Test Platform Server for Claude Desktop automatically vi
 npx -y @smithery/cli install @browserstack/mcp-server --client claude
 ```
 
+
+### 💡 List of BrowserStack MCP Tools
+
+As of now we support 20 tools.
+
+
+---
+
+## 🧾 Test Management
+
+ 1. `createProjectOrFolder` — Create a Test Management project and/or folders to organize test cases. Returns with Folder ID, Project ID and Test Management Link to access the TM Project Dashboard.
+  **Prompt example**
+
+  ```text
+  Create a new Test Management project named 'Shopping App' with two folders - Login and Checkout
+  ```
+
+
+ 2. `createTestCase` — Add a manual test case under a specific project/folder (uses project identifier like PR-xxxxx and a folder ID).
+  **Prompt example**
+
+  ```text
+  Add a test case named 'Invalid Login Scenario' to the Login folder in the 'Shopping App' project with PR-53617, Folder ID: 117869
+  ```
+
+ 3. `listTestCases` — List test cases for a project (supports filters like priority, status, tags).
+  **Prompt example**
+
+  ```text
+  List all high-priority test cases in the 'Shopping App' project with project_identifier: PR-59457
+  ```
+
+ 4. `createTestRun` — Create a test run (suite) for selected test cases in a project.
+  **Prompt example**
+
+  ```text
+  Create a test run for the Login folder in the 'Shopping App' project and name it 'Release v1.0 Login Flow'
+  ```
+
+ 5. `listTestRuns` — List test runs for a project (filter by dates, assignee, state).
+  **Prompt example**
+
+  ```text
+  List all test runs from the 'Shopping App' project that were executed last week and are currently marked in-progress
+  ```
+
+ 6. `updateTestRun` — Partially update a test run (status, tags, notes, associated test cases).
+  **Prompt example**
+
+  ```text
+  Update test run ID 1043 in the 'Shopping App' project and mark it as complete with the note 'Regression cycle done'
+  ```
+
+ 7. `addTestResult` — Add a manual execution result (passed/failed/blocked/skipped) for a test case within a run.
+  **Prompt example**
+
+  ```text
+  Mark the test case 'Invalid Login Scenario' as passed in test run ID 1043 of the 'Shopping App' project
+  ```
+
+ 8. `createTestCasesFromFile` — Bulk-create test cases from an uploaded file (e.g., PDF).
+  **Prompt example**
+
+  ```text
+  Upload test cases from '/Users/xyz/testcases.pdf' to the 'Shopping App' project in Test Management
+  ```
+
+---
+
+## ⚙️ BrowserStack SDK Setup / Automate Test
+
+ 9. `setupBrowserStackAutomateTests` — Integrate BrowserStack SDK and run web tests on BrowserStack (optionally enable Percy).
+  **Prompt example**
+
+  ```text
+  Run my Selenium-JUnit5 tests written in Java on Chrome and Firefox. Enable Percy for visual testing.
+  ```
+
+ 10. `fetchAutomationScreenshots` — Fetch screenshots captured during a given Automate/App Automate session.
+  **Prompt example**
+
+  ```text
+  Get screenshots from Automate session ID abc123xyz for my desktop test run
+  ```
+
+---
+
+## 🔍 Observability
+
+ 11. `getFailureLogs` — Retrieve error logs for Automate/App Automate sessions (optionally by Build ID for App Automate).
+  **Prompt example**
+
+  ```text
+  Get the error logs from the session ID: 21a864032a7459f1e7634222249b316759d6827f, Build ID: dt7ung4wmjittzff8kksrjadjax9gzvbscoyf9qn of App Automate test session
+  ```
+
+---
+
+## 📱 App Live
+
+ 12. `runAppLiveSession` — Start a manual app testing session on a real device in the cloud.
+  **Prompt example**
+
+  ```text
+  Open my app on iPhone 15 Pro Max with iOS 17. App path is /Users/xyz/app.ipa
+  ```
+
+---
+
+## 💻 Live
+
+ 13. `runBrowserLiveSession` — Start a Live session for website testing on desktop or mobile browsers.
+  **Prompt example**
+
+  ```text
+  Open www.google.com on the latest version of Microsoft Edge on Windows 11
+  ```
+
+---
+
+## 📲 App Automate
+
+ 14. `takeAppScreenshot` — Launch the app on a specified device and captures a quick verification screenshot. This tool is just to verify whether your app has been launched.
+  **Prompt example**
+
+  ```text
+  Take a screenshot of my app on Google Pixel 6 with Android 14 while testing on App Automate. App file path: /Users/xyz/app-debug.apk
+  ```
+
+ 15. `runAppTestsOnBrowserStack` — Run automated mobile tests (Espresso/XCUITest, etc.) on real devices.
+  **Prompt example**
+
+  ```text
+  Run Espresso tests from /tests/checkout.zip on Galaxy S21 and Pixel 6 with Android 14. App path is /apps/beta-release.apk under project 'Checkout Flow'
+  ```
+
+---
+
+## ♿ Accessibility
+
+ 16. `accessibilityExpert` — Ask A11y Expert (WCAG 2.0/2.1/2.2, mobile/web usability, best practices).
+  **Prompt example**
+
+  ```text
+  What WCAG guidelines apply to form field error messages on mobile web?
+  ```
+
+ 17. `startAccessibilityScan` — Start a web accessibility scan and return the result link.
+  **Prompt example**
+
+  ```text
+  Run accessibility scan for "www.example.com"
+  ```
+
+---
+
+## 🤖 BrowserStack AI Agents
+
+ 18. `fetchSelfHealedSelectors` — Retrieve AI self-healed selectors to fix flaky tests due to DOM changes.
+  **Prompt example**
+
+  ```text
+  Fetch and fix flaky test selectors in Automate session ID session_9482 using MCP
+  ```
+
+ 19. `createLCASteps` — Generate Low Code Automation steps from a manual test case in Test Management.
+  **Prompt example**
+
+  ```text
+  Convert the manual test case 'Add to Cart' in the 'Shopping App' project into LCA steps
+  ```
+
+ 20. `uploadProductRequirementFile` — Upload a PRD/screenshot/PDF and get a file mapping ID (used with `createTestCasesFromFile`).
+  **Prompt example**
+
+  ```text
+  Upload PRD from /Users/xyz/Desktop/login-flow.pdf and use BrowserStack AI to generate test cases
+  ```
+
+
 ## 🤝 Recommended MCP Clients
 
 - We recommend using **Github Copilot or Cursor** for automated testing + debugging use cases.