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 developing a command center that connects a project map, task board, prompts, and coding-agent sessions. It compares running agents inside Electron with a hybrid workflow that sends structured prompts to Warp or Cursor while preserving operator visibility, intervention, and task-state synchronization. Practical work covered prompt generation, Warp launching, automated paste, and interactive Claude Code sessions, but testing exposed failed prompt transfer, misleading completion states, and limits in Warp tab automation, so the end-to-end workflow was not confirmed complete. The stream also explores screenshot-, DOM-, and Playwright-assisted UI reconstruction, design-reference research, and assigning models by agent role, with some connections, mappings, and visual results still unresolved. Additional useful discussions cover content automation and SEO, validating tools before selling or paying for them, diagnosing exhausted YouTube API quota, using a project map to resist distraction, learning in public, and creating more technical content in Arabic.
43 moments from the stream
- 0:01:26
Automating a Content Website and Validating Tools Before Selling
The speaker outlines general priorities for automating content distribution, improving a website for search, and connecting it with published content. He also mentions examples of tools he personally uses, including tools for ecommerce, hosting, and domains, and stresses using a tool and validating its value before offering it for sale.
- 0:07:03
Cursor and Warp: Choosing an IDE for UI Work
The speaker compares Warp, Cursor, and a previous environment. Warp remains his main IDE, but he considers Cursor better suited to UI work because of its integrated browser, screenshot sharing, and terminal copy-and-paste support. He attributes leaving the previous environment to its terminal sandboxing and transfer restrictions.
- 0:10:12
Diagnosing a Stream Thumbnail Update Failure Through the YouTube API
When the website's stream thumbnail did not update automatically, the diagnosis indicated that the YouTube API quota had been exhausted. The speaker said he changed how the quota was consumed to reduce premature exhaustion after the reset, but live verification of the result was still pending.
- 0:14:04
Using an Embedded Browser and Screenshots in a UI Workflow
The speaker explores opening the stream and other websites inside the IDE through its browser command, then tests capturing and copying a selected screen area. He proposes using this visual context to help research UI implementation approaches and brainstorm design, without reaching a finished design in this segment.
- 0:20:14
Combining Screenshots with DOM Elements via Playwright MCP
The speaker explains a workflow for helping a coding agent understand a website visually rather than from code alone: provide a screenshot together with the relevant class or DOM element for a CTA, then try to recreate a similar design. He attempted to use Playwright MCP for this, but the connection failed; the investigation suggested that a package named in the JSON configuration might not exist on npm, with no confirmed fix shown on this page. He also speculated, rather than confirmed, that Gemini may support viewing a site through screenshots.
- 0:25:14
Inspecting and Rebuilding a CTA with AI Assistance
An experiment in visually rebuilding a CTA by collecting its outer HTML and a screenshot, then using Playwright to inspect the live page, animation, and colors. The discussion explains why the assistant is first asked to describe and understand the element before producing a reusable, responsive React and Tailwind version, with the test requesting the same warm visual treatment; final accuracy is not established.
- 0:29:32
Outer HTML vs. Inner HTML
A brief practical distinction: outer HTML includes the selected element itself and its contents, while inner HTML contains only what is inside the element. The distinction arose while trying to extract a complete UI element for reconstruction.
- 0:38:58
Building a Button with a Subtle Green Electric Effect
The speaker rebuilt a button component with its required CSS, then described the desired visual as a subtle green electric animation or effect for the site. He noted that the fine-tuning was not critical but was part of learning while building.
- 0:41:53
Assigning AI Tools to Frontend and Backend Work
The speaker relayed a second-hand impression that an imprecisely identified Codex configuration may be better at UI work, and said he uses Claude for backend work. This was an informal opinion, not a tested comparison.
- 0:44:32
Evaluating a Paid Upgrade by Usage and ROI
The speaker said he would consider a paid upgrade only if he used the tool frequently, gained practical value from it, and could identify a clear return on investment. The tool name and some plan terminology are unclear in the captions.
- 0:47:33
Using Visual References to Design a Goal Tracker
After observing that the result differed mainly in its animation logic while consuming substantial context, the speaker searched for high-quality goal-tracker designs and effects. He cited Dribbble and Behance as inspiration sources and concluded that finding suitable examples and building from them could make UI experimentation more effective, while still checking whether examples included the desired animation.
- 0:53:33
Concept for a UI-Element-to-Code Extension
The speaker proposed an extension that would extract UI elements from pages and provide corresponding code. The captions present this only as an idea, with no indication that it was built or tested.
- 0:54:36
Planning a Command Center That Connects Workflow, Tasks, and Agents
The work shifts to a UI-centered command center, using design examples and a review of the original specification and project history before execution. The concept connects a project swim-lane view, task board, and agent hub, with particular attention to what is complete, what comes next, and how the views form one workflow.
- 0:59:33
Designing an Agentic Task Board with Multiple Execution Modes
The task board models status, priority, dependencies, and blockers while allowing human, agent, or paired execution. Prompts can be customized with acceptance criteria, constraints, and context files, then used in a sequential research, planning, and building workflow. Strengthening the system instructions and project context remains an open design challenge, and the interface is still evolving.
- 1:05:27
Single Dispatch and Sequential Prompt Pipelines
The prompt tab supports two flows: single dispatch with one selected agent type, and a sequential pipeline that explores, plans, and builds, feeding each stage’s output into the next prompt. Prompt preview produces a plain Markdown document intended for pasting into a coding session, not an API system message; it assembles project context, codebase information, and fixed instructions associated with the agent type.
- 1:11:37
Using NotebookLM to Build Deeper Research Context
The speaker explains that tool choice depends on the task: he generally prefers another tool for broad research, but used NotebookLM to combine material from a book with research reports, extract the results, and pass that context to a language model for better brainstorming. This is a personal workflow, not a conclusive benchmark of the tools.
- 1:13:15
From Prompt Generation to Actual Task Execution
The discussion clarifies that the current run-task action only copies a prompt to the clipboard, leaving the user to paste it into a terminal manually. There is not yet IDE integration, process spawning, or dispatch to a selected terminal. Real execution would require a way to discover terminals and associate each task with the correct runtime, and the briefly examined multi-agent coding tool did not fully match that need.
- 1:16:32
Interactive agent sessions or a fully automated workflow?
The group discusses how an Electron app could send prompts into terminal sessions. Launching a visible Warp session preserves the ability to watch and interact with the agent, but results still return manually; running Claude Code as a child process or through an SDK gives the app structured output and lifecycle control, while requiring its own interface for agent activity. The choice remained open, with a manual step considered acceptable if it avoids unnecessary complexity.
- 1:19:39
Streaming as a way to learn and share knowledge
The speaker describes streaming as somewhat distracting but valuable for personal learning, and believes sharing the work may help others benefit from the practice of building AI applications.
- 1:23:49
Synchronizing task state through a project file
A project file that continuously records task status was proposed as a way to send execution state back to the app even when the session runs in an external terminal. The state-sync pattern was described as already established in the codebase, while the mechanism for launching Warp with the requested command did not yet exist.
Got a question about something in this stream?
Ask in the group