Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on)

Generative AI is on everyone's lips: Microsoft Copilot has come to Office and Windows, and Apple Intelligence ships on iPhones and Macs. With Transformers.js and Chromium's new Prompt API, we can now bring Generative AI to your Angular app: locally and offline-capable. In this workshop, we will add AI capabilities to an Angular application—and you can code along! Please bring a powerful device with Windows or macOS, a current version of Chrome or Edge, Node.js, an editor of your choice, and at least 10 GB of free hard disk space. Ideally, please bring your personal device, as group policies or company proxies tend to cause problems.

Please bring a powerful device with Windows or macOS, a current version of Chrome or Edge, Node.js, an editor of your choice, and at least 10 GB of free hard disk space. Ideally, please bring your personal device, as group policies or company proxies tend to cause problems.

Transcript

1. Christian Liebel @christianliebel Consultant Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on)
2. Hello, it’s me. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Christian Liebel X: @christianliebel Bluesky: @christianliebel.com Email: christian.liebel @thinktecture.com Angular, PWA & Generative AI Slides: thinktecture.com /christian-liebel
3. Original 09:00–10:30 Block 1 10:30–11:00 Coffee Break 11:00–12:30 Block 2 12:30–13:30 Lunch Break 13:30–15:00 Block 3 15:00–15:30 Coffee Break 15:30–17:00 Block 4 Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Timetable
4. What to expect Focus on web app development Focus on Generative AI Up-to-date insights: the ML/AI field is evolving fast Live demos on real hardware 18 hands-on labs What not to expect Deep dive into AI specifics, RAG, model finetuning or training Stable libraries or specifications Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Expectations Huge downloads! High requirements! Things may break!
5. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Workshop Slides
6. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) DEMO
7. (Workshop Edition) Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Demo Use Case DEMO
8. Setup complete? (Node.js, Google Chrome, Editor, Git, macOS/Windows, 20 GB free disk space, 6 GB VRAM) Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Setup
9. git clone https://github.com/thinktecture/ijs-sd- 2026-genai.git cd ijs-sd-2026-genai npm i Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Setup LAB #0
10. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Generative AI everywhere Source: https://www.apple.com/chde/apple-intelligence/
11. Run locally on the user’s system Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Single-Page Applications Server- Logik Web API Push Service Web API DBs HTML, JS, CSS, Assets Webserver Webbrowser SPA Client- Logik View HTML/CSS View HTML/CSS View HTML/CSS HTTPS WebSockets HTTPS HTTPS
12. Make SPAs offline-capable Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Progressive Web Apps Service Worker Internet Website HTML/JS Cache fetch
13. Overview Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Generative AI Text OpenAI GPT Claude Opus … Audio/Music Musico Soundraw … Images Nano 🍌 Firefly … Video Omni Sora … Speech Whisper tortoise-tts …
14. Overview Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Generative AI Text OpenAI GPT Claude Opus … Audio/Music Musico Soundraw … Images Nano 🍌 Firefly … Video Omni Sora … Speech Whisper tortoise-tts …
15. Examples Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Generative AI Cloud Providers
16. Drawbacks Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) 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
17. Can we run GenAI models locally? Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on)
18. Large: Trained on lots of data Language: Process and generate text Models: Programs/neural networks Examples: – Haiku, Opus, Sonnet (Claude) – Gemini, Gemma (Google) – LFM (Liquid AI) Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Large Language Models
19. Token A meaningful unit of text (e.g., a word, a part of a word, a character). Context Window The maximum amount of tokens the model can process. Parameters/weights Internal variables learned during training, used to make predictions. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Large Language Models
20. Prompts serve as the universal interface Unstructured text conveying specific semantics Paradigm shift in software architecture Natural language becomes a first-class citizen Caveats Non-determinism and hallucination, prompt injections Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Large Language Models
21. npm i @huggingface/transformers npm start -- -o Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) LAB #1
22. @huggingface/transformers – JavaScript library by Hugging Face 🤗 – Functionally equivalent to Hugging Face’s transformers python lib – Supports various ML/AI use cases (LLMs, computer vision, audio, …) – Models are executed on-device (100% local, offline-capable) – Uses ONNX Runtime (model inference runtime) internally Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Transformers.js
23. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Transformers.js vs. WebLLM Source: https://npmtrends.com/@huggingface/transformers-vs-@mlc-ai/web-llm (27.02.2026)
24. Alternative Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) WebLLM
25. Size Comparison Model:Parameters Size lfm2.5-thinking:1.2b 0.7 GB lfm2:2.6b 1.6 GB ministral-3:3b 3.0 GB gemma3:12b 8.1 GB gpt-oss:20b 14 GB devstral-2:123b 75 GB Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Model Selection
26. Liquid Foundation Models (LFM) Highly performant on-device LLMs by LiquidAI https://www.liquid.ai/models For this workshop, we are going to use the 2.6B model. Model sheet: https://huggingface.co/onnx- community/LFM2-2.6B-ONNX Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Model Selection Source: https://www.liquid.ai/blog/introducing-lfm2-2-6b-redefining-efficiency-in-language-models
27. (1/3) Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Downloading a model LAB #2 1. Go to webgpureport.org 2. Does your GPU support the feature “shader-f16”?
28. (2/3) 3. In src/app/todo/todo.ts (ngOnInit()), add the following line: await this.llmService.loadModel('2.6B'); 4. If your GPU does not support shader-f16, add this parameter: await this.llmService.loadModel('2.6B', 'q4'); Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Downloading a model LAB #2
29. (3/3) 5. In todo.html, change the following lines: @if(!llmService.isReady()) { <mat-progress-bar mode="determinate" [value]="llmService.progress()"></mat-progress-bar> } … <button mat-raised-button (click)="runPrompt(prompt.value, langModel.value)" [disabled]="!llmService.isReady()"> The progress bar should begin to move. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Downloading a model LAB #2
30. Storing model files locally Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Cache API Internet Website HTML/JS Cache with model files Hugging Face Note: Due to the Same-Origin Policy, models cannot be shared across origins.
31. Parameter cache Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Cache API
32. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) WebAssembly (Wasm) – Bytecode for the web – Compile target for arbitrary languages – Can be faster than JavaScript – WebLLM uses a model- specific Wasm library to accelerate model computations
33. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) 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, and Firefox 141 on Windows
34. – Grants web apps access to the device’s CPU, GPU and Neural Processing Unit (NPU) – In specification by the WebML Working Group at W3C – Origin Trial in Chrome 146 – Potentially even better performance compared to WebGPU Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) WebNN Source: https://webmachinelearning.github.io/webnn-intro/
35. Making Angular Apps Smarter with Generative AI: Local and Offline-capable WebNN https://huggingface.co/webnn/spaces (Hands-on) DEMO
36. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) WebNN: near-native inference performance Source: Intel. Browser: Chrome Canary 118.0.5943.0, DUT: Dell/Linux/i7-1260P, single p-core, Workloads: MediaPipe solution models (FP32, batch=1)
37. Drawbacks Making Angular Apps Smarter with Generative AI: Local and Offline-capable WebNN Models can’t be shared across origins Inference is fast, but doesn’t reach full native speed (Hands-on)
38. https://github.com/wicg/cross-origin-storage Making Angular Apps Smarter with Generative AI: Local and Offline-capable Cross-Origin Storage (Hands-on)
39. (1/4) 1. In todo.ts, add the following line at the top of the class: protected readonly reply = signal(''); Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Model inference LAB #3
40. (3/4) 2. In the inferTransformersJs() method, add the following code: this.llmService.clearPastKeyValues(); const messages = [ { role: "user", content: userPrompt }, ]; return this.llmService.generateResponse(messages, []); Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Model inference LAB #3
41. (2/4) 3. In the runPrompt() method, add the following code: this.reply.set('…'); const chunks = inferenceEngine === 'transformers-js' ? this.inferTransformersJs(userPrompt) : this.inferPromptApi(userPrompt); let reply = ''; for await (const chunk of chunks) { reply += chunk; this.reply.set(reply); } Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Model inference LAB #3
42. (4/4) 4. In todo.html, change the following line: <pre>{{ reply() }}</pre> You should now be able to send prompts to the model and see the responses in the template. ⚠ Note: Browsers support better options for streaming LLM responses: https://developer.chrome.com/docs/ai/render-llm-responses Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Model inference LAB #3
43. (1/2) In todo.ts, add the following signal at the top: protected readonly todos = signal<TodoDto[]>([]); Add the following line to the addTodo() method: text ??= prompt() ?? ''; this.todos.update(todos => [...todos, { done: false, text }]); Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Todo management LAB #4
44. (2/2) In todo.html, add the following lines to add todos from the UI: @for (todo of todos(); track $index) { <mat-list-option>{{ todo.text }}</mat-list-option> } Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Todo management LAB #4
45. @for (todo of todos(); track $index) { <mat-list-option [(selected)]="todo.done"> {{ todo.text }} </mat-list-option> } ⚠ Boo! This pattern is not recommended. Instead, you should set the changed values on the signal. But this messes up with Angular Material… Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Todo management (extended) LAB #5
46. Concept and limitations The todo data has to be converted into natural language. For the sake of simplicity, we will add all TODOs to the prompt. Remember: LLMs have a context window (LFM2-2.6B: 32K). If you need to chat with larger sets of text, refer to Retrieval Augmented Generation (RAG). These are the todos: * Wash clothes * Pet the dog * Take out the trash Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Chat with data
47. System prompt Metaprompt that defines… – character – capabilities/limitations – output format – behavior – grounding data Hallucinations and prompt injections cannot be eliminated. You are a helpful assistant. Answer user questions on todos. Generate a valid JSON object. Avoid negative content. These are the user’s todos: … Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Chat with data
48. Flow System message • The user has these todos: 1. … 2. … 3. … User message • How many todos do I have? Assistant message • You have three todos. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Chat with data
49. Using a system & user prompt Adjust the code in inferTransformerJs() to include the system prompt: const systemPrompt = `Here's the user's todo list: ${JSON.stringify(this.todos())}`; const messages = [ { role: "system", content: systemPrompt }, { role: "user", content: userPrompt }, ]; Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Chat with data LAB #6
50. Techniques – Providing examples (single shot, few shot, …) – Priming outputs – Specify output structure – Repeating instructions – Chain of thought – … Success also depends on the model. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Prompt Engineering https://learn.microsoft.com/en-us/azure/ai-foundry/openai/concepts/prompt-engineering
51. const systemPrompt = `You are a helpful assistant. The user will ask questions about their todo list. Briefly answer the questions. Don't try to make up an answer if you don't know it. Here's the user's todo list: ${JSON.stringify(this.todos())}`; Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Prompt Engineering LAB #7
52. Alternatives Prompt Engineering Retrieval Augmented Generation Fine-tuning Custom model Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Prompt Engineering Effort
53. Adjust todo.ts as follows: return this.llmService.generateResponse(messages, [], { measurePerformance: true, }); Ask a new question and check your console for performance statistics. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Performance LAB #8
54. Workshop Participants Device Tokens/s (Decode) Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Performance
55. Comparison 45 33 1200 0 200 400 600 800 1000 1200 1400 WebLLM (Llama3-8b, M4) Azure OpenAI (gpt-4o-mini) Groq (Llama3-8b) Tokens/sec Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Performance WebLLM/Groq: Own tests (14.11.2024), OpenAI/Azure OpenAI: https://learn.microsoft.com/en-us/azure/ai-services/openai/concepts/provisioned-throughput (18.07.2024)
56. The LLM “calls” the tool. However, the developer has to take care of actually executing the code and to feed back the result into the conversation. Tool Calling allows an LLM to execute “real-world” actions. A tool usually has… – a name – a natural-language description – an interface definition usually in JSON Schema add_todo get_weather search_web read_file Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Tool Calling
57. 1. Add the TODO_TOOL to the tools array in inferTransformersJs(): return this.llmService.generateResponse(messages, [TODO_TOOL], { measurePerformance: true }); 2. Add this line to the end of the runPrompt() method: this.llmService.executeToolCalls(reply, { addTodo: (args: { text: string }) => this.addTodo(args.text), }); Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Tool Calling LAB #9
58. 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! Making Angular Apps Smarter with Generative AI: Local and Offline-capable Web AI Landscape (Hands-on)
59. If you are using Edge, go to edge://flags and set Prompt API for Phi mini to Enabled. Open Dev Tools (F12) and enter: await LanguageModel.create(); Go to about://components and verify the Optimization Guide On Device Model component is downloading. Refer to about://on-device-internals for additional details. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Prompt API LAB #10
60. Making Angular Apps Smarter with Generative AI: Local and Offline-capable Prompt API Operating System Website HTML/JS Browser Internet Apple Intelligence Gemini Nano (Hands-on)
61. Part of Chrome’s Built-In AI initiative – 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) Making Angular Apps Smarter with Generative AI: Local and Offline-capable Prompt API https://developer.chrome.com/docs/ai/built-in (Hands-on)
62. Standard Positions Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Prompt API https://github.com/WebKit/standards-positions/issues/495 https://github.com/mozilla/standards-positions/issues/1213
63. Polyfill Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Prompt API Supports two backends: – Cloud backend: needs an API key (no longer local/offline-capable) – Local backend: uses Transformers.js (via WebGPU or Wasm) https://developer.chrome.com/docs/ai/prompt-api-polyfill
64. npm i -D @types/dom-chromium-ai add "dom-chromium-ai" to the types in tsconfig.app.json Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Prompt API LAB #11
65. Add the following lines to inferPromptApi(): const systemPrompt = ` The user will ask questions about their todo list. Here's the user's todo list: ${JSON.stringify(this.todos())}`; const languageModel = await LanguageModel.create({ initialPrompts: [{ role: "system", content: systemPrompt }] }); const chunks = languageModel.promptStreaming(userPrompt); for await (const chunk of chunks) { yield chunk; } Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Local AI Models LAB #12
66. Alternatives: Ollama – Local runner for AI models – Offers a local server a website can connect to à allows sharing models across origins – Supported on Windows, Linux, macOS https://ollama.ai/ Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Local AI Models
67. https://webml-demo.vercel.app/ https://github.com/jacoblee93/fully-local-pdf-chatbot/ Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Local RAG Demo
68. Alternatives – Pre-trained, specialized, significantly smaller models beyond GenAI – JavaScript library to run Hugging Face transformers in the browser https://huggingface.co/docs/transformers.js Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Local AI Models
69. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on)
70. On-Device Making Angular Apps Smarter with Generative AI: Local and Offline-capable Realtime Models DEMO (Hands-on) https://huggingface.co/spaces/webml-community/conversational-webgpu
71. On-device pipeline Making Angular Apps Smarter with Generative AI: Local and Offline-capable Realtime Models Whisper (STT) Silero (VAD) SmolLM2- 1.7B (LLM) Kokoro (TTS) (Hands-on)
72. Just transfer the 17.34 euros to me, my IBAN is DE02200505501015871393. I am with Hamburger Sparkasse (HASPDEHH). Data Extraction Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Use Case Nice, here is my address: Peter Müller, Rheinstr. 7, 04435 Schkeuditz
73. Just transfer the 17.34 euros to me, my IBAN is DE02200505501015871393. I am with Hamburger Sparkasse (HASPDEHH). Data Extraction Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Use Case Nice, here is my address: Peter Müller, Rheinstr. 7, 04435 Schkeuditz
74. protected readonly formGroup = this.fb.group({ firstName: [''], lastName: [''], addressLine1: [''], addressLine2: [''], city: [''], state: [''], zip: [''], country: [''], }); Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Idea Nice, here is my address: Peter Müller, Rheinstr. 7, 04435 Schkeuditz Smart Form Filler (LLM)
75. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Form Field “Insurance numbers always start with INS.” “Try to determine the country based on the input.”
76. (1/2) Add the following code to form.ts: private readonly fb = inject(NonNullableFormBuilder); protected readonly formGroup = this.fb.group({ name: '', city: '', }); async fillForm(value: string) {} Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Form Field LAB #13
77. (2/2) Add the following code to form.html: <input type="text" #form> <button (click)="fillForm(form.value)">Fill form</button> <form [formGroup]="formGroup"> <input placeholder="Name" formControlName="name"> <input placeholder="City" formControlName="city"> </form> Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Form Field LAB #13
78. Async Clipboard API Allows reading from/writing to the clipboard in an asynchronous manner Reading from the clipboard requires user consent first (privacy!) Supported by Chrome, Edge and Safari and Firefox Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Prompt Generator
79. (1/2) Add the following code to form.ts: async paste() { const content = await navigator.clipboard.readText(); await this.fillForm(content); } Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Async Clipboard API LAB #14
80. (2/2) Add the following code to form.html (after the “Fill form” button): <button (click)="paste()">Paste</button> Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Async Clipboard API LAB #14
81. System message • The form has the following setup: { "name": "", "city": "" } User message • I am Peter from Berlin Assistant message • { "name": "Peter", "city": "Berlin" } Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Prompt Generator
82. Add the following code to the fillForm() method: const languageModel = await LanguageModel.create({ initialPrompts: [{ role: 'system', content: `Extract the information to a JSON object of this shape: ${JSON.stringify(this.formGroup.value)}`, }], }); const result = await languageModel.prompt(value); console.log(result); Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Prompt Generator LAB #15
83. Add the following code to form.ts (fillForm() method): const result = await languageModel.prompt(value, { responseConstraint: { type: 'object', properties: { name: { type: 'string' }, city: { type: 'string' }, }, }, }); Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Prompt Generator (Structured Output) LAB #16
84. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Prompt Parser Assistant message • { "name": "Peter", "city": "Berlin" }
85. Add the following code to form.ts (fillForm() method): this.formGroup.setValue(JSON.parse(result)); Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Prompt Parser LAB #17
86. Assistant message Parsing the assistant message as text/JSON/… JSON Mode Tool calling Specifying a well-defined interface via a JSON schema called by the LLM (safer, growing support) Structured Output Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Prompt Parser
87. Making Angular Apps Smarter with Generative AI: Local and Offline-capable Agentic Browsers (Hands-on)
88. Making Angular Apps Smarter with Generative AI: Local and Offline-capable WebMCP – Allows websites to register tools for use by browser or external AI agents – Joint effort by Microsoft and Google – In specification by the WebML CG – In Developer Trial since Chromium 146, expected Origin Trial in Chromium 149–156, expected Shipping in Chromium 157 (https://chromestatus.com/feature/5117755 740913664) https://github.com/webmachinelearning/webmcp (Hands-on)
89. API Imperative document.modelContext.registerTool({ "name": "start_game", "description": "Start a new game.", "inputSchema": {}, "execute": () => {}, }); Declarative <form id="reservationForm" toolname="book_table_le_petit_bistro" tooldescription=...> <input name="name" toolparamdescription="Customer's full name (min 2 chars)" /> </form> Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) WebMCP
90. Only tested with Chrome Canary! 1. Install WebMCP typings: npm i -D @mcp-b/webmcp-types 2. Add "@mcp-b/webmcp-types" to the types array in tsconfig.app.json 3. Go to about://flags, set the flag WebMCP for Testing to Enabled, and relaunch Chrome. 4. Download the WebMCP Model Context Tool Inspector extension from https://bit.ly/mcpext 5. Get a free Gemini API key from https://aistudio.google.com/ 6. Open the WebMCP Model Context Tool Inspector extension, click Set Gemini API key, and click OK. Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) WebMCP LAB #18
91. 7. Add this code to form.ts: constructor() { document.modelContext.registerTool({ name: 'fill-form', description: 'Fills in the form.', inputSchema: { type: 'object', properties: { name: { type: 'string', description: 'The name of the person' }, city: { type: 'string', description: 'The city of the person' }, }, }, execute: (result) => this.formGroup.setValue(result as any), }); } Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) WebMCP LAB #18
92. & Angular (22+) Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) WebMCP https://next.angular.dev/ai/webmcp
93. Pros & Cons + Data does not leave the browser (privacy) + High availability (offline support) + Low latency + Stability (no external API changes) + Low cost – Lower quality – 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 Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Summary
94. – Cloud-based models remain the most powerful models – Due to their size and high system requirements, local generative AI models are currently rather interesting for very special scenarios (e.g., high privacy demands, offline availability) – Small, specialized models are an interesting alternative (if available) – Large language models are becoming more compact and efficient – Vendors are shipping AI models with their devices – Devices are becoming more powerful for running AI workloads – Experiment with the AI APIs and make your Angular App smarter! Making Angular Apps Smarter with Generative AI: Local and Offline-capable (Hands-on) Summary
95. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com