Built-in AI: The next frontier for web experiences presented by Miravia

[00:00] Thank you. [00:08] - Good afternoon, everyone. Welcome to the WebAI Summit, and I'm very thrilled to talk about the power and potential of building AI. [00:18] And we are going to dive into a real-world case study from Miravia to see exactly how they are using it to enhance their web experience. [00:30] So let me properly introduce myself. [00:33] My name is Cecilia, and I am a web ecosystem consultant at Google. [00:39] where I have the great privilege of working with developers to enhance their products with the latest web technologies, including web AI. [00:49] My partner from Miravia couldn't be here today, so I have the pleasure of representing them to share their story of adopting built-in AI. [01:02] So let's get to know Miravia a little bit more. You may not recognize the name, but you will probably know it's a parent company, Alibaba. Alibaba. [01:13] Miravia is their e-commerce platform for European users. [01:18] Because they get a massive amount of web traffic, the user experience is incredibly important to them. [01:27] They are always looking for an edge, which is what led them to explore web AI.

[01:33] Now I know Kenji already have a great introduction to you this morning for building AI, and as a quick refresher, [01:43] is essentially a set of APIs and features built directly into the browser. [01:50] So this allows you, the developer, to use the power of AI models and LLMs right on the user's device. [02:00] Thank you. [02:01] So let's focus on the busiest page on Meravia's entire site. [02:06] the product detail page. [02:09] Here, the team had a persistent pain point. [02:13] making sense of user reviews, [02:15] How do you help a customer quickly figure out if they should buy something based on hundreds of user comments? [02:23] At first, they did what most sides do. [02:27] just a long paginated list of all reviews. [02:31] It worked, but it was a messy mix of good and bad feedbacks. [02:36] Their next step was to group reviews by star ratings. [02:41] It's better [02:43] Then they added a server-side AI to create one big summary at the top, which you see in this as-is slide. [02:53] but they still noticed a problem. People like reading, people like reading the details in the reviews. They just don't have time to read them all. [03:03] That single summary helped, but it wasn't enough.

[03:07] So they thought, what if we could summarize the reviews within each rating group? [03:13] That would be a much more useful and user-friendly experience. [03:20] As AI tech got better, Moravia team had an idea for the perfect use case, letting the AI summarize all the user comments. [03:30] But that immediately raised a big question. [03:34] Do we do this on the server side or can we do it on the client side? [03:39] Okay. [03:40] They were already using server-side AI for the main summary at the top of the page. [03:46] But think about it, what happens when a user is clicking around, asking for summaries of different groups? [03:54] or when a popular item gets new reviews every minute. [04:00] Do you really want to hit your server with an API call every single time? [04:04] It's not ideal. [04:06] So when the Summarizer API was introduced, [04:10] It was a real aha moment for them. [04:12] They were excited to give it a try because it offered a clear path to take pressure off their servers and cutting down on the costs of their existing server-side AI. [04:26] So I am thrilled to tell you that the client side building AI, the Summarizer API helped me reveal [04:34] to do exactly what they wanted. [04:36] As a key early adopter for the API, their team moved incredibly fast

[04:42] to turn this concept into a reality. [04:46] Let's look at their live implementation together. [04:51] So as you can see, [04:53] By using the built-in AI Summarizer API, clicking on different ratings [04:58] generates real-time summaries of those user reviews [05:02] right on the client side [05:04] and the performance is just too fast. [05:09] So as soon as the Summarizer API hit the stable channel in Chrome 138, the Miravia team jumped right into A/B testing. [05:20] And get this. [05:21] The data they got back was incredible. [05:25] They saw a 12.4% jump in conversion rate on their product pages. [05:32] and the 3.3% lived for the entire website. [05:36] How exciting is that? [05:39] So with stable performance and such great user feedback, last month, Moravia confidently pushed the feature live to all of their product detail pages, starting from the language support for English. [05:55] So now you can go check it out for yourself. [05:59] head over to their site, Miravia, [06:02] pull up any product of set the language as English first, and check the review, and you will find the building AI, the summarizer API, hard at work everywhere.

[06:17] So you are probably wondering how this feature actually works. [06:21] I want to walk you through the implementation, and I hope by the end you will see that's surprisingly simple. [06:31] Okay, so the first thing you have to do is check for device support. [06:38] Remember, a key thing about built-in AI is that it depends on the right model and hardware being available. [06:46] The way you check for this is by calling summarizer.availability. [06:51] It will give you back a status code, and you just write your logic to handle the different cases from there. [06:59] Oh. [07:01] So let's break down how this actually works. [07:05] The process begins when you create a summarizer object and configure it with a prompt using shared context. [07:15] For this use case, [07:16] The AI is summarizing review text from a client-side JSON file. [07:22] The team needed a very concise [07:25] too long didn't read style summary, so they set the type to TLDR and the length to short. [07:32] From there, [07:33] The logic is simple. [07:35] They gather the review content. [07:37] format it. [07:39] and then pass it to the summarize method. [07:41] The result that comes back is the summary you see rendered on the web page.

[07:48] And that's the entire process. [07:51] As you can see, it's actually very straightforward to implement. [07:57] All right. [07:59] Let's wrap it up with the key takeaways. [08:02] So the number one lesson is this. [08:05] You need a smart loading strategy for building AI, actually. Miravia's playbook is simple and effective here. [08:15] Step one. [08:16] is check compatibility. [08:18] Step two, [08:19] start the download, but use a cloud fallback for a zero-wit experience. [08:26] Step three. [08:27] seamlessly switch to the on-device model when it's ready. [08:30] It's all about keeping the user experience fast and fluid. [08:36] And to close, I really want to encourage you to try the magic of building AI for yourself. [08:42] It's not a giant brain in the cloud or a heavy lifting server. It's your little client-side helper. [08:50] just making the UX better right in the browser. [08:54] It's free and simple to implement. So why not give it a try? [09:00] If you'd like to get all the details on Meravia's implementation, the QR code on the screen will take you to the complete case study. [09:09] You can also find a wealth of information about built-in AI on our Chrome for Developers site. [09:17] Most importantly, if you are inspired by this and want to bring it to life in your own projects, please reach out if you have any questions or ideas.

[09:29] Thank you all for your time and energy. I can't wait to see what you all have built with the power of building AI. That's all from me. Thank you so much.