AI Live Content Preview
Type a business description below and watch AI generate a complete hero section in real-time. This demo combines three WordPress 7.0 systems in one closed loop: Interactivity API (reactive state via Preact signals), Client-Side Abilities (browser-callable AI), and Block Bindings (persistent storage).
Note: You must be logged in to WordPress for the AI generation to work (requires REST API authentication). Try descriptions like “Digital marketing agency in Austin specializing in SEO for SaaS companies” or “Luxury home renovation contractor in Denver.”
How It Works
1. Reactive Input
The textarea uses data-wp-on--input to capture every keystroke. The Interactivity API’s Preact signals update the reactive state — no virtual DOM diffing.
2. Debounced AI Call
After 1.5s of typing pause, the store calls generate-hero-content and generate-stats-content abilities via REST. Both are server-side Orbit abilities bridged to JS.
3. Live DOM Update
As the response arrives, data-wp-text directives update the headline, subtext, CTA, and stats instantly. data-wp-each renders the stats row. Zero DOM manipulation code needed.