KI-Bootcamp: Generative AI für Angular-Entwickler:innen: Grundlagen & Backend verstehen, Frontend beherrschen

Generative AI revolutioniert Unternehmensanwendungen – aber Angular-Entwickler:innen müssen nicht zu AI-Backend-Expert:innen werden. Dieser zweitägige Workshop zeigt, wie du als Frontend-Entwickler:in professionell mit GenAI-APIs arbeiten und dabei optimale Benutzeroberflächen für AI-Anwendungen schaffst.

Wir vermitteln zunächst das notwendige Generative AI-Wissen für die Schwerpunkte von AI-Backendentwicklern, um mitreden zu können: Prompts, Chats, Reasoning, RAG, Agenten und AI-Workflows. Einfache PoC-Implementierungen erfolgen dabei mit Python und den Frameworks LangChain/LangGraph, um State-of-the-Art AI-Funktionalität als REST-APIs bereitzustellen – der perfekte Anknüpfungspunkt für Angular-Entwickler:innen.

Der Fokus liegt auf modernen Frontend-Herausforderungen: optimaler API-Konsum, Streaming-Implementation für Echtzeit-Antworten, Darstellung von Reasoning-Prozessen bei Thinking-Modellen und die Erweiterung von Anwendungen um TypeScript-basierte MCP Server, die dem AI-Backend Zugriff auf Unternehmensdaten ermöglichen.

Alle Konzepte demonstrieren wir anhand eines vollständigen Enterprise-Szenarios: Ein Developer-Portal, das statische Guidelines durch AI-generierte, kontextbezogene Empfehlungen ergänzt. Das Backend verknüpft dabei Unternehmenswissen aus verschiedenen Quellen intelligent – von Wikis über Vektordatenbanken und MCP-Server bis hin zu externen Recherchen. Sie erweitern eine bestehende Angular-App um Obsidian-Integration als Wissensspeicher und lernen, wie die Zusammenarbeit zwischen AI-Backend-Teams und Frontend-Entwicklern optimal funktioniert.

Transcript

