Visual Test Integration Agent

Automate Percy setup with a GitHub Copilot-like agent powered by BrowserStack MCP.

The Visual Test Integration Agent streamlines the integration of Percy with your web projects by automating setup steps using AI-powered workflows. To get started with the agent, you follow steps such as connecting your IDE, configuring BrowserStack MCP, and initiating Percy integration. Once set up, the agent works within your IDE to streamline the integration process, making it faster and more efficient.

Get started in just 5 minutes with this feature!

Prerequisites

• Install an AI-powered IDE (e.g. Cursor) or a standard IDE with a compatible AI extension (e.g. VS Code with GitHub Copilot/Cline).
• Install Node.js v18+.
• Remove any existing Percy or BrowserStack SDKs.

Integration steps

Follow these steps to quickly set up Percy integration using the Visual Test Integration Agent.

STEP 1: Connect to BrowserStack MCP

You can set up BrowserStack MCP using either the VS Code/Cursor method or the standard setup for Other IDEs.

VS Code/Cursor

1. Download and install the BrowserStack MCP server in VS Code (Requires VS Code to be installed) / Cursor (Requires Cursor to be installed).

2. Click Start in your IDE to run BrowserStack MCP.
3. Enter your BrowserStack username and access key to authenticate.

Other IDEs

1. Install BrowserStack MCP in your IDE
   • In project root, open/create a .settings/mcp.json file, and paste the provided JSON code.

   {
     "servers": {
       "browserstack": {
         "command": "npx",
         "args": ["-y", "@browserstack/mcp-server@latest"],
         "env": {
           "BROWSERSTACK_USERNAME": "<username>",
           "BROWSERSTACK_ACCESS_KEY": "<access_key>"
         }
       }
     }
   }
   

2. Click Start in your IDE to run BrowserStack MCP.
3. Enter your BrowserStack username and access key to authenticate.

STEP 2: Start AI-powered integration

Open GitHub Copilot in agent mode in your IDE.

1. Copy the AI prompt provided below.
2. Paste it into the Copilot agent chat.
3. Update the prompt with your actual project name and details as needed.
4. Follow the agent’s instructions to complete Percy setup.

AI prompt

Setup Percy with a new project named '<your-project-name>'

You are now ready to leverage the Visual Test Integration Agent for fast, reliable Percy setup and seamless visual testing in your projects.

Related topic

• Project types