Skip to content

🥊 AI SaaS Showdown

Live at: aguidetocloud.com/ai-showdown/ Built: April 2026 Cost: $0 — 100% client-side JavaScript, zero API calls Accent colour: Warm amber #D4A853

What It Does

An interactive AI SaaS comparison tool that helps individuals and IT decision-makers choose the right AI chatbot subscription. Unlike our AI Service Mapper (which answers "which platform to BUILD on"), this tool answers "which AI should I SUBSCRIBE to?"

Think of it as the "Canstar for AI subscriptions" — compare plans, pricing, features, compliance, and get personalised recommendations.

Core Features (7 Tabs)

Tab What it does
🏠 Overview Provider card grid — 10 providers with key stats, pricing, model info. Click any card → jump to Compare
🆚 Compare Side-by-side comparison of 2–4 providers across 16 features. 5 presets (Big 3, Budget, Enterprise, Coding, Research)
💰 Pricing Sortable/filterable table of all 30+ plans. Filter by tier (Free/Individual/Power/Team/Enterprise), sort by price
💪 Strengths Honest pros/cons per provider — top 3 shown, expandable "+ X more". Best-for and watch-out sections
🧭 Which AI? 8-question quiz with auto-advance → top 3 personalised recommendations with match scores
🏢 Enterprise Compliance matrix — SOC2, HIPAA, GDPR, FedRAMP, SSO, audit logs, data residency. Filter by requirements
📰 What Changed Changelog of pricing changes, new plans, new models, breaking changes. Filter by provider and type

Key UX Features

  • Clickable provider cards — click any card on Overview → jumps to Compare with that provider selected
  • "Visit Site ↗" and "Pricing ↗" links on every provider card
  • Compare presets — 🏆 The Big 3, 💸 Budget Picks, 🏢 Enterprise, 💻 Coding, 🔍 Research
  • Max 4 provider toast — friendly notification when hitting the compare limit
  • Custom pricing detection — enterprise plans with $0 show "Contact Sales" (not "Free")
  • Annual savings — pricing table shows annual discount percentage in green
  • Quiz auto-advance — 400ms delay after answer → auto-navigates to next question
  • Collapsible strengths — shows top 3 items per section, "+ X more" expand toggle
  • Cross-tool links — quiz results link to Copilot Feature Matrix, Licensing, AI Mapper, ROI Calculator
  • URL state — tab preserved in URL params (?tab=compare)
  • Provider taglines — each card shows a one-liner tagline for instant context

Architecture Overview

┌─────────────────────────────────────────────────────┐
│  Hugo (Build Time)                                  │
│                                                     │
│  data/ai-showdown/                                  │
│    ├── providers.toml    (10 providers)              │
│    ├── plans.toml        (30+ plans with pricing)    │
│    ├── strengths.toml    (pros/cons/scores)           │
│    ├── compliance.toml   (enterprise matrix)          │
│    ├── quiz.toml         (8 questions + scoring)      │
│    └── changelog.toml    (what changed entries)       │
│                                                     │
│  layouts/ai-showdown/                               │
│    └── list.html         (7-tab dashboard)           │
│                                                     │
│  → Injects TOML as JS objects via                   │
│    {{ data | jsonify | safeJS }}                     │
└─────────────────┬───────────────────────────────────┘
                  │
                  ▼
┌─────────────────────────────────────────────────────┐
│  Browser (Runtime)                                  │
│                                                     │
│  static/js/showdown.js (~28KB)                      │
│    ├── Tab switching + URL state                    │
│    ├── Overview grid render + card click handler    │
│    ├── Compare selector + presets + feature table   │
│    ├── Pricing table + tier filter + sort           │
│    ├── Strengths cards + expand/collapse            │
│    ├── Quiz engine + auto-advance + scoring         │
│    ├── Enterprise compliance matrix + filter        │
│    ├── Changelog render + provider/type filter      │
│    └── Toast notifications                          │
│                                                     │
│  static/css/showdown.css (~20KB)                    │
│    ├── Namespace: .showdown-*                       │
│    ├── Body class: page-ai-showdown                 │
│    └── Accent: warm amber #D4A853                   │
└─────────────────────────────────────────────────────┘

