Visual testing for Storybook components.
## Chromatic MCP Server: Visual Testing and UI Review Platform The **Chromatic MCP Server** integrates Storybook-powered visual testing and UI review into Google Antigravity, enabling automated visual regression detection and streamlined design review workflows through AI-assisted analysis. ### Why Chromatic MCP? - **Visual Regression**: Automatically detect visual changes in UI components with pixel-perfect comparison - **Storybook Integration**: Native integration with Storybook for component-level visual testing - **UI Review**: Streamlined review workflows for designers and developers to approve visual changes - **Interaction Testing**: Test component interactions and states with built-in interaction support - **Turbosnap**: Intelligent test selection that only captures changed components for faster builds ### Key Features #### 1. Visual Testing ```python from anthropic import Anthropic client = Anthropic() response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Run Chromatic build and show components with visual changes requiring review" }] ) ``` #### 2. Build Management ```python # Manage Chromatic builds response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Compare visual changes between main branch and feature branch builds" }] ) ``` #### 3. Review Workflow ```python # Handle reviews response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "List pending visual reviews and approve intentional changes to Button component" }] ) ``` #### 4. Baseline Management ```python # Manage baselines response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Update visual baselines for approved design system changes" }] ) ``` ### Configuration ```json { "mcpServers": { "chromatic": { "command": "npx", "args": ["-y", "@anthropic/mcp-server-chromatic"], "env": { "CHROMATIC_PROJECT_TOKEN": "your-project-token" } } } } ``` ### Use Cases **Component Libraries**: Maintain visual consistency in design systems and component libraries. **Design Handoff**: Enable designers to review and approve UI implementations efficiently. **Regression Prevention**: Catch unintended visual changes before they reach production. **Documentation**: Automatically generate visual documentation from Storybook stories. The Chromatic MCP Server ensures UI quality through comprehensive visual testing, enabling teams to ship with confidence knowing every visual change is intentional.
{
"mcpServers": {
"chromatic": {}
}
}