Dr. DOM

• 

  Home page

• 

  Demo Site

• 

  Demo site with Chatbox

Inspiration

I always wondered: what if website users could instantly report a bug to a chatbot, and the backend would automatically analyze, triage, and fix the issue with almost zero human intervention? That idea sparked Dr. DOM.

Initially, I also wanted the agent to provide real-time, in-browser assistance to stuck users. However, current limitations in how long-running web agents operate made that unfeasible. Instead, we focused purely on the developer workflow, culminating in a highly polished pipeline that doesn't just fix bugs autonomously, but also automatically writes and runs tests to prove it.

What it does

Dr. DOM turns plain-English bug reports into ready-to-merge fixes in minutes.

When a user reports an issue via the floating chat widget on our demo app, Dr. DOM creates a GitLab Issue. This triggers a GitLab Duo Flow that spins up a series of specialized AI agents. In sequence, they triage the bug, write a Playwright test to reproduce it, generate a code patch to fix it, and re-test to confirm the fix. Finally, it creates a Merge Request enriched with test reports, screenshots, and visual video recordings of the fix.

How we built it

• Frontend App: Built with React, Vite.
• Orchestration: Netlify Functions handle the chat payload and securely trigger the GitLab API.
• The Brains: The core automation is powered by GitLab Duo Flows. We wrote custom .yml definitions to coordinate four distinct agent roles (Triage, Repro, Fix, and Publish).
• Validation: Our GitLab CI/CD pipeline runs Playwright headlessly to generate tangible artifacts (traces, HTML reports, and videos) that prove the AI's work.

Challenges we ran into

• Agent Hyperactivity: Preventing our AI from "over-fixing" things was difficult. If it saw another unrelated issue in the file, the Fix agent would aggressively try to resolve it, which broke our isolated tests. We had to strictly constrain their scope via prompt engineering.

Accomplishments that we're proud of

• Achieving a fully autonomous, zero-touch cycle from a simple user chat message all the way to a verified GitLab Merge Request.
• Integrating robust, on-the-fly Playwright test generation. Our flow doesn't just blindly guess a fix; it scientifically proves the bug exists, and then visually proves it fixed it.

What we learned

• Trust requires auditability: Providing step-by-step visibility into the AI's thought process and visual proof (via Playwright videos) is absolutely necessary to build trust in AI-generated code.

What's next for Dr. DOM

• Expanding the AI's toolset to handle backend bug reporting through automatic server log gathering.
• Upgrading the agents to handle more complex, multi-file feature requests directly from the chat UI.

Built With

• gitlab-duo
• netlify
• react
• vite