AI Agent vs Human Cost Comparison Tool 2026 – Calculate Your Savings

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0f172a;color:#e2e8f0;padding:24px;min-height:100vh}
h1{font-size:1.5rem;margin-bottom:4px;color:#f8fafc}
.sub{color:#94a3b8;margin-bottom:20px;font-size:0.85rem}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1100px;margin:0 auto}
@media(max-width:768px){.grid{grid-template-columns:1fr}}
.card{background:#1e293b;border:1px solid #334155;border-radius:12px;padding:20px}
.card h2{font-size:1.05rem;margin-bottom:14px;color:#f1f5f9;border-bottom:1px solid #334155;padding-bottom:10px}
label{display:block;font-size:0.78rem;color:#94a3b8;margin-bottom:4px;margin-top:10px}
input[type=number],select{width:100%;padding:8px 12px;background:#0f172a;border:1px solid #475569;border-radius:8px;color:#e2e8f0;font-size:0.9rem}
input[type=range]{width:100%;accent-color:#6366f1}
.range-val{text-align:right;font-size:0.82rem;color:#818cf8;margin-top:2px}
.task-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:0.82rem}
.task-table th{text-align:left;padding:6px 8px;background:#334155;color:#f1f5f9}
.task-table th:first-child{border-radius:6px 0 0 6px}
.task-table th:last-child{border-radius:0 6px 6px 0}
.task-table td{padding:6px 8px;border-bottom:1px solid #1e293b;color:#cbd5e1}
.savings-bar{height:8px;border-radius:4px;background:#1e293b;overflow:hidden;margin-top:4px}
.savings-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#10b981,#34d399)}
.roi-box{background:linear-gradient(135deg,#0c4a6e,#0e7490);border-radius:10px;padding:16px;margin-top:16px;text-align:center}
.roi-box .big{font-size:2rem;font-weight:800;color:#67e8f9}
.roi-box .lbl{font-size:0.72rem;color:#a5f3fc;margin-top:4px}
.add-row{display:flex;gap:8px;margin-top:12px;align-items:end}
.add-row input{flex:1}
.add-row button{padding:8px 16px;background:#4f46e5;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:0.8rem}
.add-row button:hover{background:#4338ca}
note{font-size:0.72rem;color:#64748b;display:block;margin-top:8px}
.pill{display:inline-block;padding:2px 6px;border-radius:4px;font-size:0.68rem;font-weight:600}
.pill-green{background:#064e3b;color:#6ee7b7}
.pill-yellow{background:#713f12;color:#fcd34d}
.pill-red{background:#7f1d1d;color:#fca5a5}

tbody.innerHTML+=`${t.name}${t.time} min✕`;

${t.name}
$${humanCost.toFixed(2)}
$${aiCostPerTask.toFixed(2)}
${savings.toFixed(0)}%

?`$${totalSavings>=1000?(totalSavings/1000).toFixed(1)+'K':totalSavings.toFixed(0)}/mo (${savingsPct.toFixed(0)}% savings)`

$${totalHumanCost>=1000?(totalHumanCost/1000).toFixed(1)+'K':totalHumanCost.toFixed(0)}

$${totalAiCost>=1000?(totalAiCost/1000).toFixed(1)+'K':totalAiCost.toFixed(0)}

$${(totalSavings*12)>=1000?((totalSavings*12)/1000).toFixed(1)+'K':(totalSavings*12).toFixed(0)}

${totalAiCost>0?(totalSavings*12/totalAiCost*100).toFixed(0):'∞'}%

const defaultTasks=[

let tasks=[...defaultTasks];

function renderTable(){
const tbody=document.getElementById('taskTable').querySelector('tbody')||document.createElement('tbody');

function addTask(){
const name=document.getElementById('newTaskName').value.trim();
const time=parseFloat(document.getElementById('newTaskTime').value);
if(name&&time){tasks.push({name,time});renderTable();calc();document.getElementById('newTaskName').value='';document.getElementById('newTaskTime').value='';}

function removeTask(i){tasks.splice(i,1);renderTable();calc();}

function calc(){
const hRate=parseFloat(document.getElementById('humanRate').value);
const aiCost=parseFloat(document.getElementById('aiTokenCost').value);
const tokens=parseFloat(document.getElementById('tokensPerTask').value);
const vol=parseFloat(document.getElementById('taskVolume').value);

const aiCostPerTask=(tokens/1000)*aiCost;
const humanCostPerMin=hRate/60;

let compHtml='';
let totalHumanCost=0;
let totalAiCost=0;
let tableHtml='';

const humanCost=t.time*humanCostPerMin;
const savings=((humanCost-aiCostPerTask)/humanCost*100);
const pill=savings>70?'pill-green':savings>30?'pill-yellow':'pill-red';
const humanMonthly=humanCost*vol;
const aiMonthly=aiCostPerTask*vol;

const totalSavings=totalHumanCost-totalAiCost;
const savingsPct=totalHumanCost>0?(totalSavings/totalHumanCost*100):0;