In this path you will integrate Gemini API into a Flutter application using Dart code with no need to run any servers. Vertex AI in Firebase takes care of all of the server side management and access control for you.

In this starter kit you will explore the capability of Gemini to interact with a Flutter application, both through updating the application state in response to a user's written conversational requests, as well as responding to a user interacting with the application's UI affordances.

With this starter kit, you can learn how to define the goal for an agent with system prompts, how to use tool calling to give your agent the ability to interact with the outside world, and how to build a user experience around the streaming data provided by your agent.

Link to machine setup instructions

After you've cloned the starter kit, you just need Flutter and Firebase on your machine. If you haven't already, follow these Getting Started guides to get the right tools in place:

• Flutter Getting Started
• Get started with the Gemini API using the Vertex AI in Firebase SDKs

Then follow these instructions to create a project:

• Create a Firebase project via the Firebase Console.
• Add Firebase to your Flutter app using flutterfire configure.

Some ideas to try

A couple of ideas for ways you can extend this codebase:

• Color palette generation: Add a function for generating matching or complementary colors
• Voice input: Integrate speech-to-text for verbal color descriptions
• Color history management: Add functions to name, save, or delete colors
• Export capabilities: Allow users to export colors to different formats
• Advanced analytics: Track which color descriptions are most difficult for the LLM to interpret

Register your app when you're finished!

We'd love to see what you build, so use this form to register your app after you're done.

More ways to learn

We've got a lot of resources to help you get started and grow with Flutter and AI:

• Explore the Build a Gemini powered Flutter app codelab.
• Review the documentation for Vertex AI in Firebase

And if you find yourself stuck, connect with the other folks in the Flutter community online and in person!

Vertex AI in Firebase SDK is a great way to start building agentic apps with Flutter. It's serverless so you don't need to manage your own infrastructure. You can integrate it into your Flutter app by adding the firebase_vertexai from pub.dev, so your code is written in Dart directly within your Flutter project. It has AppCheck integration to protect from API abuse by unauthorized clients. If you want to get started quickly with building agentic apps in Flutter, Vertex AI in FIrebase is the way to go.

If that's the case, when and why might you consider a Flutter + Genkit project, instead?

First, the Vertex AI in FIrebase SDK is limited to only a few models at the time of this writing: Gemini & Imagen. You don't have access to any of the other LLMs that are available. Vertex AI in Firebase is tightly coupled with your Flutter app and if you need to make changes to the data flow in the agentic experiences that you've built, chances are you'll have to ship an updated version of the entire client app.

Genkit is an open-source toolkit designed to help you build AI-powered features in web and mobile apps. Its primary strength is its versatility and flexibility. Genkit offers a unified interface for integrating AI models from Google, OpenAI, Anthropic, Ollama, and more, so you can explore and choose the best models for your needs.

Genkit is a server-side toolkit, so you can make changes on the fly and end-users won't notice as long as the client-facing APIs stay the same. Additionally, because Genkit flows are deployed as standard HTTPS endpoints - either on a server or serverless - Genkit flows can be reachable by any client that can make a network call.

Finally, it also comes with support for a number of popular server-side languages: JavaScript, Python, and Go.

Whether you're building chatbots, intelligent agents, workflow automations, or recommendation systems, Genkit handles the complexity of AI integration so you can focus on creating incredible user experiences.

With the starter kit below, you can build something like this:

My Packing List: Pack Smarter, Not Harder.

Stressed about packing? Forget essentials? Wish someone could just do it for you? Say hello to My Packing List!

Tell the app:

• Where you're going.
• How long you'll be there.
• Any attire needs (like "business formal" or "beach casual").

Our smart agent fetches the latest weather forecast for your destination and generates a personalized packing list tailored precisely to your trip!

But wait, there's more!

