RAG Pipeline

Horizontal pipeline diagram with tone-tinted stage nodes connected by arrows, showing the path from query to answer.

Query
Retrieve
Rerank
Answer

New here? Read the installation guide.

Import & use
import { Ai38 } from "@/components/beste/piece/ai38";

<Ai38
  steps={[
    "Query",
    "Retrieve",
    "Rerank",
    "Answer"
  ]}
  tone="violet"
/>

More AI pieces

View all AI
stream142 tok/s
The quick brown fox jumps over

Token Stream

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

support_tickets48,200 rows · 120 MB
train 80%val 10%test 10%

Dataset Card

Dataset summary with row count, total size, and a stacked train/val/test split bar. Tone controls the dataset icon tile and train segment.

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.

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

Input
1,240$0.0031
Output
528$0.0053
Total
1,768 tok$0.0084

Cost Estimate

Token and cost breakdown table with input/output rows and a totaled bottom line. Tone highlights the final amount.

next_tokentop 5
The capital of France is
  • Paris64.3%
  • the18.7%
  • located8.1%
  • also4.2%
  • a2.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.