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 documents practical work on a website interface and a project command center, alongside broader discussion of coding-agent workflows. UI reviews covered seamless animation, cards, locked states, legibility, and Telegram calls to action, emphasizing that good visual results require explicit standards, reference screenshots, and human review. Some visual effects still needed refinement, while state automation was deferred because the future flow and requirements were unclear. For the command center, the discussion covered dependencies, waitlists, Shopify requirements, and human, agent, and paired execution modes. A custom MCP server was then built to provide task context and receive status updates: basic create, edit, and delete tests worked, while Electron refresh behavior and fuller milestone and Agent Hub coverage remained unresolved. The stream also explored enriching agent instructions with current context, acceptance criteria, and references; reviewed an agency website from visual and sales-funnel perspectives; and considered turning live-build lessons into courses if audience interest is demonstrated. Livestream stability, YouTube API behavior, and Cloudflare deployment were monitored throughout; some states later appeared correctly, but several underlying causes were not conclusively established.
53 moments from the stream
- 0:01:03
Monitoring Stream Health and Connection Problems
After an earlier stream failed, connection settings were adjusted and YouTube Studio was kept visible to catch stream-health problems early. Cloudflare WARP was mentioned as a possible fallback if instability continued, without claiming it was tested or successful.
- 0:03:41
Coordinating Multiple Tools and Sessions for a Website UI
The discussion describes working on several website sections in parallel, with separate sessions left open for animation, a beacon element, and another section. The central workflow is to alternate between multiple tools while incrementally building and reviewing the project.
- 0:08:48
Turning Animated Rows into a Continuous Carousel
A UI review found that the second row moved faster than the first and that both visibly restarted. The requested change was matching speeds and creating a seamless continuous carousel, followed by another preview check because the speed mismatch still appeared visible.
- 0:10:07
Improving Beacon Legibility and Design from a Screenshot
A screenshot was used to review a beacon whose text blended into the background and was difficult to read. Proposed improvements included changing the font color, enlarging the text, and adding a futuristic or terminal-like interaction, approached incrementally.
- 0:12:58
Removing an Unwanted Section and Verifying Animation Consistency
An unwanted website section was requested for removal. A subsequent status indicated that both rows used identical animation, followed by a quick visual check of the result.
- 0:14:02
Diagnosing Stream Interruptions with Dropped Frames and Connection Health
The segment discusses a previous stream interruption and the possibility that a YouTube recording anomaly was connection-related. After configuration changes, dropped frames, ISP status, and stream health were monitored; the status showed excellent at that moment only.
- 0:15:42
Automatically Handling Deleted YouTube Videos
A discussion of automatically removing deleted videos from the stream section when their thumbnails disappear, with cached playlist data refreshing every two hours and no manual review required.
- 0:16:51
Defining Build and Waitlist Phase Behavior
A question about what the project interface should do when moving from the build phase to the waitlist phase, and whether the waitlist state has been configured.
- 0:18:03
Updating a Subscriber Progress Bar with the YouTube API
The captions examine periodically fetching a subscriber count for a progress card while considering YouTube API quota usage. A two-hour refresh was implemented, but falling back to zero when the API is unavailable emerged as behavior needing review.
- 0:20:05
Visual Interface Review Before Handoff
A request to inspect screenshots closely for small interface defects, such as an unintended empty circle, alongside clarification that the homepage phase was manually pinned rather than changing automatically by date.
- 0:25:27
Reorganizing the Interface Cards
The requested layout change removes an unneeded card and widens the Sanaa Guides card to match the main cards before adding animation and effects.
- 0:26:15
Limits of a Coding Agent’s Visual Judgment
An unsatisfactory screenshot prompted a review of the agent’s general instructions, project constraints, and environment context. The discussion concluded that a general coding agent may produce strong frontend work, but aesthetic judgment is not guaranteed and needs explicit standards and review.
- 0:28:52
Restricting Interaction to the Intended Card
The task was to remove click handlers and interactive attributes from two cards so that only the Sanaa Guides card remains clickable, and to check the view-details element.
- 0:30:05
Handing Work Between AI Agents
A practical explanation of requesting a handoff summary that records completed work, objectives, and remaining requirements, preferably in a Markdown file another agent can use. The requested handoff also needed to show the Beacon steps once it reaches the waitlist stage and beyond, not only the initial building step.
- 0:31:38
Focused Courses Derived from Live Builds
The proposed concept is to turn lessons from live builds into structured, focused crash courses, while postponing a launch until there is sufficient audience interest.
- 0:36:48
Designing a More Dynamic Progress Bar and Locked Card
Ideas included enlarging and emphasizing the progress bar, adding a sweeping shimmer, and giving the locked card a vault-like treatment with a scan line and ambient glow. The progress treatment and locked-state concept were selected for implementation, alongside a request to capture and visually review the states.
- 0:39:46
Reviewing Reported Interface States
The agent reported that the card rendered cleanly and referred to five working states and a clean build. These were in-session agent reports rather than independently documented verification.
- 0:40:52
Sanaa Guides Content Direction and Gold-Effect Cleanup
Possible focused courses would cover starting, building, shipping, and marketing an AI-enabled business if sufficient interest emerges. In the interface review, the progress bar was considered acceptable, while the sweeping gold effect still needed cleaner execution.
- 0:41:43
Tuning the beacon card animation and deferring state automation
Luqman reviewed the card’s sweep effect, asking that it remain inside the card and use irregular pacing, with one pass faster and another slower. He also considered automatic state switching through dates or configuration, but deferred automation because the future state flow and requirements were not yet clear.
- 0:47:40
Making the card stand out with cursor tracking and ambient glow
Luqman worked on separating the card more clearly from its background. He moved from a simple shimmer toward a hover-only circular light that tracks the cursor within the card, paired with an ambient glow behind the borders resembling sunrise rays. On review, he found the glow was not visible and the cursor effect still needed its visual intensity adjusted.
Got a question about something in this stream?
Ask in the group