We are all adding various Generative AI workflows in our apps. A common problem encountered is to get LLMs to answer based on our defined dataset.
We may want to provide information like:
Our internal documents like PDFs or reports.
Data provided by the user like notes, forms, appointment history etc.
Or latest information like news articles, and wikipedia pages.
Building a RAG pipeline:
To solve this, we will incorporate a RAG pipeline that can perform a semantic search and extract most relevant data to answer user's query from a huge corpus of 1000s of documents.
For this article, we will pick up a website and create a chatbot answering questions over it's content.
Getting Help: Dash Agent for Firebase Genkit
Building with a new package is a difficult task that requires learning it's concepts first. To save our time reading the documentation of Firebase Genkit, we will use the @Firebase Genkit agent in CommandDash.
Dash agents stay upto date with the latest docs, examples and github issues and assist us from the IDE.
We can install it from CommandDash marketplace in VSCode .
Now with the Firebase Genkit agent in place, we can directly ask it to assist us to build our usecase. Any interactions with the agent are quoted like below:
Hi Firebase Genkit! Let's start building 👋🏼
Getting Started
How to setup a Next.js project to use Firebase Genkit and Firestore
Here's a comprehensive guide on setting up a Next.js project to use Firebase Genkit with Firestore.
Node.js and npm: Ensure you have Node.js and npm installed on your machine.
Firebase CLI: Install the Firebase CLI using npm install -g firebase-tools.
Steps
Create a Next.js Project
Choose TypeScript as the language during setup.
Initialize Genkit
Select Next.js as your deployment platform.
Select your preferred model provider (e.g., Gemini, Vertex AI).
Accept the defaults for other prompts.
This will set up your project with sample Genkit files.
Install the Firebase Plugin
Configure the Firebase Plugin
In yourgenkit.ts file:
Set up Firestore
Initialize the Firebase Admin SDK in yourgenkit.ts file:
Replace path/to/your/firebase-service-account-key.json with the path to your Firebase service account key file. You can download this key file from the Firebase console (Project Settings > Service Accounts).
Populating Data in Firestore
For this article, we will pick the Firebase Genkit documentation and index it to our Firestore DB.
Indexing is converting text into embeddings which can then be used to rank text based on their semantic similarity. To make it easy, I've extracted the Genkit documentation into this JSON file.
Now let's ask the Dash Agent:
Write me a method that extracts data from the json file with schema [{title, description, content}] and saves the indexed data to the "documents" collection in firestore.
Chunk the data appropriately within the embedding model limits.
Now, we will run the indexWebsiteContent as a one time API call to save our data to Firestore for querying later.
Upon running:
The Firestore DB is now populated 🙌🏼 with embeddings in vector format!
Asking questions on this data
Moving back to Firebase Genkit Agent:
Create a chatRequest method that retrieves the data from the collection and creates a model request to answer user's query.
Use top 3 documents with Gemini Pro model.
Done! We got the entire from ready for us.
Now, we can first test the answerQuery method as an API as we did before.
Running the methods returns an error regarding an indexing prerequisite issue.
Error: 9 FAILED_PRECONDITION: Missing vector index configuration. Please create the required index with the following gcloud command: gcloud alpha firestore indexes composite create --project={your project name} --collection-group=documents --query-scope=COLLECTION --field-config=vector-config='{"dimension":"768","flat": "{}"}',field-path=embedding
This indicates we need to first set the Vector Index configuration for the Firestore DB using gcloud CLI. Once the CLI is installed, run this command:
You can copy find values specific to your project from the error message itself. Once index is created, you get it's ID.
Now, we re-run the same API request again and this time it succeeds 🙌🏼
Building the UI
We will ask CommandDash only to create us a basic UI that calls the chatRequest method.
Use Attach Snippets to Dash in the menu bar after selecting the below snippets to provide them as context
[page.tsx] [genkit.ts] [pages/api/chat-request.ts] update my next JS page to have a textfield and button that calls that chat request method and shows the response in the text box.
Great, Let's run our Next app and see the results:
Congratulations! We've built our first RAG app with Genkit!
Now adapt this to your usecase and ship useful AI powered apps to your users.