Prepare your Angular App for AI Integration - iJS London & San Diego 05/2025

ANGULARarchitects.io - Michael Egger-Zikes

AI is currently the most influential topic both within and beyond the tech sector. This talk explores the meaningful integration of AI in the frontend domain.

Large Language Models (LLMs) can enhance existing applications by dynamically configuring generically implemented frontends. This enables targeted enhancements to existing applications and allows less technically experienced users to make adjustments independently.

In this talk, we will demonstrate how dynamic programming approaches can be utilized to integrate an LLM effectively.

Transcript

1. Michael Egger-Zikes (@MikeZks) Michael Egger-Zikes ANGULARarchitects.io Prepare your Angular App for AI Integration
2. Michael Egger-Zikes (@MikeZks) Generic Programming Model-driven Forms Angular & AI AI Integration Lessons Learned Outlook
3. Michael Egger-Zikes (@MikeZks) • Michael Egger-Zikes ANGULARarchitects.io • Focus on Angular • Trainings, Consultancy, Reviews • Conference Speaker Public: in-person or remote In-House: everywhere angulararchitects.io /en/angular-workshops Michael Egger-Zikes @MikeZks About Michael
4. Michael Egger-Zikes (@MikeZks) DEMO AI-connected Form Generator
5. Michael Egger-Zikes (@MikeZks) Generic Programming • Angular Building Blocks • Config interface • Service to provide the Config State • Component to render based on the Config • Isn’t that hard? Michael Egger-Zikes (@MikeZks)
6. Michael Egger-Zikes (@MikeZks) “We choose to go to the moon not because it is easy, but because it is hard!” !
7. Michael Egger-Zikes (@MikeZks) Model-driven Form • Build a Forms Engine • JSON-based Config • Control Type • Reuse UI Library to render Controls • Loading Logic for Config • JSON-API? • Static File? • UI-integrated Configurator? • AI-supported Prompt? Michael Egger-Zikes (@MikeZks)
8. Michael Egger-Zikes (@MikeZks) DEMO Forms Engine
9. Michael Egger-Zikes (@MikeZks) AI Integration • UI • Forms Engine • Admin View w/ prompt for Natural Language description for AI processing • Backend • API with Config and API Key for communication w/ third-party AI Vendor • Natural Language input, JSON Structure output • GPT, LLM, NLP • AI Parameters • System Prompt • User Input • Schema Validation for Structured Output Michael Egger-Zikes (@MikeZks)
10. Michael Egger-Zikes (@MikeZks) DEMO AI Backend w/ Open AI GPT API Node.js NestJS Backend
11. Michael Egger-Zikes (@MikeZks) What a 7-year-old child can do … „Ich möchte ein Formular über einen Affen der auf einem Elefanten reitet.“ Michael Egger-Zikes (@MikeZks)
12. Michael Egger-Zikes (@MikeZks) What a 12-year-old child can do … • Modifying the generated JSON structure Michael Egger-Zikes (@MikeZks)
13. Michael Egger-Zikes (@MikeZks) AI Lessons Learned • Config • Different Vendors, different Models → varying Config • Error Messages are not on the same Level like Angular • Custom behavior can be added easily – again by using Natural Language • Validation • Schema support, but limited • But, NLP can be used and passed in together with Schema • AI & Dates … but can be passed in as well! Michael Egger-Zikes (@MikeZks)
14. Michael Egger-Zikes (@MikeZks) AI Usage • Cost & Resource intensive • Pick the model that meets your targets best • Pick the model that has the best ratio between price & quality • Privacy • Be aware what you want to send to an AI vendor • Be aware what you are allowed to send to an AI vendor • Know your business value • Engine vs. Config • Consider using a self-hosted or Browser-local model Michael Egger-Zikes (@MikeZks)
15. Michael Egger-Zikes (@MikeZks) What comes next? Tell me more! !
16. Michael Egger-Zikes (@MikeZks) Future AI Integration for Angular Apps • Generic APIs • Forms Engine • Dynamic Navigation Sidebar • Dynamic Routing • Micro-Frontend Discovery • Plugin Integration w/ Widget support • Putting everything together • Watch out for my future iJS Talks Michael Egger-Zikes (@MikeZks)
17. Michael Egger-Zikes (@MikeZks) Michael Egger-Zikes (@MikeZks) [web] ANGULARarchitects.io [twitter] Michael Egger-Zikes (@MikeZks) [repo] https://github.com/mikezks/ijs-san-diego-25-ng-ai Contact • Slides • Code Remote Workshops: Public & tailored to your company angulararchitects.io/angular-workshops Link mit einfarbiger Füllung
18. Michael Egger-Zikes (@MikeZks) Michael Egger-Zikes (@MikeZks)