MarmicodeAgentic Angular : mijoter des agents IA sans se brûler
3 Jours · Online
🐣 Early Bird à partir de 1 270 € HT
Trois jours pour intégrer, dans les apps Angular que vous avez déjà, des agents qui tiennent en production.Generative UI, human-in-the-loop, sécurité, auth — et un arbre de décision à emporter.
🇫🇷 Formation finançable jusqu'à 100% via OPCO.
🍱 Ce que vous apprendrez
La boucle d'agent, les fenêtres de contexte et les tokens — et pourquoi un modèle ne sait pas distinguer les instructions des données, ce qui vous rattrape plus tard.
AG-UI, A2UI, MCP Apps et WebMCP : qui fait quoi, où en est chacun côté maturité et adoption, et ce qui reste un pari.
Events, cycle de vie d'un run, messages, tool calls et state deltas : lire le protocole avant de toucher au moindre SDK.
Mise en place du runtime, chat prêt à l'emploi vs headless, intégration Signals & DI — dans une app que vous avez déjà, pas dans un projet jouet.
Synchronisation bidirectionnelle agent ↔ app, lecture seule vs lecture/écriture, et le streaming et les predictive updates qui donnent la sensation de rapidité.
Boutons d'approbation, edit-before-execute et saisie structurée — et un regard lucide sur les limites de l'approbation basée sur les tools.
Suspendre le run côté agent, confirmer les arguments exacts plutôt que l'intention, et reprendre après un rafraîchissement.
Persister des conversations multi-sessions, reprendre après un crash ou une coupure de stream, et annuler un run proprement.
Prompt injection, fuite d'informations sensibles, guardrails qui modèrent les streams à la volée, et scoping des tools au moindre privilège.
Propager l'identité de l'utilisateur jusqu'au runtime de l'agent, restreindre les tools par utilisateur et par rôle, et verrouiller l'endpoint.
UI déclarative sous forme de données, le renderer Angular, le catalogue de confiance comme modèle de sécurité, et de l'UI pilotée par l'agent au-delà du chat.
Savoir où partent les tokens, puis réduire la facture et gagner en vitesse pour que le coût ne dépasse pas la valeur de la fonctionnalité.
Quelles fonctionnalités méritent un agent, quelle surface pour quel cas d'usage, et à quel niveau de risque classer chaque tool. L'arbre, vous l'emportez.
🗓️ Programme
- Comment fonctionnent les LLMs.
- La boucle d'agent : modèle, contexte, tools, et ce qui se passe réellement à chaque tour.
- Fenêtres de contexte et tokens : ce qu'ils vous coûteront plus tard.
- Pourquoi un modèle ne sait pas distinguer les instructions des données, et pourquoi c'est important.
- Pourquoi intégrer des agents dans vos apps, plutôt que de coller un chatbot à côté.
- Cartographier l'écosystème : AG-UI vs A2UI vs MCP Apps vs WebMCP.
- Où en est chacun : maturité, adoption, dynamique.
- Le protocole : events, cycle de vie d'un run, messages, tool calls, state deltas.
- Lire le protocole avant de toucher au moindre SDK.
- Piloter un run de bout en bout en server-sent events bruts, sans aucun SDK entre les deux.
- Mise en place du runtime.
- Chat prêt à l'emploi vs headless.
- Intégration Signals & DI.
- Câbler le runtime, poser une surface, et faire tourner le premier tour d'agent dans une app qui existe déjà.
- Le flux d'events est votre stack trace : lire AG-UI dans l'onglet réseau et les dev tools.
- Les traces de Mastra Studio.
- Remonter d'un run cassé jusqu'à l'event qui l'a causé, à partir du flux et des traces.
- Synchronisation bidirectionnelle agent ↔ app.
- Lecture seule vs lecture/écriture.
- Vitesse perçue : streaming, predictive state updates.
- Partager l'état dans les deux sens, puis le rendre instantané avec le streaming et les predictive updates.
- Exposer des tools frontend à l'agent.
- Rendre les tool calls sous forme de composants Angular.
- Exposer un tool frontend et rendre son appel comme un vrai composant Angular, plutôt qu'un mur de texte.
- La boucle la plus simple : un tool frontend qui demande à l'utilisateur.
- Boutons d'approbation, edit-before-execute, saisie structurée.
- Les limites de l'approbation basée sur les tools.
- Mettre l'utilisateur dans la boucle avec un tool frontend, puis trouver où cette approche ne suffit plus.
- Suspendre le run côté agent : interrupt / suspend.
- Checkpoints / snapshots : où dort un run en pause.
- L'aller-retour : suspendre, approuver, reprendre. Survivre à un rafraîchissement.
- Confirmer les arguments exacts, pas l'intention.
- Déplacer la confirmation là où elle ne peut pas être contournée, et faire survivre un run en pause à un rafraîchissement de page.
- Persistance et conversations multi-sessions.
- Reprendre un thread après un rafraîchissement ou un crash.
- Erreurs de stream : quand la connexion lâche en pleine réponse.
- Annulation : interrompre un run proprement.
- Casser la connexion volontairement, annuler un run proprement, et faire repartir le thread là où il s'était arrêté.
- Prompt injection.
- Fuite d'informations sensibles.
- Guardrails : modérer les streams à la volée.
- Scoping des permissions des tools : moindre privilège par utilisateur et par rôle.
- Attaquer votre propre agent avec du contenu injecté, puis refermer les brèches que vous venez d'ouvrir.
- Propager l'identité de l'utilisateur jusqu'au runtime de l'agent.
- Restreindre les tools par utilisateur.
- Sécuriser l'endpoint du runtime.
- Faire remonter une vraie identité jusqu'à l'agent, restreindre ses tools à cet utilisateur, et fermer l'endpoint derrière.
- Où partent les tokens.
- Réduire les coûts, gagner en vitesse.
- Mesurer où partent réellement vos tokens, puis réduire la facture sans donner l'impression que la fonctionnalité rame.
- UI déclarative sous forme de données : streaming JSONL.
- Le renderer Angular.
- A2UI comme modèle de sécurité : catalogue de confiance, du JSON et pas du code.
- La boucle de récupération A2UI.
- Brancher vos propres composants dans le renderer et laisser l'agent les composer.
- Granularité du catalogue : composants atomiques vs composés.
- UI figée vs dynamique : un cadre de décision.
- Choisir votre granularité, exposer le catalogue, et voir ce que l'agent en fait.
- UI pilotée par l'agent dans l'app principale.
- Actions : relier les interactions utilisateur à l'agent.
- Déplacer l'UI pilotée par l'agent dans l'app principale, et y relier les interactions jusqu'à l'agent.
- Quelles fonctionnalités méritent un agent.
- Choisir la surface selon le cas d'usage : chat, embarquée, ou aucune.
- Classer vos tools par niveau de risque : exécution automatique, confirmation, interdiction.
- Un arbre de décision à emporter.
- Les evals, l'observabilité et le testing sont couverts dans la formation complémentaire « Agentic Angular : tests et évals pour des agents IA fiables ».
- Quand passer à l'agentique, sur quelle surface, à quel niveau de risque — pour votre propre codebase, pas pour une app d'exemple.
🎓 Prérequis
- De la curiosité et une bonne culture web
- Familiarité avec l'écosystème Angular (ex. créer un composant, implémenter et utiliser des inputs et outputs ; une expérience des Signals est un plus)
- Aucune expérience préalable des agents ou de l'ingénierie LLM n'est requise
👨🏻🏫 Votre formateur
Younes Jaaidi
I am a Software Cook who enjoys whipping code until tests pass.
With nearly 20 years of experience in eXtreme Programming, I've coached dozens of teams and trained thousands of developers to cook robust and maintainable software — using Test-Driven Development, pragmatic testing strategies, and a healthy dose of Collective Ownership.
I'm also an Angular Google Developer Expert, an NX Champion, and a mediocre sailor.
🙋 Foire aux questions
Aux développeurs Angular qui veulent intégrer des fonctionnalités agentiques dans une vraie app plutôt que de coller un chatbot à côté ; aux lead developers et tech leads qui cadrent la place de l'IA dans le produit ; et aux architectes et CTOs qui ont besoin de réponses sur la sécurité, l'authentification et les coûts avant de mettre en production.
Vous devez être familier avec l'écosystème Angular : créer un composant, implémenter et utiliser des inputs et outputs. Une expérience des Signals est un plus. La curiosité et une bonne culture web comptent davantage que l'ancienneté.
Non. On part du fonctionnement réel des LLMs, de la boucle d'agent et de ce que coûte un tour en tokens, puis on construit à partir de là. Si vous avez déjà mis des agents en production, les journées human-in-the-loop, sécurité et generative UI resteront du terrain neuf.
Côté agent, tout tourne sur Mastra : la formation est donc en TypeScript de bout en bout. Chaque pattern se transpose un pour un à LangGraph et consorts, et nous nommons les deux au fur et à mesure. AG-UI est la frontière qui rend ce choix réversible.
Un ordinateur avec accès Internet, micro, webcam, un navigateur à jour et les droits d'installation.
Oui. Chaque sujet se termine par un exercice : parler AG-UI en SSE brut, intégrer un agent dans une app Angular existante, imposer la confirmation côté serveur, attaquer puis durcir votre propre agent, rendre de l'A2UI avec votre design system, et enfin construire l'arbre de décision que vous emportez.
Pour garder la formation interactive. Dix participants, c'est le point où chacun a encore droit à un regard sur son code et à des réponses à ses questions.
Seulement en passant. Les evals, l'observabilité et le testing sont volontairement hors périmètre ici : ils sont couverts dans la formation complémentaire « Agentic Angular : tests et évals pour des agents IA fiables ».
Si vous êtes en France, cette formation est éligible au financement OPCO. Contactez-moi pour un devis et les modalités administratives.
"Réserver une Place" vous inscrit à une session planifiée. "Session sur Mesure" s'adresse aux entreprises qui souhaitent une formation privée, avec la possibilité d'adapter le contenu, la durée ou les priorités.
Si la formation ne répond pas à vos attentes, contactez-moi dans les 7 jours et nous trouverons une solution ensemble.