Mandlix Copilot Integration
Transform Mandlix UI/UX analysis into actionable GitHub Copilot fix prompts — directly inside VS Code.
Mandlix scans your web apps for UI, UX, and accessibility issues. This extension brings those findings into your editor so you can review screenshots, inspect problems, and send structured fix prompts to GitHub Copilot without leaving your workflow.
What You Can Do
- Review issues visually — Browse analyzed pages, view screenshot chunks, and see exact issue markers overlaid on your UI.
- Fix with Copilot — Send context-rich prompts (with chunk screenshots) to GitHub Copilot in one click.
- Sync automatically — Pull the latest Mandlix scan results straight into VS Code.
- Map to your code — Connect analyzed URLs to your local project files for traceability.
Getting Started
1) Install the extension
Search "Mandlix Copilot Integration" in the VS Code Extensions panel (Ctrl+Shift+X) and install.
Click the Mandlix icon in the Activity Bar (left sidebar). If you are not logged in, you will see a Login to Mandlix action.
3) Log in
Click Login to Mandlix in the sidebar. This opens the Mandlix Dashboard webview where you can sign in via your browser. Once authenticated, the dashboard opens automatically.
4) Review scans and fix issues
After login:
- Select a website from the left pane.
- Pick a scan to load its analyzed routes.
- Expand a route and click a viewport (Phone / Tablet / Desktop) to open the issue workbench.
- Browse chunks and click "Fix with Copilot" on any issue to send it to Copilot.
Tip: Use the keyboard shortcut Ctrl+Shift+U (macOS: Cmd+Shift+U) to open the dashboard at any time.
Requirements
- VS Code 1.86.0 or higher
- A Mandlix account and backend URL (your team or self-hosted instance)
- GitHub Copilot extension (for AI-powered fix generation)
Extension Settings
Open VS Code Settings (Ctrl+,) and search for "Mandlix" to customize:
| Setting |
Default |
Description |
mandlix.apiUrl |
http://127.0.0.1:8000 |
Your Mandlix API endpoint |
mandlix.webAppUrl |
http://localhost:4200 |
Your Mandlix web app URL (used for login) |
mandlix.autoSync |
true |
Auto-sync issues on startup |
mandlix.imageHostAllowlist |
Cloudinary + localhost |
Trusted image hosts for chunk screenshots |
mandlix.showPreviewBeforeApply |
true |
Show diff preview before applying fixes |
mandlix.createGitBranch |
true |
Create a new git branch when applying fixes |
How It Works
- Mandlix scans your website and detects UI/UX/accessibility issues across multiple viewports.
- This extension fetches those results via the Mandlix API.
- Inside VS Code, you browse routes, viewports, and screenshot chunks with issue markers.
- Click "Fix with Copilot" to build a prompt from the issue title, problem, recommendation, and chunk screenshot — then send it directly to Copilot.
- Apply fixes in your local codebase and create branches / PRs when ready.
Features at a Glance
- 🔍 Browse Issues — Explore findings by website, scan, route, and viewport
- 🤖 Copilot Integration — One-click prompt generation with chunk screenshots
- 📁 File Mapping — Link analyzed URLs to local source files
- 🔄 Auto-Sync — Stay up to date with the latest scan results
- 🖼️ Visual Workbench — Screenshot chunks with overlaid issue markers
- 🌿 Git Integration — Create branches and pull requests for fixes
- 📊 Export Reports — Generate comprehensive fix reports
Support
- Documentation & Issues: GitHub Repository
- Mandlix Platform: Visit your Mandlix web app for analysis setup and team management
License
MIT
