[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fQa3xUpnRDPNiFFu2QS4K-DAjYmsapeR9fNhPNBdpkOc":-1,"articles-feed-\u002F-4--":3},{"items":4,"page":32,"pageSize":33,"totalCount":34},[5],{"content":6,"createdAt":7,"id":8,"image":9,"isAffiliate":10,"isPublished":10,"publishedAt":11,"slug":12,"sourceId":13,"sourceName":14,"sourceType":15,"summary":16,"title":17,"updatedAt":18,"url":19,"urlHash":20,"tags":21},"RAG (Retrieval-Augmented Generation) is one of the most practical ways to make AI apps useful in the real world. Instead of asking a model to answer from generic training data, you: Index your own documents. Retrieve the most relevant portions of those documents (called "chunks") at query time. Generate an answer grounded in those chunks. In this tutorial, you will build a working Nuxt backend that does exactly that using Google's robust but easy-to-implement RAG solution: Gemini File Search. I'll also provide the frontend UI so you can test the flow end to end. What we are building Server side utility functions for interacting with the Gemini File Search API. Server side utility functions for managing the indexing and asking processes. A Nuxt server endpoint that creates a File Search store. A Nuxt server endpoint that uploads and indexes documents (text from a textarea input) into a Gemini File Search store. A polling endpoint that checks the status of the indexing operation. Another endpoint that queries the store with the File Search tool to answer a question. To best showcase the RAG pipeline in a practical way, I'll also provide you with a simple UI to test things out. This includes: An input field to name your File Search store (auto-generated the first time). A text area to provide plain text documents to upload and index into the store. An input field to ask a question about any of the indexed documents Status updates for the indexing and asking processes. A section to display the answer grounded in the indexed text. I'll also provide you with a page to manage the indexed documents in the store (view and delete them). You can download and run the completed demo app from the GitHub repo. Definition of Relevant RAG Terms Throughout this guide, we will use the following terms related to RAG and the Gemini File Search API. Make sure you understand them before continuing. RAG: Retrieval-Augmented Generation is a technique that uses a large language model to answer questions by retrieving relevant context from a knowledge base. File Search: File Search is a Gemini API that allows you to index and search through your own documents. (aka. a batteries-included RAG pipeline) Chunk: A chunk is a portion of a document that is indexed by the File Search API. Documents are split into these chunks so that the model can retrieve only the most relevant context when answering questions. Store: A store is a collection of documents that are indexed by the File Search API. You can query 1 store at a time. Useful for organizing your documents into logical groups. Tool: A tool is a function that can be called by a language model to perform a task. (in this case, the File Search tool) Prerequisites Node.js and npm installed A Google Gemini API key (you can get one from Google AI Studio here) Step 1) Create a Nuxt App Create a new Nuxt app with the minimal template: npm create nuxt@latest nuxt-rag-app -- -t minimal Then work from your app root: cd nuxt-rag-app All paths in the rest of this guide are relative to that project root. Step 2) Install dependencies (Gemini SDK) ni @google\u002Fgenai @nuxtjs\u002Fmdc @google\u002Fgenai is the Google Gemini API SDK. Alternately you could use the AI SDK as we discuss in our course AI Interfaces with Vue, Nuxt, and the AI SDK. It would make streaming the model output to the frontend a piece of cake. Plus it has other benefits but we're going to keep it simple for this tutorial and forego streaming. Step 3) Expose Your API Key via Nuxt Runtime Config Create a .env file in the root of your project and add your API key: NUXT_GOOGLE_GENERATIVE_AI_API_KEY=your-api-key Then update nuxt.config.ts to expose it via runtime config: \u002F\u002F https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fapi\u002Fconfiguration\u002Fnuxt-config export default defineNuxtConfig({ compatibilityDate: "2025-07-15", devtools: { enabled: true }, modules: ["@nuxtjs\u002Fmdc"], runtimeConfig: { \u002F\u002F this variable name must match the name in the .env file (converted to camelCase and without the NUXT_ prefix) googleGenerativeAiApiKey: "", }, }); Step 4) Add File Search Helper Functions Before we add API endpoints, let's create a set of helper functions in server\u002Futils\u002Fgemini-file-search.ts to manage the File Search operations with Gemini. 1. Import dependencies First, import the required modules. \u002F\u002F server\u002Futils\u002Fgemini-file-search.ts import { GoogleGenAI } from "@google\u002Fgenai"; 2. Helper function to create an authenticated API client Then create a function that initializes the Gemini API client with your API key and handles missing API key errors. \u002F\u002F server\u002Futils\u002Fgemini-file-search.ts function getApiKey() { const runtimeConfig = useRuntimeConfig(); const apiKey = runtimeConfig.googleGenerativeAiApiKey; if (!apiKey) { throw createError({ statusCode: 500, statusMessage: "Missing NUXT_GOOGLE_GENERATIVE_AI_API_KEY .env variable.", }); } return apiKey; } function getClient() { return new GoogleGenAI({ apiKey: getApiKey() }); } 3. Create a File Search store Next, provide a helper function for creating a File Search store. \u002F\u002F server\u002Futils\u002Fgemini-file-search.ts export async function createFileSearchStore(params: { displayName: string }) { const ai = getClient(); const store = await ai.fileSearchStores.create({ config: { displayName: params.displayName, }, }); return store.name ?? ""; } 4. Wait for an asynchronous operation from the API to complete Gemini File Search indexing happens asynchronously. This function polls the operation status until it's done. async function waitForOperation(ai: GoogleGenAI, operation: any) { let current = operation; while (!current.done) { await new Promise((resolve) => setTimeout(resolve, 1000)); current = await ai.operations.get({ operation: current }); } return current; } 5. Upload and index a text document in the store This function uploads your text directly from memory as a Blob, then waits for indexing to finish. export async function uploadTextToStore(params: { fileSearchStoreName: string; content: string; displayName: string; }) { const ai = getClient(); const markdownBlob = new Blob([params.content], { type: "text\u002Fmarkdown" }); const operation = await ai.fileSearchStores.uploadToFileSearchStore({ file: markdownBlob, fileSearchStoreName: params.fileSearchStoreName, config: { displayName: params.displayName, mimeType: "text\u002Fmarkdown", }, }); await waitForOperation(ai, operation); } 6. Ask questions using the indexed File Search context This function sends a question to Gemini, instructing it to answer only using retrieved context from your uploaded files. If Gemini can't answer with the provided context, it will say so. Most importantly, note the usage of the fileSearch tool that gives Gemini access to the indexed documents! export async function askStore(params: { fileSearchStoreName: string; question: string; }) { const ai = getClient(); const groundedQuestion = [ "Answer using only the retrieved File Search context.", 'If the context does not contain the answer, say: "I do not know based on the uploaded documents."', `Question: ${params.question}`, ].join("\\n"); const response = await ai.models.generateContent({ model: "gemini-3-flash-preview", contents: groundedQuestion, config: { \u002F\u002F 👇 this is the key part that gives Gemini access to the indexed documents! tools: [ { fileSearch: { fileSearchStoreNames: [params.fileSearchStoreName], }, }, ], }, }); return { text: response.text ?? "", groundingMetadata: response.candidates?.[0]?.groundingMetadata ?? null, }; } Step 5) Add display-name helper functions After creating the File Search helpers, add one small utility file for generating store and document names. Create server\u002Futils\u002Frag-display-names.ts: \u002F\u002F used if no store name is provided export function createStoreDisplayName() { return `nuxt-rag-store-${Date.now()}`; } \u002F\u002F since we're using a text input instead of an actual document with a filename, we need to generate a unique name for the document we import \u002F\u002F this does that based on the first non-empty line of the content export function createDisplayNameFromContent(content: string) { const firstNonEmptyLine = content .split("\\n") .map((line) => line.trim()) .find((line) => line.length > 0); const base = (firstNonEmptyLine || "notes") .replace(\u002F^#+\\s*\u002F, "") .replace(\u002F[^a-zA-Z0-9\\s-]\u002Fg, "") .trim() .replace(\u002F\\s+\u002Fg, "-") .toLowerCase() .slice(0, 48); return `${base || "notes"}-${Date.now()}`; } Step 6) Add storage and indexing-status helper functions Indexing is asynchronous, so for a better UX we will: create an index job immediately, update job status in KV storage (useStorage()), and poll job status from the frontend. Let's create some helper functions, variables, and types to help manage this process. 1. Define Types and Constants We'll start by defining the job status type, the job object shape, and a key prefix for our storage. \u002F\u002F server\u002Futils\u002Frag-index-jobs.ts import { randomUUID } from "node:crypto"; \u002F\u002F Possible statuses for an indexing job export type RAGIndexJobStatus = "pending" | "succeeded" | "failed"; \u002F\u002F The job object structure export type RAGIndexJob = { id: string; status: RAGIndexJobStatus; fileSearchStoreName: string; displayName: string; createdAt: string; updatedAt: string; errorMessage?: string; \u002F\u002F Populated if failed }; \u002F\u002F Prefix for storing job entries in KV export const INDEX_JOB_PREFIX = "rag:index-job:"; 2. Helpers for Job Storage Keys Next, we need a function to generate a unique storage key for each job based on its ID. export function getJobKey(jobId: string) { return `${INDEX_JOB_PREFIX}${jobId}`; } 3. Creating a New Index Job When we start an indexing operation, we want to create a new job entry in our KV storage with a unique ID and an initial status of "pending". export async function createIndexJob(params: { fileSearchStoreName: string; displayName: string; }) { const job: RAGIndexJob = { id: randomUUID(), status: "pending", fileSearchStoreName: params.fileSearchStoreName, displayName: params.displayName, createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), }; await useStorage().setItem(getJobKey(job.id), job); return job; } 4. Retrieving a Saved Index Job This function allows you to fetch job details from storage by job ID. export async function getIndexJob(jobId: string) { return await useStorage().getItem<RAGIndexJob>(getJobKey(jobId)); } 5. Marking a Job as Succeeded When an indexing operation completes successfully, use this to update its status. export async function markIndexJobSucceeded(jobId: string) { const existing = await getIndexJob(jobId); if (!existing) return; await useStorage().setItem(getJobKey(jobId), { ...existing, status: "succeeded", updatedAt: new Date().toISOString(), errorMessage: undefined, }); } 6. Marking a Job as Failed If indexing fails, call this to record the failure and the error message. export async function markIndexJobFailed(params: { jobId: string; errorMessage: string; }) { const existing = await getIndexJob(params.jobId); if (!existing) return; await useStorage().setItem(getJobKey(params.jobId), { ...existing, status: "failed", updatedAt: new Date().toISOString(), errorMessage: params.errorMessage, }); } With these helpers in place, you can create, update, check, and manage the lifecycle of document indexing jobs in your app. Step 7) Add API endpoints for stores, indexing, and asking questions Now the API layer can focus on request validation and orchestration while reusing helper functions from server\u002Futils. Let's see how to create the API endpoints for creating stores, indexing documents, and asking questions. 1. Create a store API endpoint Create server\u002Fapi\u002Frag\u002Fstore.post.ts with the following code to support creating a store. export default defineEventHandler(async (event) => { \u002F\u002F get the name of the store from the body const body = await readBody<{ displayName?: string }>(event); const displayName = body.displayName?.trim() || createStoreDisplayName(); \u002F\u002F create the store with the helper function const fileSearchStoreName = await createFileSearchStore({ displayName, }); \u002F\u002F if the store creation failed, throw an error if (!fileSearchStoreName) { throw createError({ statusCode: 500, statusMessage: "Failed to create a File Search store.", }); } \u002F\u002F return the name of the store return { fileSearchStoreName, }; }); 2. Create an indexing API endpoint Create server\u002Fapi\u002Frag\u002Findex.ts with the following code to support indexing a document. export default defineEventHandler(async (event) => { const body = await readBody<{ content?: string; displayName?: string; storeName?: string; }>(event); \u002F\u002F get the content of the document to index \u002F\u002F and the store to index it into \u002F\u002F from the request body const content = body.content?.trim(); const fileSearchStoreName = body.storeName?.trim(); \u002F\u002F if the content is not provided, throw an error if (!content) { throw createError({ statusCode: 400, statusMessage: 'Request body needs a non-empty "content" field.', }); } \u002F\u002F if the store name is not provided, throw an error if (!fileSearchStoreName) { throw createError({ statusCode: 400, statusMessage: 'Request body needs a non-empty "storeName" field.', }); } \u002F\u002F if the display name for the document is not provided, create one from the content const displayName = body.displayName || createDisplayNameFromContent(content); \u002F\u002F and then initialize the indexing job in KV storage const job = await createIndexJob({ fileSearchStoreName, displayName, }); \u002F\u002F create a function to bundle \u002F\u002F - doing the indexing \u002F\u002F - and update the indexing status in KV storage const runIndexing = async () => { try { await uploadTextToStore({ fileSearchStoreName, content, displayName, }); await markIndexJobSucceeded(job.id); } catch (error: any) { await markIndexJobFailed({ jobId: job.id, errorMessage: error?.data?.statusMessage || error?.message || "Unknown indexing error", }); } }; \u002F\u002F Do the indexing in the background event.waitUntil(runIndexing()); \u002F\u002F and return the job id and status immediately with a 202 status code setResponseStatus(event, 202); return { ok: true, accepted: true, jobId: job.id, jobStatus: "pending", fileSearchStoreName, }; }); 3. Create an index-status API endpoint With the indexing API endpoint in place, we can kick off the indexing process but we don't yet have a way to check the status of the indexing job. Let's create an endpoint to do that. Create server\u002Fapi\u002Frag\u002Findex-status.get.ts: export default defineEventHandler(async (event) => { const query = getQuery(event); const jobId = String(query.jobId || "").trim(); \u002F\u002F require the job id to be provided \u002F\u002F we can't check the status of a job if we don't know the job id 🤪 if (!jobId) { throw createError({ statusCode: 400, statusMessage: 'Query string needs a non-empty "jobId" value.', }); } \u002F\u002F get the job from the KV storage const job = await getIndexJob(jobId); \u002F\u002F if the job is not found, throw an error if (!job) { throw createError({ statusCode: 404, statusMessage: "Index job not found.", }); } \u002F\u002F return the job from the KV storage return { job }; }); Great work. You now have the backend flow for indexing documents. Easier than you thought, right? 4. Create an ask API endpoint What's a document index without a way to ask questions about it? Now let's create an endpoint to do that. Create server\u002Fapi\u002Frag\u002Fask.post.ts: export default defineEventHandler(async (event) => { \u002F\u002F get the question from the request body \u002F\u002F and the store of documents to ask the question about const body = await readBody<{ question?: string; storeName?: string }>(event); const question = body.question?.trim(); const fileSearchStoreName = body.storeName?.trim(); \u002F\u002F if the question is not provided, throw an error if (!question) { throw createError({ statusCode: 400, statusMessage: 'Request body needs a non-empty "question" field.', }); } \u002F\u002F if the store name is not provided, throw an error if (!fileSearchStoreName) { throw createError({ statusCode: 400, statusMessage: 'Request body needs a non-empty "storeName" field.', }); } \u002F\u002F use the askStore helper function to ask the question of the File Search store \u002F\u002F You could stream this response, but for simplicity we are not doing that here. const result = await askStore({ fileSearchStoreName, question }); \u002F\u002F The groundingChunks from the File Search API return the context used to answer the question. \u002F\u002F we need to map that to the title, text, and fileSearchStore of the document that was used \u002F\u002F so we can display the attributions in the UI const attributions = (result.groundingMetadata?.groundingChunks ?? []) .map((chunk: any) => chunk?.retrievedContext) .filter(Boolean) .map((ctx: any) => ({ title: ctx.title ?? "Untitled document", text: ctx.text ?? "", fileSearchStore: ctx.fileSearchStore ?? fileSearchStoreName, })); \u002F\u002F that's it! return { answer: result.text, attributions, groundingMetadata: result.groundingMetadata, fileSearchStoreName, }; }); Step 8) Hook up the UI Since this tutorial focuses on the Nuxt backend and Gemini File Search API, you can find the full frontend code in the GitHub repo. Bonus) Add documents management API endpoints The Gemini File Search API also allows you to list and delete documents from a store. While not strictly necessary for our simple app, it's a good way to showcase the full capabilities of the API. And, of course, you'll likely need to list documents or remove a document from a store at some point in your own apps! Let's add those endpoints to the backend. 1) Add document listing and delete helpers Extend server\u002Futils\u002Fgemini-file-search.ts with: \u002F\u002F server\u002Futils\u002Fgemini-file-search.ts export async function listStoreDocuments(params: { fileSearchStoreName: string; }) { const ai = getClient(); const result: Array<{ name: string; displayName: string }> = []; const documents = await ai.fileSearchStores.documents.list({ parent: params.fileSearchStoreName, }); for await (const document of documents as any) { result.push({ name: document.name ?? "", displayName: document.displayName ?? document.name ?? "Untitled document", }); } return result; } export async function deleteStoreDocument(params: { documentName: string }) { const ai = getClient(); await ai.fileSearchStores.documents.delete({ name: params.documentName, config: { force: true }, }); } 2) Add API endpoints Create server\u002Fapi\u002Frag\u002Fdocuments.get.ts: \u002F\u002F server\u002Fapi\u002Frag\u002Fdocuments.get.ts export default defineEventHandler(async (event) => { const query = getQuery(event); const fileSearchStoreName = String(query.storeName || "").trim(); if (!fileSearchStoreName) { throw createError({ statusCode: 400, statusMessage: 'Query string needs a non-empty "storeName" value.', }); } const documents = await listStoreDocuments({ fileSearchStoreName }); return { fileSearchStoreName, documents }; }); Create server\u002Fapi\u002Frag\u002Fdocuments.delete.ts: \u002F\u002F server\u002Fapi\u002Frag\u002Fdocuments.delete.ts export default defineEventHandler(async (event) => { const body = await readBody<{ documentName?: string }>(event); const documentName = body.documentName?.trim(); if (!documentName) throw createError({ statusCode: 400, statusMessage: "Missing documentName", }); await deleteStoreDocument({ documentName }); return { ok: true }; }); And that's it! You now have a backend API for managing your File Search stores, indexing documents, and asking questions. What we've built: Here are the API endpoints provided in this tutorial: 1. List Documents in a File Search Store Endpoint: GET \u002Fapi\u002Frag\u002Fdocuments?storeName=fileSearchStores\u002Fyour-store-name Returns the list of documents stored in the given File Search store. Example Request: curl "http:\u002F\u002Flocalhost:4310\u002Fapi\u002Frag\u002Fdocuments?storeName=fileSearchStores\u002Fyour-store-name" Example Response: { "fileSearchStoreName": "fileSearchStores\u002Fyour-store-name", "documents": [ { "name": "fileSearchStores\u002Fyour-store-name\u002Fdocuments\u002Fdoc-1", "displayName": "My Document" } ] } 2. Delete a Document from a Store Endpoint: DELETE \u002Fapi\u002Frag\u002Fdocuments Send a JSON body with the document's name to delete it from the store. Example Request: curl -X DELETE "http:\u002F\u002Flocalhost:4310\u002Fapi\u002Frag\u002Fdocuments" \\ -H "content-type: application\u002Fjson" \\ -d '{"documentName":"fileSearchStores\u002Fyour-store-name\u002Fdocuments\u002Fdoc-1"}' Example Response: { "ok": true } 3. Create a File Search Store Endpoint: POST \u002Fapi\u002Frag\u002Fstore Creates a new File Search store that will hold your indexed documents. Example Request: curl -s -X POST "http:\u002F\u002Flocalhost:4310\u002Fapi\u002Frag\u002Fstore" \\ -H "content-type: application\u002Fjson" \\ -d '{"displayName":"smoke-test-store"}' Example Response: { "fileSearchStoreName": "fileSearchStores\u002Fabc123" } 4. Upload and Index a Document Endpoint: POST \u002Fapi\u002Frag Uploads text content (as plain text) and indexes it into the specified File Search store. Example Request: curl -s -X POST "http:\u002F\u002Flocalhost:4310\u002Fapi\u002Frag" \\ -H "content-type: application\u002Fjson" \\ -d '{"storeName":"fileSearchStores\u002Fyour-store-name","content":"RAG means Retrieval-Augmented Generation. It retrieves relevant context from your private docs before generation.","displayName":"smoke-test-notes"}' Example Response: { "ok": true, "accepted": true, "jobId": "3f2d41a9-1f2d-43c2-9e21-7f4ce0d3a9b6", "jobStatus": "pending", "fileSearchStoreName": "fileSearchStores\u002Fyour-store-name" } 5. Poll for Indexing Status Endpoint: GET \u002Fapi\u002Frag\u002Findex-status?jobId=... Checks the status of a long-running indexing operation. Example Request: curl -s "http:\u002F\u002Flocalhost:4310\u002Fapi\u002Frag\u002Findex-status?jobId=3f2d41a9-1f2d-43c2-9e21-7f4ce0d3a9b6" Example Response: { "job": { "id": "3f2d41a9-1f2d-43c2-9e21-7f4ce0d3a9b6", "status": "succeeded", "fileSearchStoreName": "fileSearchStores\u002Fyour-store-name", "displayName": "smoke-test-notes" } } 6. Ask Questions Grounded In Your Indexed Docs Endpoint: POST \u002Fapi\u002Frag\u002Fask Sends a natural language question to the backend and gets a grounded answer based on your previously indexed documents. Example Request: curl -s -X POST "http:\u002F\u002Flocalhost:4310\u002Fapi\u002Frag\u002Fask" \\ -H "content-type: application\u002Fjson" \\ -d '{"storeName":"fileSearchStores\u002Fyour-store-name","question":"What does RAG mean?"}' Example Response: { "answer": "RAG means Retrieval-Augmented Generation. It retrieves relevant context from your private docs before generation.", "attributions": [ { "title": "smoke-test-notes", "text": "RAG means Retrieval-Augmented Generation. It retrieves relevant context from your private docs before generation.", "fileSearchStore": "fileSearchStores\u002Fyour-store-name" } ], "groundingMetadata": { \u002F* ... *\u002F }, "fileSearchStoreName": "fileSearchStores\u002Fyour-store-name" } Wrapping up If you enjoyed this article you might also be interested in the comprehensive RAG course over on aidd.io. It goes deep into detail about how RAG works and shows you step by step how to build every part of the process from scratch: from gathering documents, to chunking them, to generating embeddings, to indexing them, and more! You'll also probably want to check out the official docs for Gemini File Search.","2026-04-08T06:47:51.245Z","019d6bd8-ea2a-734b-9c29-2aef0720a232","https:\u002F\u002Fblog.vueschool.io\u002Fwp-content\u002Fuploads\u002F2026\u002F03\u002Fdemo-screenshot.jpg",true,"2026-03-25T23:00:54.000Z","rag-with-nuxt-and-gemini-file-search","019d6bd5-87de-77ef-ac92-98aa56cda920","VueSchool","vueschool","This tutorial guides you through building a Nuxt backend that implements Retrieval-Augmented Generation (RAG) using Google's Gemini File Search. You'll learn to create server-side utility functions, manage document indexing, and develop a simple UI for querying indexed documents and displaying answers. The article provides a comprehensive overview of the RAG pipeline along with practical implementation steps.","RAG with Nuxt and Gemini File Search","2026-04-08T06:47:55.039Z","https:\u002F\u002Fblog.vueschool.io\u002Fvuejs-tutorials\u002Frag-with-nuxt-and-gemini-file-search\u002F?friend=MOKKAPPS","cd9445a0fbd730d2ddf9b7b249798a6f5ccabf7741514acd63444f85fdfa6076",[22,26,29],{"color":23,"id":24,"name":25,"slug":25},"#10b981","019d6bd8-fad3-70a9-a74d-ab96e3a2f45d","nuxt",{"color":23,"id":27,"name":28,"slug":28},"019d6bd8-fb46-77ef-a3b6-bd2d30ab8919","api",{"color":23,"id":30,"name":31,"slug":31},"019d6bd8-fba5-743f-8f9f-4e23c0b31581","tutorial",4,20,61]