OpenAIDashboard - A prompt response logging system application with detailed metrics

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Backend Folder Structure
4. Frontend Folder Structure
5. Roadmap
6. Contact

About the Project

OpenAIDashboard is a comprehensive system built to facilitate prompt-response logging and analytics, for interactions with OpenAI models. This project encompasses a backend server developed using Typescript and the NestJS framework, integrated with a ClickHouse database for efficient logging and retrieval of request data. The system also features a user-friendly dashboard, designed to showcase metrics, filter and analyze requests, and provide insights into the performance of OpenAI models.

New Features

User Authentication

OpenAIDashboard now includes user authentication, allowing users to sign up and log in securely. This feature ensures that only authorized users can access and interact with the system. This also allows users to view their own requests and metrics, and prevents them from viewing requests made by other users.

Chat Interface

The chat interface mimics the GPT-like conversation experience, where users can create new conversations, input prompts, and select specific OpenAI models for generating responses. This dynamic and user-friendly interface enhances the overall user experience and flexibility in interacting with OpenAI models.

Built With

• 
• 
• 
• 
• 
• 

(back to top)

Getting Started

Follow these instructions to set up and run the project locally on your machine.

Prerequisites

• Docker: You will need Docker installed on your machine to run this project. You can download and install Docker from here.

Installation

1. Clone the repository:

   git clone https://github.com/mittal-ishaan/prompt-logger

2. Navigate to the project directory:

   cd prompt-logger

3. Set up your environment variables:

   This project requires certain environment variables to run correctly.These variables are listed in the .env.example file in the root directory of both the backend and frontend parts of the project.

   Create a new file named .env in the root directory of both the backend and frontend. Then, copy the contents of the .env.example file into the new .env file. Replace the placeholder values with your actual values for each environment variable.

Backend

5. Navigate to the backend directory:

   cd prompt-logger-backend

6. Run the docker-compose file:

   docker-compose up

   This will start the backend server

Frontend

7. Navigate to the frontend directory:

   cd prompt-logger-frontend

8. Run the docker-compose file:

   docker-compose up

   This will start the frontend server

(back to top)

Backend Folder Structure

prompt-logger-backend:.
├───src
    │   app.module.ts
    │   main.ts
    │
    ├───auth
    │       auth.module.ts
    │       auth.service.spec.ts
    │       auth.service.ts
    │       constants.ts
    │       jwt-auth.guard.ts
    │       jwt.strategy.ts
    │       local-auth.guard.ts
    │       local.strategy.ts
    │
    ├───controller
    │       app.controller.ts
    │       auth.controller.ts
    │       conversation.controller.ts
    │       openAI.controller.ts
    │
    ├───db
    │   │   click-house.service.ts
    │   │   config.mjs
    │   │   database.module.ts
    │   │   database.providers.ts
    │   │
    │   └───models
    │           chats.ts
    │           conversations.ts
    │           user.ts
    │
    ├───decorators
    │       UserParam.ts
    │
    ├───dtos
    │       ConversationsDto.ts
    │       FilterOptionsDtos.ts
    │       GetChatCompletionDto.ts
    │       SignUpDto.ts
    │
    ├───interceptor
    │       exception.filter.ts
    │       logger.interceptor.ts
    │
    ├───services
    │       app.service.ts
    │       chat.service.ts
    │       conversation.service.ts
    │       openAI.service.ts
    │       stats.service.ts
    │
    ├───types
    │       UserType.ts
    │
    ├───users
    │       users.module.ts
    │       users.service.spec.ts
    │       users.service.ts
    │
    └───utils
            utils.ts
|  .env.example
|  .gitignore
|  docker-compose.yml
|  Dockerfile
|  README.md

Frontend Folder Stucture

prompt-logger-frontend:.
├──public
└──src
    ├───app
    │   │   favicon.ico
    │   │   globals.css
    │   │   layout.tsx
    │   │   page.tsx
    │   │
    │   ├───dashboard
    │   │       page.tsx
    │   │
    │   ├───login
    │   │       page.tsx
    │   │
    │   └───signup
    │           page.tsx
    │
    ├───components
    │   │   chat.tsx
    │   │   dashboard.tsx
    │   │   dashstats.tsx
    │   │   logout.tsx
    │   │   navbar.tsx
    │   │   sidebar.tsx
    │   │
    │   ├───icons
    │   │       CollapseIcon.tsx
    │   │       UsersIcon.tsx
    │   │
    │   └───ui
    │           button.tsx
    │           card.tsx
    │           input.tsx
    │           label.tsx
    │           select.tsx
    │           table.tsx
    │
    ├───context
    │       HomeContext.tsx
    │
    └───lib
            utils.ts

|  .env.example
|  .gitignore
|  Dockerfile
|  next.config.js
|  package.json
|  package-lock.json
|  README.md
|  tailwind.config.js

Roadmap

• User Authentication
• Chat Interface
• Connect with ClickHouse
• Conversation Feature
• User Dashboard
• User Metrics and filters
• Streamable response

(back to top)

Contact

Ishaan Mittal

• LinkedIn
• Github

Project Link: https://github.com/mittal-ishaan/prompt-logger

(back to top)