🍊 tangerine (frontend)

• Overview
• Architecture
• Prerequisites
• Development Environment Setup
  • With Docker Compose
  • Without Docker Compose
• Development Tooling
• Deployment
• License

tangerine is a slim and light-weight RAG (Retrieval Augmented Generation) system used to create and manage chat bot assistants.

Each assistant is intended to answer questions related to a set of documents known as a knowledge base (KB).

Overview

See the tangerine-backend overview for an introduction.

The frontend provides a UI for managing chat bot assistants, including:

1. Assistant create/update/delete
2. Document upload
3. Chatting/interacting with an assistant

This project is currently used by Red Hat's Hybrid Cloud Management Engineering Productivity Team. It was born out of a hack-a-thon and is still a work in progress. You will find some areas of code well developed while others are in need of attention and some tweaks to make it production-ready are needed (with that said, the project is currently in good enough shape to provide a working chat bot system).

Currently, the frontend is mostly used for administration purposes or local testing. The document upload interface in the UI is very rudimentary. The backend's S3 sync is the preferred method to configure assistants and indicate which documents should be uploaded.

A related plugin for Red Hat Developer Hub can be found here which is the frontend end-users interact with.

Architecture

For a detailed breakdown of the tech stack, component structure, and data flow, see ARCHITECTURE.md.

Prerequisites

• Node.js 22+ (matches the Node 22 UBI9 container image used in production)
• npm (bundled with Node.js)
• A running tangerine-backend instance

Development Environment Setup

A development environment can be set up with or without Docker Compose.

With Docker Compose

NOTE: Not supported on Mac, see Without Docker Compose below.

1. First, refer to the backend setup guide here.

2. Once the backend is up and running, start the frontend:

   docker compose up --build
   

3. You should then be able to reach the frontend at http://localhost:3000

Without Docker Compose

1. First, refer to the backend setup guide here.

2. Once the backend is up and running, install the frontend:

   npm install
   

3. Then start a development server:

   npm start
   

4. You should then be able to reach the frontend at http://localhost:3000

Development Tooling

The following commands are available for linting, formatting, type-checking, and testing:

Command	Description
npm run lint	Run ESLint across the project
npm run lint:fix	Run ESLint and auto-fix violations
npm run format	Format all files with Prettier
npm run format:check	Check formatting without writing changes
npm run typecheck	Run TypeScript type-checking (tsc)
npm test	Run Jest tests

Pre-commit hooks automatically run ESLint (with --fix), Prettier (with --write), JSON/YAML validation, and Jest tests (with --passWithNoTests) before each commit.

Deployment

The frontend is containerized and published to quay.io/app-sre/tangerine-frontend. To build and push the image, run:

QUAY_USER=<your-user> QUAY_TOKEN=<your-token> ./build.sh

License

This project is licensed under the Apache License 2.0.