AI in the browser: Smarter Angular apps with WebNN and Prompt API

In this session, we will explore the integration of Generative AI functions into Angular applications using the Web Neural Network (WebNN) API and Prompt API. These APIs enable the execution of Large Language Models (LLM) models on the user’s device. The primary benefits of local execution include offline availability and data security, provided that the user’s device has sufficient power to run the AI models. During the presentation, we will discuss different use cases and compare the advantages and disadvantages of each solution. Join us to learn how to make your Angular app smarter.

Transcript

1. AI in the Browser Smarter Angular Apps with WebNN and Prompt API Christian Liebel @christianliebel Consultant
2. Hello, it’s me. AI in the Browser Christian Liebel W3C WebApps & WebML TAG Associate christian.liebel @thinktecture.com Angular, PWA & Generative AI Microsoft MVP & Google GDE (Angular, Web) Smarter Angular Apps with WebNN and Prompt API
3. Rule-based algorithms are limited in their capabilities. AI in the Browser Why should you care about AI? Smarter Angular Apps with WebNN and Prompt API
4. Use AI to implement use cases that are difficult or impossible to implement using rule-based algorithms. AI in the Browser Why should you care about AI? Smarter Angular Apps with WebNN and Prompt API
5. Examples AI in the Browser Generative AI Cloud Providers Smarter Angular Apps with WebNN and Prompt API
6. Drawbacks AI in the Browser Generative AI Cloud Providers Require a (stable) internet connection Subject to network latency and server availability Data is transferred to the cloud service Require a subscription Smarter Angular Apps with WebNN and Prompt API
7. Bring Your Own AI (BYOAI) – Libraries – WebLLM – Frameworks – Transformers.js – ONNX Runtime – TensorFlow.js – APIs – WebGPU, WebNN – Cross-Origin Storage NEW! Built-in AI (BIAI) – Writing Assistance APIs – Summarizer API – Writer API – Rewriter API – Proofreader API NEW! – Translator & Language Detector APIs – Prompt API NEW! Multimodal input & structured output – WebMCP NEW! AI in the Browser Web AI Landscape Smarter Angular Apps with WebNN and Prompt API
8. https://webllm.mlc.ai/ AI in the Browser WebLLM DEMO Smarter Angular Apps with WebNN and Prompt API
9. On NPM AI in the Browser WebLLM Smarter Angular Apps with WebNN and Prompt API
10. Chat with your data AI in the Browser WebLLM DEMO Smarter Angular Apps with WebNN and Prompt API
11. Storing model files locally AI in the Browser WebLLM Internet Website HTML/JS Cache with model files Hugging Face Note: Due to the Same-Origin Policy, models cannot be shared across origins. Smarter Angular Apps with WebNN and Prompt API
12. Model Size Comparison Model:Parameters Size qwen3:4b 2.5 GB mistral:7b 4.4 GB deepseek-r1:8b 5.2 GB gemma3n:e4b 7.5 GB gpt-oss:20b 14 GB llama4:16x17b 67 GB AI in the Browser WebLLM Smarter Angular Apps with WebNN and Prompt API
13. https://huggingface.co/docs/transformers.js/index AI in the Browser Transformers.js DEMO Smarter Angular Apps with WebNN and Prompt API
14. AI in the Browser WebGPU – Grants low-level access to the Graphics Processing Unit (GPU) – Near native performance for machine learning applications – Supported by Chromium-based browsers on Windows and macOS from version 113, Safari 26 NEW!, and Firefox 141 on Windows Smarter Angular Apps with WebNN and Prompt API
15. – Grants web apps access to the device’s CPU, GPU and Neural Processing Unit (NPU) – In specification by the WebML Working Group at W3C – Implementation in progress in Chromium (behind a flag) – Better performance for specific workloads AI in the Browser WebNN Source: https://webmachinelearning.github.io/webnn-intro/ Smarter Angular Apps with WebNN and Prompt API
16. AI in the Browser WebNN https://huggingface.co/webnn/spaces Smarter Angular Apps with WebNN and Prompt API DEMO
17. Drawbacks AI in the Browser Bring Your Own AI Models can’t be shared across origins Inference is fast, but doesn’t reach full native speed Smarter Angular Apps with WebNN and Prompt API
18. https://github.com/explainers-by-googlers/cross-origin-storage AI in the Browser Cross-Origin Storage DEMO Smarter Angular Apps with WebNN and Prompt API
19. Cloud only… AI in the Browser Realtime Models DEMO Smarter Angular Apps with WebNN and Prompt API
20. …or is it? NEW! AI in the Browser Realtime Models DEMO Smarter Angular Apps with WebNN and Prompt API
21. On-device pipeline AI in the Browser Realtime Models Whisper (STT) Silero (VAD) SmolLM2- 1.7B (LLM) Kokoro (TTS) Smarter Angular Apps with WebNN and Prompt API
22. Bring Your Own AI (BYOAI) – Libraries – WebLLM – Frameworks – Transformers.js – ONNX Runtime – TensorFlow.js – APIs – WebGPU, WebNN – Cross-Origin Storage NEW! Built-in AI (BIAI) – Writing Assistance APIs – Summarizer API – Writer API – Rewriter API – Proofreader API NEW! – Translator & Language Detector APIs – Prompt API NEW! Multimodal input & structured output – WebMCP NEW! AI in the Browser Web AI Landscape Smarter Angular Apps with WebNN and Prompt API
23. AI in the Browser Built-in AI Operating System Website HTML/JS Browser Internet Apple Intelligence Gemini Nano Smarter Angular Apps with WebNN and Prompt API
24. – Initiative by Google Chrome – Exploratory APIs for local experiments and use case determination – Downloads AI models into Google Chrome – Models are shared across origins – Uses native APIs directly (full performance) AI in the Browser Built-in AI https://developer.chrome.com/docs/ai/built-in Smarter Angular Apps with WebNN and Prompt API
25. Incubated by the WebML CG AI in the Browser Built-in AI APIs https://webmachinelearning.github.io/incubations/ DEMO Smarter Angular Apps with WebNN and Prompt API
26. AI in the Browser Multimodal Models Smarter Angular Apps with WebNN and Prompt API
27. AI in the Browser Multimodal Models DEMO Smarter Angular Apps with WebNN and Prompt API
28. AI in the Browser Structured Output DEMO https://bandarra.me/apps/flyby/ Smarter Angular Apps with WebNN and Prompt API
29. about://flags Enables optimization guide on device à EnabledBypassPerfRequirement (API) for Gemini Nano à Enabled AI in the Browser Built-in AI APIs Smarter Angular Apps with WebNN and Prompt API
30. TypeScript Definitions AI in the Browser Built-in AI APIs Smarter Angular Apps with WebNN and Prompt API
31. Structured Output & Signal Forms AI in the Browser Built-in AI APIs DEMO Smarter Angular Apps with WebNN and Prompt API
32. AI in the Browser Agentic Browsers Smarter Angular Apps with WebNN and Prompt API
33. AI in the Browser WebMCP – Allows websites to expose tools to the browser or external agents – Joint effort by Microsoft and Google https://github.com/webmachinelearning/webmcp Smarter Angular Apps with WebNN and Prompt API
34. AI in the Browser WebMCP https://www.youtube.com/watch?v=gbu9kyY2B60 Smarter Angular Apps with WebNN and Prompt API
35. AI in the Browser WebMCP https://mcp-ui.mcp-b.ai/ Smarter Angular Apps with WebNN and Prompt API DEMO
36. Pros & Cons + Data does not leave the browser (privacy) + High availability (offline support) + Low latency + Stability (no external API changes) + Low cost – Lower response quality – Less capable – High system (RAM, GPU) and bandwidth requirements – Large model size, models cannot always be shared – Model initialization and inference are relatively slow – APIs are experimental AI in the Browser Web AI Smarter Angular Apps with WebNN and Prompt API
37. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com Slides