Explore Top 10 Features of Firebase Genkit for Seamless App Integration and Powerful Model Management

The Top 10 Features of Firebase Genkit

In today's tech landscape, harnessing the power of AI can make or break your app's success. Firebase Genkit is an innovative tool designed to integrate cutting-edge AI functionalities seamlessly into your Next.js projects. Whether you're looking to generate content, perform semantic searches, or handle complex prompts, Genkit simplifies these advanced AI capabilities.

Firebase Genkit is crafted with both novice and seasoned developers in mind and offers a unified, flexible approach to implement powerful AI. In this tutorial, we'll delve into the top 10 distinctive features of Firebase Genkit and guide you through setting up your first project in Next.js. Follow these steps to unlock the true potential of AI in your applications!

1. Many Models, One Interface

Genkit streamlines the process of trying out and integrating various AI models using a single interface. The abstraction layer makes it simple to switch models with a single argument change while supporting custom configurations.

import { geminiPro } from '@genkit-ai/vertexai';
import { ollama } from 'genkit-ollama';
import { generate } from '@genkit-ai/ai';
 
const result = await generate({
  model: geminiPro,  // Switch to 'ollama' or any other model easily
  config: { temperature: 0.3, maxOutputTokens: 200 },
  prompt: 'What makes you the best LLM out there?',
});
 
console.log(result.text());

2. Structured Output

Genkit ensures type-safe outputs using Zod schema, delivering structured data that can be easily manipulated and utilized. This helps in converting unstructured text into organized, actionable insights.

import { generate } from "@genkit-ai/ai";
import { geminiPro } from "@genkit-ai/vertexai";
import { z } from "zod";
 
const CreatureSchema = z.object({
  name: z.string(),
  hitPoints: z.number(),
  attacks: z.array(z.object({ name: z.string(), damage: z.number() }))
});
 
const createCreature = defineFlow({
  name: "createCreature",
  inputSchema: z.string(),
  outputSchema: CreatureSchema,
}, async (habitat) => {
  const result = await generate({
    model: geminiPro,
    prompt: `Design a creature for ${habitat}.`,
    output: { schema: CreatureSchema }
  });
  return result.output();
});
 
console.log(await createCreature("forest"));

3. Multimodal, Multimedia

Genkit excels in handling multimodal content by providing formats that allow for integrating text, data, and media. Here's an example of generating an image and describing it:

import { imagen2, geminiProVision } from '@genkit-ai/vertexai';
import { generate } from '@genkit-ai/ai';
 
const imageResult = await generate({
  model: imagen2,
  prompt: 'Generate an image of a bustling medieval marketplace.',
});
 
const descriptionResult = await generate({
  model: geminiProVision,
  prompt: [{ text: 'Describe this image:' }, { media: imageResult.media() }],
});
 
console.log(descriptionResult.text());

4. Give LLMs Tools

Genkit's tool configuration simplifies the integration of function calling, enabling models to perform a wide range of actions such as fetching data or updating databases.

import { generate, defineTool } from '@genkit-ai/ai';
import { geminiPro } from '@genkit-ai/vertexai';
import { z } from 'zod';
 
const createReminder = defineTool({
  name: 'createReminder',
  description: 'Schedule reminders.',
  inputSchema: z.object({ time: z.string(), reminder: z.string() }),
  outputSchema: z.number(),
}, (reminder) => db.reminders.create(reminder));
 
const searchNotes = defineTool({
  name: 'searchNotes',
  description: 'Search notes.',
  inputSchema: z.string(),
  outputSchema: { notes: z.array(NoteSchema) },
}, (query) => db.notes.search(query));
 
const result = await generate({
  model: geminiPro,
  tools: [createReminder, searchNotes],
  prompt: 'Set a reminder for my meeting with Anna.',
});
 
console.log(result.text());

5. Prompt Management with Dotprompt

Genkit's Dotprompt format unifies the management of prompts, models, and configurations in a single file, facilitating easier testing and optimization.

