AI coding agents are changing how software gets built. Claude Code generates features, Cursor autocompletes complex logic, and Codex refactors entire modules. But there is a gap in the workflow: these agents write code, but they cannot verify that the code actually works in a browser.
Model Context Protocol (MCP) closes that gap. It gives AI agents the ability to interact with external tools — including browsers, test runners, and QA platforms — through a standardized interface. When an AI agent has access to an MCP server for testing, it can open a browser, verify UI behavior, and generate E2E tests as part of its development workflow.
This guide explains what MCP is, how Shiplight Plugin works, and how to connect it to the AI coding agents your team already uses.
What Is MCP?
Model Context Protocol is an open standard that lets AI models interact with external tools and data sources. Think of it as a universal adapter between AI agents and the services they need to use.
Without MCP, an AI agent is limited to reading and writing files. It can generate test code, but it cannot run those tests, inspect their results, or verify that the application behaves correctly. MCP extends the agent's capabilities by providing structured access to tools that the agent can invoke during its workflow.
An MCP server exposes a set of tools — functions that the AI agent can call. Each tool has a defined interface: what parameters it accepts and what it returns. The AI agent discovers available tools, decides when to use them, and interprets the results.
For testing, this means an AI agent can go beyond "generate a test file" to "generate a test, run it against the live application, check the results, and fix any issues."
How Shiplight Plugin Works
Shiplight Plugin is purpose-built for the AI-native QA loop. Your agent uses Shiplight Plugin to verify every code change in a real browser. Skills encode the testing expertise — guiding your agent to generate thorough, self-healing regression tests and run automated reviews across security, performance, accessibility, and more.
The plugin runs locally alongside your development environment. When an AI agent connects to it, the agent gains access to several capabilities.
Browser automation. The agent can open a Playwright-powered browser, navigate to URLs, click elements, fill forms, and take screenshots. This is full browser interaction that mirrors what a real user does.
Verification with built-in agent skills. Skills encode QA expertise that guides the agent through verification workflows — not just "click and check" but structured reviews covering UI correctness, security headers, performance metrics, accessibility compliance, and more.
Test generation. The agent can create YAML-based E2E test files by observing the application and generating step-by-step test flows. These tests are self-healing and immediately runnable.
Test execution. The agent can run existing tests and read the results. If a test fails, the agent sees which step failed, what was expected, and what was found — and can use that to fix the underlying code.
Test debugging. When tests fail, the agent can inspect screenshots, trace logs, and error messages to diagnose issues. This creates a closed loop: code, test, fix, repeat — all within the agent's context.
Connecting to Claude Code
Step 1: Install the Shiplight MCP package.
npm install -g @shiplight/mcp-server
Step 2: Add the MCP server to your Claude Code configuration.
Create or edit .mcp.json in your project root:
{
"mcpServers": {
"shiplight": {
"command": "shiplight-mcp",
"args": ["--port", "3100"],
"env": {
"SHIPLIGHT_API_KEY": "your-api-key"
}
}
}
}
Step 3: Start Claude Code in your project directory.
claude
Claude Code automatically discovers the MCP server configuration and connects to it. Once connected, prompt it with instructions like:
- "Open the app at localhost:3000 and verify the login page renders correctly"
- "Generate an E2E test for the checkout flow"
- "Run the E2E tests and fix any failures"
Connecting to Cursor and Codex
Cursor and OpenAI's Codex CLI both support MCP servers using the same configuration format. In Cursor, open Settings and navigate to the MCP section. In Codex, add the server to your project configuration file:
{
"name": "shiplight",
"command": "shiplight-mcp",
"args": ["--port", "3100"],
"env": {
"SHIPLIGHT_API_KEY": "your-api-key"
}
}
Once connected, both agents can access Shiplight's testing tools. Ask them to verify changes in the browser, generate tests for new features, or run your existing test suite.
What the Agent Can Do
Once connected, the AI agent has access to practical QA capabilities that fit naturally into the development workflow.
During feature development: The agent writes code for a new feature, then immediately opens a browser to verify the feature works. If something is wrong, it sees the problem in the browser and fixes the code — without you switching context.
During code review: The agent can run E2E tests against a PR branch and report results, turning test execution into part of the review process.
During test creation: Instead of manually writing tests after the fact, the agent generates YAML-based E2E tests while building the feature. The tests are committed alongside the code, ready for CI/CD.
During debugging: When a test fails in CI, the agent can reproduce the failure locally, inspect the browser state, and propose a fix.
The AI-Native QA Loop
MCP-connected testing creates the AI-native QA loop: the agent writes code, tests it, and iterates — without human intervention for routine verification. This does not replace QA engineers. It handles repetitive checks so QA teams can focus on test strategy, edge cases, and exploratory testing.
The fastest way to see this in action: the Shiplight Quick Start guide walks through setup and demonstrates test generation in a live environment. Adding the MCP server is a 10-minute setup that immediately expands what your agent can do — browser automation and local testing are free, no account required.
References: Playwright Documentation · Shiplight Plugins · MCP Specification
Top comments (0)