Pieces/AI(52)

AI pieces from Beste UI, drop-in widgets built with shadcn/ui and Tailwind CSS.

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.

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

KB Search Result

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

embedding.vec1,536 dims
[0]cosine similarity ready[15]

Embedding Preview

Vector embedding visualizer with a zero baseline, positive values drawn upward in the tone color and negatives drawn downward in muted.

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

Prompt Template

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

Thought for 8 seconds

User wants to rate limit 100 req/min per key.

Leaky bucket gives smoother traffic than fixed window.

Redis INCR with TTL is the simplest implementation.

Chain of Thought

Collapsible reasoning panel with a brain icon header and italic thought bullets on a left border rail.

Parse user intent
Search knowledge base
Draft response
Format citations

Agent Steps

Vertical agent plan with done, active, and pending states indicated by check, spinner, and dot icons.

search_docs
done
query:"rate limiting"
limit:5

Function Call

Tool invocation card with the function name, typed arguments in monospace, and a running or done status pill.

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

API Key Input

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

"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.

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

Model Comparison

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

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

Context Gauge

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

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.

next_tokentop 5
“The capital of France is”
  • “Paris”64.3%
  • “the”18.7%
  • “located”8.1%
  • “also”4.2%
  • “a”2.1%

Top-K Tokens

Debugger-style panel showing the language model's next-token probabilities, with the top candidate highlighted and bars scaled to softmax weight.

Feedback Row

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

end_turn248 / 1,024
Response completed normally.

Stop Reason

Completion stop reason card where the icon tile color flips per reason (end_turn, stop_sequence, tool_use, max_tokens) and shows the token count.

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.

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

Generated Code

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

Thinking

Thinking Dots

Three staggered violet-to-fuchsia dots inside a pill next to a Thinking label.

42%
Monthly requests4,200 / 10,000resets in 12d

Usage Ring

Monthly quota meter with a tone-colored SVG donut arc, percentage in the middle, used/total request count, and reset countdown.

Suggestion Pills

Wrapping row of pill suggestions that seed the prompt input with common intents.

What's the capital of Japan?
Tokyo. It's been the capital since 1868, after Kyoto held the title for over a thousand years.

Chat Exchange

Paired bubbles: a primary-tinted user message above an assistant reply fronted by a gradient sparkle avatar.

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.

Temperature0.7
FocusedCreative

Temperature Control

Slider card with a sky-to-rose gradient track, a circular handle, and Focused to Creative end labels.

Tokens4,820 / 8,192

Token Counter

Token-usage card with used of total readout and a fill bar that shifts emerald to amber to rose.

Markdown version