Sentra

🛡️ Project Story: Sentra 🌟 Inspiration Accessibility is often treated as a "nice-to-have" or a final checkbox because it's perceived as difficult, expensive, and technical. Most automated tools provide cryptic warnings like "Contrast ratio is 2.1:1" without telling a developer where the element is or how to fix it.

We were inspired to build Sentra to bridge the gap between "finding a bug" and "fixing it." We wanted to create an auditor that doesn't just score your site—it explains itself in plain English and provides the exact code fix. Our goal was to make the web inclusive for the 1.3 billion people with disabilities by empowering every developer to be an accessibility expert.

🚀 What it does Sentra is an Autonomous AI Accessibility Auditor. When a user pastes a URL, an AI Orchestrator launches 6 specialized autonomous agents in parallel. These agents don't just scan the code; they navigate the site like real users—clicking buttons, filling forms, and exploring user journeys.

Sentra identifies WCAG violations, explains the business and user impact in non-technical language, and generates copy-pasteable code fixes (e.g., "Line 47: This button needs an aria-label"). Finally, it generates a professional, exportable PDF report.

🛠️ How we built it We built Sentra using a cutting-edge Multi-Agent Architecture:

Frontend: Built with React 19 and Vite, using Framer Motion for a premium, high-fidelity UI and TailwindCSS 4 for styling. Backend: A Node.js and Express server that manages the orchestration logic. Automation: We used Playwright to handle browser automation, allowing our agents to interact with complex Single Page Applications (SPAs). AI Engine: We integrated Google Gemini Pro (Vision + Text) for visual analysis and OpenRouter (Llama 3.3 70B) to power the autonomous decision-making of our agents. Parallelism: We implemented a custom Orchestrator that manages 6 simultaneous browser contexts, each with its own "mission" (Contrast, Forms, Navigation, etc.). The complexity of the agent interaction can be represented by the efficiency gain: $$ \text{Audit Speed} \propto \frac{\sum_{i=1}^{n} \text{Agent}_i}{\text{Manual Audit Time}} $$ where $n=6$ specialized agents.

🚧 Challenges we ran into Browser Overload: Running 6 autonomous agents in parallel is resource-intensive. We had to implement staggered tab creation and strict memory management to prevent the browser from crashing. AI Hallucinations: Ensuring the AI generated valid code fixes required rigorous prompt engineering and a "Validator" layer that cross-references the suggested fix against the actual DOM structure. Handling Asynchronous UI: Modern web apps are highly dynamic. We spent significant time perfecting the "wait-for-action" logic so agents wouldn't miss violations hidden behind loaders or transitions.

✨ Accomplishments that we're proud of Autonomous Orchestration: We successfully built a system where 6 different agents can explore a site independently without overlapping or getting stuck in loops. Precision Fixing: Achieving "Line-level" accuracy for code fixes was a major win. Seeing the AI correctly identify a missing aria-label and provide the exact JSX fix was incredible. The UI Experience: We created a dashboard that feels alive, showing live agent logs and a "risk engine" that updates in real-time as bugs are found.

📖 What we learned Multi-Agent Design: We learned how to break down a complex task (a full site audit) into smaller, specialized roles that can work in parallel. Vision-Language Models: We gained deep experience in using multimodal AI to "see" a website's layout and contrast rather than just reading its HTML. Performance Optimization: We mastered the art of managing multiple headless browser instances in a production-like environment.

🔮 What's next for Sentra CI/CD Integration: We want to build a GitHub Action that runs Sentra on every Pull Request, blocking code that introduces new accessibility violations. Self-Healing UI: A browser extension that can "live-patch" accessibility issues on any site for the user in real-time. Mobile App Auditing: Extending our vision agents to audit mobile app layouts using emulators.

🛠️ Built With Languages: TypeScript, JavaScript, HTML5, CSS3 Frameworks: React 19, Vite, Express.js AI APIs: Google Gemini API, OpenRouter API Automation: Playwright Styling: TailwindCSS 4, Framer Motion, Lucide Icons