Skip to content

Commit c6523fb

Browse files
Ishavyas9Ishavyas9
authored
Merge pull request LambdaTest#1607 from keys-github/devansh-stage
Updated content and new accessibility mcp doc
2 parents 4c38676 + 9e9350c commit c6523fb

File tree

2 files changed

+168
-0
lines changed

2 files changed

+168
-0
lines changed

‎docs/accessibility-mcp-server.md‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
---
2+
id: accessibility-mcp-server
3+
title: Introducing Accessibility MCP Server
4+
hide_title: false
5+
sidebar_label: Accessibility MCP Server
6+
description: LambdaTest’s Accessibility MCP Server tests public URLs and React apps, providing detailed reports and AI-driven insights to quickly identify and fix accessibility issues.
7+
8+
keywords:
9+
- accessibility testing
10+
- accessibility
11+
- lambdatest
12+
- MCP
13+
- MCP server
14+
url: https://www.lambdatest.com/support/docs/accessibility-mcp-server/
15+
site_name: LambdaTest
16+
slug: accessibility-mcp-server/
17+
---
18+
19+
import CodeBlock from '@theme/CodeBlock';
20+
import {YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY} from "@site/src/component/keys";
21+
22+
<script type="application/ld+json"
23+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
24+
"@context": "https://schema.org",
25+
"@type": "BreadcrumbList",
26+
"itemListElement": [{
27+
"@type": "ListItem",
28+
"position": 1,
29+
"name": "Home",
30+
"item": "https://www.lambdatest.com"
31+
},{
32+
"@type": "ListItem",
33+
"position": 2,
34+
"name": "Support",
35+
"item": "https://www.lambdatest.com/support/docs/"
36+
},{
37+
"@type": "ListItem",
38+
"position": 3,
39+
"name": "Languages and Framework",
40+
"item": "https://www.lambdatest.com/support/docs/accessibility-mcp-server/"
41+
}]
42+
})
43+
}}
44+
></script>
45+
46+
# Getting Started with Accessibility MCP Server
47+
LambdaTest’s Accessibility MCP Server enables comprehensive accessibility testing for both publicly hosted URLs and still-in-development front-end React applications. It delivers detailed accessibility reports that identify issues and provide guidance on remediation.
48+
49+
Users receive actionable insights that not only helps to pinpoint and report roadblocks within web applications but also help in resolving them.
50+
51+
The server utilizes the Model Context Protocol (MCP) to streamline the integration of AI and assistance, thereby minimizing the effort required to address accessibility concerns.
52+
53+
## What is Model Context Protocol (MCP)?
54+
55+
The Model Context Protocol (MCP) acts like a "USB-C for AI integrations," creating a universal language between AI models and applications. This standardized interface allows AI assistants to connect with diverse software tools, making it significantly easier to expand capabilities across your digital workflow.
56+
57+
## Key Features of Accessibility MCP Server
58+
59+
Here are the key benefits of using Accessibility MCP Server:
60+
61+
- Conducts analysis to identify accessibility issues within the application.
62+
- Generates a comprehensive accessibility report that can be shared with team members.
63+
- Provides suggested remediations for addressing accessibility (a11y) issues in locally hosted applications.
64+
65+
66+
## Connecting to Accessibility MCP Server
67+
68+
The interface can be used with various AI assistants that support the Model Context Protocol (MCP). Here's how to connect using popular assistants:
69+
70+
### Connecting with Cline
71+
Cline (The Collaborative AI Coder) is an advanced, AI-powered coding assistant that integrates seamlessly into your development workflow. It provides intelligent code suggestions and documentation help—and now, with MCP support, it can interface with tools like LambdaTest Accessibility MCP to enhance your testing capabilities.
72+
73+
#### Installing Cline in VS Code:
74+
75+
**Step 1:** Open VS Code.<br />
76+
**Step 2:** Click on the Extensions icon in the Activity Bar on the side of the window (or press `Ctrl+Shift+X`).<br />
77+
**Step 3:** Search for **Cline** in the Extensions Marketplace.
78+
79+
<img loading="lazy" src={require('../assets/images/hyperexecute-mcp/installing-cline.webp').default} alt="automation-dashboard" width="1920" height="868" className="doc_img"/>
80+
81+
**Step 4:** Click **Install** on the Cline – The Collaborative AI Coder extension.<br />
82+
**Step 5:** Once installed, you'll see the Cline icon in your VS Code sidebar.<br />
83+
**Step 6:** Click on the Cline icon to open the Cline panel.<br />
84+
**Step 7:** Complete any authentication steps required during first-time setup.
85+
86+
### Connecting Cline to Accessibility MCP Server
87+
88+
#### VS Code Configuration:
89+
90+
**Step 1:** In VS Code, click on the Cline icon in the sidebar to open the Cline panel.<br />
91+
**Step 2:** Under the **MCP Servers** section, click **Remote Servers**.
92+
<img loading="lazy" src={require('../assets/images/hyperexecute-mcp/vs-code-config.webp').default} alt="automation-dashboard" width="1920" height="868" className="doc_img"/>
93+
94+
**Step 3:** Add Server Name as **MCP-Accessibility**.<br />
95+
**Step 4:** Enter the following URL in the server URL field: `https://mcp-api.lambdatest.com/automation?LT_USERNAME=username&LT_ACCESS_KEY=access_key` <br />
96+
**Step 5:** Replace [your-lt-username] and [your-lt-access-key] with your LambdaTest credentials. <br />
97+
**Step 6:** Click on **Add Server**.
98+
99+
<img loading="lazy" src={require('../assets/images/hyperexecute-mcp/mcp-add-server.webp').default} alt="automation-dashboard" width="1920" height="868" className="doc_img"/>
100+
101+
## Interacting with Accessibility MCP Server
102+
103+
Once connected, you can begin using Cline to interact with the Accessibility MCP Server.
104+
105+
A typical workflow would look like:
106+
107+
**1. Public URL:**
108+
- **Prompt:** Find accessibility (a11y) issues on w3schools.
109+
110+
- Cline will:
111+
112+
1. Open this URL in the browser via LambdaTest and generate accessibility issues.
113+
2. It will give a detailed accessibility report which can be shared with the users.
114+
115+
116+
**2. Local FE (React) Apps:**
117+
- **Prompt:** Build my app and fix accessibility issues.
118+
119+
- Cline will:
120+
121+
1. Host the local application and analyze this to identify all the areas which are causing a11y failures.
122+
2. It will check all the issues and try to fix them directly in the codebase to make the application more a11y compliant.
123+
3. It will also give a detailed accessibility report to view the accessibility issues.
124+
125+
Cline’s natural language interface allows you to work on debugging accessibility issues directly alongside your code.
126+
127+
## **Available Tools**
128+
129+
Accessibility MCP Server provides following two core tools:
130+
131+
1. `getAccessibilityReport`: Fetches detailed accessibility report for the specified public URL. Users can view this report in their browser to analyse the issues.
132+
2. `buildLocalAppForAnalysis`: Builds and serves your local react application via LambdaTest and identifies accessibility issues in the application.
133+
3. `AnalyseAppViaTunnel`: Helps test local apps which are already running via LambdaTest tunnel for accessibility failures.
134+
135+
<nav aria-label="breadcrumbs">
136+
<ul className="breadcrumbs">
137+
<li className="breadcrumbs__item">
138+
<a className="breadcrumbs__link" href="https://www.lambdatest.com">
139+
Home
140+
</a>
141+
</li>
142+
<li className="breadcrumbs__item">
143+
<a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com/support/docs/">
144+
Support
145+
</a>
146+
</li>
147+
<li className="breadcrumbs__item breadcrumbs__item--active">
148+
<span className="breadcrumbs__link">
149+
Accessibility MCP Server
150+
</span>
151+
</li>
152+
</ul>
153+
</nav>
154+
155+

