API Key Input

About this piece

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

Usage

The import and the props worth knowing about, in one place.

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

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

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.

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.

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.

Context window92.0K / 200K

46% of window in use

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

docs

top_k = 5

lang:ensection:guides

Vector query bar with namespace name, top_k value, and removable key:value filter chips for metadata.