Built-in AI
Die AI-Revolution direkt im Browser
Christian Liebel
@christianliebel
Consultant
Slide 2
Slide 2 text
Hello, it’s me.
Built-in AI
Christian Liebel
W3C
WebML WG & CG
TAG Associate
christian.liebel
@thinktecture.com
Angular, PWA
& Generative AI
Microsoft MVP &
Google GDE
(Angular, Web)
Die AI-Revolution direkt im Browser
Slide 3
Slide 3 text
Rule-based algorithms are
limited in their capabilities.
Built-in AI
Why should you care about AI?
Die AI-Revolution direkt im Browser
Slide 4
Slide 4 text
Use AI to implement use cases
that are difficult or impossible
to implement using rule-based
algorithms.
Built-in AI
Why should you care about AI?
Die AI-Revolution direkt im Browser
Slide 5
Slide 5 text
Examples
Built-in AI
Generative AI Cloud Providers
Die AI-Revolution direkt im Browser
Slide 6
Slide 6 text
Drawbacks
Built-in AI
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
Die AI-Revolution direkt im Browser
Slide 7
Slide 7 text
Bring Your Own AI (BYOAI)
– Libraries
– WebLLM
– Transfomers.js
– Frameworks
– 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
– WebMCP NEW!
Built-in AI
Web AI Landscape
Die AI-Revolution direkt im Browser
Slide 8
Slide 8 text
https://webllm.mlc.ai/
Built-in AI
WebLLM
DEMO
Die AI-Revolution direkt im Browser
Slide 9
Slide 9 text
On NPM
Built-in AI
WebLLM
Die AI-Revolution direkt im Browser
Slide 10
Slide 10 text
Storing model files locally
Built-in AI
WebLLM
Internet
Website
HTML/JS
Cache with
model files
Hugging
Face
Note: Due to the Same-Origin Policy, models cannot be shared across origins.
Die AI-Revolution direkt im Browser
Slide 11
Slide 11 text
Model Size Comparison
Model:Parameters Size
phi3:3.8b 2.2 GB
mistral:7b 4.1 GB
deepseek-r1:8b 5.2 GB
gemma3n:e4b 7.5 GB
gemma3:12b 8.1 GB
llama4:16x17b 67 GB
Built-in AI
WebLLM
Die AI-Revolution direkt im Browser
Slide 12
Slide 12 text
Drawbacks
Built-in AI
WebNN
Models can’t be shared across origins
Inference is fast, but doesn’t reach full native speed
Die AI-Revolution direkt im Browser
Slide 13
Slide 13 text
https://github.com/explainers-by-googlers/cross-origin-storage
Built-in AI
Cross-Origin Storage
Die AI-Revolution direkt im Browser
Slide 14
Slide 14 text
https://huggingface.co/docs/transformers.js/index
Built-in AI
Transformers.js
DEMO
Die AI-Revolution direkt im Browser
Slide 15
Slide 15 text
Cloud only…
Built-in AI
Realtime Models
DEMO
Die AI-Revolution direkt im Browser
Slide 16
Slide 16 text
…or is it? NEW!
Built-in AI
Realtime Models
DEMO
Die AI-Revolution direkt im Browser
Slide 17
Slide 17 text
– 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
Built-in AI
WebNN
Source: https://webmachinelearning.github.io/webnn-intro/
Die AI-Revolution direkt im Browser
Slide 18
Slide 18 text
about://flags
Enables WebNN API à Enabled
Enables experimental WebNN API features à Enabled
Built-in AI
WebNN
Die AI-Revolution direkt im Browser
Slide 19
Slide 19 text
– 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)
Built-in AI
Built-in AI
https://developer.chrome.com/docs/ai/built-in
Die AI-Revolution direkt im Browser
Slide 20
Slide 20 text
Incubated by the WebML CG
Built-in AI
Built-in AI APIs
https://webmachinelearning.github.io/incubations/
DEMO
Die AI-Revolution direkt im Browser
Slide 21
Slide 21 text
Built-in AI
Multimodal Models
Die AI-Revolution direkt im Browser
Slide 22
Slide 22 text
Built-in AI
Multimodal Models
Die AI-Revolution direkt im Browser
DEMO
Slide 23
Slide 23 text
Built-in AI
Structured Output
Die AI-Revolution direkt im Browser
DEMO
https://bandarra.me/apps/flyby/
Slide 24
Slide 24 text
Built-in AI
Built-in AI APIs
Operating
System
Website
HTML/JS
Browser Internet
Apple Intelligence
Gemini Nano
Die AI-Revolution direkt im Browser
Slide 25
Slide 25 text
about://on-device-internals
https://www.google.com/chrome/canary/
about://flags
Enables optimization guide on device à
EnabledBypassPerfRequirement
(API) for Gemini Nano à Enabled
Built-in AI
Built-in AI APIs
Die AI-Revolution direkt im Browser
Slide 26
Slide 26 text
TypeScript Definitions
Built-in AI
Built-in AI APIs
Die AI-Revolution direkt im Browser
Slide 27
Slide 27 text
Built-in AI
Die AI-Revolution direkt im Browser
WebMCP
– Allows websites to
expose tools to
browser or external
agents
– Joint effort by
Microsoft and
Google
https://github.com/webmachinelearning/webmcp
Slide 28
Slide 28 text
Built-in AI
Die AI-Revolution direkt im Browser
WebMCP
https://www.youtube.com/watch?v=gbu9kyY2B60
Slide 29
Slide 29 text
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
Built-in AI
Web AI
Die AI-Revolution direkt im Browser
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]