AI-Praxis: Intelligente Business-Apps mit Angular, LangGraph und RAG

Generative AI kann Unternehmensinformationen aus Systemen wie Confluence, Jira oder Files in wertvolles Wissen umwandeln, das in natürlicher Sprache abfragbar ist. In diesem 8-stündigen Workshop zeigen die Gen-AI-Technical-Consultants Christian Liebel und Marco Frodl, wie eine Generative-AI-Anwendung für Unternehmensherausforderungen entwickelt wird, mit Fokus auf Datenrecherche in natürlicher Sprache mit einem AI-Backend und einem Angular-Frontend.
Der Workshop bietet eine Einführung in die Grundlagen von Generative AI, einschließlich der Unterschiede zu AI und ML sowie Konzepte wie LLMs, Embeddings, Retrieval Augmented Generation (RAG) und Python-basierenden AI-Frameworks.
Im Mittelpunkt steht die praktische Migration eines statischen Developer-Portals in eine intelligente, mit natürlicher Sprache nutzbare Informationsquelle. Gemeinsam entwickeln wir ein intelligentes System, das Fragen von Entwicklern beantwortet und deren Produktivität mit KI-basierten, kontextbezogenen Empfehlungen verbessert. Statt statischer Coding Guidelines kommen dynamische, AI-generierte Empfehlungen zum Einsatz, die individuell auf die Bedürfnisse der Entwickler zugeschnitten sind.
Mit LangChain und LangGraph erstellen wir einen agentic AI-Workflow, der Fragen intelligent verarbeitet und dabei automatisch die beste aus vier Datenquellen wählt: das interne Unternehmenswiki, Projektmanagement-APIs, die offizielle Angular-Dokumentation oder öffentliche Suchmaschinen. Ein zentraler Aspekt ist die Integration von Echtzeitdaten aus APIs mittels Tool Calling, wodurch die KI gezielt Abfragen anstoßen kann, um stets die aktuellsten Informationen bereitzustellen.
Datenschutz hat dabei höchste Priorität – wir setzen mit Mistral Small ein europäisches Open Source-LLM ein, das Datentransfers außerhalb Europas vermeidet und lokalen Betrieb ermöglicht. Mit Langfuse implementieren wir vollständige Nachvollziehbarkeit durch AI-Tracing, das Transparenz, Kostenübersicht und Debugging ermöglicht.
Neben den Antworten liefert das Portal auch entsprechende Quellenangaben, sodass Nutzer die Verlässlichkeit der Informationen einschätzen können. Zusätzlich können Nutzer Feedback und Kommentare zu den Ergebnissen geben, um die Antworten kontinuierlich zu verbessern.
Der Workshop behandelt die Entwicklung eines AI-Systems von der Einführung in Generative AI über die Entwicklung von AI-Workflows mit entsprechendem Backend bis zur Benutzerinteraktion in einer Angular-App. Teilnehmer können Aspekte in Google Colab mitimplementieren, um technische Details besser zu verstehen.
Lernen Sie, wie Sie Unternehmensinformationen optimal nutzen und durch Generative AI und Angular Effizienz steigern können.

Transcript

