Quick Start
Add the shiplight MCP server and you’ll be able to ask your coding agent to validate UI changes in a real browser.
For an overview of what’s included (free browser automation vs optional AI/cloud features), see What is Shiplight AI?.
Step 1: Add MCP and Skills
Option A: Install via Plugin Marketplace (Recommended)
Add the marketplace (one-time)
claude plugin marketplace add ShiplightAI/claude-code-pluginInstall the free plugin (browser MCP tools + /verify skill)
claude plugin install mcp-plugin@shiplight-pluginsThe plugin includes MCP tools and a /verify skill for UI verification.
Option B: Add MCP server directly
claude mcp add shiplight -e PWDEBUG=console -- npx -y @shiplightai/mcp@latestAdd the /verify skill
After adding the MCP server, you can also install the Shiplight verify skill to give Claude a /verify command that guides it through a structured UI verification workflow.
Example: "Go to localhost:3000 and verify the new button appears on the homepage."
Step 2: Verify with your agent!
Once the MCP server is running, just describe what you want to check — your agent handles the rest.
Take a screenshot of a live page:
Use the shiplight MCP to go to shiplight.ai and take a screenshot. Tell me what's in the hero section.Click around and navigate:
Use the shiplight MCP to go to shiplight.ai, scroll to the bottom, and click the Documentation link in the footer.
Tell me what sections appear in the sidebar.Verify a UI change you just made:
I just updated the navbar. Use Shiplight to open localhost:3000 and confirm the new links appear correctly.Catch regressions before merging:
Use Shiplight to walk through the checkout flow on localhost:3000 and tell me if anything looks broken.With cloud features
With API_TOKEN configured, your agent can create and run persistent tests:
Create a Shiplight test for our login flow and run it. Let me know if it passes.Configuration
| Variable | Required | Description | Default |
|---|---|---|---|
GOOGLE_API_KEY | For AI-powered actions | Google AI API key | — |
ANTHROPIC_API_KEY | (one of these two) | Anthropic API key | — |
WEB_AGENT_MODEL | No | Override auto-detected model (see table below) | Auto |
API_TOKEN | For cloud features | Shiplight API token for cloud features | — |
PWDEBUG | No | Set to console to enable Playwright semantic locator generation (getByRole, getByTestId) for action entities. Without this, only XPath locators are available. | — |
Note: Browser automation (click, type, scroll, navigate, etc.) works without any API keys. AI-powered actions (verify, ai_extract, ai_wait_until) require an API key — the model is auto-detected from whichever key you provide (GOOGLE_API_KEY → gemini-2.5-pro, ANTHROPIC_API_KEY → claude-haiku-4-5). Set WEB_AGENT_MODEL only if you want to override the default.
| Provider | API Key | Supported Models |
|---|---|---|
GOOGLE_API_KEY | gemini-2.5-pro, gemini-3-pro-preview | |
| Anthropic | ANTHROPIC_API_KEY | claude-haiku-4-5, claude-sonnet-4-6, claude-opus-4-6 |
Next Steps
- Browser Automation - Full reference for browser automation tools and actions
- Test Flows - Learn the YAML test flow format: natural language statements, enriched actions, conditionals, and loops
- Local Testing - Export tests as standalone Playwright files for local or CI execution
- Workflows - End-to-end workflow examples including autonomous test creation with Claude Code custom agents
- Cloud Testing - Create test cases, trigger cloud runs, and analyze results