Level CI + MCP integration into IDE

On this page:

• Prerequisites
• Generate a Level CI project token
• Configure IDE to connect to Level CI/MCP
• Add the Level CI/MCP server to your IDE
• Discover accessibility issues in your IDE
• Inspect issue details
• Request an AI-generated fix

Use the Level CI/MCP integration to discover and fix accessibility issues directly in your IDE while you write code. This integration connects your IDE to Level CI using the Model Context Protocol (MCP) and enables AI-assisted remediation without leaving your development workflow.

With this integration, you can:

• Discover accessibility issues for the code you are working on.
• View detailed issue information, including rule metadata and WCAG references.
• Request AI-generated fix suggestions and review proposed code changes directly in your IDE.

Prerequisites

Before you configure the integration, make sure you have the following:

• Access to a Level CI project
• A Level CI project token
• One of the IDEs  installed
• Access to your IDE’s MCP configuration settings

Generate a Level CI project token

You need a Level CI project token to authenticate your IDE with the Level CI MCP server.

To generate a project token:

1. Log in to Level CI.
2. Go to Projects.
3. Select View all branches.
4. Open Project settings.

5. Locate Project token.

   

6. Copy the token for use in your IDE configuration.

Configure IDE to connect to Level CI/MCP

All supported IDEs connect to Level CI MCP using the same MCP server configuration.

Level CI/MCP configuration

Use the following configuration when connecting your IDE to Level CI MCP:

{
 "mcpServers": {
   "level-ci-mcp": {
     "type": "http",
     "url": "https://mcp.ci.levelaccess.net/mcp",
     "headers": {
       "authorization": "Bearer <your-access-token>"
     }
   }
 }
}

Replace <your-access-token> with the token you generated in Level CI which is the project token

Add the Level CI/MCP server to your IDE

Cursor

To add the MCP server in Cursor:

1. Open Settings.
2. Navigate to MCP Servers.
3. Add a new HTTP MCP server.
4. Paste the Level CI MCP configuration.
5. Save your changes.

Visual Studio Code

To add the MCP server in Visual Studio Code:

1. Open Settings or the settings.json file.
2. Locate the AI or MCP configuration section.
3. Add the Level CI MCP configuration as a new MCP server.
4. Save your changes.

Windsurf

To add the MCP server in Windsurf:

1. Open Settings.
2. Navigate to AI / MCP Configuration.
3. Add a new HTTP MCP server.
4. Paste the Level CI MCP configuration.
5. Save your changes.

After completing these steps, your IDE will be connected to your Level CI project.

Discover accessibility issues in your IDE

You can ask your IDE assistant to find accessibility issues in the file or branch you are working on.

Request accessibility issues for the current file or repository context. The IDE calls Level CI through MCP and returns issues related to your code.

Issues may appear in your IDE as:

• Inline markers in your code
• Gutter indicators
• Entries in an accessibility panel

These indicators allow you to identify accessibility issues while you work in your IDE.

Inspect issue details

When you select an accessibility issue, your IDE displays detailed information about the issue.

This information may include:

• A description of the issue
• References to relevant WCAG success criteria or accessibility standards
• Rule metadata provided by Access Engine
• Code context associated with the issue
• Links to the issue in Level CI for deeper investigation

Request an AI-generated fix

You can request an AI-assisted fix for an accessibility issue directly from your IDE.

The MCP integration generates a proposed code diff designed to resolve the accessibility issue while preserving the intent of your original code.

Review and apply the fix

Your IDE displays the proposed changes so you can review them before applying the fix.

You can:

• Modify the suggested changes
• Apply the fix
• Reject the suggestion
• When you apply a fix, the changes become normal code edits in your project.
• Validate the fix

After applying a fix, you can confirm that the issue has been resolved.

You can re-check accessibility issues from your IDE, or allow Level CI scans in CI pipelines or pull requests to validate that the issue is resolved.
This workflow allows you to discover, understand, and fix accessibility issues directly in your development environment while maintaining the validation provided by Level CI.