---
model: vertexai/gemini-1.0-pro
config:
  temperature: 0.9
input: 
  schema:
    properties:
      location: {type: string}
      style: {type: string}
    required: [location]
  default:
    location: a restaurant
---
You are the world's most welcoming AI assistant working at {{location}}. Greet a guest.

6. Run Flows Locally

Developing and iterating AI models require constant local testing. Genkit provides a developer UI for interactive testing and tweaking your flows.

7. Inspect Traces

Debugging complex AI workflows is simplified with Genkit's trace inspector, helping you to visualize and rectify issues in each step of your flow.

8. Open & Extensible

Genkit’s plugin model encourages community contributions and rapid expansion. Custom components and plugins can be seamlessly integrated into your project.

import { embed } from '@genkit-ai/ai/embedder';
import { Document, defineRetriever } from '@genkit-ai/ai/retriever';
import { textEmbeddingGecko } from '@genkit-ai/vertexai';
 
const firestoreRetriever = defineRetriever({
  name: 'firestoreDocs',
  configSchema: z.object({ k: z.number().optional() }),
}, async (input, options) => {
  const embedding = await embed({ embedder: textEmbeddingGecko, content: input });
  // Fetch documents based on embedding from Firestore
  const documents = await getDocumentsFromFirestore(embedding, options.k);
  return { documents };
});

9. Built for Production

Deploying AI functionalities is simplified with integration support for platforms like Google Cloud and Firebase.

10. Authorization & Security Handling

Genkit equips you with mechanisms to handle authorization and ensure secure data transactions within your AI workflows.

import { defineFlow } from '@genkit-ai/flow';
import { z } from 'zod';
 
export const selfSummaryFlow = defineFlow({
  name: 'selfSummaryFlow',
  inputSchema: z.object({ uid: z.string() }),
  outputSchema: z.string(),
  authPolicy: (auth, input) => {
    if (!auth || input.uid !== auth.uid) throw new Error('Unauthorized access.');
  }
}, async (input) => {
  return `Summary for user ${input.uid}`;
});

Getting Started with Firebase Genkit in Next.js

Requirements: Ensure you have Node.js 20 or later installed.

Step-by-Step Procedure

Install the Genkit CLI:
```
npm i -g genkit
```
Create a Next.js app:
```
npx create-next-app@latest
```
Initialize Genkit in your project:
```
cd your-nextjs-project
genkit init
```
Configure API Credentials:
- For Google AI: Set the GOOGLE_GENAI_API_KEY environment variable.
- For Vertex AI: Set GCLOUD_PROJECT, GCLOUD_LOCATION, and authenticate using gcloud.

Sample Flow Demonstration:

import { callMenuSuggestionFlow } from '@/app/genkit';
 
export async function callMenuSuggestionFlow(theme) {
  const flowResponse = await runFlow(menuSuggestionFlow, theme);
  return flowResponse;
}
 
// Utilize the function in a Next.js page
'use client';
import { useState } from 'react';
import { callMenuSuggestionFlow } from '@/app/genkit';
 
export default function Home() {
  const [menuItem, setMenu] = useState('');
  async function getMenuItem(formData) {
    const theme = formData.get('theme')?.toString() ?? '';
    const suggestion = await callMenuSuggestionFlow(theme);
    setMenu(suggestion);
  }
  return (
    <form onSubmit={(e) => { e.preventDefault(); getMenuItem(new FormData(e.target)) }}>
      <input name="theme" placeholder="Theme" />
      <button type="submit">Generate</button>
    </form>
    <div>{menuItem}</div>
  );
}

Run your Next.js app to see Genkit in action:

npm run dev

Explore more about Genkit and its capabilities by referring to the official documentation.

Wrap-Up

Following this guided tutorial, you should now have a solid understanding of the top ten features of Firebase Genkit and how to integrate them into your Next.js projects. Embrace these powerful AI tools to transform your apps with seamless AI integration and sophisticated model management.

Source: Firebase Genkit Documentation | Author: Firebase Team