1. Intelligente Business-Apps mit Angular, LangGraph und RAG Marco Frodl Christian Liebel @marcofrodl @christianliebel Consultant Consultant DWX 2025: AI-Praxis-Workshop
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. Christian Liebel X: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
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:30 Block 4 (2h) Workshop Timetable
5. Workshop Landing Page You get: • Landing Page with all details • 4 Labs in Colab Notebooks • 4 Solutions in Colab Notebooks • 3 Demo Colab Notebooks • AI Endpoint Key for OVH (EU) You need: • Google account • Access to colab.google.com • Langfuse.com account https://dwx-2025.brick.do/
6. Why is it important? Generative AI AI understands and generates natural language AI can access knowledge from the training phase
7. Workshop Showcase AI-powered Portal
8. 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
9. 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 🥉
10. 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.
11. Generative AI In the World of AI
12. 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
13. Generative AI Mindset
14. Natural Language is the new Code User Input GenAI Processing Generated Output LLM Prompt
15. Natural Language is the new Code User Input GenAI Processing Generated Output LLM
16. Natural Language is the new Code Juni 2022 Vs. Juli 2024 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.
17. Natural Language is the new Code User Input GenAI Processing Generated Output LLM
18. Natural Language is the new Code User Input GenAI Processing Generated Output LLM
19. Natural Language is the new Code User Input GenAI Processing Generated Output LLM
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 Juni 2022 Vs. Juli 2024
24. Natural Language is the new Code User Input GenAI Processing Generated Output LLM
25. Latest GenAI News - Investments
26. Latest GenAI News - Models
27. LLMs Large Language Models
28. 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
29. 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
30. 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
31. Demo Chain of Thought (CoT)
33. Demo Reasoning Teaser: Tom: 20 Murmeln Max: 16 Murmeln Leo: 28 Murmeln
34. Demo 2 Reasoning
35. GenAI The Building Blocks
36. Tokens Currency for GenAI
37. 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
38. Context Window Tell me more!
39. Definition “The context window of LLMs is the number of tokens the model can take as input when generating responses.” Context Window Size
40. Context Window Size https://www.vellum.ai/llm-leaderboard Input Tokens Output Tokens Processing
41. LLMs Insight into the functioning of an LLM
42. Inside the Transformer Architecture Large Language Models https://poloclub.github.io/transformer-explainer/
43. Inside the Transformer Architecture “Attending a conference expands your” • Possibility 1 • Possibility 2 • Possibility 3 • Possibility 4 • Possibility 5 • Possibility 6 • … Large Language Models
44. Demo: Transformer Model https://dwx-2025.brick.do/
45. 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
46. LangChain Abstractions for GenAI
47. Hello LangChain https://www.langchain.com/
48. Hello LangChain https://python.langchain.com/docs/integrations/chat/
49. Lab: LangChain Chat https://dwx-2025.brick.do/
50. LLMs Selection criteria
51. Model Selection https://artificialanalysis.ai/models
52. 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.
53. Your requirements are crucial Model Selection Performance Pricing Reasoning Capabilities Tool Use Context Window Size License & Cost Fine-tuning & Adaptability On-Premises Deployment Multimodal Capabilities Prompt Caching & Efficiency
54. Model Selection https://www.vellum.ai/llm-leaderboard
55. Model Selection
56. Model Selection
57. • 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)
59. 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)
60. Embeddings Language to Bytes
61. 67 § 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
62. [ 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
63. Embedding-Model Choice A Choice B
64. Embedding-Model
65. 71 Vectors from your Embedding-Model 0
66. Vector DBs Find nearest vectors quickly
67. 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.
68. Vector DB https://qdrant.tech/documentation/overview/
69. Lab: Embedding & VectorDB https://dwx-2025.brick.do/
70. RAG RetrievalQA
71. 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.
72. 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”
73. Answering Questions on Data Retrieval-augmented generation (RAG) Cleanup & Split Text Embedding Question Text Embedding Save Query Relevant Text Question Answer LLM 80 Vector DB Embedding model Embedding model 💡 Indexing / Embedding QA Intro
74. Ask me anything Simple RAG Question Prepare Search Search Results Question Answer LLM Vector DB Embedding Model Question as Vector Workflow Terms - Retriever - Chain Elements Embedding- Model Vector- DB Python LLM Langchain 🦜🔗
75. Lab: Simple RAG https://dwx-2025.brick.do/
76. LangGraph Agentic Orchestration
77. Hello LangGraph https://www.langchain.com/langgraph
78. 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
79. LangChain vs LangGraph https://www.langchain.com/
80. Workshop Portal LangGraph + Angular
81. Enterprise AI Workflows
82. 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
83. 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
84. 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
85. Demo: Portal Simple RAG Backend
86. Demo: Portal Simple RAG Frontend
87. 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
88. We need more 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
89. 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 🥉
90. Tool Calling Let’s change the world
91. § 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”: […] }
92. Tool Calling in Action LLM My code Query Some API Some database Prompt Tools Final answer Answer ❓ ❓ ❗ 💡
93. Demo: Tool Calling Notebook Tool Calling
94. Lab: Tool Calling https://dwx-2025.brick.do/
95. External Sources Internal Sources AI Workflows with LangGraph Question Answer
96. External Sources Internal Sources AI Workflows with LangGraph Question Answer Wer leitet das Post-Projekt?
97. 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?
98. 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?
99. 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?
100. 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?
101. 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?
102. 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?
103. Demo: Portal Full RAG Backend
104. Demo: Portal Full RAG Frontend
105. Bottom Line Dev Skill-Set for GenAI
106. • The New Coding Language is Natural Language • Prompt Engineering • Knowledge of Python • Ethics and Bias in AI • Data Management and Preprocessing • Model Selection and Handling • Explainability and Interpretability • Continuous Learning and Adaptation • Security and Privacy The Skill-Set of a Developer in GenAI Times
107. Workshop-Bewertung nicht vergessen! Euer Feedback ist wichtig für weitere Talks.
108. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com Marco Frodl @marcofrodl marco.frodl@thinktecture.com