Smarter Angular mit Prompt API & WebMCP

In diesem praxisorientierten Workshop lernst du, wie du deine Angular-basierten Apps mit neuen Web-APIs für generative KI wie der Prompt API smarter machst und mithilfe von WebMCP mit KI-Agenten integrierst.

Wir integrieren einen kontextsensitiven Chatbot per Prompt API in eine Todo-App und extrahieren Daten aus unstrukturierten Eingaben, um sie in ein strukturiertes Formular zu überführen. Hierzu kommt Structured Output der Prompt API zum Einsatz. Über WebMCP öffnen wir die App außerdem für externe KI-Agenten, sodass sie auch von außen gesteuert werden kann.

Abschließend bewerten wir die gezeigten Technologien und geben einen Ausblick auf Browserunterstützung und Standardisierung. Und du entwickelst aktiv mit, wenn du willst.

Transcript

1. Smarter Angular mit Prompt API & WebMCP Christian Liebel @christianliebel Consultant
2. Smarter Angular mit Prompt API & WebMCP Christian Liebel Hello, it’s me. Angular, PWA & Generative AI Slides: thinktecture.com /christian-liebel X: @christianliebel Bluesky: @christianliebel.com Email: christian.liebel @thinktecture.com
3. Smarter Angular mit Prompt API & WebMCP Timetable 14:00–15:30 Block 1 15:30–16:00 Coffee Break 16:00–17:30 Block 2
4. Smarter Angular mit Prompt API & WebMCP Expectations 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 9 hands-on labs What not to expect Deep dive into AI specifics, RAG, model finetuning or training Stable libraries or specifications Hu ak! e r b y a m s g in h T ents! m e ir u q e r h ig H ! ge downloads
5. Smarter Angular mit Prompt API & WebMCP Workshop Slides
6. Smarter Angular mit Prompt API & WebMCP Demo Use Case (Workshop Edition) DEMO
7. Smarter Angular mit Prompt API & WebMCP Setup Setup complete? (Node.js, Google Chrome, Editor, Git, macOS/Windows, 20 GB free disk space, 6 GB VRAM)
8. Smarter Angular mit Prompt API & WebMCP Setup git clone https://github.com/thinktecture/angulardays-2026-fall-prompt-api.git cd angular-days-2026-fall-prompt-api npm i LAB #0
9. Smarter Angular mit Prompt API & WebMCP LAB #1 Prompt API 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.
10. Smarter Angular mit Prompt API & WebMCP Prompt API Website HTML/JS Browser Operating System Apple Intelligence Gemini Nano Internet
11. Smarter Angular mit Prompt API & WebMCP Group Policy Chrome Enterprise AI Model Download
12. Smarter Angular mit Prompt API & WebMCP Prompt API 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) https://developer.chrome.com/docs/ai/built-in
13. Smarter Angular mit Prompt API & WebMCP Prompt API Standard Positions https://github.com/WebKit/standards-positions/issues/495 https://github.com/mozilla/standards-positions/issues/1213
14. Smarter Angular mit Prompt API & WebMCP Prompt API Polyfill 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
15. Smarter Angular mit Prompt API & WebMCP Prompt API Easy Language Model https://www.npmjs.com/package/easy-language-model
16. Smarter Angular mit Prompt API & WebMCP Built-in AI APIs TypeScript Definitions
17. Smarter Angular mit Prompt API & WebMCP Prompt API npm i -D @types/dom-chromium-ai add "dom-chromium-ai" to the types in tsconfig.app.json LAB #2
18. Smarter Angular mit Prompt API & WebMCP Chat with data 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.
19. Smarter Angular mit Prompt API & WebMCP Local AI Models Add the following lines to inferPromptApi(): LAB #3 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; }
20. Smarter Angular mit Prompt API & WebMCP Prompt API Tool Use NEW! – Interface between the unstructured (natural language) and structured (programmatic) parts of the application – Backed by a JavaScript function – API shape described by a JSON Schema tools: [{ name: "getWeather", description: "Get the weather in a location.", inputSchema: { type: "object", properties: { location: { type: "string", description: "The city to check for the weather condition.", }, }, required: ["location"], }, async execute({ location }) { // do something }, }],
21. Smarter Angular mit Prompt API & WebMCP Local AI Models Alternatives: Bring Your Own AI Website Cache with model files Internet Hugging Face
22. Smarter Angular mit Prompt API & WebMCP Local AI Models 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/
23. Smarter Angular mit Prompt API & WebMCP Local RAG Demo https://webml-demo.vercel.app/ https://github.com/jacoblee93/fully-local-pdf-chatbot/
24. Smarter Angular mit Prompt API & WebMCP Local AI Models 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
25. Smarter Angular mit Prompt API & WebMCP DEMO
26. Smarter Angular mit Prompt API & WebMCP Realtime Models On-Device DEMO https://huggingface.co/spaces/webml-community/conversational-webgpu
27. Smarter Angular mit Prompt API & WebMCP Realtime Models On-device pipeline Whisper (STT) Silero (VAD) SmolLM21.7B (LLM) Kokoro (TTS)
28. Smarter Angular mit Prompt API & WebMCP Use Case Data Extraction Just transfer the 17.34 euros to me, my IBAN is DE02200505501015871393. I am with Hamburger Sparkasse (HASPDEHH). Nice, here is my address: Peter Müller, Rheinstr. 7, 04435 Schkeuditz
29. Smarter Angular mit Prompt API & WebMCP Use Case Data Extraction Just transfer the 17.34 euros to me, my IBAN is DE02200505501015871393. I am with Hamburger Sparkasse (HASPDEHH). Nice, here is my address: Peter Müller, Rheinstr. 7, 04435 Schkeuditz
30. Smarter Angular mit Prompt API & WebMCP Idea protected readonly formGroup = this.fb.group({ firstName: [''], lastName: [''], Smart addressLine1: [''], Form addressLine2: [''], Filler city: [''], state: [''], (LLM) zip: [''], country: [''], }); Nice, here is my address: Peter Müller, Rheinstr. 7, 04435 Schkeuditz
31. Smarter Angular mit Prompt API & WebMCP Form Field “Try to determine the country based on the input.” “Insurance numbers always start with INS.”
32. Smarter Angular mit Prompt API & WebMCP Form Field (1/2) Add the following code to form.ts: protected readonly model = signal({ name: '', city: '', }); protected readonly form = form(this.model); async fillForm(value: string) {} LAB #4
33. Smarter Angular mit Prompt API & WebMCP Form Field (2/2) LAB #4 Add the following code to form.html: <input #fillInput> <button (click)="fillForm(fillInput.value)">Fill form</button> <form> <input placeholder="Name" [formField]="form.name"> <input placeholder="City" [formField]="form.city"> </form>
34. Smarter Angular mit Prompt API & WebMCP Prompt Generator 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
35. Smarter Angular mit Prompt API & WebMCP Async Clipboard API (1/2) LAB #5 Add the following code to form.ts: async paste() { const content = await navigator.clipboard.readText(); await this.fillForm(content); }
36. Smarter Angular mit Prompt API & WebMCP Async Clipboard API (2/2) Add the following code to form.html (after the “Fill form” button): <button (click)="paste()">Paste</button> LAB #5
37. Smarter Angular mit Prompt API & WebMCP Prompt Generator System message • The form has the following setup: { "name": "", "city": "" } User message Assistant message • I am Peter from Berlin • { "name": "Peter", "city": "Berlin" }
38. Smarter Angular mit Prompt API & WebMCP Prompt Generator Add the following code to the fillForm() method: LAB #6 const languageModel = await LanguageModel.create({ initialPrompts: [{ role: 'system', content: `Extract the information to a JSON object of this shape: ${JSON.stringify(this.model())}`, }], }); const result = await languageModel.prompt(value); console.log(result);
39. Smarter Angular mit Prompt API & WebMCP Prompt Generator (Structured Output) LAB #7 Add the following code to form.ts (fillForm() method) and remove the model from the system prompt: const result = await languageModel.prompt(value, { responseConstraint: { type: 'object', properties: { name: { type: 'string' }, city: { type: 'string' }, }, }, });
40. Smarter Angular mit Prompt API & WebMCP Prompt Parser Assistant message • { "name": "Peter", "city": "Berlin" }
41. Smarter Angular mit Prompt API & WebMCP Prompt Parser Add the following code to form.ts (fillForm() method): this.model.set(JSON.parse(result)); LAB #8
42. Smarter Angular mit Prompt API & WebMCP Prompt Parser Assistant message Parsing the assistant message as text/JSON/… Tool calling Specifying a well-defined interface via a JSON schema called by the LLM (safer, growing support) JSON Mode Structured Output
43. Smarter Angular mit Prompt API & WebMCP Agentic Browsers
44. Smarter Angular mit Prompt API & WebMCP 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
45. Smarter Angular mit Prompt API & WebMCP WebMCP API Imperative Declarative document.modelContext.registerTool({ "name": "start_game", "description": "Start a new game.", "inputSchema": {}, "execute": () => {}, }); <form id="reservationForm" toolname="book_table_le_petit_bistro" tooldescription=...> <input name="name" toolparamdescription="Customer's full name (min 2 chars)" /> </form>
46. Smarter Angular mit Prompt API & WebMCP WebMCP Only tested with Chrome Canary! LAB #9 1. Install WebMCP typings: npm i -D webmcp-types 2. Add "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.
47. Smarter Angular mit Prompt API & WebMCP WebMCP 7. Add this code to form.ts: LAB #9 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.model.set(result as any), }); }
48. Smarter Angular mit Prompt API & WebMCP WebMCP & Angular (22+) https://next.angular.dev/ai/webmcp
49. Smarter Angular mit Prompt API & WebMCP Summary 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
50. Smarter Angular mit Prompt API & WebMCP Summary – 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!
51. Smarter Angular mit Prompt API & WebMCP
52. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com