A deep dive into four internal mechanisms powering EGP Code, Mercari's AI-driven landing page editor. The post covers: (1) a recursive agent loop where the AI reasons, calls tools, and self-corrects on errors; (2) real-time sync using Firestore so users see live progress without WebSockets; (3) a browser-native test runner built on @vitest/expect and Testing Library that runs inside an iframe; and (4) a mapping table using injected data-egp-src-id attributes to link rendered preview elements back to their positions in the HTML source, enabling Monaco editor jumps and precise AI instructions. The article also details real-time steering — injecting mid-flight instructions into an already-running agent loop — and how Zero Data Retention requirements led to self-managed conversation history.
