Skip to main content

AI IDE Integration (MCP)

Pro plan required

The MCP server integration is available on the Pro plan.

navable provides an MCP (Model Context Protocol) server that connects your AI IDE — such as VS Code with GitHub Copilot, Cursor, or Windsurf — directly to your accessibility audit data. This lets you ask your AI assistant about accessibility issues on your websites without leaving your editor.

What you can do​

  • List your audit collections — see all your monitored websites with their accessibility scores and issue counts.
  • Browse accessibility issues — get detailed issues for a specific website, filtered by severity, with WCAG references and fix suggestions.

Prerequisites​

  • A navable account on the Pro plan.
  • An API key. You can create one from Settings → API Keys in the dashboard. See API Keys for details.
  • An AI IDE that supports remote MCP servers (VS Code with Copilot, Cursor, Windsurf, or similar).

Setup​

VS Code with GitHub Copilot​

One-click install: click the button below to add the navable MCP server to VS Code automatically. You will be prompted for your API key on first connection.

Install in VS Code

Manual setup:

  1. Open the Command Palette (Cmd+Shift+P on macOS, Ctrl+Shift+P on Windows) and run MCP: Open User Configuration.

  2. Add the navable server to your mcp.json:

    {
      "servers": {
        "navable": {
          "type": "http",
          "url": "https://mcp.navable.io/",
          "headers": {
            "x-api-key": "${input:navable-api-key}"
          }
        }
      },
      "inputs": [
        {
          "type": "promptString",
          "id": "navable-api-key",
          "description": "Navable API Key",
          "password": true
        }
      ]
    }

  3. Save the file. VS Code will prompt you for your API key on first connection. The key is securely stored for subsequent use.

  4. Open Copilot Chat and start asking about your accessibility data.

Cursor​

  1. Open Settings → MCP Servers.
  2. Add a new server with:
    • Type: HTTP
    • URL: https://mcp.navable.io/
    • Header: x-api-key set to your navable API key.

Other MCP-compatible IDEs​

Any IDE that supports remote MCP servers via HTTP can connect to navable. Point it to https://mcp.navable.io/ and pass your API key in the x-api-key header.

Available tools​

Once connected, your AI assistant has access to two tools:

list_audit_collections​

Lists all your monitored websites with a summary of each — including the accessibility score, issue counts by severity, number of tracked URLs, and when the last scan ran. Use this to get an overview of your accessibility posture.

Example prompt: "Show me my audit collections"

get_audit_issues​

Retrieves detailed accessibility issues for a specific website. You can filter by severity and paginate through results. Each issue includes the WCAG rule, affected HTML elements, and suggested fixes.

Example prompts:

  • "What are the critical and serious issues on my website?"
  • "Show me accessibility issues for collection abc123"
  • "What WCAG violations does my homepage have?"

Example workflow​

  1. Ask your AI assistant: "List my audit collections"
  2. Review the scores and identify a website with issues.
  3. Ask: "Show me the serious issues for that collection"
  4. The assistant returns issues with WCAG references, affected elements, and fix suggestions.
  5. Fix the issues directly in your code with the AI's help.

Rate limiting​

The MCP server is subject to the same rate limits as the external API — 30 requests per minute per organization.

What's next​