Skip to main content
Beta: Front-End Checklist is currently in beta. Some issues are still being fixed. Thanks for your patience.
AI Integration

MCP Server

Connect your AI assistant to the Front-End Checklist rule corpus using the Model Context Protocol (MCP). Get structured code reviews, fix guidance, and workflow-aware frontend audits.

Server URL

https://mcp.frontendchecklist.io

Quick start

The fastest way to add the Front-End Checklist MCP server is with one command. It auto-detects your editor (Cursor, VS Code, Claude Code, etc.) and writes the correct config.

npx add-mcp https://mcp.frontendchecklist.io

Requires Node.js 18+. Restart your editor after running. For per-client instructions, use the tabs below.

Setup Instructions

Choose your AI tool below and follow the setup instructions. The server exposes 11 tools plus reusable prompts and read-only resources for searching, checking, and learning the same frontend standards available on the website.

Add to .cursor/mcp.json (supports native remote MCP)

{
  "mcpServers": {
    "frontend-checklist": {
      "url": "https://mcp.frontendchecklist.io"
    }
  }
}

Add this to .cursor/mcp.json in your project or global ~/.cursor/mcp.json.

Hundreds of other tools support MCP servers. Configure them with the server URL above. Check your tool's documentation for specific setup instructions.

Available Tools

The MCP server provides 11 tools for different use cases. Start with review_code for comprehensive code analysis, or use specific tools for targeted checks. Clients can also browse rule/checklist resources and invoke built-in prompts for common workflows.

Try these prompts

After connecting, ask your AI assistant any of the following to see the MCP server in action:

  • Audit https://example.com for frontend best practices

    Uses audit_url to check a live site

  • Review this HTML for accessibility issues

    Uses review_code with focus on accessibility

  • What are the critical rules I should check before launching?

    Uses get_workflow or get_quick_reference

  • Explain why semantic HTML matters

    Uses explain_rule

  • Give me a performance checklist in markdown format

    Uses get_quick_reference with format: markdown

  • Check this code against the alt-tags rule

    Uses check_rule with a specific slug

Use Cases

Code Reviews

Use review_code to automatically check PR code against best practices. Get prioritized issues with fix guidance.

Learning

Use explain_rule to understand why rules matter. Great for onboarding new team members or deepening knowledge.

Pre-Launch Audits

Use get_workflow with launch-checklist to get an ordered sequence of critical checks before deployment.

CI/CD Integration

Use get_quick_reference to generate checklists in markdown format for automated quality gates.

Accessibility Audits

Use search_rules with categories=['accessibility'] to get all a11y rules, then check_rule for specific issues.

Performance Optimization

Use review_code with focus=['performance'] to identify performance issues in your code.

Coming soon: Standalone CLI

We're building a standalone CLI so you can audit any URL from your terminal—no MCP required. Get notified when it launches.

Security & Privacy

The Front-End Checklist MCP server is designed with security in mind:

  • Read-only access - The server only provides access to our public rules database. It cannot modify any data.
  • No authentication required - All rules are public, so no credentials are needed or stored.
  • Code stays local - When you use review_code, your code is sent to the server but is not stored or logged.
  • Anonymous telemetry - Only anonymous usage counters are collected for tool adoption metrics.

Troubleshooting

Connection not working

Verify the server URL is exactly https://mcp.frontendchecklist.io. Restart your editor completely after adding the MCP server—many clients only load MCP config at startup.

Tools not showing

Check that your config JSON is valid (no trailing commas, correct quotes). Ensure you added the config to the right file: .cursor/mcp.json for Cursor, User Settings or .vscode/mcp.json for VS Code, claude_desktop_config.json for Claude Desktop.

Claude Desktop or Windsurf

These clients use the mcp-remote bridge, which requires Node.js 18+ installed. Run npx -y mcp-remote https://mcp.frontendchecklist.io in a terminal to confirm it runs. If it fails, install Node.js from nodejs.org.

FAQ

The Model Context Protocol (MCP) is a standard for connecting Large Language Models (LLMs) to external tools and data sources. It allows AI assistants to interact with services like Front-End Checklist programmatically.