Pieces

Compact, self-contained widgets that behave like assets. Drop them into any block, card, or page to add a small touch of polish without rewriting the surrounding UI.

Write a landing page hero for a coffee roaster

Prompt Input

ai1

Chat prompt card with a sparkle glyph, multi-line value, attach button, and a smart send arrow.

The smoothest cup of the morning starts with beans roasted just last

Streaming Response

ai2

Partial assistant reply bubble with a blinking block cursor on the trailing character.

Model Selector

ai3

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

Typing Indicator

ai4

Chat bubble with three bouncing dots signaling that the assistant is composing a reply.

Tokens4,820 / 8,192

Token Counter

ai5

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

Temperature0.7
FocusedCreative

Temperature Control

ai6

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

System prompt

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

System Prompt

ai7

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

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

ai8

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

Suggestion Pills

ai9

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

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

Usage Ring

ai10

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

Thinking

Thinking Dots

ai11

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

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.

Mountain ridge1
Mountain lake2
Forest canopy3
Starry night4

Image Variants

ai13

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

end_turn248 / 1,024
Response completed normally.

Stop Reason

ai14

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.

Feedback Row

ai15

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

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

ai16

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

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

ai17

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

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.

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

Model Comparison

ai19

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

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

beste.co/docs/onboarding

Citation Chip

ai20

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

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

API Key Input

ai21

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

search_docs
done
query:"rate limiting"
limit:5

Function Call

ai22

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

Parse user intent
Search knowledge base
Draft response
Format citations

Agent Steps

ai23

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

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

ai24

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