1. Generative AI für Angular-Entwickler:innen: Grundlagen & Backend verstehen, Frontend beherrschen JSDays 2026: KI-Bootcamp Lukas Köhler Felix Wunderlich @lukkoeh AI Developer AI Developer
2. Hello, it’s me. Generative AI Developer Thinktecture AG X: @lukkoeh E-Mail: lukas.koehler@thinktecture.com LinkedIn: https://www.linkedin.com/in/lukkoeh/ https://www.thinktecture.com/thinktects/lukas-koehler/ Angular Days 2026: KI Bootcamp Lukas Köhler KI Grundlagen verstehen & Frontend beherrschen
3. Hello, it’s me. Angular Days 2026: KI Bootcamp Felix Wunderlich KI Grundlagen verstehen & Frontend beherrschen Experte für Angular und Generative KI Thinktecture AG E-Mail: felix.wunderlich@thinktecture.com LinkedIn: https://linkedin.com/in/felixwdl
4. 09:00–10:30 Block 1 (1,5h) 10:30–11:00 Coffee Break 11:00–12:30 Block 2 (1,5h) 12:30–13:30 Lunch Break 13:30–15:00 Block 3 (1,5h) 15:00–15:30 Coffee Break 15:30–17:00 Block 4 (1,5h) Angular Days 2026: KI Bootcamp Workshop Timetable KI Grundlagen verstehen & Frontend beherrschen
5. Angular Days 2026: KI Bootcamp Workshop Landing Page KI Grundlagen verstehen & Frontend beherrschen You get: • Landing Page with all details • 6 Labs (Colab Notebook / Stackblitz) • 6 Solutions (Colab Notebook / Stackblitz) • 3 Demo Colab Notebooks • AI Endpoint Key for OVH (EU) You need: • Google account • Access to colab.google.com • Langfuse.com account • Access to stackblitz.com https://angular-days-2026.brick.do/
6. Why is it important? Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Generative AI AI understands and generates natural language AI can access knowledge from the training phase
7. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen
8. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Workshop Showcase AI-powered Portal
9. It could be worse Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen ACME Coding Guideline Portal QA-Workflow-Requirements for ACME Coding Portal • Natural language I/O • Different languages • Semantic search • Multi-source integration • Context based source selection • Source quality assessment • Source attribution • Trust level indicators • Cross-source answer synthesis • Coding Guideline Wiki via RAG • External Guidelines via RAG • Project Details via API • Project Manager Details via API • Fallback: Websearch • All integrated in current Portal
10. One Search Box for Everything Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen ACME – Rise of Sources Guidelines Wiki angular.dev Project Management API Static RAG Trust Level General Websearch Live RAG Trust Level Live API Access Trust Level Everything Else Trust Level
11. Backend: Python in Cloud AIaaS: OpenAI & MistralAI Frontend: with/about Angular Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen LangGraph Real World Sample User: „Was ist besser, Signal Inputs oder Input Decorators?“ AI: „Laut den ACME-Richtlinien sollten Signal-Inputs anstelle von `@Input()` verwendet werden.“
12. Let’s say “Hello” to an LLM Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Large Language Models OpenAI Anthropic MistralAI https://github.com/jamesmurdza/llm-api-examples/blob/main/README-python.md
13. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen LangChain Abstractions for GenAI
14. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Hello LangChain https://www.langchain.com/
15. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Hello LangChain https://docs.langchain.com/oss/python/integrations/chat/openai
16. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Hello LangChain https://docs.langchain.com/oss/python/integrations/chat/openai
17. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Lab: LangChainJS Chat https://angular-days-2026.brick.do/
18. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Lab: LangChain Chat https://angular-days-2026.brick.do/
19. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Generative AI In the World of AI
20. Artificial Intelligence (AI) Classification Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Generative AI Machine Learning Deep Learning GenAI Intelligent Machines Pattern Recognition in Data Pattern Recognition in unstructured Data Human language understanding and generation
21. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Generative AI Mindset
22. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Natural Language is the new Code User Input GenAI Processing Generated Output LLM Prompt
23. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Natural Language is the new Code User Input GenAI Processing Generated Output LLM
24. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Natural Language is the new Code Juni 2022 Vs. September 2025 Generiere ein Bild von einer älteren Katze im Business-Anzug, 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.
25. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Natural Language is the new Code Me standing in front of a back to the future time machine; parking lot from the photo in the back
26. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Natural Language is the new Code I'm looking a bit surprised because of the DMC in the background. Time: golden hour.
27. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Natural Language is the new Code User Input GenAI Processing Generated Output LLM
28. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Natural Language is the new Code User Input GenAI Processing Generated Output LLM
29. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Natural Language is the new Code User Input GenAI Processing Generated Output LLM
30. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Natural Language is the new Code User Input GenAI Processing Generated Output LLM
31. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Natural Language is the new Code User Input GenAI Processing Generated Output LLM
32. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Natural Language is the new Code User Input GenAI Processing Generated Output LLM
33. Natural Language is the new Code Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Juni 2022 Vs. März 2026
34. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Natural Language is the new Code User Input GenAI Processing Generated Output LLM https://artificialanalysis.ai/
35. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Natural Language is AI writes the new Code
36. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Natural Language is the new Code User Input GenAI Processing Generated Output LLM
37. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen AGI https://situational-awareness.ai/wp-content/uploads/2024/06/situationalawareness.pdf
38. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen GenAI News - Models
39. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen LLMs Large Language Models
40. It’s just text – “Language” ▪ LLMs can understand text – this changes a lot ▪ LLMs generate text based on input ▪ Most LLMs can break down complex problems using CoT ▪ Some LLMs can reason about the best strategy to solve a problem ▪ Prompts are the universal interface (“UI”) → unstructured text with semantics ▪ Human language evolves as a first-class citizen in software architecture Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Large Language Models
41. It’s just text – “Language” ▪ LLMs are programs ▪ LLMs are highly specialized neural networks ▪ LLMs are pre-filled with a parametric knowledge (“frozen knowledge”) ▪ LLMs need a lot of resources to be operated ▪ LLMs have an API to be used through Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Large Language Models
42. Neural networks in a nutshell Input layer Output layer Hidden layers ▪ Neural networks are (just) data ▪ Layout parameters ▪ Define how many layers ▪ How many nodes per layer ▪ How nodes are connected ▪ LLMs usually are sparsely connected KI Grundlagen verstehen & Frontend beherrschen Angular Days 2026: KI Bootcamp
43. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen LLMs Insight into the functioning of an LLM
44. Inside the Transformer Architecture Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Large Language Models https://poloclub.github.io/transformer-explainer/
45. Inside the Transformer Architecture “Attending a conference expands your” • Possibility 1 • Possibility 2 • Possibility 3 • Possibility 4 • Possibility 5 • Possibility 6 • … Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Large Language Models
46. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Demo: Transformer Model https://angular-days-2026.brick.do/
47. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Demo Chain of Thought (CoT)
48. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen
49. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Demo Reasoning Teaser: Tom: 20 Murmeln Max: 16 Murmeln Leo: 28 Murmeln
50. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Demo 2 Reasoning
51. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen GenAI The Building Blocks
52. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Knowledge Cutoff I know things
53. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen
54. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen
55. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen
56. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Tokens Currency for GenAI
57. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Die schwarze Katze schläft auf dem Sofa im Wohnzimmer. Tokenizer Microsoft Phi-2 Tokens in Text & as Values 32423, 5513, 5767, 2736, 8595, 2736, 5513, 75, 11033, 701, 257, 3046, 1357, 1406, 13331, 545, 370, 1562, 89, 10957, 13 Token Count 21 OpenAI GPT-3.5T 18674, 82928, 3059, 17816, 3059, 5817, 44283, 728, 7367, 2486, 61948, 737, 53895, 65574, 13 15 OpenAI GPT-4o 8796, 193407, 181909, 161594, 826, 2933, 2019, 71738, 770, 138431, 13 11 https://tiktokenizer.vercel.app/ OpenAI GPT-3.5T 791, 3776, 8415, 374, 21811, 389, 279, 32169, 304, 279, 5496, 3130, 13 13
58. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen
59. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Context Window Tell me more!
60. Definition “The context window of LLMs is the number of tokens the model can take as input when generating responses.” Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Context Window Size
61. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Context Window Size https://www.vellum.ai/llm-leaderboard Input Tokens Output Tokens Processing
62. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen https://claude.com/blog/1m-context-ga
63. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Mixture of Experts Together we are more!
64. Definition A Mixture of Experts (MoE) routes each token to one or a few expert feed-forward networks at inference, so only a small subset of parameters is actively computed per token. Despite sparse compute, all experts must be resident in memory, making VRAM usage similar to a much larger dense model. The shared attention and routing plus limited expert activations yield throughput comparable to a smaller dense model, while incurring extra communication for moving tokens to their chosen experts. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Mixture of Experts
65. Architecture Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Mixture of Experts https://huggingface.co/blog/moe
66. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen LLMs Selection criteria
67. Simply the best? Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Model Selection https://artificialanalysis.ai
68. Your requirements are crucial Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Model Selection Performance (Tokens per Second - t/s) – Speed of response generation. Pricing – Pay-per-use, subscription, on-premises costs, and overall cost efficiency. Reasoning Capabilities – Logical reasoning, problem-solving, and multi-step thought processes. Tool Use – Ability to use external tools (e.g., APIs, code execution, web browsing, database querying). Context Window Size – Maximum number of tokens the model can process at once. License & Cost – Open-source vs. proprietary, usage fees, and commercial viability. Fine-tuning & Adaptability – Ability to fine-tune on domain-specific data. On-Premises Deployment – Availability for local hosting instead of cloud-only access. Multimodal Capabilities – Ability to process text, images, audio, or video. Prompt Caching & Efficiency – Ability to reduce redundant processing, and optimize query handling. Multilingual Support – Capability to understand and generate multiple languages. Data Privacy & Compliance – Adherence to GDPR, HIPAA, and other regulatory requirements. Efficiency (Compute & Memory Requirements) – Hardware requirements for inference and training.
69. Proprietary vs Open Weights Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Model Selection https://artificialanalysis.ai
70. Reasoning or Fast Output? Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Model Selection https://artificialanalysis.ai
71. Start your Engines! Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Model Selection https://artificialanalysis.ai
72. How much is the fish? Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Model Selection https://artificialanalysis.ai
73. Reasoning or Fast Output? Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Model Selection https://artificialanalysis.ai
74. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen • 7 Open Source Models • 9 Closed Source Models • 2 Models for Code Generation • 2 Embedding Model • Fine-Tuning API • Models fluent in English, French, Italian, German, Spanish • Similar prompting • Run: Mistral AI, Azure, AWS, On-Prem • Located in Paris/France • Your data will not used for training (API)
75. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen
76. Split your GenAI tasks Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Model Selection One big prompt to solve your task completely Requires a powerful model Large LLM: very expensive Tool Calling (Medium LLM) Extraction (Small LLM) Classification (Small LLM) Answering (Medium/Large LLM)
77. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Real World Use Case
78. Your Forms can do more Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Smart Web-Apps https://github.com/thinktecture-labs/smart-form-filler/
79. Your Forms can do more Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Smart Web-Apps
80. Your Forms can do more Challenges • Training: Users need to understand what information to enter where • Special Cases: Input of unstructured or missing data takes longer • Hands free: Using a keyboard doesn’t fit the working environment GenAI Solution • Creates a link between input data and form details • Knowledge of many languages available • Can use voice input as source Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Smart Web-Apps
81. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Demo Smart Forms https://github.com/thinktecture-labs/smart-form-filler
82. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Lab: Smart Form Filler https://angular-days-2026.brick.do/
83. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Embeddings Language to Bytes
84. 91 ▪ Classic search: lexical ▪ Compares words, parts of words and variants ▪ Classic SQL: WHERE ‘content’ LIKE ‘%searchterm%’ ▪ We can search only for things where we know that it’s somewhere in the text ▪ New: Semantic search ▪ Compares for the same contextual meaning ▪ “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” Semantic Search KI Grundlagen verstehen & Frontend beherrschen Angular Days 2026: KI Bootcamp
85. [ 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 ] Embedding-Model KI Grundlagen verstehen & Frontend beherrschen Angular Days 2026: KI Bootcamp
86. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Embedding-Model Choice A Choice B
87. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Embedding-Model
88. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Vector DBs Find nearest vectors quickly
89. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Vector DB https://qdrant.tech/documentation/overview/ • Efficient storage and indexing of high-dimensional data. • Ability to handle large-scale datasets with billions of data points. • Support for real-time analytics and queries.
90. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Vector DB https://qdrant.tech/documentation/overview/
91. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Lab: Embedding & VectorDB https://angular-days-2026.brick.do/
92. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen RAG RetrievalQA
93. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen What is RAG? https://aws.amazon.com/what-is/retrieval-augmented-generation/ “Retrieval-Augmented Generation (RAG) extends the capabilities of LLMs to an organization's internal knowledge, all without the need to retrain the model. It references an authoritative knowledge base outside of its training data sources before generating a response”
94. Answering Questions on Data Retrieval-augmented generation (RAG) Cleanup & Split Text Embedding Question Text Embedding Save Query Relevant Text Question LLM Vector DB Embedding model Embedding model Indexing / Embedding QA KI Grundlagen verstehen & Frontend beherrschen Angular Days 2026: KI Bootcamp
95. Ask me anything Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Simple RAG Question Prepare Search Search Results Question LLM Vector DB Embedding Model Question as Vector Workflow Terms - Retriever - Chain Elements Embedding- Model Vector- DB Python LLM Langchain
96. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Demo Simple RAG LangChain
97. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Lab: Simple RAG https://angular-days-2026.brick.do/
98. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen LangGraph Agentic Orchestration
99. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Hello LangGraph https://www.langchain.com/langgraph
100. Hello Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen AI Workflows Question Answer • Agentic Flows • Loosely coupled Nodes • Conversation History • Long-term Memory • State Management • Parallel Execution • Subgraphs • Graph Persistence • Human in the Loop • Time Traveling
101. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen LangChain vs LangGraph https://www.langchain.com/
102. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Demo Simple RAG LangGraph
103. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Workshop Portal LangGraph + Angular
104. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Enterprise AI Workflows QA-Workflow-Requirements for Unified company knowledge access • Natural language I/O • Different languages • Semantic search • Multi-source integration • Context based source selection • Source quality assessment • Source attribution • Trust level indicators • Cross-source answer synthesis • Web search capability • RAG integration (databases) • API connectivity (realtime data) • AI-driven API sequencing • Fallback workflow paths • Workflow orchestration logic • Plug-and-play source extension
105. Coding Guideline Wiki Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen ACME – Rise of Sources Idea behind this approach • Easy creation of Articles • Workflow: Draft, Review, Publish • Revisions • Link Management • Author Management • Tags & Categories • APIs: REST, RSS, Custom • Open Source • Regular Updates • Plugin Ecosystem = Great Authoring Experience and Headless Content Source
106. Business RAG - Simple Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen AI Workflows Question Search Documents Generate Answer Answer AI (LLM) Vector DB Embedding Model Vector Benefits: • Semantic Search • Short, concise answers • Input Language <> Document Language • Multiple Input Languages
107. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Demo: Portal Simple RAG Backend
108. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Demo: Simple Frontend JS
109. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Demo: Portal Simple RAG Frontend
110. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen I wanna know Question Answer • Was ist besser, signal inputs oder input decorators? • Wie viele Komponenten brauche ich mindestens für das Setup von Routing? • Höhe des Berliner Fernsehturms? • Wer leitet das Post-Projekt?
111. One Search Box for Everything Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen ACME – Rise of Sources Guidelines Wiki Angular.dev Project Management API Static RAG Trust Level General Websearch Live RAG Trust Level Live API Access Trust Level Everything Else Trust Level
112. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Structured Output JSON for the win
113. We do not tolerate disorder! ▪ Structured Output forces valid JSON-Output ▪ Models are trained for this use-case, compatibility is not guaranteed ▪ Tokens that are not JSON get the probablity 0 ▪ JSON-Schema is defined as Grammar inside the LLM ▪ LLM is mechanically forced to adhere to valid JSON ▪ Structured Output is crucial for data integrity and tool calling Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Structured Output
114. Availability ▪ Structured Output is widely available for many newer models ▪ Open-Source & Proprietary Models support this feature ▪ LangChain supports it too ▪ Examples: OpenAI, Qwen, Mistral, Anthropic, Google etc. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Structured Output
115. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Lab: Structured Output https://angular-days-2026.brick.do/
116. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Tool Calling Let’s change the world
117. ▪ Idea: Give LLM more capabilities ▪ To access data and other functionality ▪ Within your applications and environments Extending capabilities “Do x!” LLM “Do x!” System prompt Tool 1 metadata Tool 2 metadata... { “answer”: “toolcall”, “tool” : “tool1” “args”: […] } KI Grundlagen verstehen & Frontend beherrschen Angular Days 2026: KI Bootcamp
118. Tool Calling in Action LLM My code Query Some API Some database Prompt Tools Final answer Answer KI Grundlagen verstehen & Frontend beherrschen Angular Days 2026: KI Bootcamp
119. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Lab: Tool Calling https://angular-days-2026.brick.do/
120. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen MCP Model Context Protocol
121. An open standard for connecting AI to data Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen What is MCP? MCP is an open protocol that standardizes how applications offer Tools, Resources, and Prompts to LLMs and agentic workflows. Created by Anthropic as an open source universal standard, MCP enables applications to expose structured capabilities including tools, resources, and prompts, allowing LLMs and agents to actively leverage these capabilities rather than just receiving passive context.
122. An open standard for connecting AI to data Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen What is MCP? Think of MCP as: USB-C for AI Universal connector standard HTTP for LLM context Common protocol for data access npm for AI tools Discoverable, reusable components
123. Three core components working together Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen MCP Architecture MCP Server Math-Tools: add(), divide() MCP Client App/Agent Provide context, tools, and prompts to clients Each server can offer multiple ressources Maintain 1:1 connections with servers, inside the host app Uses LLM with context from MCP clients Email-Prompts: support_answer Claude Desktop App Client Python MCP Client Claude Desktop or Web App Python LangGraph App
124. Complete request/response cycle Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen MCP Request Flow MCP Server MCP Client App/Agent Request capabilities Return tools, resources, prompts LLM decides action Request execution Establish connection List capabilities Execute request Return result LLM incorporates result
125. Two-and-a-half ways to communicate with MCP servers Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen MCP Transport Protocols Stdio (Standard In/Out) Best for: Local processes, CLI tools, development Example: Local Code Review MCP für IDE Streamable HTTP Best for: Remote servers, cloud deployments, scalability Example: Enterprise MCP services behind load balancers SSE (Server-Sent Events) Best for: Real-time updates, long-lived connections Example: Monitoring systems, live data feeds Deprecated
126. Three primitive types MCP servers can expose Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen MCP Resources: Tools, Resources, Prompts Prompts Resources Tools Reusable templates for LLMs Data and context LLMs can read Functions LLMs can invoke When: Dynamic actions, mutations, computations Examples: send_email() query_database() create_ticket() When: Static/semi-static data and context for workflows Examples: file://docs/api.md db://customers knowledge_base:// When: Standardized workflows, best practices Examples: code_review bug_analysis release_notes
127. MCP as internal service layer for AI capabilities Benefits: Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen MCP - Internal Use Cases Teams deliver tool-calling logic wrapped as MCP services Other teams consume these services without custom integration code ✓ No custom client code needed ✓ Standard tooling and monitoring ✓ Easy discovery of available services ✓ Decoupled teams and faster iteration ✓ Reusable AI capabilities across projects ✓ Centralized governance and security
128. Enable customer AI workflows without complex APIs Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen MCP - External Use Cases Example Scenarios: Let customers interact with YOUR data from THEIR AI workflows MCP as a customer-facing interface, not just internal tooling ✓ SaaS: Expose customer's data via MCP so they can query it from Claude/ChatGPT ✓ E-commerce: Let customers' AI assistants check orders, inventory, recommendations ✓ Financial Services: Secure account data access for AI-powered financial advisors
129. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Demo MCP with Claude Code
130. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Coding Agents Intelligent Outsourcing
131. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Natural Language is the new Code User Input GenAI Processing Generated Output LLM
132. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen https://code.visualstudio.com/docs/copilot/concepts/agents
133. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Lab: MCP mit JS https://angular-days-2026.brick.do/
134. External Sources Angular Days 2026: KI Bootcamp Internal Sources KI Grundlagen verstehen & Frontend beherrschen AI Workflows with LangGraph Question Answer
135. External Sources Angular Days 2026: KI Bootcamp Internal Sources KI Grundlagen verstehen & Frontend beherrschen AI Workflows with LangGraph Question Answer Wer leitet das Post-Projekt?
136. External Sources Angular Days 2026: KI Bootcamp Internal Sources KI Grundlagen verstehen & Frontend beherrschen AI Workflows with LangGraph Question Wiki Trust Level: 1 Answer Websearch Trust Level: 3 Documents Trust Level: 2 API A Projects (T1) API B Contacts (T1) Wer leitet das Post-Projekt?
137. External Sources Angular Days 2026: KI Bootcamp Internal Sources KI Grundlagen verstehen & Frontend beherrschen AI Workflows with LangGraph Question Wiki Trust Level: 1 Answer Websearch Trust Level: 3 Documents Trust Level: 2 API A Projects (T1) API B Contacts (T1) ? Wer leitet das Post-Projekt?
138. External Sources Angular Days 2026: KI Bootcamp Internal Sources KI Grundlagen verstehen & Frontend beherrschen AI Workflows with LangGraph Question Wiki Trust Level: 1 Answer Websearch Trust Level: 3 Documents Trust Level: 2 API A Projects (T1) API B Contacts (T1) ? ? Wer leitet das Post-Projekt?
139. External Sources Angular Days 2026: KI Bootcamp Internal Sources KI Grundlagen verstehen & Frontend beherrschen AI Workflows with LangGraph Question Wiki Trust Level: 1 Answer Websearch Trust Level: 3 Documents Trust Level: 2 API A Projects (T1) API B Contacts (T1) ? ? ? Wer leitet das Post-Projekt?
140. External Sources Angular Days 2026: KI Bootcamp Internal Sources KI Grundlagen verstehen & Frontend beherrschen AI Workflows with LangGraph Question Wiki Trust Level: 1 Answer Websearch Trust Level: 3 Documents Trust Level: 2 API A Projects (T1) API B Contacts (T1) ? ? ? ? Wer leitet das Post-Projekt?
141. External Sources Angular Days 2026: KI Bootcamp Internal Sources KI Grundlagen verstehen & Frontend beherrschen AI Workflows with LangGraph Question Wiki Trust Level: 1 Answer AI Topic Router Websearch Trust Level: 3 AI Content Grader Documents Trust Level: 2 AI API Sequencing AI Generate API A Projects (T1) API B Contacts (T1) Wer leitet das Post-Projekt?
142. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Demo: Portal Full RAG Backend
143. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Demo: Adv. Frontend JS
144. Angular Days 2026: KI Bootcamp KI Grundlagen verstehen & Frontend beherrschen Demo: Portal Full RAG Frontend
145. Thank you for your kind attention! Lukas Köhler lukas.koehler@thinktecture.com @lukkoeh Felix Wunderlich felix.wunderlich@thinktecture.com