Frontier Board

Component 25

About

Want this built into your product? AI agents write the code, an engineer directs them: https://vibecoding.tech/services?utm_source=21st&utm_medium=component Book a call and say promo code 21ST to get a free 3-day development trial. Interactive score-vs-cost scatter where each model's effort levels connect into an efficiency frontier line, with metric/version toggles, model filter, and hover focus. Answers: "Which model delivers the most score per dollar (or token), and at what effort level?"

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Frontier Board to your project and fits it to your theme.

Code

How Frontier Board is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { FrontierBoard } from '@/components/ui/frontier-board'
import type { FrontierModel, FrontierRun } from '@/components/ui/frontier-board'

// vendor identity colors (color follows the entity): a vivid set that
// holds on both light and dark surfaces
const FAMILY_COLOR = {
  atlas: '#E8734A',
  nova: '#10A37F',
  orion: '#4285F4',
  vega: '#D946EF',
  quasar: '#5B6EE1',
} as const

/**
 * Demo: fictional models with real-leaderboard density — 10 models across
 * five fictional vendors, effort-level runs (minimal→max), two dataset
 * versions, labeled defaults. Values mirror the density of real coding
 * leaderboards; every name is invented. Deterministic data.
 */

const fr = (
  variant: string | undefined,
  cost: number,
  score: number,
  extra?: Partial<FrontierRun>,
): FrontierRun => {
  const { x, ...rest } = extra ?? {}
  return {
    variant,
    score,
    std: 2,
    x: {
      cost,
      tokens: Math.round(cost * 6.8 + score * 0.4),
      steps: Math.round(cost * 2.2 + 14),
      ...x,
    },
    ...rest,
  }
}

const V11: FrontierModel[] = [
  {
    id: 'atlas-4',
    color: FAMILY_COLOR.atlas,
    badge: 'M',
    runs: [
      fr('max', 21.63, 70.4, { std: 4, x: { tokens: 119, steps: 88 } }),
      fr('high', 13.4, 70, { labeled: true, isDefault: true, labelDx: -14, labelDy: 44 }),
      fr('medium', 9.3, 68.7),
      fr('low', 6.2, 65.3),
      fr('minimal', 3.7, 59.6),
    ],
  },
  {
    id: 'atlas-3.5',
    color: FAMILY_COLOR.atlas,
    badge: 'M',
    runs: [
      fr('max', 13.22, 59.1, { x: { tokens: 135, steps: 120 } }),
      fr('xhigh', 8.0, 54.3),
      fr('high', 4.3, 51.7, { labeled: true, isDefault: true, labelDx: 6, labelDy: 42 }),
      fr('medium', 3.5, 48.6),
      fr('low', 2.7, 40.8),
    ],
  },
  {
    id: 'atlas-3',
    color: FAMILY_COLOR.atlas,
    badge: 'M',
    runs: [
      fr('max', 26.4, 54, {
        labeled: true,
        isDefault: true,
        std: 4,
        x: { tokens: 214, steps: 268 },
      }),
      fr('xhigh', 11.9, 49.7),
      fr('high', 8.3, 48.3),
      fr('medium', 4.4, 39.9),
      fr('low', 2.3, 30.5),
    ],
  },
  {
    id: 'atlas-2',
    color: FAMILY_COLOR.atlas,
    badge: 'M',
    runs: [fr('high', 5.52, 30.2, { labeled: true, std: 4, x: { tokens: 76, steps: 134 } })],
  },
  {
    id: 'nova-5',
    color: FAMILY_COLOR.nova,
    badge: 'H',
    runs: [
      fr('xhigh', 7.23, 67.1, { std: 6, x: { tokens: 46, steps: 82 } }),
      fr('high', 4.9, 64.4),
      fr('medium', 2.6, 53.9, { labeled: true }),
      fr('low', 1.2, 27.2),
    ],
  },
  {
    id: 'nova-4',
    color: FAMILY_COLOR.nova,
    badge: 'H',
    runs: [fr('xhigh', 5.65, 51.7, { labeled: true, labelDx: 16, labelDy: 20, x: { tokens: 71, steps: 70 } })],
  },
  {
    id: 'orion-72b',
    color: FAMILY_COLOR.orion,
    badge: 'V',
    runs: [
      fr('max', 3.92, 43.7, { labeled: true, isDefault: true, x: { tokens: 78, steps: 129 } }),
      fr('high', 2.9, 36.3),
    ],
  },
  {
    id: 'vega-flash',
    color: FAMILY_COLOR.vega,
    badge: 'S',
    runs: [fr('medium', 7.34, 37.2, { labeled: true, x: { tokens: 276, steps: 86 } })],
  },
  {
    id: 'vega-pro',
    color: FAMILY_COLOR.vega,
    badge: 'S',
    runs: [fr('high', 9.48, 11.8, { labeled: true, labelDx: 14, x: { tokens: 196, steps: 81 } })],
  },
  {
    id: 'quasar-coder',
    color: FAMILY_COLOR.quasar,
    badge: 'Q',
    runs: [
      fr(undefined, 2.82, 30.7, {
        labeled: true,
        labelDx: -6,
        labelDy: -24,
        std: 1,
        x: { tokens: 59, steps: 149 },
      }),
    ],
  },
]

/** v1 — the previous snapshot: a notch lower and cheaper, two models fewer. */
const V1: FrontierModel[] = V11.filter(
  (m) => m.id !== 'orion-72b' && m.id !== 'quasar-coder',
).map((m) => ({
  ...m,
  runs: m.runs.map((run) => ({
    ...run,
    score: Math.round((run.score - 4.5) * 10) / 10,
    x: {
      cost: Math.round(run.x.cost * 92) / 100,
      tokens: Math.round(run.x.tokens * 0.92),
      steps: Math.round(run.x.steps * 0.92),
    },
  })),
}))

const VERSIONS = [
  { key: 'v1.1', label: 'v1.1', models: V11 },
  { key: 'v1', label: 'v1', models: V1 },
]

const METRICS = [
  { key: 'cost', label: 'Price', axisLabel: 'Avg cost per task', tickPrefix: '$' },
  { key: 'tokens', label: 'Output tokens', axisLabel: 'Avg output tokens per task, k', tickSuffix: 'k' },
  { key: 'steps', label: 'Agent steps', axisLabel: 'Avg agent steps per task' },
]

/** Primary: ascending X axis (Artificial Analysis genre). */
export default function FrontierBoardDemo() {
  return (
    <FrontierBoard
      title="Agentic coding score"
      versions={VERSIONS}
      metrics={METRICS}
      yMax={80}
      meta="113 tasks · updated Jul 1, 2026"
      xAscending
    />
  )
}

/** Second axis genre: inverted X (DeepSWE style — cheaper to the right). */
export function InvertedDemo() {
  return (
    <FrontierBoard
      title="Agentic coding score"
      versions={VERSIONS}
      metrics={METRICS}
      yMax={80}
      meta="113 tasks · updated Jul 1, 2026"
    />
  )
}