search

admineral / OpenAI-Assistant-API-Chat

OpenAI Assistant API Template: Customize your Assistant and chat with your files.
https://open-ai-assistant-api-chat.vercel.app
283 stars 90 forks source link
gpt-4-1106 gpt-4-1106-preview gpt4- gpt4-api gpt4api openai openai-api openai-assistant-api openai-assistants openaiapi

readme

Code Refactor 90% done. ----> Branch ---> Code_refactor

OpenAI Assistant API Chat

Deploy with Vercel Live Demo

Introduction

Welcome to the OpenAI Assistant API Chat repository! This innovative chat application allows users to interact with an AI assistant powered by OpenAI's latest "gpt-4-1106-preview" model. It's an exciting space where technology meets conversation, offering a unique experience of AI interaction.

Demo

Agent42

Beta & Work in Progress

Please note that this application is currently in the beta phase and is continuously evolving. We are working diligently to enhance the user experience and add new features. During this phase, you may encounter some hiccups or unexpected behavior.

Deployment

This application is ready to be deployed with Vercel, a cloud platform for static sites and Serverless Functions. Vercel provides an easy way to deploy your applications directly from your repository.

To deploy this application with Vercel, click on the "Deploy with Vercel" button below. This will take you to the Vercel platform where you'll be guided through the deployment process.

Please note that you'll need to provide your OpenAI API key during the deployment process. This key is used to authenticate your application's requests to the OpenAI API.

Deploy with Vercel

In addition to the OpenAI API key, you can also specify a default Assistant ID during the deployment process. This ID determines which AI assistant is used in the chat application. If you set this ID, the application will use this assistant for the chat. If you do not set this ID, the application will prompt the user to enter the assistant details.

To deploy the application with both the OpenAI API key and a hardcoded Assistant ID, click on the "Deploy with Vercel" button below. You will be prompted to enter both your OpenAI API key and your Assistant ID.

Deploy with Vercel

Features

Getting Started

Prerequisites

Installation

  1. Clone the Repository: 
    git clone https://github.com/admineral/OpenAI-Assistant-API-Chat.git
  2. Install Dependencies: Navigate to the project directory and run: 
    npm install
  3. Environment Setup: Create a .env file in the root directory and add your OpenAI API key: 
    OPENAI_API_KEY=your_openai_api_key
  4. Run the Application: Start the server with: 
    npm run dev

Contributing

Your contributions make this project thrive. Whether it's reporting bugs, suggesting features, or submitting code changes, every bit of help is greatly appreciated.

We look forward to growing this project with the community's support and creativity!

Application Architecture Overview

ChatManager (ChatManager.ts)

API Layer (api.js)

Assistant Modules (assistantModules.ts)

Chat Modules (chatModules.ts)

Detailed Code Explanation

ChatManager Implementation (ChatManager.ts)

API Layer (api.js)

Front-End Interaction

Main Components and Flow

Detailed Breakdown

ChatManager.ts

This is the core class managing the chat's state and operations.

class ChatManager {
  private state: ChatState;
  private static instance: ChatManager | null = null;

  // Singleton pattern to ensure a single ChatManager instance
  private constructor(setChatMessages: (messages: any[]) => void, setStatusMessage: (message: string) => void) {
    this.state = {
      /* State initialization */
    };
    console.log('ChatManager initialized');
  }

  // Method to get the current instance of ChatManager
  public static getInstance(setChatMessages: (messages: any[]) => void, setStatusMessage: (message: string) => void): ChatManager {
    if (this.instance === null) {
      this.instance = new ChatManager(setChatMessages, setStatusMessage);
    }
    return this.instance;
  }

  // Method to start the assistant
  async startAssistant(assistantDetails: any, file: File | null, initialMessage: string): Promise<void> {
    // ... Function logic including API calls to initialize assistant and create chat thread
  }

  // Method to send a message
  async sendMessage(input: string): Promise<void> {
    // ... Function logic to handle message sending
  }

  // Method to get the current chat state
  getChatState(): ChatState {
    console.log('Getting chat state');
    return this.state;
  }
}

api.js

This module contains functions for various API interactions required by the chat application.

// Example of an API function
export const uploadImageAndGetDescription = async (base64Image) => {
  // Code to upload an image and get a description using the OpenAI API
};

export const createAssistant = async (assistantDetails) => {
  // Code to create an assistant
};

// Other API functions like 'createThread', 'runAssistant', etc.

assistantModules.ts

Contains functions related to preparing and managing the chat assistant.

export const prepareUploadFile = async (file: File, setStatusMessage: (message: string) => void): Promise<string> => {
  // Logic to prepare and upload a file for the chat assistant
};

export const initializeAssistant = async (assistantDetails, fileId): Promise<string> => {
  // Logic to initialize an assistant with given details
};

export const createChatThread = async (inputMessage: string): Promise<string> => {
  // Logic to create a chat thread
};

chatModules.ts

Manages chat-related functionalities, primarily dealing with messages.

export const submitUserMessage = async (input: string, threadId: string): Promise<void> => {
  // Logic to submit a user's message to the chat
};

export const fetchAssistantResponse = async (runId: string, threadId: string): Promise<string> => {
  // Logic to fetch the latest messages from the assistant
};

export const updateChatState = (prevMessages: Message[], newMessages: Message[], setChatMessages: (messages: any[]) => void): Promise<void> => {
  // Logic to update the chat state with new messages
};

React Components

API Routes (/api/*.ts)

These files define various API routes for handling tasks like creating assistants, listing messages, checking run status, etc. They interact with the OpenAI API and provide endpoints for the frontend to call.