Webinar: Generative AI, Enhancing Angular Apps: A Developer’s Blueprint

In der sich wandelnden Landschaft der Webentwicklung stellt die Integration von generativer KI (GenAI) in Angular-Anwendungen einen neuen Ansatz zur Verbesserung der Benutzererfahrung durch kontextbezogene Unterstützung dar. Max Marschall's Webinar "Generative AI, Enhancing Angular Apps: A Developer's Blueprint" befasst sich mit den technischen Feinheiten und architektonischen Überlegungen, die für die Einbettung von GenAI-Tools in Angular-Frameworks erforderlich sind.

In diesem Webinar werden die Herausforderungen bei der Einbindung von GenAI umrissen, wie z. B. die Handhabung von Metainformationen, die Verwaltung von "Tools".

Max Marschall schlägt einen innovativen Ansatz vor, bestehend aus der Nutzung des Abstract Syntax Tree (AST) Parsing, TypeScript-Dekoratoren und den Einsatz von clientseitigen "Agenten" neben der serverseitigen OpenAI-Anbindung.

Der Vortrag spannt einen Bogen von der Konzeption bis zur praktischen Demonstration und bietet Einblicke in die Assistenzsequenz und den Nutzen von TypeScript, Tools und Agenten bei der Schaffung einer nahtlosen Integration.

Durch einen detaillierten Vergleich von client- und serverseitigen Implementierungen vermittelt Max Marschall wertvolle Erkenntnisse und betont die Bedeutung einer klaren Dokumentation, einer eindeutigen Tool-Erstellung und einer Kontextdefinition.

Transcript

1. Max Marschall @MaxOSchulte Generative AI, Enhancing Angular Apps A Developer's Blueprint MaxOSchulte Thinktecture AG 1
2. 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
3. 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
4. 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
5. DEMO Generative AI, Enhancing Angular Apps: A Developer’s Blueprint Webinar MaxOSchulte Thinktecture AG 5
6. 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
7. 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
8. 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
9. Use Case Generate content Summarize content Automation Simplify complexity ... Generative AI, Enhancing Angular Apps: A Developer’s Blueprint Webinar MaxOSchulte Thinktecture AG 9
10. 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
11. 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
12. CODE Generative AI, Enhancing Angular Apps: A Developer’s Blueprint Webinar MaxOSchulte Thinktecture AG 12
13. Assistant Sequence Generative AI, Enhancing Angular Apps: A Developer’s Blueprint Webinar MaxOSchulte Thinktecture AG 13
14. Provide Functionality Meta Information TypeScript Generative AI, Enhancing Angular Apps: A Developer’s Blueprint Webinar MaxOSchulte Thinktecture AG 14
15. 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
16. 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
17. Assistant Sequence Generative AI, Enhancing Angular Apps: A Developer’s Blueprint Webinar MaxOSchulte Thinktecture AG 17
18. 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
19. 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
20. Thank You ! https://www.thinktecture.com/thinktects/max-marschall Generative AI, Enhancing Angular Apps: A Developer’s Blueprint Webinar MaxOSchulte Thinktecture AG 20