AI pricing

Pricing for an agent product: plan columns with a live usage estimate in each, monthly or yearly billing, overage math and a model comparison.

Markdown

On this page

Plan columns with a live usage estimate, monthly or yearly billing and a model comparison.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/ai-pricing.json

Usage

tsx

import { AiPricing } from "@/components/chatcn/sections/ai-pricing"

export default function Pricing() {
  return (
    <AiPricing
      onSelectPlan={({ plan, billing, runs, model }) =>
        startCheckout({ plan: plan.id, billing, estimate: runs * model.creditsPerRun })
      }
    />
  )
}

The estimate multiplies runs a month by the chosen model's credits per run and fills every plan's meter. Past a plan's credits the meter shows the overage and its cost when overagePer1k is set, or Limit reached when it is not. The cheapest plan that fits is marked.

Props

Prop	Type	Description
plans	AiPricingPlan[]	Name, price per period, credits, overage price, models, features.
models	AiPricingModel[]	Name, credits per run and comparison values.
attributes	ComparisonAttribute[]	Rows of the model comparison.
defaultBilling	"monthly" \| "yearly"	Starting billing period. Default yearly.
defaultRuns	number	Starting estimate in runs a month. Default 1,200.
defaultModel	string	Model id for the estimate. Defaults to the recommended one.
onSelectPlan	(selection) => void	Plan, billing, runs and model: wire checkout here.
currency, locale	string	Formatting for prices. Default USD and en-US.

Accessibility

The estimate is a native range input with a value text in runs a month.
Billing period and model are button groups with aria-pressed, inside labelled fieldsets.
Each meter is a meter role with its value in credits.
The comparison table keeps its first column in view while the rest scrolls on small screens.

Motion

Meters fill with a 280 ms transform. Nothing else moves: prices change in place without counting up, and nothing driven by the keyboard animates.