Quickstarts
SvelteKit
GitHub Repository
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 SvelteKit. You can also explore our SvelteKit example for detailed, end-to-end examples and best practices.
Project Setup
Create a new SvelteKit application and install @upstash/rag-chat
package.
npm create svelte@latest my-app
cd my-app
npm install @upstash/rag-chat
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.
.env
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.
.env
QSTASH_TOKEN=<YOUR_TOKEN>
Create a SvelteKit Handler
Create /src/routes/chat/+server.ts
:
/src/routes/chat/+server.ts
import { RAGChat, upstash } from "@upstash/rag-chat";
import { Index } from "@upstash/vector";
import { env } from "$env/dynamic/private";
const ragChat = new RAGChat({
vector: new Index({
token: env.UPSTASH_VECTOR_REST_TOKEN,
url: env.UPSTASH_VECTOR_REST_URL
}),
model: upstash("meta-llama/Meta-Llama-3-8B-Instruct", {
apiKey: env.QSTASH_TOKEN
}),
});
export async function GET() {
const response = await ragChat.chat("What is the speed of light?");
return new Response(response.output, {
headers: {
'Content-Type': 'application/json'
}
});
}
Run
Run the SvelteKit application:
npm run dev
Visit http://localhost:5173/chat