nuxt.mdx

title
Nuxt

You can find the project source code on GitHub. This guide provides detailed, step-by-step instructions on how to use Upstash RAG Chat with Nuxt. You can also explore our [Nuxt example](https://github.com/upstash/rag-chat/tree/master/examples/nuxt) for detailed, end-to-end examples and best practices.

Project Setup

Create a new Nuxt application and install @upstash/rag-chat package.

npx nuxi@latest init my-app
cd my-app
npm install @upstash/rag-chat

Setup Upstash Redis

Create a Redis database using Upstash Console or Upstash CLI and copy the UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN into your .env file.

UPSTASH_REDIS_REST_URL=<YOUR_URL>
UPSTASH_REDIS_REST_TOKEN=<YOUR_TOKEN>

Setup Upstash Vector

Create a Vector index using Upstash Console or Upstash CLI and copy the UPSTASH_VECTOR_REST_URL and UPSTASH_VECTOR_REST_TOKEN into your .env file.

UPSTASH_VECTOR_REST_URL=<YOUR_URL>
UPSTASH_VECTOR_REST_TOKEN=<YOUR_TOKEN>

Setup QStash LLM

Navigate to QStash Console and copy the QSTASH_TOKEN into your .env file.

QSTASH_TOKEN=<YOUR_TOKEN>

Create a Nuxt Server Handler

Create /server/api/chat.ts:

import { RAGChat, upstash } from "@upstash/rag-chat";

const ragChat = new RAGChat({
  model: upstash("meta-llama/Meta-Llama-3-8B-Instruct"),
});

export default defineEventHandler(async (event) => {
    const response = await ragChat.chat("What is the speed of light?");
    return response.output;
  })

Run

Run the Nuxt application:

npm run dev

Visit http://localhost:3000/api/chat