BUGDROP.
    AI
    Auto-generated

    AI Fix Suggestions

    When you create an annotation, BugDrop's AI agent automatically traces the issue to your source file and generates a ready-to-apply code diff.

    HOW IT WORKS

    Read annotation

    Selector + comment

    Source map

    Trace to file:line

    Generate diff

    AI engine

    4

    Attach fix

    On annotation

    1

    Analyses the annotation

    Reads the CSS selector, DOM snapshot, screenshot, page URL, and your written comment.

    2

    Locates the component

    Uses the DOM selector to trace the annotated element back to its original React component in the codebase.

    3

    Generates a fix

    AI produces a unified diff showing exactly what to change to resolve the bug.

    4

    Attaches to annotation

    The fix appears on the annotation with a diff preview. A ✓ indicator shows in the annotation list.

    REQUIREMENTS

    Plan
    Starter+
    Annotation type
    Must have a DOM selector (Point annotation)

    LIVE DEMO — AI FIX PANEL

    This is the exact AI Fix Panel component that appears inside every annotation with a suggested fix:

    AI Fix Suggestion

    A.I.
    94% confidence

    Submit button missing padding on mobile

    The \`px-4\` class is overridden by a media query. Appending \`sm:px-6\` resolves the spacing issue at small viewports.

    AddedRemoved
    42
    − <button className="bg-blue-500 py-2">
    42
    + <button className="bg-blue-500 py-2 px-4 sm:px-6">

    VISUAL DIFF PREVIEW

    Before applying an AI patch, you can preview the visual impact side-by-side. This diff is generated by the CLI using headless rendering.

    Before

    - padding is too small, button tight

    After (AI Fix)

    + added p-1, px-4, py-2, and emerald styling

    APPLYING AI FIXES

    From the terminal

    bash
    # Preview the diff
    $ bugdrop diff ann_01HZ...
    # Apply the patch
    $ bugdrop apply ann_01HZ...
      ✓ Patch applied to Checkout.tsx

    From the dashboard

    1Open annotation with AI fix
    2Click Apply Fix
    3Your OS opens the bugdrop:// URL
    4CLI runs preflight check
    5Patch is applied to local source

    PATCH CONFLICTS

    If the source file has changed since the fix was generated, the patch may not apply cleanly.

    bash
    # Conflicted patches are saved to:
    .bugdrop-conflicts/<filename>.patch
    # Apply manually:
    $ git apply .bugdrop-conflicts/Checkout.patch

    FAQ