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-••••••••••••••••••••••••••••••••

Import & use

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

<Ai21
  label="OPENAI_API_KEY"
  value="sk-proj-EXAMPLE-NOT-A-REAL-KEY-0000"
/>

More AI pieces

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

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

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
}

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

support-reply.prompt

You are a helpful assistant. The user asked: {{question}}. Answer in {{tone}} tone.

Monospace prompt card with inline handlebars-style variables highlighted in violet against plain body text.

Implementing rate limits with Redis

0.92

Use INCR with an EXPIRE TTL to build a fixed-window limiter that resets every minute.

docs/guides/rate-limits.md

Knowledge base hit card with a document title, snippet, source path, and an emerald similarity score badge.

"where is my order?"

order_status

87%

shipping_eta

refund_request

Intent ranking panel with the raw user input quoted above and a list of candidate labels with confidence bars.