API Key Input

Masked API key field with a show/hide eye toggle and a copy button, tagged with the env var name.

OPENAI_API_KEY
sk-•••••••••••••••••••••••••••••••

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Ai21 } from "@/components/beste/piece/ai21";

<Ai21
  label="OPENAI_API_KEY"
  value="sk-proj-8fK2p3nR4vX7qW9sL1mT6bY0aZ"
/>

More AI pieces

View all AI

Feedback Row

ai15

Thumbs up and down buttons with tinted active state, alongside copy and share actions.

response.json
{
  "answer": "Use Redis INCR",
  "sources": 3,
  "latency_ms": 420
}

Export JSON

ai43

Mini code viewer for a structured response, with a filename header, copy button, and a preformatted JSON preview body.

ts
const slug = (s: string) =>
  s.toLowerCase().replace(/\s+/g, '-');

Generated Code

ai12

AI code output card with a language tag, copy and regenerate actions, and a monospace block below.

whiteboard.jpg1920×1080
Analyzing
diagramtextarrows

Vision Input

ai28

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

stream142 tok/s
The quick brown fox jumps over

Token Stream

ai42

Live token visualizer with tone-tinted token chips, tokens-per-second rate, and a pulsing caret at the end.

Context window92.0K / 200K
46% of window in use

Context Gauge

ai18

Context-window card with a tokens-used-of-max readout and a violet-to-fuchsia gradient fill bar.