JavaScript Days 2025 - KI-Bootcamp - Generative AI für Angular-Entwickler - Grundlagen und 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 2025: KI-Bootcamp Marco Frodl Felix Wunderlich @marcofrodl AI Consultant AI Developer
2. Hello, it’s me. Principal Consultant for Generative AI Thinktecture AG X: @marcofrodl E-Mail: marco.frodl@thinktecture.com LinkedIn: https://www.linkedin.com/in/marcofrodl/ https://www.thinktecture.com/thinktects/marco-frodl/ Marco Frodl
3. Hello, it’s me. Felix Wunderlich Felix Wunderlich felix.schuetz@thinktecture.com Experte für Angular und Generative KI
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) Workshop Timetable
5. Workshop Landing Page 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 https://js-days-2025.brick.do/
6. Why is it important? Generative AI AI understands and generates natural language AI can access knowledge from the training phase
8. Workshop Showcase AI-powered Portal
9. It could be worse 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 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 LangGraph Real World Sample User: „Was ist besser signal inputs oder inputs()?“ AI: „Laut den ACME-Richtlinien sollten Signal-Inputs anstelle von `@Input()` verwendet werden.
12. Generative AI In the World of AI
13. Artificial Intelligence (AI) Classification Generative AI Machine Learning Deep Learning GenAI Intelligent Machines Pattern Recognition in Data Pattern Recognition in unstructured Data Human language understanding and generation
14. Generative AI Mindset
15. Natural Language is the new Code User Input GenAI Processing Generated Output LLM Prompt
16. Natural Language is the new Code User Input GenAI Processing Generated Output LLM
17. 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.
18. 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
19. Natural Language is the new Code I'm looking a bit surprised because of the DMC in the background. Time: golden hour.
20. Natural Language is the new Code User Input GenAI Processing Generated Output LLM
21. Natural Language is the new Code User Input GenAI Processing Generated Output LLM
22. Natural Language is the new Code User Input GenAI Processing Generated Output LLM
23. Natural Language is the new Code User Input GenAI Processing Generated Output LLM
24. Natural Language is the new Code User Input GenAI Processing Generated Output LLM
25. Natural Language is the new Code User Input GenAI Processing Generated Output LLM
26. Natural Language is the new Code Juni 2022 Vs. September 2025
27. Natural Language is the new Code User Input GenAI Processing Generated Output LLM https://artificialanalysis.ai/
28. Natural Language is AI writes the new Code
29. Natural Language is the new Code User Input GenAI Processing Generated Output LLM
30. GenAI News - Investments
31. AGI https://situational-awareness.ai/wp-content/uploads/2024/06/situationalawareness.pdf
32. GenAI News - Models
33. LLMs Large Language Models
34. 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 Large Language Models
35. 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 Large Language Models
36. 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
37. LLMs Insight into the functioning of an LLM
38. Inside the Transformer Architecture Large Language Models https://poloclub.github.io/transformer-explainer/
39. Inside the Transformer Architecture “Attending a conference expands your” • Possibility 1 • Possibility 2 • Possibility 3 • Possibility 4 • Possibility 5 • Possibility 6 • … Large Language Models
40. Demo: Transformer Model https://js-days-2025.brick.do/
41. Demo Chain of Thought (CoT)
43. Demo Reasoning Teaser: Tom: 20 Murmeln Max: 16 Murmeln Leo: 28 Murmeln
44. Demo 2 Reasoning
45. GenAI The Building Blocks
46. Knowledge Cutoff I know things
49. Tokens Currency for GenAI
50. 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
51. Context Window Tell me more!
52. Definition “The context window of LLMs is the number of tokens the model can take as input when generating responses.” Context Window Size
53. Context Window Size https://www.vellum.ai/llm-leaderboard Input Tokens Output Tokens Processing
54. Mixture of Experts Together we are more!
55. 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. Mixture of Experts
56. Architecture Mixture of Experts https://huggingface.co/blog/moe
57. Let’s say “Hello” to a LLM Large Language Models OpenAI Anthropic MistralAI https://github.com/jamesmurdza/llm-api-examples/blob/main/README-python.md
58. LangChain Abstractions for GenAI
59. Hello LangChain https://www.langchain.com/
60. Hello LangChain https://python.langchain.com/docs/integrations/chat/
61. Lab: LangChainJS Chat https://js-days-2025.brick.do/ Felix
62. Lab: LangChain Chat https://js-days-2025.brick.do/
63. LLMs Selection criteria
64. Simply the best? Model Selection https://artificialanalysis.ai
65. Your requirements are crucial 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.
66. Proprietary vs Open Weights Model Selection https://artificialanalysis.ai
67. Reasoning or Fast Output? Model Selection https://artificialanalysis.ai
68. Start your Engines! Model Selection https://artificialanalysis.ai
69. How much is the fish? Model Selection https://artificialanalysis.ai
70. Reasoning or Fast Output? Model Selection https://artificialanalysis.ai
71. • 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)
73. Split your GenAI tasks 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)
74. Real World Use Case
75. Your Forms can do more Smart Web-Apps https://github.com/thinktecture-labs/smart-form-filler/
76. 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 does’nt 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 Smart Web-Apps
77. Demo Smart Forms https://github.com/thinktecture-labs/smart-form-filler/
78. Your Forms can do more Smart Web-Apps
79. Lab: Smart Form Filler https://js-days-2025.brick.do/ Felix
80. Embeddings Language to Bytes
81. 87 ▪ 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 its 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
82. [ 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
83. Embedding-Model Choice A Choice B
84. Embedding-Model
85. Vector DBs Find nearest vectors quickly
86. 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.
87. Vector DB https://qdrant.tech/documentation/overview/
88. Lab: Embedding & VectorDB https://js-days-2025.brick.do/
89. RAG RetrievalQA
90. What is RAG? “Retrieval-Augmented Generation (RAG) extends the capabilities of LLMs to an organization's internal knowledge, all without the need to retrain the model.
91. 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”
92. Answering Questions on Data Retrieval-augmented generation (RAG) Cleanup & Split Text Embedding Question Text Embedding Save Query Relevant Text Question LLM 100 Vector DB Embedding model Embedding model Indexing / Embedding QA
93. Ask me anything 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
94. Demo Simple RAG LangChain
95. Lab: Simple RAG https://js-days-2025.brick.do/
96. LangGraph Agentic Orchestration
97. Hello LangGraph https://www.langchain.com/langgraph
98. Hello 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
99. LangChain vs LangGraph https://www.langchain.com/
100. Demo Simple RAG LangGraph
101. Workshop Portal LangGraph + Angular
102. Enterprise AI Workflows
103. 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
104. Coding Guideline Wiki 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
105. Business RAG - Simple 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
106. Demo: Portal Simple RAG Backend
107. Demo: Simple Frontend JS https://js-days-2025.brick.do/ Felix
108. Demo: Portal Simple RAG Frontend
109. I wanna know Question Answer • Was ist besser signal inputs oder inputs()? • Wie viele Komponenten brauche ich mindestens für das Setup von Routing? • Höhe des Berliner Fernsehturms • Wer leitet das Post-Projekt
110. One Search Box for Everything 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
111. Tool Calling Let’s change the world
112. ▪ 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”: […] }
113. Tool Calling in Action LLM My code Query Some API Some database Prompt Tools Final answer Answer
114. Demo: Tool Calling Notebook Tool Calling
115. Lab: Tool Calling https://js-days-2025.brick.do/
116. MCP Model Context Protocol
117. An open standard for connecting AI to data 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.
118. An open standard for connecting AI to data 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
119. Three core components working together 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
120. Complete request/response cycle 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
121. Three ways to communicate with MCP servers MCP Transport Protocols Stdio (Standard In/Out) Best for: Local processes, CLI tools, development Example: Local Code Review MCP für IDE HTTPS with Streaming 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
122. Three primitive types MCP servers can expose 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
123. MCP as internal service layer for AI capabilities Benefits: 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
124. Enable customer AI workflows without complex APIs 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
125. Lab: MCP mit JS https://js-days-2025.brick.do/ Felix
126. Demo MCP with Claude Web
127. External Sources Internal Sources AI Workflows with LangGraph Question Answer
128. External Sources Internal Sources AI Workflows with LangGraph Question Answer Wer leitet das Post-Projekt?
129. External Sources Internal Sources 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?
130. External Sources Internal Sources 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?
131. External Sources Internal Sources 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?
132. External Sources Internal Sources 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?
133. External Sources Internal Sources 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?
134. External Sources Internal Sources 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?
135. Demo: Portal Full RAG Backend
136. Demo: Portal Full RAG Frontend
137. Thank you for your kind attention! Marco Frodl @marcofrodl marco.frodl@thinktecture.com