{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "feature-bento-ai-copilot",
  "title": "Feature Bento Ai Copilot",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/feature-bento-ai-copilot/FeatureBentoAiCopilot.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Activity, ArrowRight, BrainCircuit, Check, Copy, Cpu, Play, Sliders, Sparkles, Zap } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface FeatureBentoAiCopilotProps {\n  title?: string\n  description?: string\n  class?: string\n}\n\nconst props = withDefaults(defineProps<FeatureBentoAiCopilotProps>(), {\n  title: 'AI Copilot tooling built directly into your component architecture.',\n  description:\n    'Debug prompts, inspect LLM token streaming speeds, and synthesize Vue 3.5 and React 19 templates in real-time with sub-millisecond local latency.',\n})\n\nconst selectedModel = ref<'sonnet' | 'gpt4o' | 'gemini'>('sonnet')\nconst temperature = ref(0.2)\nconst isGenerating = ref(false)\nconst systemPrompt = ref(\n  'You are a senior UI design engineer. Generate an accessible, zero-dependency KPI metric card for Vue 3.5 and React 19 using semantic Tailwind v4 tokens.',\n)\nconst generatedStream = ref(\n  `<template>\\n  <Card class=\"border-border bg-card p-4\">\\n    <div class=\"text-xs text-muted-foreground\">MRR Growth</div>\\n    <div class=\"text-2xl font-bold\">$124,500</div>\\n    <div class=\"text-xs text-success font-medium\">+18.4% vs last month</div>\\n  </Card>\\n</template>`,\n)\n\nconst modelMetrics = computed(() => {\n  if (selectedModel.value === 'sonnet') {\n    return { name: 'Claude 3.5 Sonnet', ttftMs: 180, tokPerSec: 142, costPer1k: '$0.003' }\n  }\n  if (selectedModel.value === 'gpt4o') {\n    return { name: 'GPT-4o Omnimodel', ttftMs: 140, tokPerSec: 165, costPer1k: '$0.0025' }\n  }\n  return { name: 'Gemini 1.5 Pro', ttftMs: 160, tokPerSec: 155, costPer1k: '$0.00125' }\n})\n\nconst copied = ref(false)\n\nasync function copyCode() {\n  try {\n    await navigator.clipboard.writeText(generatedStream.value)\n    copied.value = true\n    setTimeout(() => {\n      copied.value = false\n    }, 2000)\n  } catch {\n    // fallback\n  }\n}\n\nfunction triggerGeneration() {\n  isGenerating.value = true\n  setTimeout(() => {\n    isGenerating.value = false\n  }, 1200)\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"feature-bento-ai-copilot\"\n    :class=\"cn('bg-background relative overflow-hidden py-16 sm:py-24', props.class)\"\n  >\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <!-- Section Header -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <a\n          href=\"#ai-copilot\"\n          class=\"group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors\"\n        >\n          <Sparkles class=\"text-primary size-3.5\" />\n          <span>Next-Gen AI Agent Workbench</span>\n          <ArrowRight class=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n        </a>\n\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n          {{ title }}\n        </h2>\n\n        <p class=\"text-muted-foreground text-base sm:text-lg\">\n          {{ description }}\n        </p>\n      </div>\n\n      <!-- Bento Grid (3 Cards) -->\n      <div class=\"mt-12 grid grid-cols-1 gap-6 lg:grid-cols-12\">\n        <!-- Left: Model Tuning & Hyperparameters (5 Cols) -->\n        <Card class=\"border-border bg-card/80 flex flex-col justify-between shadow-xs backdrop-blur-xs lg:col-span-5\">\n          <CardContent class=\"space-y-5 p-6\">\n            <div class=\"border-border flex items-center justify-between border-b pb-3\">\n              <div class=\"flex items-center gap-2\">\n                <Sliders class=\"text-primary size-4\" />\n                <span class=\"text-foreground text-sm font-semibold\">Inference Hyperparameters</span>\n              </div>\n              <Badge variant=\"outline\" class=\"border-border font-mono text-xs\">\n                {{ modelMetrics.name }}\n              </Badge>\n            </div>\n\n            <!-- Model Switcher -->\n            <div class=\"space-y-2\">\n              <label class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\"\n                >Foundation Model</label\n              >\n              <div class=\"grid grid-cols-3 gap-2\">\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded-lg border p-2 text-center text-xs font-medium transition-colors',\n                      selectedModel === 'sonnet'\n                        ? 'border-primary bg-primary/10 text-primary font-semibold'\n                        : 'border-border bg-muted/40 text-muted-foreground hover:text-foreground',\n                    )\n                  \"\n                  @click=\"selectedModel = 'sonnet'\"\n                >\n                  Sonnet 3.5\n                </button>\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded-lg border p-2 text-center text-xs font-medium transition-colors',\n                      selectedModel === 'gpt4o'\n                        ? 'border-primary bg-primary/10 text-primary font-semibold'\n                        : 'border-border bg-muted/40 text-muted-foreground hover:text-foreground',\n                    )\n                  \"\n                  @click=\"selectedModel = 'gpt4o'\"\n                >\n                  GPT-4o\n                </button>\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded-lg border p-2 text-center text-xs font-medium transition-colors',\n                      selectedModel === 'gemini'\n                        ? 'border-primary bg-primary/10 text-primary font-semibold'\n                        : 'border-border bg-muted/40 text-muted-foreground hover:text-foreground',\n                    )\n                  \"\n                  @click=\"selectedModel = 'gemini'\"\n                >\n                  Gemini Pro\n                </button>\n              </div>\n            </div>\n\n            <!-- Temperature Slider -->\n            <div class=\"space-y-2\">\n              <div class=\"flex items-center justify-between text-xs\">\n                <span class=\"text-foreground font-medium\">Sampling Temperature</span>\n                <span class=\"text-primary font-mono font-bold\">{{ temperature }}</span>\n              </div>\n              <input\n                v-model.number=\"temperature\"\n                type=\"range\"\n                min=\"0\"\n                max=\"1\"\n                step=\"0.1\"\n                class=\"accent-primary w-full cursor-pointer\"\n              />\n              <div class=\"text-muted-foreground flex justify-between text-xs\">\n                <span>0.0 (Deterministic)</span>\n                <span>1.0 (Creative)</span>\n              </div>\n            </div>\n\n            <!-- System Prompt Input -->\n            <div class=\"space-y-2\">\n              <label class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\"\n                >System Directive</label\n              >\n              <textarea\n                v-model=\"systemPrompt\"\n                rows=\"3\"\n                class=\"border-border bg-muted/30 text-foreground focus-visible:ring-primary w-full rounded-md border p-2.5 font-mono text-xs focus-visible:ring-1 focus-visible:outline-none\"\n              />\n            </div>\n\n            <!-- Action Button -->\n            <Button class=\"w-full gap-2 shadow-xs\" :disabled=\"isGenerating\" @click=\"triggerGeneration\">\n              <Play v-if=\"!isGenerating\" class=\"size-3.5\" />\n              <Zap v-else class=\"size-3.5 animate-spin\" />\n              <span>{{ isGenerating ? 'Streaming Inference...' : 'Synthesize UI Primitive' }}</span>\n            </Button>\n          </CardContent>\n        </Card>\n\n        <!-- Right: Streaming Code Output & Real-time Telemetry (7 Cols) -->\n        <Card class=\"border-border bg-card/80 flex flex-col justify-between shadow-xs backdrop-blur-xs lg:col-span-7\">\n          <CardContent class=\"space-y-4 p-6\">\n            <!-- Output Header & Telemetry -->\n            <div class=\"border-border flex flex-wrap items-center justify-between gap-3 border-b pb-3\">\n              <div class=\"flex items-center gap-2\">\n                <BrainCircuit class=\"text-success size-4\" />\n                <span class=\"text-foreground text-sm font-semibold\">Live Streaming Synthesis</span>\n              </div>\n\n              <div class=\"flex items-center gap-2\">\n                <Button variant=\"ghost\" size=\"sm\" class=\"h-7 gap-1 px-2 font-mono text-xs\" @click=\"copyCode\">\n                  <Check v-if=\"copied\" class=\"text-primary size-3.5\" />\n                  <Copy v-else class=\"size-3.5\" />\n                  <span>{{ copied ? 'Copied' : 'Copy SFC' }}</span>\n                </Button>\n              </div>\n            </div>\n\n            <!-- Telemetry KPI Pill Row -->\n            <div class=\"border-border bg-muted/20 grid grid-cols-3 gap-3 rounded-lg border p-3\">\n              <div class=\"space-y-0.5\">\n                <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                  <Activity class=\"text-success size-3\" />\n                  <span>TTFT</span>\n                </div>\n                <div class=\"text-foreground font-mono text-sm font-bold\">{{ modelMetrics.ttftMs }}ms</div>\n              </div>\n              <div class=\"space-y-0.5\">\n                <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                  <Cpu class=\"text-info size-3\" />\n                  <span>Velocity</span>\n                </div>\n                <div class=\"text-foreground font-mono text-sm font-bold\">{{ modelMetrics.tokPerSec }} tok/s</div>\n              </div>\n              <div class=\"space-y-0.5\">\n                <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                  <Zap class=\"text-primary size-3\" />\n                  <span>Cost</span>\n                </div>\n                <div class=\"text-foreground font-mono text-sm font-bold\">{{ modelMetrics.costPer1k }}/1k</div>\n              </div>\n            </div>\n\n            <!-- Code Sandbox Block -->\n            <div\n              class=\"border-border bg-muted/50 text-foreground relative overflow-x-auto rounded-lg border p-4 font-mono text-xs\"\n            >\n              <pre class=\"leading-relaxed\"><code>{{ generatedStream }}</code></pre>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/feature-bento-ai-copilot/FeatureBentoAiCopilot.vue"
    },
    {
      "path": "packages/registry-vue/blocks/feature-bento-ai-copilot/index.ts",
      "content": "export { default as FeatureBentoAiCopilot } from './FeatureBentoAiCopilot.vue'\nexport type { FeatureBentoAiCopilotProps } from './FeatureBentoAiCopilot.vue'\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/feature-bento-ai-copilot/index.ts"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "AI agent copilot bento workbench with model tuning sliders, live inference streaming, and token speed telemetry.",
  "categories": [
    "feature",
    "marketing"
  ]
}