HTML 77.2%
TypeScript 10.5%
Python 9.6%
JavaScript 2.5%
1import type { Metadata } from 'next';2import Link from 'next/link';3import type { ScatterPoint } from '@/components/charts';4import { EfficiencyScatter } from '@/components/intelligence/client-charts';5import { ChangeRow } from '@/components/changes/change-row';6import { DistBars, Methodology, RankChips, TrustChip } from '@/components/intelligence/bits';7import { SectionNav, Ticker, type TickerItem } from '@/components/layout/terminal';8import { Chip, OpennessBadge } from '@/components/ui/badges';9import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';10import { EntityLink } from '@/components/ui/entity';11import { Container, Note, PageHeader, Section } from '@/components/ui/section';12import { EmptyState, Unavailable } from '@/components/ui/unavailable';13import { intel } from '@/lib/api';14import { safe } from '@/lib/api';15import { fmtDate, fmtDateTime, fmtInt, fmtParams, fmtScore, fmtTokens, fmtUsdPerM, num } from '@/lib/format';16import { eventTone, routes, SITE_NAME, SITE_URL } from '@/lib/site';17import { eventDate, type Deployment, type EntitySummary, type ModelRef } from '@/lib/types';1819export const revalidate = 300;2021const TITLE = 'The AI frontier right now — leaders per benchmark, price, context and open weights';22const DESC = 'What defines the AI frontier today: the latest major models, the leader and runner-up of every benchmark comparability group, the cheapest frontier offers, the largest context windows, the open-weight frontier, the quality-vs-price Pareto set, agentic and multimodal leaders and recent movements — observed dimensions only, no composite score.';23export const metadata: Metadata = {24 title: TITLE,25 description: DESC,26 alternates: { canonical: routes.frontier() },27 openGraph: { title: `${TITLE} | ${SITE_NAME}`, description: DESC, url: `${SITE_URL}${routes.frontier()}`, type: 'website', siteName: SITE_NAME },28 twitter: { card: 'summary_large_image', title: TITLE, description: DESC },29};3031const NAV = [32 { id: 'latest', label: 'Latest major models' },33 { id: 'benchmarks', label: 'Benchmark frontier' },34 { id: 'price', label: 'Price frontier' },35 { id: 'context', label: 'Context frontier' },36 { id: 'open', label: 'Open-weight frontier' },37 { id: 'efficiency', label: 'Efficiency frontier' },38 { id: 'agentic', label: 'Agentic' },39 { id: 'multimodal', label: 'Multimodal' },40 { id: 'movements', label: 'Recent movements' },41];4243const modelHref = (m: { slug: string; entity_type?: string }) => routes.entity({ entity_type: m.entity_type ?? 'model', slug: m.slug });44const orgName = (m: ModelRef | EntitySummary) => m.organization?.name ?? null;4546function DeploymentStrip({ d, label }: { d: Deployment | null | undefined; label: string }) {47 return (48 <div className="min-w-0 border-b border-rule py-3 md:border-b-0 md:border-r md:pr-6 last:md:border-r-0">49 <p className="eyebrow">{label}</p>50 {d && d.model ? (51 <>52 <p className="mt-1 flex flex-wrap items-baseline gap-x-2">53 <EntityLink e={d.model} className="text-[15px] font-medium" />54 {d.model.organization && <span className="text-xs text-ink-3">{d.model.organization.name}</span>}55 </p>56 <p className="tnum mt-1 text-[22px] font-semibold leading-none text-accent-2">57 {fmtUsdPerM(d.prices.output)} <span className="text-xs font-normal text-ink-3">output / 1M</span>58 </p>59 <p className="tnum mt-1 text-xs text-ink-3">60 input {fmtUsdPerM(d.prices.input)} · context {fmtTokens(d.context_length)} · via <EntityLink e={d.provider} className="text-ink-2" /> · observed {fmtDate(d.observed_at)}61 </p>62 </>63 ) : (64 <p className="mt-1 text-sm text-ink-3">No frontier model has a current priced offer in the API response.</p>65 )}66 </div>67 );68}6970export default async function FrontierPage() {71 const [f, idx] = await Promise.all([safe(intel.frontier(12)), safe(intel.priceIndex(30))]);72 if (!f) {73 return (74 <Container wide>75 <PageHeader eyebrow="What defines the AI frontier right now" title="Frontier" lede="Observed leaders per dimension — benchmarks, price, context, open weights, efficiency — from the atlas. No composite score." />76 <Unavailable what="Frontier" reason="GET /frontier did not answer. Nothing here is cached or hardcoded." />77 </Container>78 );79 }80 const latest = f.latest_major_models ?? [];81 const bench = f.benchmark_frontier ?? [];82 const pf = f.price_frontier;83 const ctx = f.context_frontier ?? [];84 const open = f.open_weight_frontier;85 const eff = f.efficiency_frontier;86 const agentic = f.agentic_frontier ?? [];87 const multi = f.multimodal_frontier ?? [];88 const moves = f.recent_frontier_movements ?? [];89 const compo = pf?.composition ?? f.price_frontier?.composition ?? null;9091 // efficiency scatter92 const points: ScatterPoint[] = (eff?.points ?? [])93 .filter((p) => num(p.x) !== null && num(p.y) !== null)94 .map((p) => ({ id: p.id, x: num(p.x) as number, y: num(p.y) as number, label: p.model.name, sub: `${p.model.organization ?? ''}${p.provider ? ` · via ${p.provider.name}` : ''} · rank ${p.rank}`, href: modelHref(p.model), color: p.pareto ? 'var(--accent-2)' : undefined }));95 const frontierSet = new Set(eff?.frontier ?? []);96 const frontierLine = points.filter((p) => frontierSet.has(p.id)).sort((a, b) => a.x - b.x);97 const ticker: TickerItem[] = moves.slice(0, 24).map((e) => ({ id: e.id, tone: eventTone(e.event_type), href: e.entity ? routes.entity(e.entity) : routes.changes(), label: e.summary.length > 100 ? `${e.summary.slice(0, 99)}…` : e.summary, meta: num(e.percent_change) !== null ? `${(num(e.percent_change) as number) > 0 ? '+' : ''}${(num(e.percent_change) as number).toFixed(0)}%` : fmtDate(eventDate(e)) }));98 const ld = {99 '@context': 'https://schema.org',100 '@type': 'Dataset',101 name: 'AI Atlas Frontier',102 description: DESC,103 url: `${SITE_URL}${routes.frontier()}`,104 dateModified: f.generated_at,105 creator: { '@type': 'Organization', name: SITE_NAME, url: SITE_URL },106 isAccessibleForFree: true,107 };108109 return (110 <Container wide>111 <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />112 <PageHeader eyebrow="What defines the AI frontier right now" title="Frontier" lede="Who leads, on what, since when — one observed dimension at a time. Every leader comes from a benchmark comparability group, a published price or a sourced attribute; the atlas never sums them into a single score." aside={f.generated_at ? <p className="tnum text-sm text-ink-3" title={f.generated_at}>computed {fmtDateTime(f.generated_at)}</p> : undefined} />113 <SectionNav items={NAV} />114 {ticker.length > 0 && <Ticker items={ticker} className="mt-3" label="Movements" />}115116 {/* ---------------------------------------------------------------------------------------------- latest */}117 <Section id="latest" eyebrow="Latest major models" title="Most recent importance-3 model events" lede="New canonical model releases, newest first. Facts are the model's sourced attributes at crawl time." action={{ href: `${routes.changes()}?type=NEW_MODEL&importance_min=3`, label: 'All new models' }} hairline={false}>118 {latest.length === 0 ? (119 <EmptyState title="No major model event returned">The API returned an empty list for latest_major_models.</EmptyState>120 ) : (121 <DataTable caption="Latest major models">122 <thead>123 <tr>124 <Th>Model</Th>125 <Th>Organization</Th>126 <Th>Released</Th>127 <Th>Key facts</Th>128 <Th>Evidence</Th>129 </tr>130 </thead>131 <tbody>132 {latest.map((e) => {133 const m = e.entity;134 const a = m?.attributes ?? {};135 return (136 <tr key={e.id}>137 <Td primary>138 {m ? <EntityLink e={m} /> : <span>{e.summary}</span>}139 {typeof a.openness === 'string' && <OpennessBadge openness={a.openness} className="ml-2" />}140 </Td>141 <Td label="Organization" className="text-ink-2">{m?.organization ? <Link href={routes.entity({ entity_type: 'company', slug: m.organization.slug })} className="hover:text-accent">{m.organization.name}</Link> : '—'}</Td>142 <Td label="Released" className="tnum text-ink-2 whitespace-nowrap">{typeof a.release_date === 'string' ? fmtDate(a.release_date) : fmtDate(eventDate(e))}</Td>143 <Td label="Key facts" className="tnum text-xs text-ink-2">144 {[num(a.parameter_count) !== null ? `${fmtParams(a.parameter_count)} params` : null, num(a.context_length) !== null ? `${fmtTokens(a.context_length)} context` : null, Array.isArray(a.modalities) && a.modalities.length ? (a.modalities as string[]).join(' · ') : null, typeof a.license === 'string' ? a.license : null].filter(Boolean).join(' · ') || '—'}145 </Td>146 <Td label="Evidence" className="text-xs">147 {e.source_url ? (148 <a href={e.source_url} target="_blank" rel="noopener noreferrer" className="text-ink-2 hover:text-accent">149 {new URL(e.source_url).hostname.replace(/^www\./, '')}150 </a>151 ) : (152 <span className="text-ink-3">—</span>153 )}154 {e.connector_name && <span className="mono ml-1.5 text-[10px] text-ink-3">{e.connector_name}</span>}155 {e.is_backfill && <span className="ml-1.5 text-[10px] text-ink-3">(back-filled date)</span>}156 </Td>157 </tr>158 );159 })}160 </tbody>161 </DataTable>162 )}163 </Section>164165 {/* ------------------------------------------------------------------------------------------ benchmarks */}166 <Section id="benchmarks" eyebrow="Benchmark frontier" title="Leader and runner-up per benchmark" lede="One row per benchmark with ≥ 20 current results: the primary comparability group, its leader, the second model and the gap between them, with the trust level of the leading row." action={{ href: routes.benchmarks(), label: 'All leaderboards' }}>167 {bench.length === 0 ? (168 <EmptyState title="No benchmark group qualifies yet">The frontier lists groups with at least 20 current results.</EmptyState>169 ) : (170 <DataTable caption="Benchmark frontier">171 <thead>172 <tr>173 <Th>Benchmark</Th>174 <Th>Leader</Th>175 <Th num>Score</Th>176 <Th>Second</Th>177 <Th num>Gap</Th>178 <Th>Trust</Th>179 </tr>180 </thead>181 <tbody>182 {bench.map((b) => (183 <tr key={b.benchmark.id}>184 <Td primary>185 <Link href={routes.benchmark(b.benchmark.slug)} className="text-ink hover:text-accent hover:underline">186 {b.benchmark.name}187 </Link>188 {b.group && <span className="mono block text-[11px] text-ink-3">{b.group.label} · n={fmtInt(b.group.model_count)} models</span>}189 </Td>190 <Td label="Leader">191 {b.leader ? (192 <>193 <Link href={modelHref(b.leader.model)} className="font-medium text-ink hover:text-accent hover:underline">194 {b.leader.model.name}195 </Link>196 {orgName(b.leader.model) && <span className="ml-1.5 text-xs text-ink-3">{orgName(b.leader.model)}</span>}197 </>198 ) : (199 '—'200 )}201 </Td>202 <Td num label="Score" className="tnum font-medium">{b.leader ? `${fmtScore(b.leader.score)}${b.leader.unit ? ` ${b.leader.unit}` : ''}` : '—'}</Td>203 <Td label="Second" className="text-ink-2">204 {b.second ? (205 <>206 <Link href={modelHref(b.second.model)} className="hover:text-accent">207 {b.second.model.name}208 </Link>{' '}209 <span className="tnum text-xs text-ink-3">{fmtScore(b.second.score)}</span>210 </>211 ) : (212 '—'213 )}214 </Td>215 <Td num label="Gap" className="tnum text-ink-2">{num(b.gap) === null ? '—' : fmtScore(b.gap)}</Td>216 <Td label="Trust">217 <TrustChip level={b.leader?.trust_level} label={b.leader?.trust_label} />218 </Td>219 </tr>220 ))}221 </tbody>222 </DataTable>223 )}224 <Methodology text="Leader = best current row of the primary comparability group (canonical metric × task-defining configuration), one row per canonical model. Gap = leader − second in the metric's unit." />225 </Section>226227 {/* ----------------------------------------------------------------------------------------------- price */}228 <Section id="price" eyebrow="Price frontier" title="Cheapest frontier output" lede="Among frontier models, the cheapest current published output price — and the cheapest with a context window of at least 1M tokens — with the provider that publishes it." action={{ href: `${routes.prices()}?sort=cheapest_frontier`, label: 'Price terminal' }}>229 <div className="grid grid-cols-[minmax(0,1fr)] gap-x-6 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1.2fr)]">230 <DeploymentStrip d={pf?.cheapest_output} label="Cheapest frontier output" />231 <DeploymentStrip d={pf?.cheapest_output_1m_context} label="Cheapest with ≥ 1M context" />232 <div className="py-3 md:pl-6">233 <p className="eyebrow">Current offers by output price</p>234 <DistBars d={idx?.distribution} className="mt-1" />235 </div>236 </div>237 <p className="tnum mt-2 text-xs text-ink-3">238 Frontier universe: {fmtInt(pf?.frontier_models)} canonical models239 {compo && (240 <>241 {' '}242 ({fmtInt(compo.recent_by_active_orgs)} recent releases by active organizations · {fmtInt(compo.top10_on_a_benchmark)} top-10 on a benchmark243 {compo.since ? ` · since ${fmtDate(compo.since)}` : ''})244 </>245 )}246 .247 </p>248 <Methodology text={idx?.frontier?.methodology ?? f.methodology} />249 </Section>250251 {/* --------------------------------------------------------------------------------------------- context */}252 <Section id="context" eyebrow="Context frontier" title="Largest context windows" lede="Distinct canonical models with the largest sourced context_length. A routing endpoint counts as a model only if its provider publishes it as one." action={{ href: `${routes.models()}?sort=context`, label: 'Models by context' }}>253 {ctx.length === 0 ? (254 <EmptyState title="No context data returned" />255 ) : (256 <ol className="grid gap-x-6 md:grid-cols-2 xl:grid-cols-3">257 {ctx.map((c, i) => (258 <li key={c.model.id} className="flex items-baseline gap-3 border-b border-rule py-2.5">259 <span className="tnum w-5 shrink-0 text-xs text-ink-3">{i + 1}</span>260 <span className="min-w-0 flex-1">261 <EntityLink e={c.model} className="font-medium" />262 {c.model.organization && <span className="ml-1.5 text-xs text-ink-3">{c.model.organization.name}</span>}263 </span>264 <span className="tnum shrink-0 text-[15px] font-semibold">{fmtTokens(c.context_length)}</span>265 </li>266 ))}267 </ol>268 )}269 </Section>270271 {/* ------------------------------------------------------------------------------------------------ open */}272 <Section id="open" eyebrow="Open-weight frontier" title="Best-ranked downloadable models" lede="Observed dimensions only — best rank on any benchmark, parameters, context — for models whose weights can be downloaded. Sorted by best rank, then parameters." action={{ href: routes.open(), label: 'Open model frontier' }}>273 {!open || open.items.length === 0 ? (274 <EmptyState title="No open-weight model with a current benchmark rank" />275 ) : (276 <DataTable caption="Open-weight frontier">277 <thead>278 <tr>279 <Th>Model</Th>280 <Th num>Best rank</Th>281 <Th>On</Th>282 <Th num>Parameters</Th>283 <Th num>Context</Th>284 <Th>Other ranks</Th>285 </tr>286 </thead>287 <tbody>288 {open.items.map((it) => (289 <tr key={it.model.id}>290 <Td primary>291 <EntityLink e={it.model} />292 {it.model.organization && <span className="ml-2 text-xs text-ink-3">{it.model.organization.name}</span>}293 {typeof it.model.attributes?.license === 'string' && <span className="block text-[11px] text-ink-3">{it.model.attributes.license as string}</span>}294 </Td>295 <Td num label="Best rank" className="tnum font-semibold">{num(it.best_rank) === null ? '—' : `#${fmtInt(it.best_rank)}`}</Td>296 <Td label="On">{it.best_rank_on ? <Link href={routes.benchmark(it.best_rank_on)} className="text-ink-2 hover:text-accent">{it.best_rank_on}</Link> : '—'}</Td>297 <Td num label="Parameters" className="tnum">{fmtParams(it.parameter_count)}</Td>298 <Td num label="Context" className="tnum">{fmtTokens(it.context_length)}</Td>299 <Td label="Other ranks"><RankChips ranks={it.ranks} max={3} /></Td>300 </tr>301 ))}302 </tbody>303 </DataTable>304 )}305 <Methodology text={`Dimensions: ${(open?.dimensions ?? []).join(', ') || 'best_rank, parameter_count, context_length'}. ${open?.note ?? ''}`} />306 </Section>307308 {/* ------------------------------------------------------------------------------------------- efficiency */}309 <Section id="efficiency" eyebrow="Efficiency frontier" title={eff?.quality?.benchmark ? <>Quality vs output price · {eff.quality.benchmark}</> : 'Quality vs output price'} lede={eff ? `y = ${eff.quality.group?.label ?? 'score'} in the primary comparability group; x = ${eff.x}. Amber points form the Pareto set (higher score, lower price); the rest are dimmed.` : undefined} action={eff?.quality?.benchmark ? { href: routes.benchmark(eff.quality.benchmark), label: 'Leaderboard' } : undefined}>310 {points.length < 2 ? (311 <EmptyState title="Not enough priced results for a Pareto view">The efficiency frontier needs models with both a current benchmark result and a current output price.</EmptyState>312 ) : (313 <>314 <EfficiencyScatter points={points} frontier={frontierLine.map((p) => ({ x: p.x, y: p.y }))} highlight={[...frontierSet]} yLabel={eff?.quality.group?.label ?? 'score'} />315 <ul className="mt-3 flex flex-wrap gap-1.5">316 {frontierLine.map((p) => (317 <li key={p.id}>318 <Link href={p.href ?? '#'} className="tnum inline-flex items-center gap-1.5 border border-rule px-2 py-1 text-xs text-ink-2 hover:border-rule-strong hover:text-ink">319 <span className="inline-block size-1.5 rounded-full bg-accent-2" aria-hidden /> {p.label} <span className="text-ink-3">{fmtScore(p.y)} · {fmtUsdPerM(p.x)}</span>320 </Link>321 </li>322 ))}323 </ul>324 <p className="tnum mt-2 text-xs text-ink-3">325 {fmtInt(points.length)} models plotted · {fmtInt(frontierLine.length)} on the Pareto frontier · group n={fmtInt(eff?.quality.group?.model_count)}326 </p>327 </>328 )}329 <Methodology text="Pareto frontier maximises the score and minimises the cheapest current output price; exact ties are kept. Price = cheapest current offer across providers. A point's position is two observed facts, not a rating." />330 </Section>331332 {/* ---------------------------------------------------------------------------------------------- agentic */}333 <Section id="agentic" eyebrow="Agentic frontier" title="Leaders on agentic benchmarks" lede="Top rows of the primary comparability group of each agentic benchmark (tool use, terminal tasks, multi-turn agents).">334 {agentic.length === 0 ? (335 <EmptyState title="No agentic benchmark group returned" />336 ) : (337 <div className="grid gap-6 md:grid-cols-2">338 {agentic.map((g) => (339 <div key={g.benchmark.id} className="min-w-0">340 <p className="flex flex-wrap items-baseline gap-x-2">341 <Link href={routes.benchmark(g.benchmark.slug)} className="text-[15px] font-semibold text-ink hover:text-accent">342 {g.benchmark.name}343 </Link>344 {g.group && <span className="mono text-[11px] text-ink-3">{g.group.label} · n={fmtInt(g.group.model_count)}</span>}345 </p>346 <ol className="mt-1.5 border-t border-rule">347 {g.leaders.map((l) => (348 <li key={l.result_id} className="grid grid-cols-[1.5rem_minmax(0,1fr)_auto] items-baseline gap-2 border-b border-rule py-2 text-sm">349 <span className="tnum text-xs text-ink-3">{l.rank}</span>350 <span className="min-w-0 truncate">351 <Link href={modelHref(l.model)} className="text-ink hover:text-accent hover:underline">352 {l.model.name}353 </Link>354 {orgName(l.model) && <span className="ml-1.5 text-xs text-ink-3">{orgName(l.model)}</span>}355 </span>356 <span className="tnum inline-flex items-center gap-2 text-right">357 <span className="font-medium">{fmtScore(l.score)}</span>358 <TrustChip level={l.trust_level} label={l.trust_label} />359 </span>360 </li>361 ))}362 </ol>363 </div>364 ))}365 </div>366 )}367 </Section>368369 {/* ------------------------------------------------------------------------------------------- multimodal */}370 <Section id="multimodal" eyebrow="Multimodal frontier" title="Models with the most modalities among top-10 ranks" lede="Sourced modalities of models that hold a top-10 rank on at least one benchmark. Modality lists are attributes as published, not evaluations.">371 {multi.length === 0 ? (372 <EmptyState title="No multimodal leader returned" />373 ) : (374 <DataTable caption="Multimodal frontier">375 <thead>376 <tr>377 <Th>Model</Th>378 <Th>Modalities</Th>379 <Th>Top-10 on</Th>380 </tr>381 </thead>382 <tbody>383 {multi.map((m) => (384 <tr key={m.model.id}>385 <Td primary>386 <Link href={modelHref(m.model)} className="font-medium text-ink hover:text-accent hover:underline">387 {m.model.name}388 </Link>389 {'organization' in m.model && m.model.organization && <span className="ml-2 text-xs text-ink-3">{m.model.organization.name}</span>}390 </Td>391 <Td label="Modalities">392 <span className="flex flex-wrap gap-1">393 {m.modalities.map((x) => (394 <Chip key={x}>{x}</Chip>395 ))}396 </span>397 </Td>398 <Td label="Top-10 on" className="text-xs">399 <span className="flex flex-wrap gap-1">400 {m.top10_on.slice(0, 6).map((b) => (401 <Link key={b} href={routes.benchmark(b)} className="rounded-[3px] bg-surface-2 px-1.5 py-[1px] text-[11px] text-ink-2 hover:text-accent">402 {b}403 </Link>404 ))}405 {m.top10_on.length > 6 && <span className="text-[11px] text-ink-3">+{m.top10_on.length - 6}</span>}406 </span>407 </Td>408 </tr>409 ))}410 </tbody>411 </DataTable>412 )}413 </Section>414415 {/* -------------------------------------------------------------------------------------------- movements */}416 <Section id="movements" eyebrow="Recent frontier movements" title="Leadership changes and price moves ≥ 20 %" lede="Non-backfill benchmark events and price changes of at least 20 % over the last 30 days, newest first." action={{ href: routes.changes(), label: 'All changes' }}>417 {moves.length === 0 ? (418 <EmptyState title="No frontier movement in the last 30 days">419 The atlas has not observed a leadership change or a ≥ 20 % price move that occurred in the window (historical backfill is excluded). The <Link href={routes.changes()} className="link">change feed</Link> lists everything else.420 </EmptyState>421 ) : (422 <ul className="border-t border-rule">423 {moves.map((e) => (424 <ChangeRow key={e.id} e={e} showDate live={false} />425 ))}426 </ul>427 )}428 <Methodology text={f.methodology} />429 <Note className="mt-2">430 Composition and every threshold above are the API's (<Link href="/developers" className="link">GET /frontier</Link>); this page adds no ranking of its own.431 </Note>432 </Section>433 </Container>434 );435}436