‎docs/automation-mcp-server.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,19 @@ Cline allows natural language interaction with your codebase—just describe wha
9090
**Step 6:** Click on the Cline icon to open the Cline panel.<br />
9191
**Step 7:** Complete any authentication steps required during first-time setup.
9292

93+
### Connecting Cline to SmartUI MCP Server
94+
95+
#### VS Code Configuration:
96+
97+
**Step 1:** In VS Code, click on the Cline icon in the sidebar to open the Cline panel.<br />
98+
**Step 2:** Under the **MCP Servers** section, click **Remote Servers**.
99+
<img loading="lazy" src={require('../assets/images/hyperexecute-mcp/vs-code-config.webp').default} alt="automation-dashboard" width="1920" height="868" className="doc_img"/>
100+
101+
**Step 3:** Add Server Name as **LambdaTest-MCP**.<br />
102+
**Step 4:** Enter the following URL in the server URL field: `http://mcp-api.lambdatest.com/automation?&username=[your-lt-username]&accessKey=[your-lt-access-key]` <br />
103+
**Step 5:** Replace [your-lt-username] and [your-lt-access-key] with your LambdaTest credentials. <br />
104+
**Step 6:** Click on **Add Server**.
105+
93106
### Interacting with Automation MCP Server
94107

95108
Once connected, you can begin using Cline to interact with the Automation MCP Server. A typical workflow:

0 commit comments

Comments
 (0)