How I built a clean AI API Cost Calculator in Vanilla JS

#webdev #ai #javascript #productivity

As developers building AI wrappers and micro-SaaS products, estimating API costs (OpenAI, Anthropic) can be a nightmare. I wanted a fast, visual way to compare token prices and project monthly expenses, so I built an AI API Cost Calculator.

The Approach

I built this using 100% Vanilla JS. Pricing data calculates entirely on the client side, meaning instant feedback as you adjust the sliders. Zero server latency.

Here is a quick look at the logic handling the prompt and completion token cost estimation:

function calculateApiCost(promptTokens, completionTokens, ratePrompt, rateCompletion) {
    // Rates are usually per 1M tokens
    const costPrompt = (promptTokens / 1000000) * ratePrompt;
    const costCompletion = (completionTokens / 1000000) * rateCompletion;

    return {
        totalCost: (costPrompt + costCompletion).toFixed(4),
        promptCost: costPrompt.toFixed(4),
        completionCost: costCompletion.toFixed(4)
    };
}