upstash/ai-chatbot-with-rag

TypeScript

3

3 commits

updated Apr 21, 2025

See the code

README

RAG AI Chatbot with Upstash Vector and Next.js 14

Upstash RAG AI Chatbot

A free, open-source RAG chatbot template built with Next.js, Upstash Vector, and the AI SDK that helps you quickly build powerful context-aware chatbot applications. Based on Vercel's AI chatbot repository.

Features · Model Providers · Deploy Your Own · Running locally


Features

  • Next.js App Router
    • Advanced routing for seamless navigation and performance
    • React Server Components (RSCs) and Server Actions for server-side rendering and increased performance
  • Upstash Vector
    • Serverless vector database for storing and retrieving embeddings
    • Fast similarity search for effective Retrieval Augmented Generation (RAG)
    • Scales automatically with your application needs
  • Cohere
    • Optional reranking capability to improve relevance of retrieved contexts
    • Enhanced accuracy of responses by prioritizing the most relevant information
  • AI SDK
    • Unified API for generating text, structured objects, and tool calls with LLMs
    • Hooks for building dynamic chat and generative user interfaces
    • Supports xAI (default), OpenAI, Fireworks, and other model providers
  • shadcn/ui
  • Data Persistence
  • Auth.js
    • Simple and secure authentication

Model Providers

This template ships with xAI grok-2-1212 as the default chat model. However, with the AI SDK, you can switch LLM providers to OpenAI, Anthropic, Cohere, and many more with just a few lines of code.

Uploading Content into Upstash Vector

To enable the RAG functionality, you need to upload content into the Upstash Vector database. This process involves upserting documents or data points that will be used for similarity searches during chatbot interactions. There are two ways to do this:

Method 1: Using the Upstash Vector API/SDK

  • Prepare Your Data: Format your documents or data into a structure compatible with Upstash Vector. Typically, this involves converting text into embeddings using a model like OpenAI's embeddings.
  • Upsert Documents: Use the Upstash Vector API or SDK to upsert your data. The upsert operation adds new documents or updates existing ones in the vector index. You can do this via a script or integrate it into your application. For example, in JavaScript:
    await index.upsert({
      id: 'doc1',
      vector: embedding,
      data: { title: 'Sample Document' }
    });
    
  • Batch Uploads: For efficiency, upload multiple documents in batches to minimize API calls.

Method 2: Using the Upstash Console

  • Access the Console: Log in to your Upstash account and navigate to the Vector service dashboard.
  • Select Your Index: Choose the vector index you want to upload content to.
  • Manual Upload: Use the console interface to manually upload documents, either individually or by importing JSON files containing your vector data.
  • Visualize Data: The console provides visualization tools to help you understand your vector space and verify your uploads.

Deploy Your Own

You can deploy your own version of the Upstash RAG AI Chatbot to Vercel with one click:

Deploy with Vercel

Running locally

You will need to use the environment variables defined in .env.example to run Upstash RAG AI Chatbot. It's recommended you use Vercel Environment Variables for this, but a .env file is all that is necessary.

Note: You should not commit your .env file or it will expose secrets that will allow others to control access to your various AI and authentication provider accounts.

  1. Install Vercel CLI: npm i -g vercel
  2. Link local instance with Vercel and GitHub accounts (creates .vercel directory): vercel link
  3. Download your environment variables: vercel env pull
pnpm install
pnpm dev

Your app template should now be running on localhost:3000.

upstash/ai-chatbot-with-rag

TypeScript

3

3 commits

updated Apr 21, 2025

See the code

README

RAG AI Chatbot with Upstash Vector and Next.js 14

Upstash RAG AI Chatbot

A free, open-source RAG chatbot template built with Next.js, Upstash Vector, and the AI SDK that helps you quickly build powerful context-aware chatbot applications. Based on Vercel's AI chatbot repository.

Features · Model Providers · Deploy Your Own · Running locally


Features

  • Next.js App Router
    • Advanced routing for seamless navigation and performance
    • React Server Components (RSCs) and Server Actions for server-side rendering and increased performance
  • Upstash Vector
    • Serverless vector database for storing and retrieving embeddings
    • Fast similarity search for effective Retrieval Augmented Generation (RAG)
    • Scales automatically with your application needs
  • Cohere
    • Optional reranking capability to improve relevance of retrieved contexts
    • Enhanced accuracy of responses by prioritizing the most relevant information
  • AI SDK
    • Unified API for generating text, structured objects, and tool calls with LLMs
    • Hooks for building dynamic chat and generative user interfaces
    • Supports xAI (default), OpenAI, Fireworks, and other model providers
  • shadcn/ui
  • Data Persistence
  • Auth.js
    • Simple and secure authentication

Model Providers

This template ships with xAI grok-2-1212 as the default chat model. However, with the AI SDK, you can switch LLM providers to OpenAI, Anthropic, Cohere, and many more with just a few lines of code.

Uploading Content into Upstash Vector

To enable the RAG functionality, you need to upload content into the Upstash Vector database. This process involves upserting documents or data points that will be used for similarity searches during chatbot interactions. There are two ways to do this:

Method 1: Using the Upstash Vector API/SDK

  • Prepare Your Data: Format your documents or data into a structure compatible with Upstash Vector. Typically, this involves converting text into embeddings using a model like OpenAI's embeddings.
  • Upsert Documents: Use the Upstash Vector API or SDK to upsert your data. The upsert operation adds new documents or updates existing ones in the vector index. You can do this via a script or integrate it into your application. For example, in JavaScript:
    await index.upsert({
      id: 'doc1',
      vector: embedding,
      data: { title: 'Sample Document' }
    });
    
  • Batch Uploads: For efficiency, upload multiple documents in batches to minimize API calls.

Method 2: Using the Upstash Console

  • Access the Console: Log in to your Upstash account and navigate to the Vector service dashboard.
  • Select Your Index: Choose the vector index you want to upload content to.
  • Manual Upload: Use the console interface to manually upload documents, either individually or by importing JSON files containing your vector data.
  • Visualize Data: The console provides visualization tools to help you understand your vector space and verify your uploads.

Deploy Your Own

You can deploy your own version of the Upstash RAG AI Chatbot to Vercel with one click:

Deploy with Vercel

Running locally

You will need to use the environment variables defined in .env.example to run Upstash RAG AI Chatbot. It's recommended you use Vercel Environment Variables for this, but a .env file is all that is necessary.

Note: You should not commit your .env file or it will expose secrets that will allow others to control access to your various AI and authentication provider accounts.

  1. Install Vercel CLI: npm i -g vercel
  2. Link local instance with Vercel and GitHub accounts (creates .vercel directory): vercel link
  3. Download your environment variables: vercel env pull
pnpm install
pnpm dev

Your app template should now be running on localhost:3000.