https://github.com/detekoi/chatsage-web-ui

Web UI for Twitch streamers to add/remove the ChatSage TTS bot from their channel.
https://github.com/detekoi/chatsage-web-ui

firebase javascript nodejs oauth2 streamer-tool twitch twitch-api twitch-bot

Last synced: about 1 month ago
JSON representation

Web UI for Twitch streamers to add/remove the ChatSage TTS bot from their channel.

• Host: GitHub
• URL: https://github.com/detekoi/chatsage-web-ui
• Owner: detekoi
• License: other
• Created: 2025-05-09T20:59:57.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2026-04-17T06:09:49.000Z (2 months ago)
• Last Synced: 2026-04-17T07:32:28.939Z (2 months ago)
• Topics: firebase, javascript, nodejs, oauth2, streamer-tool, twitch, twitch-api, twitch-bot
• Language: TypeScript
• Homepage: https://streamsage-bot.web.app/
• Size: 5.13 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# ChatSage Bot Management

## Description

ChatSage Bot Management is a web application that allows approved Twitch streamers to manage the ChatSage bot for their channel. Users can log in with their Twitch account to add or remove the bot, and view its current status. The application features a dynamic, animated background.

> **Important:** Access to ChatSage is currently invite-only. The management interface will show an access denied message for unapproved channels. If you'd like to request access, please contact me via [this contact form](https://parfaitfair.com/#contact).

## Features

* **Twitch Authentication:** Users can log in securely using their Twitch account.

* **Bot Management:** Add or remove the ChatSage bot from your Twitch channel through a simple interface (for approved channels only).

* **Bot Status:** View the current status (active/inactive) of the bot for your channel.

* **Dynamic Background:** An animated static-like background enhances the user interface.

* **Firebase Integration:** Utilizes Firebase for backend functions and hosting.

## Technologies Used

* **Frontend:**

    * HTML

    * CSS

    * JavaScript

* **Backend:**

    * Node.js

    * Express.js

    * Firebase Cloud Functions

    * Firebase Hosting

* **Authentication:**

    * Twitch API (OAuth)

    * JWT (JSON Web Tokens)

* **Database:**

    * Firestore (Google Cloud Firestore)

* **Development Tools:**

    * npm

    * ESLint

## Setup

1.  **Prerequisites:**

    * Node.js and npm installed.

    * Firebase CLI installed and configured.

2.  **Firebase Project:**

    * Set up a Firebase project.

    * Enable Firestore and Authentication.

    * Configure Firebase Hosting and Cloud Functions.

3.  **Environment Variables:**

    * **For Local Development (Firebase Emulator):** Create a `.env.` file (e.g., `.env.streamsage-bot`) in the `functions` directory. Add your variables here (e.g., `TWITCH_CLIENT_ID=your_local_test_id`). The Firebase Emulator will load these automatically when running locally.

    * **For Deployed Functions (Live Environment):** Environment variables must be set directly in the Google Cloud Console for your Cloud Function. Navigate to your function in GCP, edit it, and add the variables under "Runtime environment variables." (Note: `.env` files are not deployed with the function code for runtime configuration).

4.  **Install Dependencies:**

    * Navigate to the `functions` directory.

    * Run `npm install` to install backend dependencies.

5.  **Deploy:**

    * Deploy Firebase Hosting and Cloud Functions using the Firebase CLI: `firebase deploy`.

## Usage

**Note:** Access is restricted to approved channels only. If your channel is not on the allow-list, you'll see an access denied message. [Request access via this contact form](https://parfaitfair.com/#contact).

1.  Access the hosted application URL.

2.  Click on the "Login with Twitch" button to authenticate.

3.  Once authenticated, you will be redirected to the dashboard.

4.  On the dashboard (for approved channels), you can:

    * View the current status of the ChatSage bot for your channel.

    * Add or remove the bot from your channel.

    * Logout from the application.