Building Agentic apps with Firebase and Google Cloud

Key Takeaways

Hi, I'm Emma, a developer relations engineer at Google. If you're looking to learn about agentic applications, you've come to the right place. In this video, we're taking a quick tour of the Barista web solution with Firebase, Genkit, Vertex AI, and Google Cloud. By the end of this solution, you'll know exactly how you can bring agents to your applications with Google's recommended architecture. Let's jump in. Agentic apps are apps that contain an agent that can independently act on your user's behalf. We have built a real-world coffee ordering system with multiple agents that work together to recommend and order the best beverage for you. You might order from a barista agent, which consults a recommendation agent, and finally submits drinks. These tools work together to execute AI tasks on behalf of the user. In this solution, we're prototyping with Firebase Studio, a tool to help you easily dive into the code and explore the integrations of Google products. Now for the magic. Inside the back-end service, we're using Firebase Genkit with Vertex AI to access the latest Gemini Pro model. Genkit is a framework designed to give us powerful AI capabilities out of the box, like the ability to define agents that can call tools. Tools allow agents to interact with the environment. In this case, to prepare a drinks order, get recommendations, and finally submit the order. We'll also explore how to define agent prompts and tools. Tools can be anything from calling an external service to querying data in Firestore. We'll also look at improving the accuracy of agent interactions through few-shot prompting and human-in-the-loop interactions. We'll show how you can use Google Cloud Run as the entry point to your scalable back-end service backed by Genkit and Vertex AI. We'll use Firestore to store our agent state and context to have a persistent session across a user's entire interaction with the agent. Firebase Genkit will send telemetry to Cloud Logging for monitoring the health and status of your AI integration. The basis of this application is one you might be familiar with. We have a front-end Angular app calling back-end APIs using HTTP requests. Here, we send messages to our series of agents to help us order our morning coffee. Then, we use Firebase Cloud Storage to bring multimodal input from the client app to Gemini. Once we have agentic API endpoints, we'll call them from an Angular front-end hosted on Firebase Hosting. This allows us to productionize our logic and agents so that we can easily scale to multi-platform and use the same agents across clients. We'll also use Firebase Anonymous Authentication to create ephemeral user accounts, which help us ensure consistent state management. One of the most important questions with AI is security, safety, and privacy. We'll show how to integrate tools like Firebase App Check, Anonymous Authentication, and Gemini's safety rules and configurations, all powerful guardrails to ensure our endpoints are secure, and our agents are built with privacy and security first. Another way to think about security is considering where agentic applications should include user confirmation. We call this human in the loop logic. We'll review how we include a human in the loop to confirm the final drink order with our agents, and other ways you can make sure introducing agents prioritizes user experience. There's a lot more to explore and learn about building agentic applications. Explore our solution, inspect the full architecture, quiz your knowledge, and we can't wait to see what agents you build in Firebase Studio.