Building AI Apps Live from Cairo 🔴
Want to back the stream? The «داعم» membership on YouTube is EGP 60 a month: badges, emoji, and I answer your questions first on stream. Become a supporter
The gist
The stream centers on an extended practical experiment in refining a website with coding agents, especially hero-section motion, a dotted grid, connector lines, and a milestone progress bar. Luqman uses live previews, screenshots, and browser inspection to verify rendered results rather than trusting code alone, while investigating missing CSS keyframes, visual regressions, server or port confusion, and effects that disappear after refresh. Some motion became visible after switching to the project’s existing motion library, but other details remained under refinement; he emphasized limiting change scope and preserving good states in Git. He also explored a command center for projects with multiple agent roles and shared JSON status, while recognizing the risks of over-automation and of the management tool becoming a distraction. The choice between automated pipelines and steerable interactive sessions remained unresolved. Based on personal experience rather than a comprehensive benchmark, he compared Cursor, Warp, Antigravity, and Codex across embedded previews, terminal sandboxing, runtime control, context handoff, and usage limits. Audience questions covered WordPress versus newer platforms, Supabase and Firebase, turning a website idea into an Android app, and whether WordPress suits IPTV or OTT platforms, with an emphasis on content rights and legal risks. Unresolved issues included several interface animations, recovery of a deleted effect, YouTube API consumption, and YouTube’s inconsistent display of the live-stream duration.
108 moments from the stream
- 0:03:31
Turning a Project Map into a Command Center
He explains a concept that began as swimlanes showing project weeks and tasks, then expanded into a command center that exposes the overall map and helps compare actual progress with the schedule. He also outlines a multi-domain plan for an app aimed at Shopify merchants, while noting that the product details would become clearer once building begins.
- 0:07:57
A Command Center for Projects, Tasks, and Agents
He expands the idea from visualizing a project map into a project-management-like workspace where agents perform work and share status. The proposed agent hub records completed tasks in a shared JSON file for unified tracking and could connect agents from different tools.
- 0:09:13
When Building the Management Tool Becomes a Distraction
He reflects that developing the command center had started to create distraction and overbuilding, especially while trying to automate the full project workflow and trigger pipelines from tasks. The discussion highlights the practical risk of a supporting tool becoming larger than the work it is meant to organize.
- 0:10:05
When a Multi-Agent Pipeline Becomes Overkill
A review of a pipeline that separates exploration, planning, and implementation across sub-agents. The speaker finds that it can enforce useful discipline, but may be redundant and distracting when the primary agent can determine the needed steps itself.
- 0:12:58
Cursor vs. Antigravity: How Terminal Sandboxing Affects Workflow
A personal comparison favoring Cursor for an experimental interface task. Terminal sandboxing in Antigravity routed page elements and screenshots through its agent manager, while Cursor allowed more direct terminal-based handling of HTML elements or classes.
- 0:15:09
Finishing Small Work Before Returning to a Harder Project
The speaker describes resisting open-ended polishing and distraction: finish a bounded set of edits, automate the recurring part, then set the task aside before returning to a harder project.
- 0:15:31
Analyzing YouTube API Usage for Live-Status Updates
A request to analyze why YouTube API call quota was being exhausted despite repeated estimates, then identify and fix any additional usage paths. The goal is to update a website section periodically with the stream status and schedule, after noticing that the displayed status was out of sync with the actual live state.
- 0:21:11
Diagnosing a Command Center Border-Tracing Effect
The discussion covers several unsuccessful attempts to implement a visual border effect around an interface section, followed by a possible diagnosis that the component references missing CSS keyframes. Redesigning the connector is considered as a fallback, with no confirmed final outcome on this page.
- 0:24:06
Running Recurring Tasks from the Terminal
A loop command is discussed as a way to rerun a task automatically at a chosen interval directly from the terminal, illustrating lightweight recurring-task automation.
- 0:26:19
Comparing Terminal Sessions, Pipeline Mode, and Run in Warp
The discussion identifies situations where a pipeline may be valuable, including understanding existing code, handling dependencies, maintaining consistency and an audit trail, and coordinating parallel tasks. It then requests a thorough pros-and-cons comparison of direct terminal sessions, pipeline mode, and Run in Warp; the resulting comparison is not present on this page.
- 0:27:48
Experimenting with an AI-Assisted Visual Effect Adaptation
The speaker proposes adapting and refining a visual effect he likes for the site, testing whether the coding tool can reproduce it accurately. He notes that the effect may be slightly excessive and also encounters difficulty opening an additional browser view; the experiment’s outcome is not shown.
- 0:30:57
Diagnosing a Failed Frontend Implementation with Multiple Agents
After the visual result came out worse than intended, the speaker returned to planning mode and requested research beyond the project and diagnosis by multiple agents because earlier attempts had not reproduced the intended effect accurately.
- 0:32:38
Using Visual References and Browser Automation to Recreate a UI Effect
The speaker considers borrowing inspiration from a reference background and a specific visual effect, noting that the motion is difficult to describe in words. Even after Claude opened a reference site through Playwright MCP, many elements were reproduced correctly while the motion behavior was interpreted differently from what was intended.
- 0:35:40
Trying Frontend Skills and Plugins to Improve the Result
The speaker checks whether a frontend-design skill or plugin might be applied automatically and tries another approach, but concludes that the output still does not match the intended effect.
- 0:38:13
The Difficulty of Describing Effects and Inspecting Reference Sites
The discussion moves to another appealing reference effect that is hard to describe, with consideration of extracting or inspecting its element. The site limits inspection, although some items may still be inspectable.
- 0:41:25
Screenshot-Driven UI Analysis and Implementation
He asks for the site to be screenshotted and visually inspected in detail before UI work is handed over, then uses the description of a dark, gridded background to guide an implementation in a light-green above-the-fold section while preserving the brand’s visual architecture. The aim was to test whether the system understood and could apply the reference, not to claim a verified final result.
- 0:48:02
Cursor Freezes and Voice Interaction with the Terminal
He discusses Cursor freezing and copy-paste friction during work, explaining that speaking commands to the terminal matters to his workflow and feels much faster than typing instructions. Restarting is mentioned as a possibility, but the captions do not establish that the issue was resolved.
- 0:55:46
Why a Coding Agent Can Fail Despite Understanding the Goal
Luqman asks why a coding agent may fail at a simple task even when it appears to understand the goal precisely, seeking to distinguish prompting problems from limitations in the agent's ability so he can improve his instructions.
- 0:57:06
Visually Verifying UI Work by an AI Coding Agent
While adding an interactive green glow to a dotted grid, Luqman discusses opening the interface and using screenshots as a review loop before handoff. Images can expose static visual mistakes, such as a line appearing instead of an arrow, but may not establish the quality of an animated effect, so he asks for repeated inspection and revision toward the intended result.
- 1:01:09
A Visual Verification Loop Before Completing UI Tasks
The speaker asks the agent to remain in plan mode, open the site, take a screenshot, and assess whether the result matches the task. If it does not, the interface should be revised and checked with another screenshot before the work is declared complete.
Got a question about something in this stream?
Ask in the group