Build a RAG App in React Native: Complete 2026 Guide

// api/rag-query.ts (Vercel/Next.js API route)
import OpenAI from 'openai'
import { Pinecone } from '@pinecone-database/pinecone'

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY })
const pinecone = new Pinecone({ apiKey: process.env.PINECONE_API_KEY! })
const index = pinecone.index('your-index-name')

export async function POST(req: Request) {
  const { query, userId, topK = 5 } = await req.json()

  // Step 1: Embed the user's query
  const embeddingRes = await openai.embeddings.create({
    model: 'text-embedding-3-small',
    input: query,
  })
  const queryVector = embeddingRes.data[0].embedding

  // Step 2: Retrieve relevant chunks from vector DB
  const results = await index.query({
    vector: queryVector,
    topK,
    filter: { userId }, // Scope to user's own documents
    includeMetadata: true,
  })

  const context = results.matches
    .filter(m => (m.score ?? 0) > 0.75) // Only include high-relevance chunks
    .map(m => m.metadata?.text as string)
    .join('\n\n---\n\n')

  // Step 3: Generate answer with retrieved context
  const stream = openai.beta.chat.completions.stream({
    model: 'gpt-4o-mini',
    messages: [
      {
        role: 'system',
        content: `You are a helpful assistant. Answer based ONLY on the provided context.
If the answer is not in the context, say "I don't have that information."

Context:
${context}`,
      },
      { role: 'user', content: query },
    ],
    max_tokens: 600,
  })

  // Return as streaming response
  return new Response(stream.toReadableStream())
}

// scripts/ingest-documents.ts
import OpenAI from 'openai'
import { Pinecone } from '@pinecone-database/pinecone'
import { RecursiveCharacterTextSplitter } from 'langchain/text_splitter'

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY })
const pinecone = new Pinecone({ apiKey: process.env.PINECONE_API_KEY! })

// Split long docs into 512-token chunks with 50-token overlap
const splitter = new RecursiveCharacterTextSplitter({
  chunkSize: 512,
  chunkOverlap: 50,
})

async function ingestDocument(text: string, metadata: Record<string, string>) {
  const chunks = await splitter.splitText(text)

  // Batch embed chunks (max 100 per request)
  const embeddings = await openai.embeddings.create({
    model: 'text-embedding-3-small',
    input: chunks,
  })

  // Upsert into Pinecone
  const index = pinecone.index('your-index-name')
  await index.upsert(
    chunks.map((chunk, i) => ({
      id: `${metadata.docId}-chunk-${i}`,
      values: embeddings.data[i].embedding,
      metadata: {
        text: chunk,
        ...metadata,
      },
    }))
  )

  console.log(`Ingested ${chunks.length} chunks for doc ${metadata.docId}`)
}

// Example: ingest a product FAQ
await ingestDocument(
  "Your FAQ content here...",
  { docId: 'faq-v2', source: 'product-docs', userId: 'global' }
)

import { useState, useCallback } from 'react'

const RAG_API_URL = 'https://your-api.vercel.app/api/rag-query'

export function useRAG() {
  const [answer, setAnswer] = useState('')
  const [sources, setSources] = useState<string[]>([])
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const query = useCallback(async (question: string, userId: string) => {
    setIsLoading(true)
    setAnswer('')
    setError(null)

    try {
      const response = await fetch(RAG_API_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query: question, userId }),
      })

      if (!response.ok) throw new Error('RAG API error')
      if (!response.body) throw new Error('No response body')

      // Stream tokens as they arrive
      const reader = response.body.getReader()
      const decoder = new TextDecoder()

      while (true) {
        const { done, value } = await reader.read()
        if (done) break

        const chunk = decoder.decode(value, { stream: true })
        // Parse SSE chunks from OpenAI streaming format
        const lines = chunk.split('\n').filter(l => l.startsWith('data: '))
        for (const line of lines) {
          const data = line.replace('data: ', '')
          if (data === '[DONE]') break
          try {
            const parsed = JSON.parse(data)
            const token = parsed.choices?.[0]?.delta?.content
            if (token) setAnswer(prev => prev + token)
          } catch {
            // Skip malformed chunks
          }
        }
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Query failed')
    } finally {
      setIsLoading(false)
    }
  }, [])

  return { query, answer, sources, isLoading, error }
}