Every personalized nutrition and fitness application starts with one fundamental metric: TDEE (Total Daily Energy Expenditure). TDEE is the estimated total number of calories a human body burns in a 24-hour period.

For software engineers and product teams, building a custom TDEE calculator is a classic project that is perfect for demonstrating the power of AI-assisted coding. In this guide, we’ll break down the mathematical components of TDEE and walk through how to build a fully functional, highly interactive TDEE calculator web app using AI prompting techniques.

---

TL;DR: TDEE combines Basal Metabolic Rate (BMR) with active energy multipliers. Rather than writing complex frontend calculators by hand, you can build a responsive, production-ready TDEE widget in minutes using prompt engineering with LLMs like Claude, Gemini, or Cursor.

---

What Exactly Is TDEE?

To program a TDEE calculator, your software needs to model four distinct energy expenditure variables:

1. Basal Metabolic Rate (BMR) — 60-70% of total: The energy required to maintain cellular homeostasis at complete rest. In code, this serves as our base coefficient.
2. Thermic Effect of Food (TEF) — 8-15% of total: The metabolic cost of digesting macronutrients. Protein requires the most energy to process (~20-30% of its calories), while fats require the least (~0-3%).
3. Non-Exercise Activity Thermogenesis (NEAT) — 15-30% of total: Energy expended during non-structured movement (typing, walking, fidgeting). This introduces the highest variance in metabolic modeling.
4. Exercise Activity Thermogenesis (EAT) — 5-10% of total: Energy burned during planned physical exercise.

---

The Mathematical Pipeline

TDEE is computed by multiplying a baseline BMR by an activity coefficient representing NEAT + EAT:

TDEE = BMR × Activity Multiplier

1. Calculate BMR

Before computing TDEE, you must calculate BMR. The Mifflin-St Jeor formula is the standard default:

• Men: BMR = (10 × weight in kg) + (6.25 × height in cm) - (5 × age) + 5
• Women: BMR = (10 × weight in kg) + (6.25 × height in cm) - (5 × age) - 161

For a detailed analysis of coding BMR formulas from scratch, see our BMR Calculator Guide.

2. Apply the Activity Multiplier

The system then applies one of the standard physical activity coefficients:

Activity Level	Multiplier	Code Variable/Description
Sedentary	1.2	Desk job, little or no exercise
Lightly Active	1.375	Light exercise 1-3 days/week
Moderately Active	1.55	Moderate exercise 3-5 days/week
Very Active	1.725	Hard exercise 6-7 days/week
Extremely Active	1.9	Physical labor job + intense training

---

Step-by-Step: Building a TDEE App with AI Prompting

With modern AI coding assistants (like Claude, Gemini, or Cursor), you don’t need to manually configure HTML forms, style inputs, or write unit conversion calculations. Instead, you can define the application using structured prompts.

Step 1: Define the Stack

For this tutorial, we will target a single-file component built with React, TypeScript, and Tailwind CSS for styling.

Step 2: The Master Prompt

Here is a production-grade system prompt you can feed into Claude or Cursor to generate the complete application.

Act as an expert frontend engineer. Build an interactive TDEE (Total Daily Energy Expenditure) Calculator component in React, TypeScript, and Tailwind CSS.

Requirements:
1. FORM FIELDS:
   - Gender selector (Male/Female)
   - Age input (validated 15-120)
   - Weight input with Toggle for Imperial (lbs) and Metric (kg)
   - Height input with Toggle for Imperial (ft/in) and Metric (cm)
   - Activity Level dropdown matching standard multipliers (1.2 to 1.9)
2. LOGIC:
   - Normalize all inputs to Metric values internally.
   - Compute BMR using the Mifflin-St Jeor equation.
   - Multiply BMR by the chosen Activity Multiplier to calculate TDEE.
   - Calculate output summaries for: Maintenance Calories, Mild Weight Loss (TDEE - 250), Weight Loss (TDEE - 500), and Muscle Gain (TDEE + 300).
3. INTERFACE DESIGN:
   - Clean, modern dashboard interface.
   - Use custom slider controls or card selectors for activity levels.
   - Display a responsive layout with the form on the left and the animated results panel on the right.
   - Add clear error states for invalid inputs.

Provide the complete React code in a single file ready for consumption.

Step 3: Analyzing the Core Code Architecture

The generated code should structure the TDEE math into clean, pure functions. Here is the recommended TypeScript design pattern:

export type ActivityLevel = 'sedentary' | 'light' | 'moderate' | 'active' | 'extreme';

export const ACTIVITY_MULTIPLIERS: Record<ActivityLevel, number> = {
  sedentary: 1.2,
  light: 1.375,
  moderate: 1.55,
  active: 1.725,
  extreme: 1.9
};

interface TDEEParameters {
  bmr: number;
  activity: ActivityLevel;
}

/**
 * Calculates TDEE from calculated BMR and activity level.
 */
export function calculateTDEE({ bmr, activity }: TDEEParameters): number {
  const multiplier = ACTIVITY_MULTIPLIERS[activity];
  if (!multiplier) {
    throw new Error(`Unsupported activity level: ${activity}`);
  }
  return Math.round(bmr * multiplier);
}

---

Deploying Your TDEE Web Utility

Once your AI coding assistant generates the code:

1. Paste the component into your project (e.g., src/components/TdeeCalculator.tsx).
2. Import it into your page layouts.
3. Add unit testing using a library like Vitest to ensure calculations remain consistent across code changes.

For an extensive look at automated unit testing using AI code generators, review our Automate Unit Testing with AI workflow tutorial.

---

FAQ Section

How do I prompt the AI to include dynamic macro distribution?

You can append this requirement to your prompt: “After displaying the TDEE, add a section that dynamically breaks down the daily calories into macronutrients (Protein: 1.0g per lb of weight, Fat: 0.4g per lb of weight, and the remainder in Carbs). Display these values as an interactive pie chart.” To learn more about calculating macro ratios manually, refer to our Macro Calculator Guide.

How can I make my TDEE calculator SEO-friendly?

Embed schema markup (Structured Data) on the calculator page. Using JSON-LD format, you can define the page as a WebApplication with applicationCategory: "BusinessApplication" or "HealthApplication" to help search engines index the page correctly.

What is the most common bug in AI-generated calculators?

Floating-point arithmetic anomalies. JavaScript handles numbers as double-precision floats, leading to values like 1780.0000000000002. Ensure your prompt explicitly requests Math.round() or .toFixed(0) formatting on all user-facing numbers.

---

Actionable Conclusion

Building web tools with AI prompting accelerates development from days to minutes. Establish your mathematical baseline, write clean system prompts, and use your AI assistant to generate robust components.

To master building full-stack applications with AI assistance, check out Designing Active Learning Systems on Amazon or reference the classic guide on web interface engineering, Designing Interfaces: Patterns for Effective Interaction Design on Amazon.