Monospace prompt card with inline handlebars-style variables highlighted in violet against plain body text.
The import and the props worth knowing about, in one place.
import { Ai25 } from "@/components/beste/piece/ai25";
<Ai25
name="support-reply"
segments={[
{
"type": "text",
"value": "You are a helpful assistant. The user asked: "
},
{
"type": "var",
"value": "question"
},
{
"type": "text",
"value": ". Answer in "
},
{
"type": "var",
"value": "tone"
},
{
"type": "text",
"value": " tone."
}
]}
tone="violet"
/>You are a concise copywriter. Reply in 2 sentences max and avoid em dashes.
Dashed-border card with a violet scroll icon, uppercase label, and an edit button for the system instructions.
Explain rate limiting strategies with simple examples.
Playground card with the selected model, a prompt draft box, and a tone-colored Run button to kick off the request.
Write a landing page hero for a coffee roaster
Chat prompt card with a sparkle glyph, multi-line value, attach button, and a smart send arrow.
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.