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 session centers on building a low-maintenance stream hub and connecting it to YouTube so live status, schedules, and upcoming broadcasts update automatically, with a static fallback. Practical work covered YouTube Data API setup, Cloudflare variables, diagnosing an API-key restriction and an uncommitted file that broke deployment, then designing distinct live/offline cards, playlist sections, and a scrollable video carousel. Some offline-state priorities, day-versus-night organization, and a local refresh error remained unresolved. The discussion provisionally favored sending viewers to YouTube instead of embedding the player, especially for mobile usability and native engagement. It also offered personal, exploratory comparisons of Cursor, Antigravity, and Warp; task routing between Codex and Claude; parallel workflows and context handoffs; and coding-agent permission configuration that treated file deletion and GitHub pushes as sensitive exceptions. Terminal sandboxing and screenshot routing were criticized without a systematic final tool verdict. A separate command-center concept combined a timeline project map, subtask nodes, specialized agents, execution-attempt tracking, and automatic prompt assembly from project context and instruction files. Landing-page workstreams included Telegram community promotions, simplifying the email-capture area, and restructuring the “What I’m Building” section around audience needs, with several information-architecture options left undecided. On design, the discussion argued that visual references, precise spacing and motion specifications, and repeated human review matter more than broad labels such as “premium,” and that paid effects libraries are most valuable when they save substantial engineering time. Another experiment involved a goal-tracker-style visual counter, structured JSON handoffs between agents, and a proposed Playwright MCP browser connection; the captions do not confirm that the connection or implementation was completed. Additional questions covered SEO and traffic measurement for Egypt and MENA, the marketing and distribution gap facing AI-product builders, and general B2B-versus-B2C SaaS trade-offs, without documented final research findings or tests.
53 moments from the stream
- 1:14:56
Three Interface Patterns for Live Streams and Replays
Options included a thumbnail card that opens YouTube during a live stream, or an embedded video with a prominent bar directing viewers to YouTube for chat and the full experience, while treating replays differently. The click-through option was provisionally favored because it preserves engagement and watch time and works simply on mobile, despite sending visitors away from the site.
- 1:16:32
Coding-Tool Friction and Considering a Move to Cursor
The speaker expressed frustration with sandboxing constraints in the current coding tool and said he might use it less and move to Cursor, which he viewed as more established and widely known. No hands-on comparison or systematic test between the tools was presented.
- 1:17:38
Different Stream Cards for Live and Offline States
The proposed design settled on a clickable thumbnail while live and a different static image while offline, with clearer status treatment and more polished visuals. The discussion said the YouTube API supplies data such as the title, video ID, and live thumbnail during a broadcast, while the offline state could not be previewed during the active stream.
- 1:22:18
Linking the Site’s Live Thumbnail to YouTube Instead of Embedding the Player
The site UI shows a live thumbnail with a green border and sends viewers to YouTube when clicked. This was preferred over embedding the stream because reproducing subscriptions, likes, chat, and a strong mobile experience on the site would be difficult; an offline state with gold styling and schedule information was also proposed.
- 1:24:36
Automatically Updating Stream Status and Schedule via the YouTube API
The discussion covers making stream duration, viewer count, and hero-banner status dynamic. The proposed system keeps a static fallback schedule while periodically querying the YouTube API; scheduled or active broadcasts can override the fallback with details such as title, time, video ID, viewers, and start time. The caption ends before every offline-state priority is fully explained.
- 1:28:15
Scheduling Multiple YouTube Streams in Advance
A discussion of scheduling several streams ahead of time, when subscribers are expected to receive notifications, and how upcoming streams appear in date order on the channel. The discussion concluded that batch scheduling is practical and that notifications arrive near each stream rather than all at scheduling time.
- 1:31:33
Designing the No-Upcoming-Stream State
The website fallback was reframed around advance scheduling: it appears only when there are genuinely no upcoming streams and becomes a brief return-soon message with a clear channel CTA. The discussion also noted that watching directly inside the site could provide a weaker experience, especially on mobile.
- 1:34:14
Connecting the Website Stream Section to YouTube
Practical work removed static schedule cards and surfaced pre-scheduled streams on the website. A missing-module build error appeared during the refresh; later, the interface showed states such as YouTube synchronization and live status, and the section was described as complete.
- 1:43:56
Organizing Day and Night Streams Separately
A review of the dynamic stream interface proposed distinguishing the main daytime streams from nighttime streams on the website, using two separate YouTube playlists. The captions end while playlist settings are being located, so the implementation details remain unresolved.
- 1:48:50
Embedding YouTube Playlists in a Website
The discussion proposes presenting two stream playlists as cards, fetching the videos within each playlist, and showing them in a clickable carousel that links to individual YouTube videos. One playlist was empty at the time.
- 1:52:33
Reviewing Playlist Data and a Local Refresh Error
The review showed real playlist data and video cards with thumbnails, while the empty playlist appeared as expected. Refreshing localhost then surfaced a webpack-modules error, with no resolution documented in these captions.
- 1:54:28
Designing a Scrollable Video Carousel and Empty State
The stream playlist carousel was intended to scroll through a bounded number of videos and end with a full “View all” card linking to the complete playlist rather than only a text link. The discussion also covers hiding an empty night-stream section and revealing it automatically after its first video is added.
- 2:01:39
Diagnosing Drag-to-Scroll in a Carousel
The interface was checked locally after the carousel would not scroll and lacked dragging. After several retries and refreshes, drag-to-scroll was considered acceptable for the moment, with a request to ensure it was also present in another build.
- 2:06:24
Handing Off Design Context Between AI Models
The discussion explains asking one model for a hand-off prompt that transfers a specific design and its technical context to another model in a separate terminal. This supports a second opinion or alternative implementation without restating the whole project, while both tasks continue in parallel.
- 2:08:40
Restructuring a Project Section for Its Audience
The discussion analyzes a landing page’s “What I’m Building” section by asking what the audience needs to understand and why they should care. It proposes foregrounding a usable central tool instead of a complex architecture diagram, then compares three structures: a simpler hierarchy in one section, two separate sections, or one section with two intent-based tiers. No option is finalized in these pages, and a hand-off prompt is requested to explore the third direction.
- 2:19:42
Why AI Agents Produce Generic UI
The presenter asks whether skills and plugins are the missing ingredients in an AI landing-page workflow. The agent’s response offers a different diagnosis: the larger gap is visual references, because a text-only design system tends to steer agents toward generic, repetitive aesthetics.
- 2:25:37
How Terminal Sandboxing Affects Screenshot-Based Design Workflows
The presenter discusses a 26 February 2026 update that added terminal sandboxing to Antigravity IDE. In his view, the restrictions hinder copying content and sending screenshots into external tools or workspaces, even though screenshots help agents analyze and recreate visual effects.
- 2:27:05
Comparing Agentic Coding Environments and In-Editor Preview
The speaker compared running multiple agent tasks in parallel with an environment that embeds the website inside the editor for live updates. Integrated preview and possible terminal-sandboxing concerns were discussed as practical factors when choosing a workspace.
- 2:27:29
How to Convey Visual Taste to a Coding Agent
A polished interface needs more than textual component anatomy: reference screenshots, an explicit spacing system, micro-interaction and easing specifications, one finished reference component, and a visual-audit checklist. The discussion argued that agents follow precise rules well, while labels such as “premium” do not by themselves define the desired craft.
- 2:31:13
The Practical Limits of Recreating Animated Effects with Agents
A question asked whether an agent could inspect and reproduce an animated web experience. The discussed answer said agents can generally implement CSS animation, scroll-triggered sequences, and interactive effects, but fetched markup does not reveal the full motion experience. Polished results still require a human to inspect iterations and give specific numerical feedback about timing, easing, masks, and related details.
Got a question about something in this stream?
Ask in the group