Beyond the Demo: Building the Web AI Playbook


 

Beyond the Demo: An Open Invitation to Build the Web AI Playbook

Web AI Summit 2025 was an energizing event, and I was thrilled to be a part of it with my talk, “Beyond the demo: building the Web AI playbook.” The videos for all the talks will soon be available on YouTube. In the meantime, you can view and remix my Deck.

The talk focused on a challenge I believe many of us in the community feel right now: the “Playbook Vacuum.” We have all seen many compelling AI Demos running right in the browser. But when it comes to shipping that energy to production environments, there’s a significant disconnect, or signal loss. I believe that this is largely due to a lack of “how-to” guidance. There are too many unanswered questions, crucial bits that are left as an exercise to the developer in the trenches.


Why The Web AI Playbook is Empty

"AI isn't the final sprig of parsley. Unlike, say Performance APIs, just adding AI doesn't automatically unlock value, and it might even have a negative impact if done poorly."

The disconnect isn’t about the technology. We have powerful tools like WebGPU, WebNN, and new built-in AI APIs. The vacuum exists because we lack the shared use-case patterns, validation methods, and production-ready guidance that has defined previous eras of web development.

  • Many demos are technologically focused, but UX- and business naive. They make for a cool technological showcase, but beneath the shiny AI veneer, they’re full of assumptions that don’t hold. They often expect users to drastically change their habits to embrace a whole different UX paradigm and endure its inevitable letdowns while the technology and user expectations converge.
  • AI isn’t the final sprig of parsley. If you take web performance, there is a plethora of use cases, and a much simpler ‘Speed matters’ story. But remember, the simplicity and proven value in web performance were earned through years of defining consensus metrics, building shared tooling like Lighthouse, and publishing lessons learned or results from A/B experiments. Just adding AI doesn’t automatically add user or business value, and it might even have a negative impact if done poorly. Our goal now is to earn that same clarity for Web AI.

My talk was a starting point, a few ideas and a lay of the land to guide our collective journey in filling that vacuum.


Key Ideas from the Deck

"The goal is to create Subtle & Helpful AI that disappears into the background, augmenting existing workflows instead of interrupting or forking them."

The deck introduces a few core concepts and principles we need to align on:

  • The Spectrum of Development: Understanding where you are is critical.
    • The Paved Road: Leveraging high-level, Built-in AI APIs for speed, simplicity, and safety. This is the path for fast validation and broad reach.
    • The Open Field: Utilizing low-level APIs (like WebGPU and WebNN) for maximum control, custom model deployment, and bleeding-edge performance.
  • The Philosophy of Artfully Applied AI: Instead of seeing AI as something you tack on your website (an anti-pattern often resulting in a distracting AI chat bot), the goal is to create Subtle & Helpful AI that disappears into the background, augmenting existing workflows instead of interrupting or forking them. I call it “Artfully Applied” because, right now, until we have proven patterns from our playbook, we have to rely on our best instincts. As we document and validate successful patterns, we will gradually transition from art to science.

The Productionization Hurdle: Monitoring Client-Side AI

A perfect example of the Playbook Vacuum is the challenge of observability. Partners have been asking: How do we monitor the performance and quality of our client-side AI features?

For most teams, a DIY approach to monitoring isn’t scalable. They need integration with existing tools like RUM (Real User Monitoring) and analytics platforms. The seamless integration of Web AI performance and quality metrics into these established monitoring tools is not yet a clear or sufficiently documented paved road.

I’m keen to connect with others to identify and address these critical gaps, be it awareness, functional or a lack of recipes. Let’s make it easier for all to productionize valuable Web AI experiences.


The Making Of: GenAI and Lo-Fi Hacks

Just like the Web AI Summit 2024 deck, which used a classic neon-retrowave inspired theme, I wanted to continue with a distinct 1980s vibe.

To achieve this highly specific look, I employed a mix of high-tech and “practical effects”:

  • Design Informed by Data & Theory: I don’t have a formal designer background, so I do my best to ground myself in design principles learned over the years from influential books like The Non-Designer’s Design Book by Robin Williams, Presentation Zen by Garr Reynolds, and works by Edward Tufte and Stephen Few. I also leverage my understanding of color theory to ensure intentional and effective visual communication.
  • Typography: To capture the 80s aesthetic, I researched commonly used fonts and settled on the Google Fonts Grotesk and Rockwell as close approximations to the period’s standard choices.
  • AI for Consistency and Scope: The vast majority of the visuals were created with AI (using Gemini and Veo for animations). This approach ensured visual consistency across the deck, allowing me to directly express what I had in mind. Before AI, I would have a specific idea, then spend hours looking for stock photos or illustrations, inevitably making compromises. With AI, it’s increasingly easier, and much faster, to get what you want.
  • Lo-Fi Tricks for Fine Detail: Despite using AI generation, I still lean on lo-fi hacks to work around technological limitations, be it GenAI or Google Slides. If you’re curious, make a copy of the deck and inspect the AI Era Jurassic Chrome logo, it’s a clever montage of the Chrome offline T-rex and basic shapes used to “carve out” more complex forms. Proof that sometimes the simplest workarounds are the most effective!

An Open Invitation: Let’s Write the Next Pages Together

One thing is clear: I don’t have all the answers. That’s why this “playbook vacuum” is an open call to action.

I am inviting the community to join us and our partners to explore use cases and UX patterns, validate them, and contribute to the tooling and guidance needed to help everyone productionize valuable AI more easily.

This deck is an initial set of ideas to prime the pump. Please feel free to reuse, adapt, or challenge any of the slides or concepts for your own work. The Web AI playbook is officially open—let’s write the rest of the chapters together.