MarmicodeAgentic Angular: Baking Safe AI Agents Into Your Apps
3 Days · Online
🐣 Early Bird starts at €1,270
Three days to bake agents that survive production into the Angular apps you already have.Generative UI, human-in-the-loop, security, auth — and a takeaway decision tree.
🍱 What you will learn
The agent loop, context windows, and tokens — plus why a model can't tell instructions from data, and why that bites you later.
AG-UI, A2UI, MCP Apps, and WebMCP: who does what, where each one stands on maturity and adoption, and what's still a bet.
Events, run lifecycle, messages, tool calls, and state deltas: read the wire before touching an SDK.
Runtime setup, pre-built chat vs headless, and Signals & DI integration — inside an app you already have, not a greenfield toy.
Bi-directional agent ↔ app sync, read-only vs read/write, and the streaming and predictive updates that keep it feeling fast.
Approval buttons, edit-before-execute, and structured input — and a clear-eyed look at the limits of tool-based approval.
Suspend the run agent-side, confirm the exact args rather than the intent, and resume after a refresh.
Persist multi-session conversations, resume after a crash or a dropped stream, and cancel a run cleanly.
Prompt injection, sensitive information disclosure, guardrails that moderate streams in flight, and least-privilege tool scoping.
Propagate user identity to the agent runtime, scope tools per user and role, and lock down the runtime endpoint.
Declarative UI-as-data, the Angular renderer, a trusted catalog as a security model, and agent-driven UI beyond the chat surface.
Find out where the tokens go, then cut cost and boost speed so the bill doesn't outgrow the feature.
Which features deserve an agent, which surface fits each use case, and which risk tier each tool belongs to. You take the tree home.
🗓️ Program
- How LLMs work.
- The agent loop: model, context, tools, and what actually happens per turn.
- Context windows and tokens: what they cost you later.
- Why a model can't tell instructions from data, and why that matters.
- Why bake agents into your apps, instead of bolting a chatbot next to them.
- Mapping the ecosystem: AG-UI vs A2UI vs MCP Apps vs WebMCP.
- Where each one stands: maturity, adoption, momentum.
- The protocol: events, run lifecycle, messages, tool calls, state deltas.
- Reading the wire before touching an SDK.
- Drive a run end to end over raw server-sent events, with no SDK in the way.
- Runtime setup.
- Pre-built chat vs headless.
- Signals & DI integration.
- Wire the runtime, drop in a surface, and get the first agent turn running inside an app that already exists.
- The event stream is your stack trace: reading AG-UI in the network tab and dev tools.
- Mastra Studio’s traces.
- Track a broken run down to the event that caused it, using the stream and the traces.
- Bi-directional agent ↔ app sync.
- Read-only vs read/write.
- Perceived speed: streaming, predictive state updates.
- Share state in both directions, then make it feel instant with streaming and predictive updates.
- Exposing frontend tools to the agent.
- Rendering tool calls as Angular components.
- Expose a frontend tool and render its call as a real Angular component instead of a wall of text.
- The simplest loop: a frontend tool that asks the user.
- Approval buttons, edit-before-execute, structured input.
- The limitations of tool-based approval.
- Put the user in the loop with a frontend tool, then find where that approach stops being enough.
- Suspending the run agent-side: interrupt / suspend.
- Checkpoints / snapshots: where a paused run sleeps.
- The round-trip: suspend, approve, resume. Surviving a refresh.
- Confirming exact args, not intent.
- Move the confirmation where it cannot be bypassed, and make a paused run survive a page refresh.
- Persistence and multi-session conversations.
- Resuming a thread after refresh or crash.
- Stream errors: when the wire drops mid-answer.
- Cancellation: aborting a run cleanly.
- Break the connection on purpose, abort a run cleanly, and bring the thread back from where it left off.
- Prompt injection.
- Sensitive information disclosure.
- Guardrails: moderating streams in flight.
- Tool permission scoping: least privilege per user and role.
- Attack your own agent with injected content, then close the holes you just opened.
- Propagating user identity to the agent runtime.
- Scoping tools per user.
- Securing the runtime endpoint.
- Carry real identity through to the agent, scope its tools to that user, and close the endpoint behind it.
- Where the tokens go.
- Cutting cost, boosting speed.
- Measure where your tokens actually go, then cut the bill without making the feature feel slower.
- Declarative UI-as-data: JSONL streaming.
- The Angular renderer.
- A2UI as a security model: trusted catalog, JSON-not-code.
- A2UI recovery loop.
- Plug your own components into the renderer and let the agent compose them.
- Catalog granularity: atomic vs composed components.
- Fixed vs dynamic UI: a decision framework.
- Pick your granularity, expose the catalog, and see what the agent does with it.
- Agent-driven UI in the main app.
- Actions: wiring user interactions back to the agent.
- Move agent-driven UI into the main app, and wire interactions on it back to the agent.
- Which features deserve an agent.
- Picking the surface per use case: chat, embedded, or none.
- Risk-tiering your tools: auto-run, confirm, forbid.
- A takeaway decision tree.
- Evals, observability & testing are covered in the companion workshop: “Trusting Your Agentic Angular Apps: A Testing and Eval Strategy”.
- When to go agentic, which surface, which tier — for your own codebase, not a sample app.
🎓 Required knowledge
- Curiosity and good web culture
- Familiarity with the Angular ecosystem (e.g. creating a component, implementing and using inputs and outputs; Signals experience is a plus)
- No prior agent or LLM engineering experience required
👨🏻🏫 Your instructor
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.
🙋 Frequently Asked Questions
Angular developers who want to bake agentic features into a real app rather than bolt a chatbot next to it; leads and tech leads framing how AI shows up in the product; and architects and CTOs who need the security, auth, and cost questions answered before shipping.
You should be familiar with the Angular ecosystem — creating a component, implementing and using inputs and outputs. Signals experience is a plus. Good web culture and curiosity matter more than seniority.
No. We start from how LLMs actually work, the agent loop, and what a turn costs you in tokens, then build up from there. If you've already shipped agents, the human-in-the-loop, security, and generative UI days will still be new ground.
The agent side runs on Mastra, so the workshop is TypeScript end-to-end. Every pattern maps one-to-one to LangGraph and friends, and we name both as we go. AG-UI is the boundary that makes that choice reversible.
A computer with internet access, microphone, webcam, an up-to-date browser, and installation rights.
Yes. Each topic ends in an exercise: speaking AG-UI over plain SSE, embedding an agent into an existing Angular app, enforcing confirmation on the server, red-teaming then hardening your own agent, rendering A2UI with your design system, and finally building the decision tree you leave with.
To keep the workshop interactive. Ten attendees is the point where everyone still gets their code looked at and their questions answered.
Only in passing. Evals, observability, and testing are intentionally out of scope here — they are covered in the companion workshop, "Trusting Your Agentic Angular Apps: A Testing and Eval Strategy".
Yes. Contact me for a quote and administrative details.
"Book a Session" lets you join a scheduled session with other participants. "Custom Session" is for companies who want a private, in-house workshop, with optional adjustments to content, duration, or focus areas.
If the workshop doesn't meet your expectations, reach out within 7 days and we'll work it out.