spb/ai-atlas

1import type { Metadata } from 'next';2import Link from 'next/link';3import { Suspense } from 'react';4import { Calculator } from '@/components/intelligence/calculator';5import { Container, Note, PageHeader } from '@/components/ui/section';6import { routes, SITE_NAME, SITE_URL } from '@/lib/site';78type SP = Record<string, string | undefined>;9const TITLE = 'AI cost calculator — price a workload across every provider';10const DESC = 'Pick a model, enter tokens per request, requests per day, cached share and batch: the calculator prices the workload per request, day, month and year for every provider that currently serves the model, from published prices only, plus the cost of filling a 128K, 200K, 1M or 2M-token context.';1112export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {13  const sp = await searchParams;14  const title = sp.model ? `Cost of ${sp.name ?? sp.model} per request, day, month and year — every provider` : TITLE;15  return { title, description: DESC, alternates: { canonical: routes.calculator() }, openGraph: { title: `${title} | ${SITE_NAME}`, description: DESC, url: `${SITE_URL}${routes.calculator()}`, siteName: SITE_NAME }, robots: Object.keys(sp).length ? { index: false, follow: true } : undefined };16}1718export default function CalculatorPage() {19  return (20    <Container wide>21      <PageHeader eyebrow="Cost calculator" title="What will this workload cost?" lede="Per request, per day, per month, per year — for every provider that currently serves the model, side by side, from the prices they publish. The second tab prices a fully populated context window. Inputs live in the URL, so a result is shareable." />22      <Suspense fallback={<p className="py-10 text-center text-sm text-ink-3" aria-busy="true">Loading calculator…</p>}>23        <Calculator />24      </Suspense>25      <Note className="mt-8 pb-16">26        Computation: <Link href="/developers" className="link">GET /cost</Link> and <Link href="/developers" className="link">GET /cost/context</Link> on current offers only — no rate limits, latency or quality are modelled. See also the <Link href={routes.prices()} className="link">price terminal</Link> and <Link href={routes.findAModel()} className="link">Find a model</Link>.27      </Note>28    </Container>29  );30}31