Model Comparison

Two model cards side by side showing name, speed, and cost. The selected card gets a primary border and check.

FastInstant$0.10 / Mtok
Smart2–4s$1.20 / Mtok

New here? Read the installation guide.

Import & use
import { Ai19 } from "@/components/beste/piece/ai19";

<Ai19
  models={[
    {
      "name": "Fast",
      "speed": "Instant",
      "cost": "$0.10 / Mtok",
      "selected": true
    },
    {
      "name": "Smart",
      "speed": "2–4s",
      "cost": "$1.20 / Mtok"
    }
  ]}
/>

More AI pieces

View all AI
Mountain ridge1
Mountain lake2
Forest canopy3
Starry night4

Image Variants

Two-by-two grid of AI-generated image variants. The selected tile gets a primary border.

System prompt

You are a concise copywriter. Reply in 2 sentences max and avoid em dashes.

System Prompt

Dashed-border card with a violet scroll icon, uppercase label, and an edit button for the system instructions.

Weekly summary
  • Onboarding ships to GA on Tuesday
  • Pricing experiment lifts conversion by 14%
  • Two critical bugs filed, one already patched
Synthesized from 3 documents

AI Summary

Summary card with a violet sparkle header, bullet list of key points, and a source attribution below.

"The onboarding flow now ships with three new interactive steps."

beste.co/docs/onboarding

Citation Chip

Inline citation card with a numbered violet circle, a quoted excerpt, and an external link icon with the source path.

whiteboard.jpg1920×1080
Analyzing
diagramtextarrows

Vision Input

Attached image card with a tone-tinted thumbnail tile, a scanning line overlay, filename, dimensions, and detected-object chips.

Model Selector

Gradient sparkle tile inside a pill showing the model name, a speed caption, and a dropdown arrow.