• Interactive Checklist: Easily track what you already have packed. Customizable prompts and tools.
• One-Tap Shopping: Missing a few items? Tap the "Buy Missing Items" button, and the agentic app handles the shopping for you! (Note: This demo simulates the shopping bit. Sorry, you won't be getting any Hawaiian shirts from building this app.)

Getting started

Get the code: genkit_flutter_agentic_app is available on GitHub.

Flutter App

UI

• TravelerFormScreen: This screen collects the user's trip destination, duration, and preferences to initiate the packing list generation.
• PackingList Screen: This screen displays the generated packing checklist items and quantities based on the trip details received from the backend.
• OrderConfirmationScreen: This screen shows the confirmation details, including items purchased, prices, and the total cost, after the “agent” completes a purchase on the user's behalf.

Models

Each model represents data in the app, these tend to match up to a particular screen

• TravelerFormModel: The model used to store data relating to the user's upcoming trip.
• ItemModel: A model representing an item that needs to be packed
• PackingListModel: A model that represents a user's packing list, including a list of Items
• OrderConfirmationModel: A model that represents an order confirmation

Connecting to Genkit

Genkit is a helper class that manages and abstracts away the Genkit Flow (network) calls to the Genkit backend server. It also handles parsing of the responses. So unless there's an error, these methods return an object such as OrderConfirmationModel and PackingListModel which can be used immediately by the app.

Genkit

Flows

There are two flows included in the starter kit. You can add additional flows or adjust the prompts that are already there for each flow:

• PackingHelperFlow: This flow receives JSON from the Flutter app containing the user's input (destination, duration, preferences). It uses various tools (see below) to get the weather forecast for the user-provided location. It generates a list of outfits based on the user input, itemizes it, uses another tool to get a Hero image for the location, then bundles everything up and sends it back to the Flutter app.
• PurchaseFlow: The flow receives a list of items that the user wants to buy. For each item, the “agent” uses the ShoppingTool to look for the item from a popular brand and purchase it on the user's behalf. It sends back a JSON confirmation including total price and details of each ordered item (name, quantity, individual price, total price for that item). The Flutter app uses this to display the order confirmation screen.

Tools

There are 4 tools included in the Genkit & Flutter starter kit. Each tool is entirely modular, you can modify these however you see fit to see fit for each use case:

• GetLatLong: Takes the location string, such as "Honolulu" and calls a geocoding API to get precise latitude and longitude
• GetWeather: Takes location coordinates (from GetLatLong) and calls a weather API to get the forecast ("mostly sunny... 70-80 degrees")
• GetImage: Use the location name to search an image API for a relevant photo.
• ShoppingTool: Makes a call to a hypothetical e-commerce/shopping API where it finds the product, and simulates placing an order for that product.

Code Repo Breakdown

          
            flutter_frontend/
            ├─ pubspec.yaml # Flutter app dependencies
            ├─ analysis_options.yaml
            ├─ lib/
            │  ├─ models/ # Data models that are used throughout the app
            │  │  ├─ item_model.dart
            │  │  ├─ packing_list_model.dart
            │  │  ├─ order_confirmation_model.dart
            │  │  ├─ traveler_form_model.dart
            │  ├─ screens/ # All of the screens in the app
            │  │  ├─ components.dart 
            │  │  ├─ order_confirmation.dart
            │  │  ├─ packing_list.dart
            │  │  ├─ traveler_form.dart
            │  ├─ settings/ 
            │  │  ├─ config.dart # Configure Genkit Server endpoint
            │  │  ├─ styles.dart
            │  │  ├─ theme.dart
            │  ├─ main.dart # Flutter client app's entrypoint
            │  ├─ genkit.dart/ # Class for making network calls to Genkit
            genkit_backend/
            ├─ src/
            │  ├─ ai.js # Configure a Genkit instance 
            │  ├─ app.js # Genkit app server's entrypoint
            │  ├─ config.js # Pulls API keys from environment variables
            │  ├─ tools/ # Tools / Function Calls
            │  │  ├─ latlong.js 
            │  │  ├─ shopping.js
            │  │  ├─ unsplash.js
            │  │  ├─ weather.js
            │  ├─ flows/ # Flow definitions 
            │  │  ├─ purchase.js
            │  │  ├─ packingHelper.js
            ├─ package.json # Node dependencies

          
        

Link to machine setup instructions

After you've cloned the starter kit, you just need Flutter and Firebase on your machine. If you haven't already, follow these Getting Started guides to get the right tools in place:

• Flutter Getting Started
• Genkit Getting Started

You'll need 3 different API keys to get this starter kit up and running:

• A Gemini API Key (Required for using Gemini model)
• An OpenWeather API Key (Required for LatLong and Weather tools)
• An Unsplash Developer Access Key (required for the Unsplash tool)

Some ideas to try

Ready to get building your agentic Flutter + Genkit app? Here are a few ideas:
Small changes:

• Adjust some of the existing prompts to get different output and behaviors
• Modify a flow: Can you make one of the flows return some additional information that it doesn't already?
• Modify one of the tools to get different data or take a different action.

Medium changes:

• Add another flow. What might the third flow do after the user receives their order confirmation?
• Add another tool that would be helpful for the agent to use
• Integrate the shoppingTool with a real shopping API
• Genkit gives you the flexibility to access different LLMs, so maybe try a different model.

Large changes, remix the app entirely:

• A travel planning app that generates a vacation itinerary based on user preferences, the weather and the local tourist attractions. How would the app find and book local attractions?
• A cooking helper app that generates recipes based on user preferences and available ingredients. How might the app go about determining what ingredients are available, could the user just take a picture of their fridge? How might the app help users get additional ingredients?
• Integrate the shoppingTool with a real shopping API
• Think of everyday problems that could be solved with an agentic app.

Remember, once you've updated your Genkit backend… Update your Flutter app too! The starter kit version looks a little bit like a travel influencer meets Flutter app developer. So go ahead and load it up with some new data, fix up the widgets, put a new coat of paint on it, do whatever you want, but most importantly make it your own!

Register your app when you're finished!

We'd love to see what you build, so use this form to register your app after you're done.

More ways to learn

This starter kit only scrapes the surface of what you can build with Flutter & Genkit. There are more powerful features including:

• Interrupts to pause generation and return control back to the user. Then, resume generation again when ready.
• RAG (Retrieval-augmented generation): A technique used to incorporate external sources of information into an LLM's responses.

Ready to dive deeper into more Flutter + Genkit? Check out these other projects:

• Compass AI Travel Planning App: This is a travel demo using Flutter, Genkit, and Firebase Data Connect to find ideal itineraries from a database of travel plans.
• Green Thumb App: The Flutter Fix-in Warehouse sample demonstrates using Flutter and Genkit together to build a generative AI with the following features: server-side tool calls, server-to-client tool calls (aka Genkit interrupts), Retrieve Augmented Generation (aka RAG)

Web developers everywhere are excited to build the next great web application but often don't know which path to take or where to start. Vertex AI in Firebase provides a secure way to interact with models provided by Vertex AI from your web client.

Choose this path if:

• You are familiar with JavaScript (or TypeScript)
• You want to build client-side agentic experiences

Keep in mind that this is for client-side apps, if you want to connect to models like Gemini from the server side, consider using Genkit, for example.

Here's what you get with the starter kit below, you can build something like this e-commerce store that includes a helpful agent that will answer questions and perform some actions for you via chat.

Some ideas to try

This starter kit is just that - a place to start. You can go further in this example by implementing some additional tools such as:

• Filtering the UI to match the conversation with the agent (e.g, show me only vegan options filters the UI to display only vegan options).
• Build a full checkout flow so that the agent can not only add items to the cart, but can initiate the checkout process.

There are even more agentic apps available to check out on Angular's Github page.

Register your app when you're finished!

We'd love to see what you build, so use this form to register your app after you're done.

More ways to learn

We've got a lot of resources to help you get started and grow with Angular and AI:

• Learn more about Firebase in Vertex AI
• Learn more about building with Gemini

And if you find yourself stuck, connect with the other folks in the Angular community online and in person!

Angular and Genkit are a powerful combination for creating full stack applications powered by Gemini.

Genkit is an open-source framework designed to simplify the entire lifecycle of building, deploying, and monitoring generative AI applications, particularly using JavaScript and TypeScript, though Genkit offers support for Python and Go as well. It provides a high-level abstraction, focusing on developer experience and rapid iteration.

Angular is a web framework that empowers developers to build fast, reliable applications.
Angular offers a number of features that streamline integration with Genkit including

• An API for reactively consuming asynchronous data
• Server routing that makes it easy to expose Genkit flows to a client application

With the starter kit below, you can build something like this simple chatbot application that answers generic user questions and provides options to respond to the agent. However, you're not limited to chatbots! Genkit's input and output schemas are well-suited for sending and receiving structured data that can be incorporated into a client application however you see fit.

What comes in the starter kit

This starter kit contains everything you need to create an application using Firebase Genkit with Angular to build your next great application.

The existing starter kit demonstrates how to use Genkit flows to create a persistent chat session with an agent. However, you can use the same patterns in this repository to create an application that runs any arbitrary Genkit flow you can dream up, which can leverage the full Genkit API (learn more).

The starter kit also comes with a sample tool that returns the current date and time. While this is a trivial example, it demonstrates the pattern for working with tools in Genkit that you can follow to perform more advanced actions, such as issuing API requests.

Explore and build

You can customize the application by updating the existing flow or even creating your own flows in src/flows.ts, then adding routes exposing your flows in src/server.ts. Then, you can integrate with the client by following the pattern shown in src/agent.service.ts.

Link to machine setup instructions

After you've cloned the starter kit, you just need Angular on your machine. If you haven't already, follow these Getting Started guides to get the right tools in place:

• Getting started with Angular
  • Angular overview

  • Installation

• Getting Started with Genkit

Register your app when you're finished!

We'd love to see what you build, so use this form to register your app after you're done.

More ways to learn

We've got a lot of resources to help you get started and grow with Angular and AI:

• Angular.dev

• Genkit docs

And if you find yourself stuck, connect with the other folks in the Angular community online and in person!