Using Maina with Playwright MCP

Maina and Playwright MCP (@playwright/mcp, Microsoft, Apache-2.0) work together: Playwright drives the browser, Maina verifies the results.

Setup

Configure both MCP servers

{
  "mcpServers": {
    "maina": {
      "command": "maina",
      "args": ["--mcp"]
    },
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Tell your agent how to use them together

Add to your CLAUDE.md or agent instructions:

## Testing workflow
1. Use Playwright MCP to navigate and interact with the app
2. Use Maina `verify` to run the full verification pipeline
3. Use Maina `reviewCode` to review any changes
4. Capture screenshots with Playwright for visual regression

Example flow

The agent can now:
- Navigate to localhost:3000 via Playwright MCP
- Fill forms, click buttons, verify page content
- Call Maina verify to check code quality
- Call Maina checkSlop on changed files
- Call Maina reviewCode with the diff

How it works

Playwright MCP and Maina MCP are independent servers that share the same host agent context:

Claude Code / Cursor / Windsurf
  ├── Playwright MCP  → browser automation, screenshots, DOM inspection
  └── Maina MCP       → verification, code review, slop detection, wiki

The agent orchestrates both: use Playwright for browser interactions, use Maina for code verification. They don’t talk to each other directly — the agent is the glue.

When to use this

E2E testing: Agent writes code, tests it with Playwright, verifies with Maina
Visual regression: Playwright captures screenshots, Maina verifies the code that generated them
Feature development: Build → test in browser → verify code quality → commit