From Video to Pull Request: A Complete Causly Workflow Tutorial

In this tutorial, we'll walk through the complete Causly workflow: taking a customer's screen recording of a bug and turning it into a merged pull request. By the end, you'll understand how to leverage AI to dramatically speed up your debugging process.

Prerequisites

Before starting, make sure you have:

• A Causly account with an active subscription
• The Causly VSCode extension installed
• A GitHub connection set up in Causly
• At least one codebase indexed

The Scenario

A customer named Sarah reports: "I can't complete my purchase. When I click the checkout button, nothing happens."

She's attached a 90-second screen recording. Let's fix this.

Step 1: Upload the Video

Option A: Web Dashboard

1. Navigate to your Causly dashboard
2. Click "Upload Video" or drag-and-drop the file
3. Select the project/codebase to search against
4. (Optional) Add any context Sarah provided

Option B: VSCode Extension

1. Open Command Palette (Cmd/Ctrl + Shift + P)
2. Run "Causly: Analyze Video"
3. Select the video file
4. Choose your codebase

Option C: Slack Integration

If Sarah shared the video in Slack:

1. React to the message with the :causly: emoji
2. Or reply with @Causly analyze this

Step 2: Wait for Analysis (1-2 minutes)

Causly is now:

• Extracting key frames from the video
• Transcribing any audio narration
• Running AI vision analysis to understand the UI
• Detecting frustration signals (we found Sarah's rage clicks!)
• Generating search queries for your codebase
• Finding relevant code files

You'll see real-time progress updates.

Step 3: Review the Analysis

Once complete, you'll see:

Summary

Issue Type: Click Handler Failure
Frustration Score: 8.2/10 (High)
Primary Issue: Checkout button click event not triggering payment flow

Expected Behavior: Clicking "Complete Purchase" should initiate payment
Actual Behavior: Button appears to be clicked but no action occurs

Key Moments

The timeline highlights:

• 0:23 - Sarah fills out payment form ✓
• 0:45 - First checkout button click (no response)
• 0:48 - Second click (no response)
• 0:52-1:05 - Rage clicking begins
• 1:10 - Sarah tries refreshing the page

Matched Code Files

1. src/components/checkout/CheckoutButton.tsx (92% match)
   - Contains the checkout button click handler
   - Lines 45-67: handleCheckout function
   
2. src/services/payment.ts (78% match)
   - Payment processing logic
   - Lines 23-45: processPayment function

3. src/hooks/useCart.ts (65% match)
   - Cart state management
   - Lines 89-102: getCartTotal function

Step 4: Examine the AI's Findings

Click into the first matched file. Causly highlights the suspicious code:

// src/components/checkout/CheckoutButton.tsx
const handleCheckout = async () => {
  if (isProcessing) return;
  
  setIsProcessing(true);
  
  try {
    const total = await getCartTotal();
    // BUG: getCartTotal returns undefined when cart has discount
    // This causes processPayment to fail silently
    await processPayment(total);
    router.push('/confirmation');
  } catch (error) {
    // Error is caught but not displayed to user!
    console.error(error);
  } finally {
    setIsProcessing(false);
  }
};

Step 5: Review the Suggested Fix

Causly generates a fix suggestion:

// SUGGESTED FIX
const handleCheckout = async () => {
  if (isProcessing) return;
  
  setIsProcessing(true);
  setError(null);
  
  try {
    const total = await getCartTotal();
    
    // Add validation for cart total
    if (total === undefined || total === null) {
      throw new Error('Unable to calculate cart total');
    }
    
    await processPayment(total);
    router.push('/confirmation');
  } catch (error) {
    // Display error to user
    setError(error instanceof Error ? error.message : 'Payment failed');
    console.error('Checkout error:', error);
  } finally {
    setIsProcessing(false);
  }
};

The AI also suggests investigating getCartTotal for the root cause.

Step 6: Apply the Fix

In VSCode

1. Click "Apply Fix" in the Causly panel
2. The suggested changes appear as a diff
3. Review and modify if needed
4. Save the file

Additional Fix Needed

Looking at useCart.ts, we find the root cause:

// Before
const getCartTotal = () => {
  if (cart.discount) {
    return cart.subtotal - cart.discount.amount;
    // BUG: Returns undefined if discount.amount is undefined
  }
  return cart.subtotal;
};

// After (fixed)
const getCartTotal = () => {
  const discountAmount = cart.discount?.amount ?? 0;
  return cart.subtotal - discountAmount;
};

Step 7: Create the Pull Request

1. Click "Create Pull Request" in Causly
2. Review the auto-generated PR description:

## Fix: Checkout button not responding when cart has discount

### Problem
When a customer's cart contains a discount with an undefined amount,
the checkout button fails silently because `getCartTotal()` returns
undefined, causing `processPayment()` to fail.

### Solution
1. Added null-coalescing for discount amount in `getCartTotal()`
2. Added validation in checkout handler before processing payment
3. Added user-facing error display when checkout fails

### Testing
- [ ] Checkout with no discount
- [ ] Checkout with percentage discount
- [ ] Checkout with fixed amount discount  
- [ ] Checkout with discount that has undefined amount

### Video Analysis
This fix addresses the issue reported in video analysis #VA-1234
Frustration Score: 8.2/10
User: Sarah (customer)

1. Click "Create PR"
2. Causly creates the branch, commits changes, and opens the PR

Step 8: Merge and Close

1. Review the PR in GitHub
2. Run your CI/CD tests
3. Get code review approval
4. Merge!

Total Time: ~8 minutes

Compare this to the traditional workflow of reproducing the bug, searching the codebase, debugging, and writing the PR description manually—often 2+ hours.

---

Tips for Best Results

1. Index your entire codebase - More context means better matches
2. Include customer context - Any details help the AI understand intent
3. Review before applying - AI suggestions are starting points, not final solutions
4. Link related issues - Helps track patterns across similar bugs

Ready to try it yourself? Upload your first video and experience the future of debugging.