Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AI-Praxis-Workshop: Intelligente Business-Apps ...

AI-Praxis-Workshop: 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 Workshop zeigen die GenAI 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 und 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-basierten AI-Frameworks. Im Mittelpunkt steht die praktische Umsetzung: Gemeinsam entwickeln wir ein intelligentes Developer-Portal, das Fragen von Entwicklern in natürlicher Sprache 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. Als Wissensbasis dient ein Coding-Guidelines-Wiki, dessen Inhalte automatisch in eine Vektordatenbank übertragen werden, um sie für die KI verfügbar zu machen. Datenschutz hat dabei höchste Priorität – wir setzen ausschließlich europäische Modelle ein und vermeiden Datentransfers außerhalb Europas. Mit LangChain und LangGraph, zwei Python-basierten Frameworks, erstellen wir einen AI-Workflow, der Fragen intelligent verarbeitet. Dabei prüft die KI automatisch die beste Quelle: Priorität hat das Unternehmenswiki, dessen Ergebnisse durch einen AI-Grader bewertet werden. Falls nötig, wird eine gezielte Recherche auf angular.dev durchgeführt. Für allgemeine Fragen wird eine öffentliche Suchmaschine genutzt. Neben den Antworten liefert das Portal auch die entsprechenden 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 weiter zu verbessern. Verschiedene passende AI-Tracing-Lösungen sorgen für Transparenz, Kostenübersicht und Nutzerfeedback, um Optimierungen zu ermöglichen. Der Workshop behandelt die Entwicklung eines AI-Systems von der Einführung in Generative AI, der 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.

Christian Liebel

March 03, 2025
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. Intelligente Business-Apps mit Angular, LangGraph und RAG Marco Frodl Christian

    Liebel @marcofrodl @christianliebel Consultant Consultant AI-Praxis-Workshop
  2. 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/ AI-Praxis-Workshop Marco Frodl Intelligente Business-Apps mit Angular, LangGraph und RAG
  3. Hello, it’s me. AI-Praxis-Workshop Christian Liebel X: @christianliebel Email: christian.liebel

    @thinktecture.com Angular, PWA & GenAI x Web Slides: thinktecture.com /christian-liebel Intelligente Business-Apps mit Angular, LangGraph und RAG
  4. 09:00–10:30 Block 1 10:30–11:00 Coffee Break 11:00–12:30 Block 2 12:30–13:30

    Lunch Break 13:30–15:00 Block 3 15:00–15:30 Coffee Break 15:30–17:00 Block 4 AI-Praxis-Workshop Timetable Intelligente Business-Apps mit Angular, LangGraph und RAG
  5. Why is it important? AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph

    und RAG Generative AI AI understands and generates natural language AI can access knowledge from the training phase
  6. It could be worse AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph

    und RAG 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 AI-Praxis-Workshop Intelligente Business-Apps mit Angular,

    LangGraph und RAG 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 AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG 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. Artificial Intelligence (AI) Classification AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph

    und RAG Generative AI Machine Learning Deep Learning GenAI Intelligent Machines Pattern Recognition in Data Pattern Recognition in unstructured Data Human language understanding and generation
  10. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG Natural Language

    is the new Code User Input GenAI Processing Generated Output LLM Prompt
  11. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG Natural Language

    is the new Code User Input GenAI Processing Generated Output LLM
  12. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG 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.
  13. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG Natural Language

    is the new Code User Input GenAI Processing Generated Output LLM
  14. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG Natural Language

    is the new Code User Input GenAI Processing Generated Output LLM
  15. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG Natural Language

    is the new Code User Input GenAI Processing Generated Output LLM
  16. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG Natural Language

    is the new Code User Input GenAI Processing Generated Output LLM
  17. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG Natural Language

    is the new Code User Input GenAI Processing Generated Output LLM
  18. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG Natural Language

    is the new Code User Input GenAI Processing Generated Output LLM
  19. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG Natural Language

    is the new Code User Input GenAI Processing Generated Output LLM
  20. 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 AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG Large Language Models
  21. 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 AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG Large Language Models
  22. 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 Intelligente Business-Apps mit Angular, LangGraph und RAG AI-Praxis-Workshop
  23. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG 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
  24. Definition “The context window of LLMs is the number of

    tokens the model can take as input when generating responses.” AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG Context Window Size
  25. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG Context Window

    Size https://www.vellum.ai/llm-leaderboard Input Tokens Output Tokens Processing
  26. Inside the Transformer Architecture AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph

    und RAG Large Language Models https://poloclub.github.io/transformer-explainer/
  27. Let’s say “Hello” to a LLM AI-Praxis-Workshop Intelligente Business-Apps mit

    Angular, LangGraph und RAG Large Language Models OpenAI Anthropic MistralAI https://github.com/jamesmurdza/llm-api-examples/blob/main/README-python.md
  28. Your requirements are crucial AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph

    und RAG 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.
  29. Your requirements are crucial AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph

    und RAG Model Selection Performance Pricing Reasoning Capabilities Tool Use Context Window Size License & Cost Fine-tuning & Adaptability On-Premises Deployment Multimodal Capabilities Prompt Caching & Efficiency
  30. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG • 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)
  31. Split your GenAI tasks AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph

    und RAG 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)
  32. 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 Intelligente Business-Apps mit Angular, LangGraph und RAG AI-Praxis-Workshop
  33. [ 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 Intelligente Business-Apps mit Angular, LangGraph und RAG AI-Praxis-Workshop
  34. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG 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.
  35. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG 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.
  36. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG 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”
  37. 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 Intro Intelligente Business-Apps mit Angular, LangGraph und RAG AI-Praxis-Workshop
  38. Ask me anything AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und

    RAG 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
  39. ▪ 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”: […] } Intelligente Business-Apps mit Angular, LangGraph und RAG AI-Praxis-Workshop
  40. Tool Calling in Action LLM My code Query Some API

    Some database Prompt Tools Final answer Answer Intelligente Business-Apps mit Angular, LangGraph und RAG AI-Praxis-Workshop
  41. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG 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
  42. It could be worse AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph

    und RAG 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
  43. One Search Box for Everything AI-Praxis-Workshop Intelligente Business-Apps mit Angular,

    LangGraph und RAG 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
  44. Coding Guideline Wiki AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und

    RAG 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
  45. Business RAG - Simple AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph

    und RAG 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
  46. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG 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
  47. AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG 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
  48. Hello AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG 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
  49. External Sources AI-Praxis-Workshop Internal Sources Intelligente Business-Apps mit Angular, LangGraph

    und RAG AI Workflows with LangGraph Question Answer Wer leitet das Post-Projekt?
  50. External Sources AI-Praxis-Workshop Internal Sources Intelligente Business-Apps mit Angular, LangGraph

    und RAG 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?
  51. External Sources AI-Praxis-Workshop Internal Sources Intelligente Business-Apps mit Angular, LangGraph

    und RAG 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?
  52. External Sources AI-Praxis-Workshop Internal Sources Intelligente Business-Apps mit Angular, LangGraph

    und RAG 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?
  53. External Sources AI-Praxis-Workshop Internal Sources Intelligente Business-Apps mit Angular, LangGraph

    und RAG 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?
  54. External Sources AI-Praxis-Workshop Internal Sources Intelligente Business-Apps mit Angular, LangGraph

    und RAG 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?
  55. External Sources AI-Praxis-Workshop Internal Sources Intelligente Business-Apps mit Angular, LangGraph

    und RAG 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?
  56. • 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 AI-Praxis-Workshop Intelligente Business-Apps mit Angular, LangGraph und RAG The Skill-Set of a Developer in GenAI Times