Slide 1
Slide 1 text
Intelligente Business-Apps mit Angular, LangGraph
und RAG
Marco Frodl Christian Liebel
@marcofrodl @christianliebel
Consultant Consultant
AI-Praxis-Workshop
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Workshop Showcase
AI-powered Portal
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
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.
Slide 10
Slide 10 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Generative AI
In the World of AI
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Generative AI
Mindset
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Natural Language is the new Code
User Input GenAI Processing Generated Output
LLM
Slide 15
Slide 15 text
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.
Slide 16
Slide 16 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Natural Language is the new Code
User Input GenAI Processing Generated Output
LLM
Slide 17
Slide 17 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Natural Language is the new Code
User Input GenAI Processing Generated Output
LLM
Slide 18
Slide 18 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Natural Language is the new Code
User Input GenAI Processing Generated Output
LLM
Slide 19
Slide 19 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Natural Language is the new Code
User Input GenAI Processing Generated Output
LLM
Slide 20
Slide 20 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Natural Language is the new Code
User Input GenAI Processing Generated Output
LLM
Slide 21
Slide 21 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Natural Language is the new Code
User Input GenAI Processing Generated Output
LLM
Slide 22
Slide 22 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Natural Language is the new Code
Juni 2022 Vs. Juli 2024
Slide 23
Slide 23 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Natural Language is the new Code
User Input GenAI Processing Generated Output
LLM
Slide 24
Slide 24 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Latest GenAI News - Investments
Slide 25
Slide 25 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Latest GenAI News - Models
Slide 26
Slide 26 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
LLMs
Large Language Models
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Demo
Chain of Thought (CoT)
Slide 31
Slide 31 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Slide 32
Slide 32 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Demo
Reasoning
Teaser: Tom: 20 Murmeln Max: 16 Murmeln Leo: 28 Murmeln
Slide 33
Slide 33 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Demo 2
Reasoning
Slide 34
Slide 34 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
GenAI
The Building Blocks
Slide 35
Slide 35 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Tokens
Currency for GenAI
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Context Window
Tell me more!
Slide 38
Slide 38 text
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
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
LLMs
Insight into the functioning
of an LLM
Slide 41
Slide 41 text
Inside the Transformer Architecture
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Large Language Models
https://poloclub.github.io/transformer-explainer/
Slide 42
Slide 42 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Demo:
Transformer Model
Transformer Explainer
Slide 43
Slide 43 text
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
Slide 44
Slide 44 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
LangChain
Abstractions for GenAI
Slide 45
Slide 45 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Hello LangChain
https://www.langchain.com/
Slide 46
Slide 46 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Hello LangChain
https://python.langchain.com/docs/integrations/chat/
Slide 47
Slide 47 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Lab:
LangChain Chat
https://basta-spring-2025.brick.do
Slide 48
Slide 48 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
LLMs
Selection criteria
Slide 49
Slide 49 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Model Selection
https://artificialanalysis.ai/models
Slide 50
Slide 50 text
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.
Slide 51
Slide 51 text
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
Slide 52
Slide 52 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Model Selection
https://www.vellum.ai/llm-leaderboard
Slide 53
Slide 53 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Model Selection
Slide 54
Slide 54 text
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)
Slide 55
Slide 55 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Slide 56
Slide 56 text
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)
Slide 57
Slide 57 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Embeddings
Language to Bytes
Slide 58
Slide 58 text
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
Slide 59
Slide 59 text
[ 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
Slide 60
Slide 60 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Embedding-Model
Choice A
Choice B
Slide 61
Slide 61 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Embedding-Model
Slide 62
Slide 62 text
70
Vectors from your Embedding-Model
0
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Slide 63
Slide 63 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Vector DBs
Find nearest vectors quickly
Slide 64
Slide 64 text
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.
Slide 65
Slide 65 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Vector DB
https://qdrant.tech/documentation/overview/
Slide 66
Slide 66 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Lab:
Embedding & VectorDB
https://basta-spring-2025.brick.do
Slide 67
Slide 67 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
RAG
RetrievalQA
Slide 68
Slide 68 text
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.
Slide 69
Slide 69 text
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”
Slide 70
Slide 70 text
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
Slide 71
Slide 71 text
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
Slide 72
Slide 72 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Lab:
Simple RAG
https://basta-spring-2025.brick.do
Slide 73
Slide 73 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Tool Calling
Let’s change the world
Slide 74
Slide 74 text
▪ 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
Slide 75
Slide 75 text
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
Slide 76
Slide 76 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
LangGraph
Agentic Orchestration
Slide 77
Slide 77 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Hello LangGraph
https://www.langchain.com/langgraph
Slide 78
Slide 78 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
LangChain vs LangGraph
https://www.langchain.com/
Slide 79
Slide 79 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Demo:
Tool Calling
Notebook Tool Calling
Slide 80
Slide 80 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Workshop Portal
LangGraph + Angular
Slide 81
Slide 81 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Enterprise AI Workflows
Slide 82
Slide 82 text
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
Slide 83
Slide 83 text
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
Slide 84
Slide 84 text
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
Slide 85
Slide 85 text
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
Slide 86
Slide 86 text
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
Slide 87
Slide 87 text
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
Slide 88
Slide 88 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Demo:
Simple RAG
Slide 89
Slide 89 text
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
Slide 90
Slide 90 text
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
Slide 91
Slide 91 text
External Sources
AI-Praxis-Workshop
Internal Sources
Intelligente Business-Apps mit Angular, LangGraph und RAG
AI Workflows with LangGraph
Question Answer
Slide 92
Slide 92 text
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?
Slide 93
Slide 93 text
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?
Slide 94
Slide 94 text
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?
Slide 95
Slide 95 text
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?
Slide 96
Slide 96 text
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?
Slide 97
Slide 97 text
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?
Slide 98
Slide 98 text
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?
Slide 99
Slide 99 text
AI-Praxis-Workshop
Intelligente Business-Apps mit Angular, LangGraph und RAG
Bottom Line
Dev Skill-Set for GenAI
Slide 100
Slide 100 text
• 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
Slide 101
Slide 101 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]
Marco Frodl
@marcofrodl
[email protected]