Using the OpenAI ChatGPT API in a TypeScript Application

A wrapper around ChatGPT API to consume it in 3rd party application

I experimented with ChatGPT to check how it explains the code. Was working on a simple API wrapper for ChatGPT and let ChatGPT explain the earliest code itself.

Below this, everything is written by ChatGPT.

In this project, we have a few TypeScript files that together form a chat API for the OpenAI platform. The index.ts file exports a ChatGPTApi class that is used to interact with the OpenAI API. Here is the code for the index.ts file:

import axios from "axios";
import * as dotenv from "dotenv";
import { v4 as uuidV4 } from "uuid";
import { USER_AGENT } from "./constants.js";
import { getSession } from "./get-session.js";
import { ConversationPayload } from "./interfaces.js";

dotenv.config();

class ChatGPTApi {
  accessToken: string | null;
  apiBaseUrl: string;
  backendApiBaseUrl: string;
  userAgent: string;

  constructor() {
    this.accessToken = null;
    this.apiBaseUrl = "https://chat.openai.com/api";
    this.backendApiBaseUrl = "https://chat.openai.com/backend-api";
    this.userAgent = USER_AGENT;
  }

  async getAccessToken() {
    if (!this.accessToken) {
      this.accessToken = await getSession();
    }

    return this.accessToken;
  }

  async getConversation(message: string) {
    const accessToken = await this.getAccessToken();
    const body: ConversationPayload = {
      action: "next",
      messages: [
        {
          id: uuidV4(),
          role: "user",
          content: {
            content_type: "text",
            parts: [message],
          },
        },
      ],
      model: "text-davinci-002-render",
      parent_message_id: uuidV4(),
    };

    const res = await axios.post(
      `${this.backendApiBaseUrl}/conversation`,
      body,
      {
        headers: {
          authorization: `Bearer ${accessToken}`,
          "Content-Type": "application/json",
          "user-agent": this.userAgent,
        },
      }
    );
    return res.data;
  }
}

First, the ChatGPTApi class is initialized with a few default values for its properties: accessToken, apiBaseUrl, backendApiBaseUrl, and userAgent. The accessToken is set to null, apiBaseUrl and backendApiBaseUrl are set to the URLs for the OpenAI API and backend API, respectively, and userAgent is set to a string constant defined in the constants.ts file.

The ChatGPTApi class has a few methods. The getAccessToken method is used to get an access token if one hasn't already been obtained and stored in the accessToken property. This is done by calling the getSession function, which is exported from the get-sessions.ts file.

import axios from "axios";
import { USER_AGENT } from "./constants";

export const getSession = async () => {
  const res = (await axios.get("https://chat.openai.com/api/auth/session", {
    headers: {
      cookie: `__Secure-next-auth.session-token=${process.env.SESSION_TOKEN}`,
      "user-agent": USER_AGENT,
    },
  })) as any;

  if (res.status !== 200) {
    throw new Error("Unable to get session");
  }

  const accessToken = res?.data.accessToken;
  if (!accessToken) {
    throw new Error("Unable to get access token");
  }

  return accessToken;
};

The getSession function makes a GET request to the https://chat.openai.com/api/auth/session endpoint, using the __Secure-next-auth.session-token cookie and USER_AGENT string constant from the constants.ts file in the request headers. If the request is successful, it returns the accessToken property from the response data. Otherwise, it throws an error. This access token can then be used to authenticate requests to the OpenAI API.

The interfaces.ts file defines several interfaces that are used in the project. The Content interface represents the content of a message and has two properties: content_type and parts. The Message interface represents a single message in a conversation and has three properties: content, id, and role. The ConversationPayload interface represents a payload that can be sent to the OpenAI backend API in order to get a conversation. It has several properties, including action, messages, and model. Here is the code for the interfaces.ts file:

import { Role } from "./types";

export interface Content {
  content_type: string;
  parts: string[];
}

export interface Message {
  content: Content;
  id: string;
  role: Role;
}

export interface ConversationPayload {
  action: string;
  conversation_id?: string;
  messages: Message[];
  model: string;
  parent_message_id: string;
}

The constants.ts file in this project exports a single constant called USER_AGENT. This constant is a string that represents the user agent of the application. It is used as the value for the user-agent header in requests made to the OpenAI API. Here is the code for the constants.ts file:

export const USER_AGENT: string =
  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36";

The value of the USER_AGENT constant is a string that represents a common user agent for the Google Chrome web browser on a Windows 10 operating system. This value is used in requests to the OpenAI API to identify the application making the request. By setting the user-agent header to this value, the OpenAI API can provide appropriate responses to the requests made by the application.

Conclusion

In conclusion, the index.ts, get-session.ts, interfaces.ts, and constants.ts files in this project together form a chat API for the OpenAI platform. The ChatGPTApi class in the index.ts file is used to interact with the OpenAI API, and the getSession function in the get-session.ts file is used to get an access token for authenticating requests. The Content, Message, and ConversationPayload interfaces in the interfaces.ts file are used to represent the data that is sent to and received from the OpenAI API. The USER_AGENT constant in the constants.ts file is used as the value for the user-agent header in requests to the OpenAI API. These files together provide a convenient and powerful way to integrate with the OpenAI platform in a TypeScript application.