AI, Angular und Unternehmenswissen intelligent vernetzen Marco Frodl Christian Liebel @marcofrodl @christianliebel Consultant Consultant Generative AI in der Praxis 

Hello, it’s me. Principal Consultant for Generative AI Thinktecture AG X: @marcofrodl E-Mail: [email protected] LinkedIn: https://www.linkedin.com/in/marcofrodl/ https://www.thinktecture.com/thinktects/marco-frodl/ Marco Frodl 

Hello, it’s me. Christian Liebel X: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel 

Why is it important? Generative AI AI understands and generates natural language AI can access knowledge from the training phase 

Workshop Showcase AI-powered Portal 

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 

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 🥉 

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. 

Generative AI In the World of AI 

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 

Generative AI Mindset 

Natural Language is the new Code User Input GenAI Processing Generated Output LLM Prompt 

Natural Language is the new Code User Input GenAI Processing Generated Output LLM 

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. 

Natural Language is the new Code User Input GenAI Processing Generated Output LLM 

Natural Language is the new Code User Input GenAI Processing Generated Output LLM 

Natural Language is the new Code User Input GenAI Processing Generated Output LLM 

Natural Language is the new Code User Input GenAI Processing Generated Output LLM 

Natural Language is the new Code User Input GenAI Processing Generated Output LLM 

Natural Language is the new Code User Input GenAI Processing Generated Output LLM 

Natural Language is the new Code Juni 2022 Vs. Juli 2024 

Natural Language is the new Code User Input GenAI Processing Generated Output LLM 

LLMs Large Language Models 

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 

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 

Demo Chain of Thought (CoT) 

No content

Demo Reasoning Teaser: Tom: 20 Murmeln Max: 16 Murmeln Leo: 28 Murmeln 

Demo 2 Reasoning 

GenAI The Building Blocks 

Tokens Currency for GenAI 

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 

Context Window Tell me more! 

Definition “The context window of LLMs is the number of tokens the model can take as input when generating responses.” Context Window Size 

Context Window Size Input Tokens Output Tokens Processing 

LLMs Calling LLM as API 

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 

LangChain Abstractions for GenAI 

Hello LangChain https://www.langchain.com/ 

Hello LangChain https://python.langchain.com/docs/integrations/chat/ 

Lab: LangChain Chat https://angular-days-2025.brick.do 

LLMs Selection criteria 

Model Selection https://artificialanalysis.ai/models 

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. 

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 

LLMs Pricing 

Model Selection https://www.vellum.ai/llm-leaderboard 

Model Selection 

• 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) 

No content

Embeddings Language to Bytes 

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 

[ 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 

Embedding-Model Choice A Choice B 

Embedding-Model 

Vector DBs Find nearest vectors quickly 

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. 

Vector DB https://qdrant.tech/documentation/overview/ 

Lab: Embedding & VectorDB https://angular-days-2025.brick.do 

RAG RetrievalQA 

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. 

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” 

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 

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 🦜🔗 

Lab: Simple RAG https://angular-days-2025.brick.do 

Tool Calling Let’s change the world 

Demo: ACME APIs https://tt-project-api.azurewebsites.net/projects/siemens https://tt-project-api.azurewebsites.net/project-chairs/tt-si-24f 

§ 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”: […] } 

Tool Calling in Action LLM My code Query Some API Some database Prompt Tools Final answer Answer ❓ ❓ ❗ 💡 

LangGraph Agentic Orchestration 

Hello LangGraph https://www.langchain.com/langgraph 

LangChain vs LangGraph https://www.langchain.com/ 

Demo: Tool Calling Notebook Tool Calling 

Workshop Portal LangGraph + Angular 

Enterprise AI Workflows 

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 

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 

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 🥉 

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 

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 

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 

Demo: Simple RAG 

Demo: Angular Frontend with AI Connection 

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 

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 

External Sources Internal Sources AI Workflows with LangGraph Question Answer 

External Sources Internal Sources AI Workflows with LangGraph Question Answer Wer leitet das Post-Projekt? 

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? 

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? 

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? 

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? 

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? 

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? 

Bottom Line Dev Skill-Set for GenAI 

• 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 

Workshop-Bewertung nicht vergessen! Euer Feedback ist wichtig für weitere Talks. 

Thank you for your kind attention! Christian Liebel @christianliebel [email protected] Marco Frodl @marcofrodl [email protected]