Generative AI in der Praxis: AI, Angular und Unternehmenswissen intelligent vernetzen

Generative AI ist eine der vielversprechendsten Methoden, um Unternehmensinformationen aus Jira, Confluence, Wikis, Datenbanken und Dokumenten in wertvolles Wissen zu verwandeln – abfragbar in natürlicher Sprache.

In diesem Workshop zeigen die Gen-AI-Consultants Christian Liebel und Marco Frodl Schritt für Schritt, wie eine Generative-AI-Anwendung für echte Unternehmensherausforderungen entwickelt werden kann, mit Fokus auf eine effiziente Zusammenarbeit zwischen AI-Backend und Angular-Frontend.

Anhand eines Beispielprojekts demonstrieren wir, wie ein Developer-Portal realisiert wird, bei dem die bisherigen statischen Coding Guidelines durch AI-generierte, kontextbezogene, dynamische Empfehlungen ergänzt werden, um Entwicklern maßgeschneiderte Unterstützung im jeweiligen Kontext zu bieten und ihre Produktivität zu steigern. Die Pflege der Guidelines erfolgt in einem Wiki, dessen Inhalte durch regelmäßige Indizierung und Vektorisierung in eine Vektordatenbank übertragen werden, um sie für die AI nutzbar zu machen. Das Angular-Frontend hilft dabei, die neuen Informationen gezielt zugänglich zu machen.

Mit den Python-basierten AI-Frameworks LangChain und LangGraph wird ein Workflow erstellt, der Anfragen intelligent verarbeitet: Allgemeine Fragen werden direkt an eine öffentliche Suchmaschine weitergeleitet, während Angular-spezifische Fragen durch die Vektordatenbank und gegebenenfalls über spezifische Recherchen auf angular.dev beantwortet werden. Ein AI-Grader bewertet die Relevanz der gefundenen Informationen, um die bestmögliche Antwort für den Benutzer zu generieren, wobei Unternehmensrichtlinien besonders betont werden, um sicherzustellen, dass die Antworten den internen Standards entsprechen und konsistente, unternehmensgerechte Lösungen bieten.

Der Workshop bietet eine ganzheitliche Sicht auf die Entwicklung eines solchen Systems: von der Einführung in die Grundlagen der generativen AI mit europäischen LLMs (kein Datentransfer nach Amerika) über die Implementierung eines AI-Backends mit LangChain/LangGraph, bis hin zur Benutzerinteraktion in einer Angular-Webapplikation unter Verwendung von Komponenten, Services, Signals und Material Design.

Lernen Sie, wie Sie Unternehmensinformationen optimal nutzen, intelligente Assistenzsysteme entwickeln und durch eine Kombination aus Generative AI, Angular und modernsten AI-Frameworks Zeit sparen und die Effizienz Ihrer Prozesse steigern können.

Transcript

1. AI, Angular und Unternehmenswissen intelligent vernetzen Marco Frodl Christian Liebel @marcofrodl @christianliebel Consultant Consultant Generative AI in der Praxis
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. Why is it important? Generative AI AI understands and generates natural language AI can access knowledge from the training phase
5. Workshop Showcase AI-powered Portal
6. 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
7. 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 🥉
8. 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.
9. Generative AI In the World of AI
10. 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
11. Generative AI Mindset
12. Natural Language is the new Code User Input GenAI Processing Generated Output LLM Prompt
13. Natural Language is the new Code User Input GenAI Processing Generated Output LLM
14. 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.
15. Natural Language is the new Code User Input GenAI Processing Generated Output LLM
16. Natural Language is the new Code User Input GenAI Processing Generated Output LLM
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 Juni 2022 Vs. Juli 2024
22. Natural Language is the new Code User Input GenAI Processing Generated Output LLM
23. LLMs Large Language Models
24. 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
25. 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
26. Demo Chain of Thought (CoT)
28. Demo Reasoning Teaser: Tom: 20 Murmeln Max: 16 Murmeln Leo: 28 Murmeln
29. Demo 2 Reasoning
30. GenAI The Building Blocks
31. Tokens Currency for GenAI
32. 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
33. Context Window Tell me more!
34. Definition “The context window of LLMs is the number of tokens the model can take as input when generating responses.” Context Window Size
35. Context Window Size Input Tokens Output Tokens Processing
36. LLMs Calling LLM as API
37. 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
38. LangChain Abstractions for GenAI
39. Hello LangChain https://www.langchain.com/
40. Hello LangChain https://python.langchain.com/docs/integrations/chat/
41. Lab: LangChain Chat https://angular-days-2025.brick.do
42. LLMs Selection criteria
43. Model Selection https://artificialanalysis.ai/models
44. 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.
45. 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
46. LLMs Pricing
47. Model Selection https://www.vellum.ai/llm-leaderboard
48. Model Selection
49. • 5 Open Source Models • 8 Hosted Models • 2 Models for Code Generation • 1 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)
51. Embeddings Language to Bytes
52. 66 § 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
53. [ 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
54. Embedding-Model Choice A Choice B
55. Embedding-Model
56. Vector DBs Find nearest vectors quickly
57. 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.
58. Vector DB https://qdrant.tech/documentation/overview/
59. Lab: Embedding & VectorDB https://angular-days-2025.brick.do
60. RAG RetrievalQA
61. 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.
62. 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”
63. Answering Questions on Data Retrieval-augmented generation (RAG) Cleanup & Split Text Embedding Question Text Embedding Save Query Relevant Text Question Answer LLM 79 Vector DB Embedding model Embedding model 💡 Indexing / Embedding QA Intro
64. 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 🦜🔗
65. Lab: Simple RAG https://angular-days-2025.brick.do
66. Tool Calling Let’s change the world
67. Demo: ACME APIs https://tt-project-api.azurewebsites.net/projects/siemens https://tt-project-api.azurewebsites.net/project-chairs/tt-si-24f
68. § 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”: […] }
69. Tool Calling in Action LLM My code Query Some API Some database Prompt Tools Final answer Answer ❓ ❓ ❗ 💡
70. LangGraph Agentic Orchestration
71. Hello LangGraph https://www.langchain.com/langgraph
72. LangChain vs LangGraph https://www.langchain.com/
73. Demo: Tool Calling Notebook Tool Calling
74. Workshop Portal LangGraph + Angular
75. Enterprise AI Workflows
76. 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
77. 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
78. 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 🥉
79. 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
80. 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
81. 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
82. Demo: Simple RAG
83. Demo: Angular Frontend with AI Connection
84. 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
85. 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
86. External Sources Internal Sources AI Workflows with LangGraph Question Answer
87. External Sources Internal Sources AI Workflows with LangGraph Question Answer Wer leitet das Post-Projekt?
88. 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?
89. 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?
90. 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?
91. 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?
92. 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?
93. 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?
94. Bottom Line Dev Skill-Set for GenAI
95. • 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
96. Workshop-Bewertung nicht vergessen! Euer Feedback ist wichtig für weitere Talks.
97. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com Marco Frodl @marcofrodl marco.frodl@thinktecture.com