AccessAI

AccessAI — Helps web developers instantly identify, understand, and fix accessibility barriers by combining automated WCAG scanning with AI-powered expert recommendations.

🌐 Live: https://access-ai.solutions

Architecture

Getting Started

Prerequisites

• Node.js 20+
• Python 3.11+
• Docker & Docker Compose (for local development)
• Supabase account
• Google AI API key

Setup

1. Clone the repository:

   git clone https://github.com/your-username/AccessAI.git
   cd AccessAI
   

2. Copy environment variables:

   cp .env.example .env
   # Fill in your values
   

3. Start all services with Docker Compose:

   docker compose up --build
   

   Or run services individually:

   Backend:

   cd backend && npm install && npm run dev
   

   Agent:

   cd agent && pip install -r requirements.txt && uvicorn app.main:app --reload
   

   Frontend:

   cd frontend && npm install && npm run dev
   

   Browser Extension:

   cd extension && npm install && npm run build
   # Then load `dist/` in chrome://extensions (see extension/README.md for details)
   

4. Open http://localhost:3000 in your browser.

Deployment

MCP Server

AccessAI ships an MCP (Model Context Protocol) server (mcp-server/) that lets AI coding agents — running inside Cursor, Cline, Claude Code, Windsurf, or any MCP-compatible tool — scan websites and HTML code for WCAG accessibility issues, view scan history, and chat about results, all without leaving the editor.

📦 npm: accessai-mcp

Tools

Resources

Quick Setup

Step 1 — Generate an API key

1. Log in to your AccessAI dashboard
2. Go to Settings → API Keys
3. Click "Generate New Key"
4. Copy the key — it starts with ak_live_... and is shown only once

Step 2 — Add to your IDE

{
  "mcpServers": {
    "accessai": {
      "command": "npx",
      "args": ["-y", "accessai-mcp"],
      "env": {
        "ACCESSAI_API_KEY": "ak_live_your_key_here"
      }
    }
  }
}

{
  "mcpServers": {
    "accessai": {
      "command": "npx",
      "args": ["-y", "accessai-mcp"],
      "env": {
        "ACCESSAI_API_KEY": "ak_live_your_key_here"
      }
    }
  }
}

{
  "mcpServers": {
    "accessai": {
      "command": "npx",
      "args": ["-y", "accessai-mcp"],
      "env": {
        "ACCESSAI_API_KEY": "ak_live_your_key_here"
      }
    }
  }
}

Once connected, ask your agent things like:

"Scan https://example.com for accessibility issues"
"Scan this HTML component for WCAG problems"
"Which accessibility issues should I fix first?"
"Show me code examples for adding ARIA labels"

SDK Integration

accessai-mcp also works as a regular npm library with any AI SDK:

import { createAccessAIClient } from "accessai-mcp/client";

const client = createAccessAIClient({ apiKey: "ak_live_your_key_here" });

const result = await client.createScan("https://example.com");
console.log(`Score: ${result.scan.accessibility_score}/100`);

const history = await client.getScans();
const chat = await client.sendChatMessage(history[0].id, "How do I fix the contrast issues?");

import { experimental_createMCPClient } from "ai";
import { anthropic } from "@ai-sdk/anthropic";
import { generateText } from "ai";

const mcpClient = await experimental_createMCPClient({
  transport: {
    type: "stdio",
    command: "npx",
    args: ["-y", "accessai-mcp"],
    env: { ACCESSAI_API_KEY: "ak_live_your_key_here" },
  },
});

const { text } = await generateText({
  model: anthropic("claude-sonnet-4-20250514"),
  tools: await mcpClient.tools(),
  prompt: "Scan https://example.com for accessibility issues and summarize the results",
});

from agents import Agent
from agents.mcp import MCPServerStdio

mcp = MCPServerStdio(
    command="npx",
    args=["-y", "accessai-mcp"],
    env={"ACCESSAI_API_KEY": "ak_live_your_key_here"},
)

agent = Agent(
    name="Accessibility Checker",
    instructions="You help developers fix web accessibility issues.",
    mcp_servers=[mcp],
)

from google.adk.tools.mcp_tool import MCPToolset, StdioServerParameters

tools, exit_stack = await MCPToolset.from_server(
    connection_params=StdioServerParameters(
        command="npx",
        args=["-y", "accessai-mcp"],
        env={"ACCESSAI_API_KEY": "ak_live_your_key_here"},
    )
)

How it Works

Your IDE (Cursor / Cline / Claude Code / Windsurf)
          ↕ stdio  (MCP protocol)
  AccessAI MCP Server  (runs locally via npx)
          ↕ HTTPS  (authenticated with API key)
  AccessAI Backend  (Render)
          ↕
  AI Agent (Gemini 2.0 Flash) + Supabase (PostgreSQL)

See mcp-server/README.md for full documentation and build-from-source instructions.

Browser Extension

AccessAI also ships as a Chrome extension (extension/) for scanning websites directly from the browser toolbar.

Features

• One-click scanning — scan the current tab or enter a custom URL
• Sign in with your AccessAI account — leverage your existing credentials and scan history
• Inline report view — see accessibility issues, their WCAG references, severity levels, descriptions, and recommendations right in the popup
• Markdown formatting — descriptions and code suggestions render with proper bold, italic, inline `code`, and ```fenced code blocks```
• Link to full reports — open the website for deeper analysis, chat with the AI, and view your full scan history

Quick Start

cd extension
npm install
npm run build
# Then: chrome://extensions → Load unpacked → select dist/

See extension/README.md for full setup, environment variables, and how to configure CORS on the backend.

Project Structure

AccessAI/
├── frontend/          # Next.js (feature-based architecture)
├── backend/           # Express.js (modular architecture)
├── extension/         # React + Vite + Chrome MV3 (browser extension)
├── agent/             # Python FastAPI + Google ADK
├── mcp-server/        # MCP server for IDE agents (Cursor, Cline, etc.)
├── docker-compose.yml
├── .env.example
└── README.md