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
- 4:05:51
Why He Prefers Cursor for Web Development Work
He explains his preference for Cursor in web workflows because it is a full IDE that can display a site, support interaction with page elements, and capture screenshots in the workspace. He contrasts this with Warp, which he says is not an IDE in the same sense, and notes frustration with slow agents and changes that are difficult to see.
- 4:08:21
Evaluating How Plugins Affect a Coding Agent’s Output
Luqman ran a coding agent and reviewed its screenshots to see whether plugins would produce work clearly different from the earlier attempt. The result remained unclear, and he did not consider the task complete.
- 4:11:41
Configuring Models, Skills, and File Protections in an Agent Environment
Luqman configured a coding-agent environment by narrowing the available model selection, confirming imported plugins and skills, and reviewing permission prompts, browser and MCP tools, plus safeguards against automatic file deletion or modification. Some model names and versions are unclear in the captions.
- 4:15:29
Starting a Project with an Agent and Considering Context-Window Limits
Luqman switched to another project folder to begin from scratch and preferred working through the agent instead of the integrated terminal. He selected a model, then noted that context-window capacity could be a limitation worth testing.
- 4:22:40
Diagnosing a Missing Hero-Section Animation
A supposedly persistent hero-section animation appeared only briefly and then disappeared, or was not visible at all. After the agent reported adding a periodic sweeping green light bar, the change was still absent on the development server, so the next task was to investigate the visibility failure using the available tools and skills; the captions do not establish a successful fix.
- 4:26:54
Notes on a Multi-Tool Agent Workflow
Although project progress felt slow, the speaker said the session improved his understanding of his workflow setup. He mentioned several tools and highlighted Warp's ability to run multiple agents across parallel tabs, while noting that, at the time of the session, Warp was not an IDE and did not allow the website to be embedded within the editing environment; he added only as a personal expectation that it might evolve in that direction.
- 4:28:06
Live Preview and Element References in AI Coding IDEs
The speaker compares Cursor and Antigravity in practice, explaining how an embedded site preview, screenshots, and references to selected elements or their code can make agent guidance easier. In his view, terminal sandboxing can constrain the workflow, while seeing interface changes live is essential for website development.
- 4:30:33
Diagnosing Frontend Changes Missing from the Dev Preview
When a requested animation remained invisible after page refreshes, the speaker asked the agent to stop guessing at code changes and diagnose why the updates were not appearing. The investigation pointed to a possible mismatch between a server or process on port 3000 and the page being viewed on 3002, but the page does not establish a confirmed final resolution.
- 4:37:09
File Diagnostics and Multiple Projects in Cursor
The speaker notes that IDEs can expose file-level problems more clearly than working through a terminal alone, then asks for research on whether Cursor can open multiple projects at once. This page does not contain the answer.
- 4:39:19
Running Multiple Cursor Windows for Different Projects
The discussion explains that multiple Cursor instances can run simultaneously, with a separate window for each unrelated project, and mentions a shortcut for opening a new window.
- 4:40:45
Isolating Missing Frontend Animations
When UI changes did not appear on the local server, a pulsing red badge was used as a diagnostic marker. Seeing the badge while other animations remained absent supported the conclusion that the issue was in the code. Concurrent servers or ports from parallel work were then proposed as a possible source of interference, prompting a test focused on one section only.
- 4:50:15
Diagnosing a UI Animation That Would Not Render Correctly
The debugging process first separated a possible server problem from a code problem. The review then indicated that CSS-class animation and a style tag might not work in the environment, so the implementation moved to the motion library already present in the project. The animation became visible, shifting attention to subtler lighting, the rotating line, and centered text. Some conclusions remained based on visual iteration, and the speaker acknowledged a learning curve in specifying fine-grained UI changes.
- 5:01:22
Can Cursor Be Launched from an External App?
The speaker explored adding a button that would open a terminal or agent inside Cursor from an external app. The answer presented during the session said there was no direct equivalent path and suggested that a possible solution would require a small extension running inside the VS Code-compatible environment. The idea was therefore treated as a separate project and deferred.
- 5:03:11
Iterating on a Card Lighting Effect
Further iterations tried to correct a light sweep inside a card after the effect remained confined near the top or could not be seen. The discussion referenced measuring its position, revisiting blend modes and keyframes, and shortening the delay between changes and visual checks. The desired result was not conclusively achieved on this page.
- 5:08:57
Making UI Changes Visible and Testable
While refining the hero section, the requested approach was to make visual changes more pronounced so the direction could be evaluated, and to use screenshots to inspect the result. Once the gold sweep became clearly visible, it was retained while the top glow and another moving effect inside the box were marked for removal.
- 5:16:04
Tuning Motion Paths and Diagnosing an Invisible Effect
The review specified directions for animated border lines and aimed to connect motion visually between interface elements. After a static green wash became visible over the hero section, the speaker concluded that the problem was in the effect’s implementation rather than the server, suggesting Framer Motion or other approaches if the CSS implementation was not working; some element names and phrasing are unclear in the captions.
- 5:22:01
Refining Connector-Line Motion in a Hero Section
He directs UI motion changes: remove an unsuitable transition, stop the command center from glowing, and launch two lines from one point beneath the box so they travel left and right at equal speed. After replacing the CSS-based approach with a motion element, the sweep became visible, and he asked for a subtler background treatment with thinner lines and a restrained design feel.
- 5:26:37
An Opinion on Warp for Backend and Web Work
He says Warp is good, especially for backend work, while suggesting that website work may call for another tool or approach. The final wording is unclear in the captions, so no more specific recommendation is attributed to him.
- 5:28:20
AI Website Building: WordPress or Newer Platforms?
Asked whether an AI-built website can be placed on WordPress, he says it is possible but notes that he does not work much with WordPress. He leans more toward Vercel and Cloudflare and views WordPress as comparatively dated in the AI-tooling context, presenting this as his own preference rather than an absolute rule.
- 5:29:35
Refining the hero section’s color and motion
He reviews a hero design and asks to preserve its structure while reducing the dominance of green, with a black dotted-grid center grading toward green. He rejects a later execution because the lines produce a childish, snake-game-like appearance.
Got a question about something in this stream?
Ask in the group