Tracking Your OpenAI API Costs: From Hidden Endpoint to Custom App

Goal

Prerequisites

Overview

1. Add the datasource

   In Appsmith, create a new app and add a new REST datasource. The API endpoint is https://api.openai.com/v1/dashboard/billing/usage.

2. Start and end dates

   Add two Datepicker widgets for the start and end dates. I also crafted a function to validate these dates, ensuring they're at most 100 days apart and the end date never precedes the start date:

   validateDates: () => {
   		// Parsing the date strings into date objects
   		const startDate = new Date(dat_startDate.formattedDate);
   		const endDate = new Date(dat_endDate.formattedDate);
   
   		// Checking if the end date is before or the same as the start date
   		if (endDate <= startDate) {
   			showAlert('The end date should be after the start date.', 'error');
   			return false;
   		}
   
   		// Checking if the difference between the dates is more than 100 days
   		const diffTime = Math.abs(endDate - startDate);
   		const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); // Convert milliseconds to days
   		if (diffDays > 100) {
   			showAlert('The number of days between the start and end date should not be more than 100 days.', 'error');
   			return false;
   		}
   
   		// If all validations pass
   		return true;
   	}
   

3. Pass date range to API call

   The next step was to link this slick UI with the query and fetch all the data. You will want the start and end dates to be passed as parameters to the endpoint you set up so that they are passed through like this:

   https://api.openai.com/v1/dashboard/billing/usage?start_date=2023-05-01&end_date=2023-07-03

4. Format data response

   I then penned a nifty JS function to group the data by the models. This allows us to gaze upon the cost for each model daily for the selected period.

   groupCostsByModel: async () => {
   		const cost = await this.getUsageData() // function to return cost data from api
   		const dailyCosts = cost.daily_costs;
   		// Create an empty object to hold the result
   		let costsByModel = {};
   
   		// Iterate over each day's costs
   		dailyCosts.forEach(day => {
   			// Convert the timestamp to a date string in 'YYYY-MM-DD' format
   			const date = new Date(day.timestamp * 1000);
   			let year = date.getFullYear();
   			let month = (date.getMonth() + 1).toString().padStart(2, '0');
   			let dayString = date.getDate().toString().padStart(2, '0');
   			const dateString = `${year}-${month}-${dayString}`;
   
   			// Iterate over each line item in the day's costs
   			day.line_items.forEach(item => {
   				// If this model hasn't been seen yet, add it to the result object
   				if (!costsByModel.hasOwnProperty(item.name)) {
   					costsByModel[item.name] = [];
   				}
   
   				// Add the cost for this day to this model's costs
   				costsByModel[item.name].push({ date: this.convertDate(dateString), cost: item.cost / 1000 });
   			});
   		});
   
   		return costsByModel;
   	}

5. Calculate daily average and highest spend

   Then, I set up two more functions: one for finding the dailyAverageCost and another for pinpointing the top 10 days with the highest spend.

   dailyAverageCost: async () => {
   		const cost = await this.getUsageData() // function to return cost data from api
   		const dailyCosts = cost.daily_costs;
   		// Initialize total cost
   		let totalCost = 0;
   
   		// Loop over each day's costs
   		dailyCosts.forEach(day => {
   			// Loop over each line item in the day's costs
   			day.line_items.forEach(item => {
   				// Add the cost for this item to the total cost
   				totalCost += item.cost;
   			});
   		});
   
   		// Divide total cost by the number of days to get the average
   		const averageDailyCost = totalCost / dailyCosts.length;
   
   		return (averageDailyCost / 1000).toFixed(3);
   	},
   
   	daysWithHighestSpend: async () => {
   		const cost = await this.getUsageData() // function to return cost data from api
   		const dailyCosts = cost.daily_costs;
   		// Map each day to an object with the date and total cost
   		let daysWithTotalCosts = dailyCosts.map(day => {
   			// Convert the timestamp to a date string in 'YYYY-MM-DD' format
   			const date = new Date(day.timestamp * 1000);
   			let year = date.getFullYear();
   			let month = (date.getMonth() + 1).toString().padStart(2, '0');
   			let dayString = date.getDate().toString().padStart(2, '0');
   			const dateString = `${year}-${month}-${dayString}`;
   
   			// Calculate the total cost for the day
   			let totalCost = day.line_items.reduce((sum, item) => sum + item.cost, 0);
   
   			return { date: this.convertDate(dateString), totalCost: (totalCost / 1000).toFixed(3) };
   		});
   
   		// Sort the days by total cost in descending order
   		daysWithTotalCosts.sort((a, b) => b.totalCost - a.totalCost);
   
   		// Return the top 10 days
   		return daysWithTotalCosts.slice(0, 10);
   	},
   

6. Season to taste

   You will want to add in the chart and list widgets, and style to your liking. You can also fork the app directly if you don't want to mess about with that.

Conclusion

Additional Resources