RAG Chat Widget

A customizable React chat widget (React Server Component) built on top of the @upstash/rag-chat SDK, providing an out-of-the-box solution for adding RAG-powered chat interfaces to your applications.

Features

🎨 Fully customizable UI components

⚡ Streaming responses support

📱 Responsive design

🔍 Real-time context retrieval

💾 Persistent chat history

🎯 Built-in rate limiting support

🔄 Loading states and error handling

🎨 Dark/light mode support

Installation

# Using npm
npm install @upstash/rag-chat-widget

# Using pnpm
pnpm add @upstash/rag-chat-widget

# Using yarn
yarn add @upstash/rag-chat-widget

Quick Start

1. Environment Variables

Set up the environment variables below from your Upstash resources. If you don't have any, you can start by going to Upstash Console.

2. Configure Styles

In your tailwind.config.ts file, add the configuration below:

import type { Config } from "tailwindcss";

export default {
  content: ["./node_modules/@upstash/rag-chat-widget/**/*.{js,mjs}"],
} satisfies Config;

3. Implementation

import { ChatWidget } from "ragchat-widget";

const Component = () => {
  return <ChatWidget />;
};

Adding Content

You can add content to your RAG Chat widget in several ways:

The SDK provides methods to add various types of content programmatically:

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

export const ragChat = new RAGChat({
  model: openai("gpt-4-turbo"),
});
// Add text content
await ragChat.context.add("Your text content here");

// Add PDF documents
await ragChat.context.add({
  type: "pdf",
  fileSource: "./path/to/document.pdf",
});

// Add web content
await ragChat.context.add({
  type: "html",
  source: "https://your-website.com",
});

For more detailed examples and options, check out the RAG Chat documentation.

You can also manage your content directly through the Upstash Vector Console:

1. Navigate to Upstash Console.
2. Go to details page of the Vector database.
3. Navigate to Databrowser Tab.
4. Here, you can either upload a PDF, or use on of our sample datasets.

Contributing

We welcome contributions! Please see our contributing guidelines for more details.

License

MIT License - see the LICENSE file for details.