Skip to content

WebChat: An AI-powered tool for interactive conversations with website content. Utilizes Next.js, React, and Upstash for efficient data storage and retrieval.

Notifications You must be signed in to change notification settings

Osamaz123/WebChat

Repository files navigation

WebChat

WebChat is an innovative tool that allows users to chat with the content of any website. By leveraging AI technology and Upstash's vector database, this application provides an interactive way to explore and understand web content through natural language conversations.

Features

  • Chat with any website's content
  • User-friendly interface
  • Real-time AI-powered responses
  • Responsive design for various screen sizes
  • Error handling and informative user feedback
  • Efficient data storage and retrieval using Upstash Vector and Redis

Technologies Used

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Upstash Vector
  • Upstash Redis
  • QStash

Getting Started

Prerequisites

  • Node.js (v14 or later)
  • npm or yarn
  • Upstash account

Installation

  1. Clone the repository:

    git clone https://github.com/Osamaz123/WebChat.git
    
  2. Navigate to the project directory:

    cd webchat
    
  3. Install dependencies:

    npm install
    

    or

    yarn install
    
  4. Set up environment variables: Create a .env.local file in the root directory and add the following variables:

    UPSTASH_VECTOR_REST_URL=your_upstash_vector_rest_url
    UPSTASH_VECTOR_REST_TOKEN=your_upstash_vector_rest_token
    QSTASH_TOKEN=your_qstash_token
    UPSTASH_REDIS_REST_URL=your_upstash_redis_rest_url
    UPSTASH_REDIS_REST_TOKEN=your_upstash_redis_rest_token
    

    Usage

  5. On the home page, enter the URL of the website you want to chat about.

  6. Click "Start Chatting" to begin the conversation.

  7. Type your questions or comments in the chat input field.

  8. The AI will respond with information based on the website's content.

How It Works

  1. When a user enters a website URL, WebChat crawls the site and extracts relevant content.
  2. The extracted content is processed and stored in Upstash Vector, which allows for efficient similarity searches.
  3. User queries are compared against the stored vector representations to find the most relevant information.
  4. Upstash Redis is used for caching and managing chat sessions.
  5. QStash is utilized for managing asynchronous tasks and background jobs.

About

WebChat: An AI-powered tool for interactive conversations with website content. Utilizes Next.js, React, and Upstash for efficient data storage and retrieval.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published