Providers Covered (10)

Provider Product Plans Headquarters
OpenAI ChatGPT Free, Plus ($20), Pro ($200), Team ($30/u), Enterprise San Francisco, USA
Anthropic Claude Free, Pro ($20), Max ($100-200), Team ($30/u), Enterprise San Francisco, USA
Google Gemini Free, Advanced ($19.99), Ultra ($249), Business ($14/u), Enterprise ($30/u) Mountain View, USA
xAI Grok Free, SuperGrok ($30), Business ($30/seat) San Francisco, USA
Mistral AI Le Chat Free, Pro ($14.99), Team ($24.99/u), Enterprise (custom) Paris, France
DeepSeek DeepSeek Free (1M tokens/mo), API (pay-per-use) Hangzhou, China
Perplexity Perplexity Free, Pro ($20), Enterprise ($40/u) San Francisco, USA
Microsoft Copilot Free, Pro ($20), M365 Copilot ($30/u add-on) Redmond, USA
Meta Llama Open source (free, self-hosted) Menlo Park, USA
Cohere Cohere API (pay-per-use), Enterprise (custom) Toronto, Canada

How It Differs From AI Service Mapper

AI Service Mapper AI SaaS Showdown
Audience Architects/developers choosing platforms to BUILD on Individuals + IT buyers choosing what to SUBSCRIBE to
Focus 25 enterprise services across 8 providers 10 AI chatbot/assistant SaaS products
Question "Which platform should my company deploy?" "Which AI subscription should I pay for?"
Depth Capability scores (1-5), API pricing Plans, tiers, features, pros/cons, compliance

They're complementary — cross-linked between them.

Data Files

File Purpose Records
data/ai-showdown/providers.toml Provider definitions (name, URLs, flagship model, etc.) 10
data/ai-showdown/plans.toml Plan definitions (pricing, features, limits per plan) 30+
data/ai-showdown/strengths.toml Strengths, weaknesses, best-for, watch-out, capability scores (1-5) 10
data/ai-showdown/compliance.toml Enterprise compliance matrix (SOC2, HIPAA, GDPR, etc.) 10
data/ai-showdown/quiz.toml 8 quiz questions + weighted scoring per provider 8 questions
data/ai-showdown/changelog.toml What Changed entries with dates, types, impact levels 10 entries

Site Integration

File Change
layouts/_default/baseof.html Body class page-ai-showdown
layouts/partials/nav.html 🥊 AI SaaS Showdown in Toolkit dropdown + active state
layouts/free-tools/list.html Tool card with --card-accent: #D4A853
content/ai-showdown/_index.md Section page with SEO metadata
hugo.toml cache_version bump on every deploy

Maintenance Guide

Adding a new provider

  1. Add provider entry to data/ai-showdown/providers.toml
  2. Add plan entries to data/ai-showdown/plans.toml
  3. Add strengths/weaknesses to data/ai-showdown/strengths.toml
  4. Add compliance data to data/ai-showdown/compliance.toml
  5. Add scoring weights for new provider in data/ai-showdown/quiz.toml (all 8 scoring sections)
  6. Bump cache_version in hugo.toml
  7. Build and deploy

Updating pricing

  1. Edit the relevant plan in data/ai-showdown/plans.toml (update monthly_price, annual_price_monthly)
  2. Add a changelog entry in data/ai-showdown/changelog.toml
  3. Bump cache_version in hugo.toml
  4. Build and deploy

Important: jsonify | safeJS

The Hugo template uses {{ data | jsonify | safeJS }} to inject TOML data as JS objects. Without safeJS, Hugo's minifier wraps JSON in backticks (template literals), making data a string instead of an object — cards show "undefined". This is the same pattern used by AI Mapper and other tools.

Future Enhancements

  • [ ] Individual provider SEO pages (/ai-showdown/openai/, etc.)
  • [ ] Radar/spider charts for capability scores on Strengths tab
  • [ ] API pricing comparison sub-section (per-million-token rates)
  • [ ] "Copy comparison as Markdown" button on Compare tab
  • [ ] Homepage tool card
  • [ ] Blog post announcing the tool
  • [ ] Custom OG image
  • [ ] localStorage favourites for providers