KI Bootcamp: Generative AI für Angular-Entwickler:innen

Transcript

1. Angular Days 2026: KI-Bootcamp Generative AI für Angular-Entwickler:innen Grundlagen & Backend verstehen, Frontend beherrschen Lukas Köhler AI Developer @lukkoeh Felix Wunderlich AI Developer
2. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Lukas Köhler Hallo, das bin ich. Generative AI Developer Thinktecture AG X @lukkoeh E-Mail lukas.koehler@thinktecture.com LinkedIn linkedin.com/in/lukkoeh Profil thinktecture.com/thinktects/lukas-koehler 2
3. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Felix Wunderlich Hallo, das bin ich. Experte für Angular und Generative KI Thinktecture AG E-Mail felix.wunderlich@thinktecture.com LinkedIn linkedin.com/in/felixwdl Profil thinktecture.com/thinktects/felix-schuetz 3
4. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Workshop-Zeitplan 15:30–17:00 Block 1 Block 2 Block 3 Block 4 1,5 h 1,5 h 1,5 h esuapeeffaK 13:30–15:00 esuapsgattiM 11:00–12:30 esuapeeffaK 09:00–10:30 1,5 h 4
5. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Workshop-Landingpage Ihr bekommt Landingpage mit allen Details Labs mit Lösungen (Colab Notebook / StackBlitz) Demo-Colab-Notebooks AI-Endpoint-Key für OVH Ihr braucht Google-Account Zugang zu colab.google.com Langfuse.com-Account Zugang zu stackblitz.com angular-days-2026.brick.do 5
6. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Generative AI Warum ist das wichtig? KI versteht und erzeugt natürliche Sprache KI greift auf Wissen aus der Trainingsphase zu 6
7. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen GenAI News Investitionen 7
8. 01 Workshop-Showcase AI-powered Portal
9. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen ACME Coding Guideline Portal Es könnte schlimmer sein QA-WorkflowAnforderungen Natural Language I/O Verschiedene Sprachen Semantische Suche Multi-Source-Integration Kontextbasierte Quellenauswahl Bewertung der Quellenqualität Quellenangaben Trust-Level-Indikatoren Quellenübergreifende Antwortsynthese Umsetzung → Coding Guideline Wiki via RAG → Externe Guidelines via RAG → Projektdetails via API → Projektmanager-Details via API → Fallback: Websuche → Alles integriert ins bestehende Portal 9
10. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen ACME – Rise of Sources Ein Suchfeld für alles Guidelines Wiki angular.dev Project Management API Allgemeine Websuche Trust Level 1 Trust Level 2 Trust Level 1 Trust Level 3 Static RAG Gezielte Websuche Live API Access Alles andere 10
11. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen LangGraph Real World Sample Backend Python AI as a Service Mistral Small & Qwen3.8 auf OVHcloud „Was ist besser, Signal Inputs oder Input Decorators?“ Frontend „Laut den ACME-Richtlinien sollten Signal Inputs anstelle von @Input() verwendet werden.“ Angular 11
12. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Large Language Models Sag „Hallo“ zu einem LLM import requests import os MistralAI response = requests.post( "https://api.mistral.ai/v1/chat/completions", headers={ "Content-Type": "application/json", "Accept": "application/json", "Authorization": f"Bearer {os.environ.get('MISTRAL_API_KEY')}" }, json={ "model": "mistral-small-2603", "messages": [{"role": "user", "content": "Hello!"}] } ) 12
13. 02 LangChain Abstraktionen für GenAI
14. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Hello LangChain Ein Baukasten aus kombinierbaren Bausteinen RAG bauen Quelle: langchain.com Agents bauen Dokumente indizieren Daten aus Dokumenten extrahieren 14
15. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Hello LangChain from langchain_openai import ChatOpenAI llm = ChatOpenAI(model="gpt-5-nano") messages = [ ( "system", "You are a helpful assistant that translates English to French. Translate the user sentence.", ), ("human", "I love programming."), ] ai_msg = llm.invoke(messages) Quelle: docs.langchain.com/oss/python/integrations/chat/openai 15
16. Lab LangChainJS Chat angular-days-2026.brick.do 16
17. Lab LangChain Chat angular-days-2026.brick.do 17
18. 03 Generative AI In der Welt der KI
19. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Generative AI Einordnung Artificial Intelligence Intelligente Maschinen Machine Learning Mustererkennung in Daten Deep Learning Mustererkennung in unstrukturierten Daten Generative AI Menschliche Sprache verstehen und erzeugen 19
20. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Generative AI Mindset 20
21. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Natürliche Sprache ist der neue Code User Input GenAI Processing Text LLM Generated Output Text Bild 21
22. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Natürliche Sprache ist der neue Code Juni 2022 vs. September 2025 Juni 2022 Prompt September 2025 Generiere ein Bild von einer älteren Katze im BusinessAnzug, die hinter einem großen Schreibtisch in einem ledernen braunen Chefsessel sitzt und dem Betrachter direkt in die Augen schaut. Auf dem Schreibtisch sehen wir einen Macbook Pro und eine moderne Schreibtischlampe. Die Wand hinter der Katze ist geschmückt mit Urkunden und einem Familienfoto, die alle gerahmt sind. 22
23. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Natürliche Sprache ist der neue Code Bilder bearbeiten „Me standing in front of a back to the future time machine; parking lot from the photo in the back“ 23
24. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Natürliche Sprache ist der neue Code Bilder bearbeiten „I'm looking a bit surprised because of the DMC in the background. Time: golden hour.“ 24
25. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Natürliche Sprache ist der neue Code User Input Text Bild GenAI Processing Audio Video LLM Generated Output Text Bild Audio Video 25
26. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Natürliche Sprache ist der neue Code Juni 2022 vs. März 2026 Juni 2022 März 2026 26
27. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Natürliche Sprache ist der neue Code Modellintelligenz im Zeitverlauf Quelle: artificialanalysis.ai 27
28. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen KI schreibt den neuen Code 75 % des neuen Codes bei Google ist KI-generiert 22.04.2026 66 % 06.10.2026 nutzen Coding-Assistenten oder -Agenten 28
29. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Natürliche Sprache ist der neue Code User Input GenAI Processing Generated Output Text Audio Text Bild Bild Video Audio Video Code LLM Code 29
30. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen AGI? „AGI by 2027 is strikingly plausible.“ Leopold Aschenbrenner, Juni 2024 Quelle: situational-awareness.ai 30
31. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen AGI! 31
32. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen GenAI News Modelle 30.09.2026 07.10.2026 06.10.2026 10.09.2026 22.09.2026 14.08.2026 32
33. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen GenAI News Made in Germany 05.10.2026 Quelle: aleph-alpha.com Kolibri Aleph Alpha, Heidelberg – seit 3. Oktober 2026 78 Mrd. Parameter (MoE), 3,5 Mrd. aktiv pro Token Deutsch & Englisch, über 20 % deutsche Trainingsdaten Trainiert in Deutschland und Finnland Open Weights, Apache 2.0, auf Hugging Face Für Verwaltung und Industrie auf eigener Infrastruktur 33
34. 04 LLMs Large Language Models
35. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Large Language Models Es ist nur Text – „Language“ LLMs können Text verstehen – das ändert vieles LLMs erzeugen Text auf Basis des Inputs Die meisten LLMs zerlegen komplexe Probleme per Chain of Thought (CoT) Manche LLMs können über die beste Lösungsstrategie nachdenken Prompts sind das universelle Interface („UI“) → unstrukturierter Text mit Semantik Menschliche Sprache wird zum First-Class Citizen in der Softwarearchitektur 35
36. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Large Language Models Was ein LLM technisch ist LLMs sind Dateien mit Milliarden Zahlen (Gewichten) LLMs sind hochspezialisierte neuronale Netze LLMs sind mit parametrischem Wissen vorbefüllt („frozen knowledge“) LLMs brauchen im Betrieb viele Ressourcen LLMs werden über eine API genutzt 36
37. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Neuronale Netze in a nutshell Neuronale Netze sind (nur) Daten Layout-Parameter definieren wie viele Layer wie viele Knoten pro Layer wie die Knoten verbunden sind LLMs sind meist dünn (sparse) verbunden Input Layer Hidden Layers Output Layer 37
38. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen LLMs Einblick in die Funktionsweise eines LLM 38
39. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Large Language Models Im Inneren der Transformer-Architektur Quelle: poloclub.github.io/transformer-explainer 39
40. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Large Language Models Im Inneren der Transformer-Architektur Möglichkeit 1 Möglichkeit 2 „Attending a conference expands your “ Möglichkeit 3 Möglichkeit 4 Möglichkeit 5 Möglichkeit 6 … 40
41. Demo Transformer Model angular-days-2026.brick.do 41
42. Demo Chain of Thought (CoT) 42
43. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Chain of Thought (CoT) 43
44. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Reasoning Demo: Murmel-Rätsel Die Brüder Tom, Max und Leo haben jeweils eine bestimmte Anzahl von Murmeln. Tom sagt: „Wenn Max mir 4 Murmeln gibt, dann habe ich doppelt so viele wie er.“ Max sagt: „Wenn Leo mir 6 Murmeln gibt, dann haben wir gleich viele.“ Leo sagt: „Wenn Tom mir 8 Murmeln gibt, dann habe ich dreimal so viele wie er.“ Wie viele Murmeln hat jeder der Brüder am Anfang? 20 16 28 Tom Max Leo 44
45. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Reasoning Demo 2: Chiffre Encoded: oyfjdnisdr rtqwainr acxz mynzbhhx Decoded: think step by step Use the example above to decode Encoded: oyekaqdxjlrvaibdpxpzjzai aaaq tzoojzjlmyekoohx Decoded: 45
46. Demo Reasoning live Mistral Small 3.2 vs. Qwen3.8 27B localhost:8080/#reasoning 46
47. 05 GenAI Die Bausteine
48. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen GenAI-Bausteine Knowledge Cutoff Ich weiß Dinge 48
49. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Knowledge Cutoff 3. September 2026 Release von GPT-6 Astra 49
50. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Knowledge Cutoff 30. April 2026 10 / 50 USD Knowledge Cutoff von GPT-6 Astra Input / Output pro 1 Mio. Tokens 50
51. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen GenAI-Bausteine Tokens Die Währung von GenAI 51
52. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Tokens Tokens als Text und als Werte Tokenizer Tokens in Text & als Werte Microsoft Phi-2 32423, 5513, 5767, 2736, 8595, 2736, 5513, 75, 11033, 701, 257, 3046, 1357, 1406, 13331, 545, 370, 1562, 89, 10957, 13 OpenAI GPT-3.5T 18674, 82928, 3059, 17816, 3059, 5817, 44283, 728, 7367, 2486, 61948, 737, 53895, 65574, 13 OpenAI GPT-3.5T englischer Satz OpenAI GPT-4o bis GPT-5 Tokenizer o200k Quelle: tiktokenizer.vercel.app 791, 3776, 8415, 374, 21811, 389, 279, 32169, 304, 279, 5496, 3130, 13 8796, 193407, 181909, 161594, 826, 2933, 2019, 71738, 770, 138431, 13 Anzahl 21 15 13 11 52
53. Demo Tokenizer live tiktoken · o200k vs. cl100k localhost:8080/#tokens 53
54. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Tokens > 1 Mio. Tokens Context Window bei GPT-6 Astra 54
55. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen GenAI-Bausteine Context Window Erzähl mir mehr! 55
56. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Context Window Definition „Das Context Window eines LLM ist die Anzahl an Tokens, die das Modell beim Generieren einer Antwort als Input verarbeiten kann.“ 56
57. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Context Window Größe Modell GPT-4 Claude 2 Gemini 1.0 Mixtral 8x7B Gemini 1.5 Pro Qwen2-72B Mistral Small 4 Qwen3.8-27B GPT-6 Astra Claude Opus 5.5 Gemini 4 Argon Release März 2023 Juli 2023 Dezember 2023 Dezember 2023 Februar 2024 Juni 2024 März 2026 August 2026 September 2026 September 2026 Oktober 2026 Context Window 8.192 100.000 32.000 32.000 1.000.000 128.000 256.000 262.144 1.050.000 1.000.000 1.048.576 Context Window Input Tokens Processing Output Tokens 57
58. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Context Window Long Context Retrieval Modell Gemini 4 Argon GPT-6 Astra Claude Opus 5.5 bis 128K Tokens 99,7 % 98,7 % 90,6 % 256K bis 1 Mio. Tokens 84,2 % 71,8 % 66,8 % GraphWalks (BFS, F1), Herstellerangabe Google, Stand Oktober 2026 Quelle: deepmind.google/models/model-cards/gemini-4-argon 58
59. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen GenAI-Bausteine Mixture of Experts Gemeinsam sind wir mehr! 59
60. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Mixture of Experts Architektur Experte 1 Kontext Experte 2 Die schwarze Katze schläft Experte 3 Router wählt pro Token Experte 4 Experte 5 Nächstes Token auf Experte 6 Experte 7 Experte 8 60
61. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Mixture of Experts Definition Routing Sparse Compute VRAM Durchsatz Jedes Token wird beim Inferencing an ein oder wenige Expert-Feed-Forward-Netze geroutet. Alle Experten müssen trotzdem im Speicher liegen – der Bedarf entspricht einem deutlich größeren Dense-Modell. Pro Token wird nur ein kleiner Teil der Parameter aktiv berechnet. Geteilte Attention und Routing liefern Durchsatz wie ein kleineres Dense-Modell – plus Kommunikationsaufwand, um Tokens zu ihren Experten zu bewegen. 61
62. 06 LLMs Auswahlkriterien
63. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Model Selection Einfach das Beste? Quelle: artificialanalysis.ai 63
64. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Model Selection Eure Anforderungen sind entscheidend Performance (Tokens pro Sekunde) – Geschwindigkeit der Antwortgenerierung Pricing – Pay-per-Use, Abo, On-Prem-Kosten, Kosteneffizienz Reasoning – Logik, Problemlösung, mehrstufige Denkprozesse Tool Use – Externe Tools nutzen (APIs, Code-Ausführung, Web, Datenbanken) Context Window – Maximale Anzahl Tokens pro Verarbeitung Lizenz & Kosten – Open Source vs. proprietär, Gebühren, kommerzielle Nutzbarkeit Fine-Tuning – Anpassung an domänenspezifische Daten On-Premises – Lokales Hosting statt nur Cloud Multimodalität – Text, Bild, Audio oder Video verarbeiten Prompt Caching – Redundante Verarbeitung vermeiden, Anfragen optimieren Mehrsprachigkeit – Mehrere Sprachen verstehen und erzeugen Datenschutz & Compliance – DSGVO, HIPAA und weitere Vorgaben Effizienz – Compute- und Speicherbedarf für Inferenz und Training 64
65. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Model Selection Proprietär vs. Open Weights Quelle: artificialanalysis.ai 65
66. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Model Selection Reasoning oder schneller Output? Quelle: artificialanalysis.ai 66
67. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Model Selection Start your Engines! Quelle: artificialanalysis.ai 67
68. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Model Selection How much is the fish? Quelle: artificialanalysis.ai 68
69. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Model Selection Reasoning oder schneller Output? Quelle: artificialanalysis.ai 69
70. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Mistral AI Zwei Modellreihen: Open-Weight (Apache 2.0) & Premier (kommerziell) Spezialisten für Code, Vision, Reasoning, Audio & OCR Embedding-Modelle für Text und Code Edge-Modelle (Ministral) für On-Device Fine-Tuning-API Mehrsprachig, stark in europäischen Sprachen OpenAI-kompatible API, ähnliches Prompting Betrieb: La Plateforme, Azure, AWS, Google Cloud, On-Prem Sitz in Paris, Frankreich – Büro in München seit 2026 Keine Trainingsnutzung eurer Daten (bezahlte API; Free Tier ausgenommen) 70
71. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Model Selection Modellfamilien 71
72. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Model Selection Teilt eure GenAI-Aufgaben auf Ein großer Prompt löst die Aufgabe komplett Klassifikation kleines LLM Braucht ein leistungsstarkes Modell Extraktion kleines LLM Tool Calling mittleres LLM Großes LLM sehr teuer Antwort mittleres/großes LLM 72
73. 07 Real World Use Case Smart Web-Apps
74. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Smart Web-Apps Eure Formulare können mehr Quelle: github.com/thinktecture-labs/smart-form-filler 74
75. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Smart Web-Apps Eure Formulare können mehr Herausforderungen Training: Nutzer:innen müssen wissen, welche Information wohin gehört Sonderfälle: Unstrukturierte oder fehlende Daten einzugeben dauert länger Hands-free: Eine Tastatur passt nicht zur Arbeitsumgebung GenAI-Lösung Verknüpft Eingabedaten mit den Formularfeldern ✓ Kennt viele Sprachen ✓ Kann Spracheingabe als Quelle nutzen ✓ 75
76. Demo Smart Forms github.com/thinktecture-labs/smart-form-filler 76
77. Lab Smart Form Filler angular-days-2026.brick.do 77
78. 08 Embeddings Sprache zu Bytes
79. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Semantische Suche Lexikalische Suche Vergleicht Wörter, Wortteile und Varianten Klassisches SQL: WHERE content LIKE '%searchterm%' Wir finden nur, wovon wir wissen, dass es irgendwo im Text steht Semantische Suche Vergleicht auf dieselbe kontextuelle Bedeutung „Das Rudel rollt das runde Gerät auf dem Rasen herum“ „The pack enjoys rolling a round thing on the green grass“ „Die Hunde spielen auf der Wiese mit dem Ball“ „The dogs play with the ball on the meadow“ 79
80. Demo Semantische Suche live Keyword vs. Vektor localhost:8080/#lexical 80
81. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Embedding-Model „king“ EmbeddingModel [ 0.50451, 0.68607, -0.59517, -0.022801, 0.60046, -0.13498, -0.08813, 0.47377, -0.61798, -0.31012, -0.076666, 1.493, -0.034189, -0.98173, 0.68229, 0.81722, -0.51874, -0.31503, -0.55809, 0.66421, 0.1961, -0.13495, -0.11476, -0.30344, 0.41177, -2.223, -1.0756, -1.0783, -0.34354, 0.33505, 1.9927, -0.04234, -0.64319, 0.71125, 0.49159, 0.16754, 0.34344, -0.25663, -0.8523, 0.1661, 0.40102, 1.1685, -1.0137, -0.21585, -0.15155, 0.78321, -0.91241, -1.6106, -0.64426, -0.51042 ] 81
82. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Embedding-Model Welche Vektoren sind sich ähnlich? „king“ „queen“ „water“ Quelle: jalammar.github.io/illustrated-word2vec 82
83. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Embedding-Model Ähnliche Wörter, ähnliche Muster Quelle: jalammar.github.io/illustrated-word2vec 83
84. Demo Embeddings live Embedding-Playground localhost:8080/#embeddings 84
85. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Embeddings Vector DBs Nächste Vektoren schnell finden 85
86. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Vector DB Quelle: qdrant.tech/documentation/overview 86
87. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Vector DB Suche Effiziente Speicherung und Indexierung hochdimensionaler Daten Skaliert auf große Datensätze mit Milliarden Datenpunkten Unterstützt Echtzeit-Analysen und -Abfragen „Profikiller mit Kopfgeld“ Embedding-Modell Collection „movies“ · Cosine Similarity id Vektor 1 [0.12, −0.48, 0.33, …] Vektor [0.11, −0.50, 0.30, …] suchen Payload Titel: John Titel: Wick, John Wick, Jahr: Jahr: 2014 2014 · Treffer #1 2 [−0.71, 0.05, 0.62, …] Titel: Findet Nemo, Jahr: 2003 3 [0.09, −0.52, 0.18, …] Titel: Ocean’s Eleven, Jahr: 2001 4 [0.44, 0.27, −0.13, …] Titel: Der Pate, Jahr: 1972 87
88. Demo Vektorsuche live Qdrant + Ollama localhost:8080/#search 88
89. Lab Embedding & VectorDB angular-days-2026.brick.do 89
90. 09 RAG RetrievalQA
91. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Was ist RAG? „Retrieval-Augmented Generation (RAG) erweitert die Fähigkeiten von LLMs um das interne Wissen einer Organisation – ganz ohne das Modell neu zu trainieren. Vor dem Generieren einer Antwort greift es auf eine maßgebliche Wissensbasis außerhalb seiner Trainingsdaten zurück.“ Quelle (übersetzt): aws.amazon.com/what-is/retrieval-augmented-generation 91
92. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Fragen zu eigenen Daten beantworten Retrieval-Augmented Generation (RAG) Indexing / Embedding Dokumente Cleanup & Split EmbeddingModel Text-Embedding Vector DB QA Frage EmbeddingModel Relevanter Text LLM Antwort Query Frage 92
93. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Context Engineering Was das Modell bei jedem Aufruf sieht Context Window System-Prompt Rolle, Regeln, Format Konversation & Memory bisheriger Verlauf Retrieved Chunks aus der Vector DB (RAG) Tool-Ergebnisse APIs, MCP Nutzerfrage LLM Antwort Die Disziplin Auswählen – was überhaupt hinein darf Priorisieren – Ranking und Reihenfolge Kürzen – Chunks, ToolOutput, Verlauf Verdichten – zusammenfassen statt mitschleppen RAG ist der Retrieval-Teil von Context Engineering. 93
94. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Simple RAG Frag mich alles Suche vorbereiten Frage Begriffe Retriever Chain EmbeddingModel Frage als Vektor Ergebnisse + Frage Vector DB LLM Antwort Elemente Embedding-Model Vector DB LLM Python + LangChain 94
95. Lab Simple RAG angular-days-2026.brick.do 95
96. 10 LangGraph Agentic Orchestration
97. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Hello LangGraph Frage __start__ retrieve grade web_search_full prepare_tool_use web_search_angular generate __end__ tool_time tools Agentic Flows Lose gekoppelte Nodes Conversation History Long-term Memory State Management Parallele Ausführung Subgraphs Graph Persistence Human in the Loop Time Traveling Antwort 97
98. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen LangChain vs. LangGraph Flow Control State Management Iterative Verarbeitung Agent-Zusammenarbeit Visualisierung Komplexität LangChain Sequenziell Begrenzt Feedback-Loops schwierig Ein Agent Chain-Tracing Einfacher Einstieg LangGraph Verzweigungen und Schleifen Persistenter Graph-State über den gesamten Workflow Nativ unterstützt Mehrere Agenten mit Koordination Vollständige Graph-Visualisierung und State-Inspektion Mächtiger, steilere Lernkurve → Seit LangChain 1.0 baut LangChain selbst auf LangGraph auf Quelle: langchain.com 98
99. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Demo Simple RAG 99
100. Workshop Portal LangGraph + Angular 100
101. Enterprise AI Workflows Anforderungen an einheitlichen Wissenszugriff Wissensqualität Natural Language I/O Verschiedene Sprachen Semantische Suche Multi-Source-Integration Kontextbasierte Quellenauswahl Bewertung der Quellenqualität Quellenangaben Trust-Level-Indikatoren Quellenübergreifende Antwortsynthese Datenquellen RAG-Integration (Datenbanken) Gezielte Websuche (angular.dev) Allgemeine Websuche API-Anbindung (Echtzeitdaten) KI-gesteuerte API-Sequenzierung Robustheit Fallback-Pfade im Workflow Workflow-Orchestrierung Plug-and-play-Erweiterung um neue Quellen
102. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen ACME – Rise of Sources Coding Guideline Wiki Idee hinter dem Ansatz Einfache Erstellung von Artikeln Workflow: Draft, Review, Publish Revisionen Link-Management Autor:innen-Verwaltung Tags & Kategorien APIs: REST, RSS, Custom Open Source Regelmäßige Updates Plugin-Ökosystem = Großartige Authoring Experience und Headless Content Source 102
103. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen AI Workflows Business RAG – Simple Dokumente suchen Frage Vorteile Semantische Suche Embedding-Model → Vektor → Vector DB Kurze, präzise Antworten Antwort generieren AI (LLM) Eingabesprache ≠ Dokumentsprache Antwort Mehrere Eingabesprachen 103
104. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Demo Portal Simple RAG 104
105. Demo Simple Frontend JS Backend 105
106. Demo Portal Simple RAG 106
107. I wanna know Was ist besser, Signal Inputs oder Input Decorators? Wiki · RAG Wie viele Komponenten brauche ich mindestens für das Setup von Routing? angular.dev Höhe des Berliner Fernsehturms? Websuche Wer leitet das Post-Projekt? Projekt-API 107
108. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen ACME – Rise of Sources Ein Suchfeld für alles Guidelines Wiki angular.dev Project Management API Allgemeine Websuche Trust Level 1 Trust Level 2 Trust Level 1 Trust Level 3 Static RAG ✓ Gezielte Websuche Live API Access Alles andere 108
109. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Structured Output JSON for the win 109
110. Structured Output Wir tolerieren keine Unordnung! Structured Output erzwingt valides JSON Modelle sind dafür trainiert – Kompatibilität ist nicht garantiert Tokens, die kein valides JSON ergeben, bekommen die Wahrscheinlichkeit 0 Das JSON-Schema wird im LLM als Grammatik definiert Das LLM wird mechanisch gezwungen, valides JSON zu erzeugen Entscheidend für Datenintegrität und Tool Calling
111. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Structured Output Verfügbarkeit Bei vielen neueren Modellen verfügbar Open-Source- und proprietäre Modelle unterstützen das Feature Auch LangChain unterstützt es Beispiele OpenAI Qwen Mistral Anthropic Google u. a. 111
112. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Lab Structured Output 112
113. Tool Calling Let’s change the world 113
114. Tool Calling Fähigkeiten erweitern Idee: dem LLM mehr Fähigkeiten geben – um auf Daten und weitere Funktionen zuzugreifen, innerhalb eurer Anwendungen und Umgebungen LLM-Input System Prompt „Do x!“ Tool 1 Metadaten Tool 2 Metadaten … „Do x!“ { LLM "answer": "toolcall", "tool": "tool1", "args": […] }
115. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Tool Calling in Action Nutzer:in Mein Code LLM Query Tools API · Datenbank Prompt + Tool-Metadaten Tool Call Aufruf: Some API / Some database Ergebnis Prompt + Tool-Ergebnis Finale Antwort Antwort 115
116. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Lab Tool Calling 116
117. MCP Model Context Protocol 117
118. Was ist MCP? Ein offener Standard, um KI mit Daten zu verbinden MCP ist ein offenes Protokoll, das standardisiert, wie Anwendungen Tools, Resources und Prompts für LLMs und agentische Workflows bereitstellen. Von Anthropic als universeller Open-Source-Standard entwickelt, können Anwendungen damit strukturierte Fähigkeiten anbieten, die LLMs und Agenten aktiv nutzen, statt nur passiv Kontext zu erhalten. Stellt es euch vor wie USB-C für KI
119. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen MCP-Architektur Drei Kernkomponenten im Zusammenspiel MCP Server Stellt Clients Kontext, Tools und Prompts bereit. Jeder Server kann mehrere Ressourcen anbieten. MCP Client App / Agent Claude Desktop App Client Claude Desktop oder Web App Python MCP Client Python LangGraph App Hält 1:1-Verbindungen zu Servern, innerhalb der Host-App. Math-Tools: add() , divide() Email-Prompts: support_answer Nutzt das LLM mit Kontext aus den MCP Clients. 119
120. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen MCP Request Flow Kompletter Request/Response-Zyklus App / Agent MCP Client Verbindung aufbauen Phase 1 Connection & Discovery Phase 2 Execution Capabilities auflisten MCP Server Capabilities anfragen Tools, Resources, Prompts LLM entscheidet über Aktion Ausführung anfragen Ergebnis zurückgeben Request ausführen LLM bezieht Ergebnis ein 120
121. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen MCP-Transportprotokolle Zweieinhalb Wege, mit MCP-Servern zu kommunizieren Deprecated Stdio Standard In/Out Ideal für: lokale Prozesse, CLITools, Entwicklung Beispiel: lokaler Code-Review-MCP für die IDE Streamable HTTP Remote Ideal für: Remote-Server, CloudDeployments, Skalierbarkeit Beispiel: Enterprise-MCP-Services hinter Load Balancern SSE Server-Sent Events Ideal für: Echtzeit-Updates, langlebige Verbindungen Beispiel: Monitoring-Systeme, Live-Datenfeeds 121
122. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen MCP-Primitive Tools, Resources und Prompts Prompts Wiederverwendbare Templates für LLMs Wann: standardisierte Workflows, Best Practices Resources Daten und Kontext, die LLMs lesen können Wann: statische oder semi-statische Daten und Kontext für Workflows Tools Funktionen, die LLMs aufrufen können Wann: dynamische Aktionen, Mutationen, Berechnungen code_review bug_analysis file://docs/api.md db://customers send_email() query_database() release_notes knowledge_base:// create_ticket() 122
123. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen MCP – Interne Use Cases MCP als interne Service-Schicht für KI-Fähigkeiten Andere Teams nutzen diese Services ohne eigenen Integrationscode Teams liefern Tool-Calling-Logik als MCP-Services Vorteile ✓ Kein eigener Client-Code nötig ✓ Standard-Tooling und Monitoring ✓ Verfügbare Services leicht auffindbar Entkoppelte Teams, schnellere Iteration ✓ Wiederverwendbare KI-Fähigkeiten über Projekte hinweg ✓ Zentrale Governance und Security ✓ 123
124. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen MCP – Externe Use Cases KI-Workflows von Kund:innen ohne komplexe APIs ermöglichen Kund:innen nutzen eure Daten aus ihren KI-Workflows → MCP als kundenseitiges Interface, nicht nur internes Tooling Beispielszenarien SaaS Kundendaten per MCP bereitstellen – abfragbar aus Claude oder ChatGPT E-Commerce KI-Assistenten der Kund:innen prüfen Bestellungen, Bestand und Empfehlungen Financial Services Sicherer Zugriff auf Kontodaten für KI-gestützte Finanzberatung 124
125. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Demo MCP mit Claude Code 125
126. Lab MCP mit JS 126
127. Coding Agents Intelligentes Outsourcing 127
128. Natürliche Sprache ist der neue Code User Input GenAI Processing Generated Output Text Audio Text Bild Bild Video Audio Video Code LLM Code
129. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Coding Agents Coding Agent Tools read & edit files, run commands, invoke APIs Your prompt Understand files, codebase, web Act code edits, commands Validate run tests, check errors Result iterate 129
130. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Demo Coding Agent lokal 130
131. MCP verbindet – Skills lehren Zugriff und Know-how: zwei Hälften eines brauchbaren Coding Agents MCP – Model Context Protocol Verbindet den Agenten mit Tools, Daten und Systemen Laufender Server (JSON-RPC), eigene Authentifizierung Für alles, was sich zwischen zwei Aufrufen ändert: Live-Daten, Aktionen Das habt ihr gerade gebaut Quelle: agentskills.io Agent Skills Lehren den Agenten, wie er eine Aufgabe angeht Ein Ordner: SKILL.md + optional scripts/ , references/ Progressive Disclosure: Name & Beschreibung immer, Rest bei Bedarf Für alles, was über Wochen stabil bleibt: Vorgehen, Konventionen, Checklisten 131
132. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen AI Workflows mit LangGraph Interne Quellen „Wer leitet das Post-Projekt?“ Frage AI Topic Router Wiki Trust Level 1 AI API Sequencing AI Content Grader Dokumente Trust Level 2 API A · Projekte T1 API B · Kontakte T1 AI Generate Antwort Externe Quellen Websuche Trust Level 3 132
133. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Vom Router zum Agenten Vier Stufen der Quellenwahl Portal Simple RAG Linear retrieve → generate, immer dieselbe Quelle Keine Entscheidung, kein Fehlerfall Trust Level fix Simple-RAG-Demo Keyword-Router Regel wählt den Retriever („Star Wars“ → Starwars-Index) Deterministisch, kostenlos, testbar Bricht bei Synonymen und neuen Themen Portal Full RAG LLM-Router + Grader LLM klassifiziert einmal: Wiki, ProjektAPI oder Websuche Grader prüft den Treffer, Fallback auf angular.dev Tool-Loop nur für die Projekt-API Nächste Stufe Agentic RAG Quellen sind Tools – das LLM wählt und kombiniert Mehrere Runden: suchen, bewerten, nachladen Teurer, langsamer – dafür robuster Router entscheidet einmal – ein Agent so oft wie nötig. 133
134. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Demo Portal Full RAG 134
135. Demo Advanced Frontend JS Backend 135
136. Demo Portal Full RAG 136
137. Generative UI Wenn der Agent die Oberfläche mitgestaltet Das Payload A2UI Deklaratives JSON beschreibt, was gerendert wird Renderer für Angular (stabil), Lit, React, Flutter Offenes Projekt (Googleinitiiert), v0.9.1 stabil, v1.0 RC Die Pipe AG-UI Event-Protokoll zwischen Agent und Frontend Text-, Tool-Call-, State- und UIEvents als Stream Framework-neutral; A2UI läuft darüber (CopilotKit) Das Framework Vercel AI SDK : Server rendert React-Komponenten on the fly Eng an React/Next.js gekoppelt; AI Elements als Bausteine SDK-Core (Streaming, Tools) ist framework-agnostisch streamUI Für Angular: A2UI als Payload, AG-UI als Transport – die UI kommt als Daten, nicht als Code. Der Renderer entscheidet, welche Komponenten es gibt: euer Design System bleibt die Grenze. Quelle: a2ui.org 137
138. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Dranbleiben Podcasts und Communities zu GenAI The New York Times · wöchentlich · Englisch Hard Fork Tech-News mit Schwerpunkt KI, unterhaltsam und meinungsstark Seit Herbst 2026 mit neuen Hosts Die bisherigen Hosts Kevin Roose und Casey Newton starten im Oktober 2026 „Machine Gods“ mit NPR – zweimal pro Woche Reddit · Communities r/LocalLLaMA r/KI_de r/ClaudeAI r/Codex r/ClaudeCode heise online · Mo, Mi, Fr · Deutsch KI-Update Die wichtigsten KI-News kompakt in wenigen Minuten Mit Links zu den Themen auf heise online r/Anthropic 138
139. Angular Days 2026: KI-Bootcamp KI-Grundlagen verstehen & Frontend beherrschen Vielen Dank für eure Aufmerksamkeit! Lukas Köhler lukas.koehler@thinktecture.com @lukkoeh Felix Wunderlich felix.wunderlich@thinktecture.com 139