⚡ Fastly Pricing Calculator: AI Tool Comparison

A comprehensive comparison of 5 different AI coding tools building identical Fastly pricing calculators from the same prompt. This project demonstrates the capabilities, strengths, and limitations of modern AI coding assistants when given a real-world web development task.

🎯 The Challenge

All tools were given the identical prompt:

"Given https://www.fastly.com/pricing I want you to build a web-based interactive, easy to use, visually simple, user friendly and appealing, modern, pricing calculator for Fastly services."

Constraints:

• Maximum 5 follow-up prompts allowed
• Stock configuration (no MCP servers or custom tweaks)
• Zero manual code edits
• Similar premium models used across all tools

🔍 Key Findings

Performance Metrics

• Development Time: Ranged from 5 minutes to 2 hours
• User Interaction: Varied dramatically between tools
  • Some required minimal interaction
  • Others needed extensive back-and-forth
• Question Quality:
  • One tool asked many basic questions
  • Another asked only insightful questions and worked autonomously

Technical Observations

• Framework Choice: All tools selected similar modern web frameworks
• Implementation Success: 3 out of 5 tools struggled with framework usage initially
• Common Pitfall: All tools misunderstood the same specific feature from Fastly's pricing page
• Architecture Differences:
  • Tools 1 & 5: Pure HTML/CSS/JS with inline styling
  • Tools 2-4: Modern React + TypeScript + Vite stack

Testing & Quality

• One tool performed thorough real-world testing autonomously
• Others required manual verification and debugging

📊 Implementation Details

Tools 1 & 5

• Architecture: Single-file HTML with embedded CSS and JavaScript
• Approach: Monolithic, self-contained implementation
• Styling: Extensive inline CSS

Tools 2-4

• Architecture: Modern React + TypeScript + Vite build system
• Assets: Compiled JavaScript and CSS in assets/ directories
• Build Output: Optimized static files ready for deployment

🔬 Analysis

This comparison reveals significant differences in:

• Speed of delivery
• Quality of user interaction
• Autonomous problem-solving capabilities
• Code architecture decisions
• Error handling and edge case consideration

📝 Blog Post

Detailed analysis with performance metrics, user experience comparisons, and technical deep-dives coming soon.