ShipSF Workshops - Embed Generative UI Agents in Your App with Codex and Vercel

Highlights

• Vercel Sandbox spins up isolated microVM execution environments in a matter of a few hundred milliseconds.

• OpenAI ultra-fast service tier provides the code generation latency required to render dynamic user interfaces without noticeable user wait times.

• Vercel Drives provides persistent cross-sandbox storage, enabling read-write operations for user profile updates and immutable read-only drive snapshots for rendering generative UI without race conditions.

• Sandboxes bill strictly on ActiveCPU usage, enabling zero-cost pre-warming of agent backend environments before a user issues a command.

• Adding an explicit constraint like 'maximum 10 minutes to implement this' keeps long agentic coding loops on track and reduces execution drift.

• Multi-turn agent development sessions can be converted into reusable Markdown skills containing durable principles that agentify arbitrary applications without manual re-prompting.

Timeline

1. 00:00 - 09:28

   Demonstration of Embedded Generative UI and Architecture Overview

   A standard e-commerce store called Portside transforms into an agentic shopping assistant without hardcoded product views. Rather than outputting simple markdown text, the embedded Codex model writes functional UI controls directly into the browser to enable immediate purchasing. Pre-compiling the Rust-based Codex binary runtime accelerates local execution and agent harness bootstrapping.

   • Generative UI dynamically produces fully rendered functional components rather than relying on predetermined application screens.
   • The open-source Codex app server serves as an embedded backend agent that reads inventory data and writes state changes directly to the cart.
   • The ultra-fast service tier balances reasoning depth and token delivery speed to render interfaces on the fly.
2. 09:28 - 16:53

   State Isolation and Storage Architecture with Vercel Sandboxes and Drives

   Generating dynamic user interfaces requires running untrusted code safely outside the core application runtime. The agent architecture routes requests to two dedicated sandbox tiers: a private read-write environment for persisting profile details and an isolated runtime accessing read-only Drive snapshots. Freezing snapshot state protects generative UI rendering loops from mutating data hazards across concurrent browser sessions.

   • Vercel Sandboxes enforce security boundaries when running untrusted, model-generated code by provisioning isolated VMs within hundreds of milliseconds.
   • Vercel Drives decouples storage from ephemeral sandbox lifetimes to preserve tenant preferences across distinct sessions.
   • A dual-sandbox topology separates writable memory updates from immutable read-only snapshot mounts during interface generation.
   • Pre-warming idle sandboxes incurs zero cost under the ActiveCPU billing model while reducing latency to first token.
3. 16:53 - 22:28

   Live Personalization Implementation and Prompt Time-Boxing

   The personalization stage integrates custom JSON preferences and external style rules into the running agent backend in 8 minutes and 47 seconds. Compacting the active thread ensures persistent execution continuity during intensive test validation and file restructuring. The rendered UI reflects saved preferences by adjusting inseam recommendations and pre-selecting sizes on generated cart modules.

   • Codex context compaction allows continuous multi-turn execution without context overflow or historical step loss.
   • Enforcing an explicit 10-minute SLA constraint in prompt design improves execution efficiency during extended model tool runs.
   • The personalized stylist interface reads user dimensions and style guides to pre-populate sizing controls directly in generated UI elements.
4. 22:28 - 32:45

   Skillification and Dual-Project Vercel Deployment

   Forking development threads allows concurrent skill extraction and production deployment to Vercel without blocking developer flow. Abstracting architectural principles instead of specific store workflows enables the generated agentify-application skill to bootstrap agents in non-commerce repositories. Splitting the production infrastructure keeps business logic separate from sandbox orchestrations and drive volumes.

   • Skillification distills bespoke agent interactions into reusable Markdown instruction files that generalize across arbitrary application codebases.
   • The Vercel plugin packages deployment tools, observability diagnostics, and framework best practices into harnesses for automated delivery.
   • Production deployment splits duties between the original core application project and an isolated agent backend project.
5. 32:45 - 39:44

   Audience Q&A and Spectrum of Generative UI Control

   The workshop concludes with an architectural analysis of controlled versus fully generative UI generation. Rapid improvements in inference speed favor unconstrained, runtime-generated interfaces styled through simple text and asset definitions. A live test on the newly deployed Vercel production domain confirms persistent memory retrieval and end-to-end purchasing actions.

   • Codex desktop and custom harness threads provide granular control over model choice and reasoning parameters compared to fixed wrapper tools.
   • Generative UI spans a continuum from deterministic component catalogs selected via decision APIs to fully unconstrained code generation.
   • Updating shared Markdown style drives instantly modifies generated frontends in production without redeploying application code.