Frontend Integration
Putting a model API key in the browser is how you get billed by strangers.
A ticket booth. The public never walks into the kitchen.
Visual Workflows
Start here — scroll inside each diagram frame to explore, then use + / − to zoom up to 200% if needed.
Overview
Scroll inside the frame to explore · use + / − to zoom up to 200%
Scroll inside the frame to explore · use + / − to zoom up to 200%
This turn
Scroll inside the frame to explore · use + / − to zoom up to 200%
A ticket booth. The public never walks into the kitchen.
Key Takeaways
- 1.Wire the app through a BFF: auth, events, HITL replies.
- 2.The agent backend is a service, not a browser call with your API key.
- 3.Cookies to the BFF, BFF to the runtime.
- 4.Putting a model API key in the browser is how you get billed by strangers.
Real Example
Scenario
A ticket booth. The public never walks into the kitchen.
What you would do
In AG-UI & Agent UX, apply Frontend Integration to this scenario: A ticket booth. Identify the inputs, run the technique, validate the output, and note one thing you would monitor in production.
Cheat Sheet
Quick recap
quick ref- •Wire the app through a BFF: auth, events, HITL replies
- •The agent backend is a service, not a browser call with your API key
- •Cookies to the BFF, BFF to the runtime
Common Mistakes
- ✕Skipping evaluation for Frontend Integration before production
- ✕No logging or tracing around frontend agent integration steps
- ✕Ignoring cost and latency implications