Slide 1
Slide 1 text
Max Marschall
@MaxOSchulte
Generative AI, Enhancing Angular Apps
A Developer's Blueprint
MaxOSchulte Thinktecture AG 1
Slide 2
Slide 2 text
Max Marschall
Consultant & Developer
@ Thinktecture AG
@MaxOSchulte
Babylon.js
, Angular
, Ionic
& GenAi
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
MaxOSchulte Thinktecture AG 2
Slide 3
Slide 3 text
Live Benefits
Q&A
Live im Webinar
Expert One on One
16.05.2024
Kostenfrei
Private
20 Minuten
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
MaxOSchulte Thinktecture AG 3
Slide 4
Slide 4 text
Intention
Augmenting an App with an assistant, that helps the user based on
displayed context. Allowing an assistant to act for me in that context.
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
MaxOSchulte Thinktecture AG 4
Slide 5
Slide 5 text
DEMO
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
MaxOSchulte Thinktecture AG 5
Slide 6
Slide 6 text
Intention
Augmenting an App with an assistant, that helps the user based on
displayed context. Allowing an assistant to act for me in that context.
Problem: Integrating GenAI into
Angular
Metainformation
Tool calls
Leaking secrets
"Other" system integration
Solution
AST parsing
TS decorators
Client-side "agents"
Barebones Angular
OpenAI
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
MaxOSchulte Thinktecture AG 6
Slide 7
Slide 7 text
Architecture
Client
"Plain" Angular
AST parsing
Server
Python / TypeScript
FastAPI / Azure
Function
OpenAI
LangFuse
(LangChain)
Gen AI Provider
OpenAI
Whisper
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
MaxOSchulte Thinktecture AG 7
Slide 8
Slide 8 text
What Generative AI is not / can not
Intelligent
Making decisions
Problems understanding non-linear content
Drawing conclusions
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
MaxOSchulte Thinktecture AG 8
Slide 9
Slide 9 text
Use Case
Generate content
Summarize content
Automation
Simplify complexity
...
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
MaxOSchulte Thinktecture AG 9
Slide 10
Slide 10 text
UI / UX
Avoid auto-commit
Enable feedback
Highlight probability
Clear entry point into AI workflows
Progress / generation indicators
Suggest common actions
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
MaxOSchulte Thinktecture AG 10
Slide 11
Slide 11 text
Development mindset
Shit in / Shit out
"Talking to fast learning & smart junior"
No default assumptions
Documentation is key
Examples are great
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
MaxOSchulte Thinktecture AG 11
Slide 12
Slide 12 text
CODE
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
MaxOSchulte Thinktecture AG 12
Slide 13
Slide 13 text
Assistant Sequence
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
MaxOSchulte Thinktecture AG 13
Slide 14
Slide 14 text
Provide Functionality
Meta Information
TypeScript
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
MaxOSchulte Thinktecture AG 14
Slide 15
Slide 15 text
Provide Functionality
Tools
Agents
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
https://python.langchain.com/docs/use_cases/tool_use/
MaxOSchulte Thinktecture AG 15
Slide 16
Slide 16 text
Provide Functionality
Tools
Agents
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
https://python.langchain.com/docs/use_cases/tool_use/agents/
MaxOSchulte Thinktecture AG 16
Slide 17
Slide 17 text
Assistant Sequence
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
MaxOSchulte Thinktecture AG 17
Slide 18
Slide 18 text
Client-Side vs. Server-Side
Client Server
Easy Integration
Tooling
Python (Ecosystem)
TypeScript / JS
Secrets / Security
Schema Validation
SoC ( )
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
MaxOSchulte Thinktecture AG 18
Slide 19
Slide 19 text
Lessons Learned
Client-side for PoC
Easy transition to server-side
Write docs. for dummys
Unambiguous tools
Unambiguous context
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
MaxOSchulte Thinktecture AG 19
Slide 20
Slide 20 text
Thank You !
https://www.thinktecture.com/thinktects/max-marschall
Generative AI, Enhancing Angular Apps: A Developer’s Blueprint
Webinar
MaxOSchulte Thinktecture AG 20