Screen tutorial / 02:19 / Published 2025-04-08
Shipping code to your IDE with ChatGPT
A checkout-page error is shown before a linked-editor request, a code diff, and a return to the page displaying a success state.

Useful to borrow
Keep the failure, proposed change, and rerun as three distinct pieces of evidence.
Do not infer
A displayed checkout success is not proof of a real purchase; an edited diff is not an independently run test.
Look closer
- Reveal the proposed patch before returning to the app · 01:32–01:40
7 shot groups.
Read across from the observed content to its treatment and possible adaptation. Enlarge the frame for detail.
Approximate study intervals; horizontal scrolling reveals all columns on small screens.
| Moment / source | Reference frame | What is on screen | Framing / edit | Useful adaptation |
|---|---|---|---|---|
| Shot group 01 ≈ 00:00–00:12 Title / identityWatch from here ↗ | Sample 00:08.000 | IDE tutorial opener A title introduces sending code changes to an editor. | Plain how-to framing. | State the workflow in one line. |
| Shot group 02 ≈ 00:12–00:44 App / browser screenWatch from here ↗ | Sample 00:24.000 | Companion and app picker A compact assistant and app picker sit over the desktop. | Long setup hold with surrounding context. | Show which application is connected. |
| Shot group 03 ≈ 00:44–01:04 App / browser screenWatch from here ↗ | Sample 01:00.000 | Visible failure The checkout page and editor share the desktop; an error overlay appears on the page. | Page detail followed by a wider two-window view. | Show the actual symptom before the repair. |
| Shot group 04 ≈ 01:04–01:28 App / browser screenWatch from here ↗ | Sample 01:20.000 | Linked-editor request The companion composer and menus lead into a larger assistant window. | Request anchored beside the failing page. | Make the supplied context visible. |
| Shot group 05 ≈ 01:28–01:52 App / browser screenWatch from here ↗ | Sample 01:40.000 | Proposed code change Explanatory text leads to apply controls and a red/green code diff. | Tight change inspection. | Separate review of the patch from verification. |
| Shot group 06 ≈ 01:52–02:16 App / browser screenWatch from here ↗ | Sample 02:08.000 | Rerun and result The desktop returns, then the checkout page displays a payment-success state beside the editor. | Whole-workspace return and result hold. | Close the loop on the original visible failure. |
| Shot group 07 ≈ 02:16–02:19 Title / identityWatch from here ↗ | Sample 02:16.000 | End mark The desktop is replaced by a white ending. | Simple identity close. | Finish after the outcome. |