Skip the docs

Build Firebase Genkit Node.js apps with Dash Agents

Firebase Genkit is an open-source framework that makes it easy for developers to build, deploy, and monitor generative AI applications.

It aims to streamline the integration of various AI models, including Google’s Gemini, Anthropic models, and locally hosted models like Gemma, Llama 2, and Mistral in your Node.js apps.

Let’s start building 🙌🏼

In this article, we will build a travel API that takes a city name and tells us top 5 places to visit there along with the kind of activity — adventure, eat out, relaxation and shopping.

Introducing Dash Agent for Firebase Genkit

We will use the @Firebase Genkit agent in CommandDash to avoid reading docs and directly get integration code for our use cases.

Dash agents stay up to date with the latest docs, examples and GitHub issues and assist us from the IDE. Install from CommandDash marketplace in VSCode (other IDEs coming soon):

Now with the Firebase Genkit agent in place, let’s start building. Any interactions with the agent are quoted like below:

Hi Firebase Genkit! Let’s start building 👋🏼

Step 1: Setting up your project

I want to create a NodeJS project using Firebase Genkit. What are the setup steps?

To start a Node.js project using Genkit, follow these steps.

Install the Genkit CLI:

npm i -g genkit

Create a new Node project:

mkdir genkit-intro && cd genkit-intro
npm init -y

Initialize a Genkit project:

genkit init

Follow the prompts to configure your project.

If you have any specific setup queries or face any issues, ask CommandDash for help!

Step 2: Making the LLM Request

Now, to setup the LLM Request for this, we first need to choose a model, create our input and output schemas, write a suitable prompt and parse the result.

Fortunately, we can skip this work and just ask the Genkit Agent:

Build a travel API that accepts a city name and tells us top 5 places to visit there along with the kind of activity — adventure, eat out, relaxation or shopping.

//index.ts
import { configureGenkit, defineFlow, startFlowsServer } from '@genkit-ai/core';
import { geminiPro } from '@genkit-ai/google-ai';
import { z } from 'zod';
 
configureGenkit({
    plugins: [geminiPro()],
    logLevel: 'debug',
    enableTracingAndMetrics: true,
});
 
export const travelRecommendationFlow = defineFlow(
    {
    name: 'travelRecommendationFlow',
    inputSchema: z.string(),
    outputSchema: z.array(
        z.object({
        place: z.string(),
        activity: z.enum(['Adventure', 'Eat out', 'Relaxation', 'Shopping']),
        })
    ),
    },
    async (cityName) => {
    const llmResponse = await generate({
        prompt: `Give me the top 5 places to visit in ${cityName} and tell me
           what kind of activity they are best for: Adventure, Eat out,
           Relaxation, Shopping. Please format your response as an array of
           JSON objects with "place" and "activity" keys.`,
        model: geminiPro,
        config: {
        temperature: 0.5,
        },
    });
 
    return JSON.parse(llmResponse.text());
    }
);
 
startFlowsServer();

We’ve got the entire flow setup for us with schema, request and parsers all added.

Now, let’s start the Genkit Developer UI to test our request.

export GOOGLE_API_KEY='<YOUR API KEY>'
genkit start

The flow opens up in the Firebase Genkit Developer UI:

Upon entering the city name and hitting the Run button, we encounter the error 🚨:

Unexpected token '`', "```json [ "... is not valid JSON
SyntaxError: Unexpected token '`', "```json
[
"... is not valid JSON
    at JSON.parse (<anonymous>)
    at /Users/samyak/Documents/commanddash/adventures/genkit-intro/lib/index.js:54:17
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Step 3: Fixing Runtime Errors

To fix this, let’s move to our IDE and log the llmResponse.text() to get more context on the issue.

Then paste the output along the error in the agent and attach the code using Attach Snippet to Dash in the menu bar.

Help me fix this error: [paste the log and errors from the console] (attach your code file)

Here’s how you can update your travelRecommendationFlow function to address the invalid JSON format:

export const travelRecommendationFlow = defineFlow(
    {
    // unchanged code
 
    // Extract the JSON content from the LLM response
    const jsonContent = llmResponse.text().replace(/```json\n|\n```/g, ''); 
 
    return JSON.parse(jsonContent);
    }
);

After adding the fix, let’s re-run the flow from the UI.

And it runs! We’ve created our first Firebase Genkit Flow 🙌🏼

You can also run your Node.js project and make the API request:

curl -X POST http://localhost:3400/travelRecommendationFlow -H "Content-Type: application/json" -d '{"data": "New York City"}'

Step 4: Deployment

Genkit facilitates deployment to serverless platforms like Firebase Cloud Functions, Google Cloud Run, or other environments that can serve an Express.js app.

Try it out yourself by asking:

How do I deploy my Genkit app to Firebase Cloud Functions?

Hope you enjoyed reading this article. We will soon be authoring more content for Genkit and let’s build AI apps together with Firebase!

Resources

CommandDash: AI Agents Marketplace - Visual Studio Marketplace