Skip to content

Commit 084538c

Browse files
yunusemreozdemiryunusemreozdemir
authored
DX-1325: Add RAG Chat SDK Quickstarts (#278)
* feat: add rag-chat quickstarts * feat: remove architecture from rag-chat features * feat: add nextjs example without server actions, code review changes
1 parent 6992516 commit 084538c

File tree

11 files changed

+797
-5
lines changed

11 files changed

+797
-5
lines changed

‎img/sdk/rag-chat/architecture.png

-641 KB
Binary file not shown.

‎mint.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -848,6 +848,19 @@
848848
"group": "RAG Chat",
849849
"pages": [
850850
"vector/sdks/rag-chat/gettingstarted",
851+
{
852+
"group": "Quickstarts",
853+
"pages": [
854+
"vector/sdks/rag-chat/quickstarts/overview",
855+
"vector/sdks/rag-chat/quickstarts/nextjs",
856+
"vector/sdks/rag-chat/quickstarts/nextjs-server-actions",
857+
"vector/sdks/rag-chat/quickstarts/nodejs",
858+
"vector/sdks/rag-chat/quickstarts/cloudflare-workers",
859+
"vector/sdks/rag-chat/quickstarts/nuxt",
860+
"vector/sdks/rag-chat/quickstarts/sveltekit",
861+
"vector/sdks/rag-chat/quickstarts/hono"
862+
]
863+
},
851864
"vector/sdks/rag-chat/features",
852865
"vector/sdks/rag-chat/how-to",
853866
{

‎vector/sdks/rag-chat/features.mdx

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,6 @@ title: Features
1717
- Fully customizable prompt
1818
- Optional pure LLM chat mode without RAG
1919

20-
## Architecture
21-
<img src="/img/sdk/rag-chat/architecture.png" width="100%" />
22-
23-
This diagram illustrates the flow of data in Upstash RAG Chat, from user input through the vector store and LLM to the final response.
24-
2520
## Use Cases
2621
- Build chatbots with domain-specific knowledge
2722
- Create interactive documentation systems

‎vector/sdks/rag-chat/quickstarts/cloudflare-workers.mdx

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
---
2+
title: Cloudflare Workers
3+
---
4+
<Card title="GitHub Repository" icon="github" href="https://github.com/upstash/rag-chat/tree/master/examples/cloudflare-workers" horizontal>
5+
You can find the project source code on GitHub.
6+
</Card>
7+
This guide provides detailed, step-by-step instructions on how to use Upstash RAG Chat with Cloudflare Workers. You can also explore our [Cloudflare Workers - Hono example](https://github.com/upstash/rag-chat/tree/master/examples/nextjs/cloudflare-workers) for detailed, end-to-end examples and best practices.
8+
9+
### Project Setup
10+
11+
Create a new Cloudflare Worker and install `@upstash/rag-chat` package.
12+
13+
```shell
14+
npm create cloudflare@latest -- my-first-worker
15+
cd my-first-worker
16+
npm install @upstash/rag-chat
17+
```
18+
19+
### Setup Upstash Redis
20+
21+
Create a Redis database using [Upstash Console](https://console.upstash.com) or [Upstash CLI](https://github.com/upstash/cli) and copy the `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN` into your `.dev.vars` file.
22+
23+
```shell .dev.vars
24+
UPSTASH_REDIS_REST_URL=<YOUR_URL>
25+
UPSTASH_REDIS_REST_TOKEN=<YOUR_TOKEN>
26+
```
27+
28+
### Setup Upstash Vector
29+
30+
Create a Vector index using [Upstash Console](https://console.upstash.com) or [Upstash CLI](https://github.com/upstash/cli) and copy the `UPSTASH_VECTOR_REST_URL` and `UPSTASH_VECTOR_REST_TOKEN` into your `.dev.vars` file.
31+
32+
```shell .dev.vars
33+
UPSTASH_VECTOR_REST_URL=<YOUR_URL>
34+
UPSTASH_VECTOR_REST_TOKEN=<YOUR_TOKEN>
35+
```
36+
37+
### Setup QStash LLM
38+
39+
Navigate to [QStash Console](https://console.upstash.com/qstash) and copy the `QSTASH_TOKEN` into your `.dev.vars` file.
40+
41+
```shell .dev.vars
42+
QSTASH_TOKEN=<YOUR_TOKEN>
43+
```
44+
45+
### Setup Cloudflare Worker
46+
47+
<Note>Note that `cache` must be set to `false` in the `Index` constructor for Cloudflare Workers as seen in the example below.</Note>
48+
49+
Update `/src/index.ts`:
50+
51+
```typescript /src/index.ts
52+
import { RAGChat, upstash } from "@upstash/rag-chat";
53+
import { Index } from "@upstash/vector";
54+
import { Redis } from "@upstash/redis/cloudflare";
55+
56+
export interface Env {
57+
UPSTASH_REDIS_REST_TOKEN: string;
58+
UPSTASH_REDIS_REST_URL: string;
59+
UPSTASH_VECTOR_REST_TOKEN: string;
60+
UPSTASH_VECTOR_REST_URL: string;
61+
QSTASH_TOKEN: string;
62+
}
63+
64+
export default {
65+
async fetch(request, env, ctx): Promise<Response> {
66+
const ragChat = new RAGChat({
67+
redis: new Redis({
68+
token: env.UPSTASH_REDIS_REST_TOKEN,
69+
url: env.UPSTASH_REDIS_REST_URL
70+
}),
71+
vector: new Index({
72+
token: env.UPSTASH_VECTOR_REST_TOKEN,
73+
url: env.UPSTASH_VECTOR_REST_URL,
74+
cache: false
75+
}),
76+
model: upstash("meta-llama/Meta-Llama-3-8B-Instruct", {
77+
apiKey: env.QSTASH_TOKEN
78+
}),
79+
});
80+
81+
const response = await ragChat.chat("What is the speed of light?");
82+
return new Response(response.output);
83+
},
84+
} satisfies ExportedHandler<Env>;
85+
```
86+
87+
### Run
88+
89+
Run the Cloudflare Worker locally:
90+
91+
```shell
92+
npx wrangler dev
93+
```
94+
95+
Visit `http://localhost:8787`
96+
97+
### Deploy
98+
99+
For deployment, use the `wrangler` CLI to securely set environment variables. Run the following command for each secret:
100+
101+
```shell
102+
npx wrangler secret put SECRET_NAME
103+
```
104+
105+
Replace `SECRET_NAME` with the actual name of each environment variable (e.g., `UPSTASH_REDIS_REST_URL`).
106+
107+
Deploy the Cloudflare Worker:
108+
109+
```shell
110+
npx wrangler deploy
111+
```

‎vector/sdks/rag-chat/quickstarts/hono.mdx

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
---
2+
title: Hono
3+
---
4+
<Card title="GitHub Repository" icon="github" href="https://github.com/upstash/rag-chat/tree/master/examples/cloudflare-workers" horizontal>
5+
You can find the project source code on GitHub.
6+
</Card>
7+
This guide provides detailed, step-by-step instructions on how to use Upstash RAG Chat with Hono. You can also explore our [Cloudflare Workers - Hono example](https://github.com/upstash/rag-chat/tree/master/examples/nextjs/cloudflare-workers) for detailed, end-to-end examples and best practices.
8+
9+
### Project Setup
10+
11+
Create a new Hono application with `cloudflare-workers` template and install `@upstash/rag-chat` package.
12+
13+
```shell
14+
npm create hono@latest my-app
15+
cd my-app
16+
npm install @upstash/rag-chat
17+
```
18+
19+
### Setup Upstash Redis
20+
21+
Create a Redis database using [Upstash Console](https://console.upstash.com) or [Upstash CLI](https://github.com/upstash/cli) and copy the `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN` into your `.dev.vars` file.
22+
23+
```shell .dev.vars
24+
UPSTASH_REDIS_REST_URL=<YOUR_URL>
25+
UPSTASH_REDIS_REST_TOKEN=<YOUR_TOKEN>
26+
```
27+
28+
### Setup Upstash Vector
29+
30+
Create a Vector index using [Upstash Console](https://console.upstash.com) or [Upstash CLI](https://github.com/upstash/cli) and copy the `UPSTASH_VECTOR_REST_URL` and `UPSTASH_VECTOR_REST_TOKEN` into your `.dev.vars` file.
31+
32+
```shell .dev.vars
33+
UPSTASH_VECTOR_REST_URL=<YOUR_URL>
34+
UPSTASH_VECTOR_REST_TOKEN=<YOUR_TOKEN>
35+
```
36+
37+
### Setup QStash LLM
38+
39+
Navigate to [QStash Console](https://console.upstash.com/qstash) and copy the `QSTASH_TOKEN` into your `.dev.vars` file.
40+
41+
```shell .dev.vars
42+
QSTASH_TOKEN=<YOUR_TOKEN>
43+
```
44+
45+
### Create a Hono App
46+
47+
<Note>Note that we are using the `@upstash/redis/cloudflare` package and setting `cache` to `false` in the `Index` constructor to be able to work in Cloudflare Workers, these are not related to Hono.</Note>
48+
49+
Update `/src/index.ts`:
50+
51+
```typescript /src/index.ts
52+
import { Hono } from 'hono'
53+
import { RAGChat, upstash } from "@upstash/rag-chat";
54+
import { Index } from "@upstash/vector";
55+
import { Redis } from "@upstash/redis/cloudflare";
56+
57+
const app = new Hono<{
58+
Bindings: {
59+
UPSTASH_REDIS_REST_URL: string;
60+
UPSTASH_REDIS_REST_TOKEN: string;
61+
UPSTASH_VECTOR_REST_URL: string;
62+
UPSTASH_VECTOR_REST_TOKEN: string;
63+
QSTASH_TOKEN: string;
64+
};
65+
}>();
66+
67+
app.get('/', async (c) => {
68+
const ragChat = new RAGChat({
69+
redis: new Redis({
70+
token: c.env.UPSTASH_REDIS_REST_TOKEN,
71+
url: c.env.UPSTASH_REDIS_REST_URL
72+
}),
73+
vector: new Index({
74+
token: c.env.UPSTASH_VECTOR_REST_TOKEN,
75+
url: c.env.UPSTASH_VECTOR_REST_URL,
76+
cache: false
77+
}),
78+
model: upstash("meta-llama/Meta-Llama-3-8B-Instruct", {
79+
apiKey: c.env.QSTASH_TOKEN
80+
}),
81+
});
82+
83+
const response = await ragChat.chat("What is the speed of light?");
84+
return c.text(response.output)
85+
})
86+
87+
export default app
88+
```
89+
90+
### Run
91+
92+
Run the Hono application locally:
93+
94+
```bash
95+
npm run dev
96+
```
97+
98+
Visit `http://localhost:8787`
99+
100+
### Deploy
101+
102+
For deployment, use the `wrangler` CLI to securely set environment variables. Run the following command for each secret:
103+
104+
```shell
105+
npx wrangler secret put SECRET_NAME
106+
```
107+
108+
Replace `SECRET_NAME` with the actual name of each environment variable (e.g., `UPSTASH_REDIS_REST_URL`).
109+
110+
Deploy the Hono application:
111+
112+
```bash
113+
npm run deploy
114+
```

‎vector/sdks/rag-chat/quickstarts/nextjs-server-actions.mdx

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
title: Next.js Server Actions
3+
---
4+
<Card title="GitHub Repository" icon="github" href="https://github.com/upstash/rag-chat/tree/master/examples/nextjs/server-actions" horizontal>
5+
You can find the project source code on GitHub.
6+
</Card>
7+
This guide provides detailed, step-by-step instructions on how to use Upstash RAG Chat with Next.js Server Actions. You can also explore our [Next.js Server Actions example](https://github.com/upstash/rag-chat/tree/master/examples/nextjs/server-actions) for detailed, end-to-end examples and best practices.
8+
9+
### Project Setup
10+
11+
Create a new Next.js application and install `@upstash/rag-chat` package.
12+
13+
```shell
14+
npx create-next-app@latest
15+
cd my-app
16+
npm install @upstash/rag-chat
17+
```
18+
19+
### Setup Upstash Redis
20+
21+
Create a Redis database using [Upstash Console](https://console.upstash.com) or [Upstash CLI](https://github.com/upstash/cli) and copy the `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN` into your `.env` file.
22+
23+
```shell .env
24+
UPSTASH_REDIS_REST_URL=<YOUR_URL>
25+
UPSTASH_REDIS_REST_TOKEN=<YOUR_TOKEN>
26+
```
27+
28+
### Setup Upstash Vector
29+
30+
Create a Vector index using [Upstash Console](https://console.upstash.com) or [Upstash CLI](https://github.com/upstash/cli) and copy the `UPSTASH_VECTOR_REST_URL` and `UPSTASH_VECTOR_REST_TOKEN` into your `.env` file.
31+
32+
```shell .env
33+
UPSTASH_VECTOR_REST_URL=<YOUR_URL>
34+
UPSTASH_VECTOR_REST_TOKEN=<YOUR_TOKEN>
35+
```
36+
37+
### Setup QStash LLM
38+
39+
Navigate to [QStash Console](https://console.upstash.com/qstash) and copy the `QSTASH_TOKEN` into your `.env` file.
40+
41+
```shell .env
42+
QSTASH_TOKEN=<YOUR_TOKEN>
43+
```
44+
45+
### Create a Next.js Server Action
46+
47+
Create `/app/actions.ts`:
48+
49+
```typescript /app/actions.ts
50+
"use server";
51+
52+
import { RAGChat, upstash } from "@upstash/rag-chat";
53+
import { createServerActionStream } from "@upstash/rag-chat/nextjs";
54+
55+
const ragChat = new RAGChat({
56+
model: upstash("meta-llama/Meta-Llama-3-8B-Instruct"),
57+
});
58+
59+
export const serverChat = async (message: string) => {
60+
const { output } = await ragChat.chat(message, { streaming: true });
61+
62+
// 👇 adapter to let us stream from server actions
63+
return createServerActionStream(output);
64+
};
65+
```
66+
67+
### Create a Chat Component
68+
69+
Create `/app/components/chat.tsx` using the server action:
70+
71+
```typescript /app/components/chat.tsx
72+
"use client";
73+
74+
import { useState } from "react";
75+
import { readServerActionStream } from "@upstash/rag-chat/nextjs";
76+
import { serverChat } from "../actions";
77+
78+
export const Chat = () => {
79+
const [prompt, setPrompt] = useState('');
80+
const [response, setResponse] = useState('');
81+
82+
const clientChat = async () => {
83+
const stream = await serverChat(prompt);
84+
85+
for await (const chunk of readServerActionStream(stream)) {
86+
setResponse(prev => prev + chunk);
87+
}
88+
};
89+
90+
return (
91+
<div className="flex flex-col items-start p-4">
92+
<input className="border" placeholder="Enter your prompt" value={prompt} onChange={e => setPrompt(e.target.value)} />
93+
<button onClick={clientChat}>Start Chat</button>
94+
<div>{response}</div>
95+
</div>
96+
);
97+
};
98+
```
99+
100+
### Update Home Page
101+
102+
Update `/app/page.tsx` using the Chat component:
103+
104+
```tsx /app/page.tsx
105+
import { Chat } from "./components/chat"
106+
107+
export default function Home() {
108+
return <Chat />;
109+
}
110+
```
111+
112+
### Run & Deploy
113+
114+
Run the app locally with `npm run dev`, check `http://localhost:3000/`
115+
116+
Deploy your app with `vercel`

0 commit comments

Comments
 (0)