{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-bento-ai-copilot",
  "title": "Feature Bento Ai Copilot",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/feature-bento-ai-copilot/FeatureBentoAiCopilot.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Activity, ArrowRight, BrainCircuit, Check, Copy, Cpu, Play, Sliders, Sparkles, Zap } from 'lucide-react'\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  className?: string\n}\n\nexport function FeatureBentoAiCopilot({\n  title = 'AI Copilot tooling built directly into your component architecture.',\n  description = '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  className,\n}: FeatureBentoAiCopilotProps) {\n  const [selectedModel, setSelectedModel] = React.useState<'sonnet' | 'gpt4o' | 'gemini'>('sonnet')\n  const [temperature, setTemperature] = React.useState(0.2)\n  const [isGenerating, setIsGenerating] = React.useState(false)\n  const [systemPrompt, setSystemPrompt] = React.useState(\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  )\n  const [generatedStream, setGeneratedStream] = React.useState(\n    `<Card className=\"border-border bg-card p-4\">\\n  <div className=\"text-xs text-muted-foreground\">MRR Growth</div>\\n  <div className=\"text-2xl font-bold\">$124,500</div>\\n  <div className=\"text-xs text-success font-medium\">+18.4% vs last month</div>\\n</Card>`,\n  )\n  const [copied, setCopied] = React.useState(false)\n\n  const modelMetrics = React.useMemo(() => {\n    if (selectedModel === 'sonnet') {\n      return { name: 'Claude 3.5 Sonnet', ttftMs: 180, tokPerSec: 142, costPer1k: '$0.003' }\n    }\n    if (selectedModel === '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  }, [selectedModel])\n\n  async function copyCode() {\n    try {\n      await navigator.clipboard.writeText(generatedStream)\n      setCopied(true)\n      setTimeout(() => {\n        setCopied(false)\n      }, 2000)\n    } catch {\n      // fallback\n    }\n  }\n\n  function triggerGeneration() {\n    setIsGenerating(true)\n    setTimeout(() => {\n      setIsGenerating(false)\n    }, 1200)\n  }\n\n  return (\n    <section\n      data-slot=\"feature-bento-ai-copilot\"\n      className={cn('bg-background relative overflow-hidden py-16 sm:py-24', className)}\n    >\n      <div className=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        {/* Section Header */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <a\n            href=\"#ai-copilot\"\n            className=\"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 className=\"text-primary size-3.5\" />\n            <span>Next-Gen AI Agent Workbench</span>\n            <ArrowRight className=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n          </a>\n\n          <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">{title}</h2>\n\n          <p className=\"text-muted-foreground text-base sm:text-lg\">{description}</p>\n        </div>\n\n        {/* Bento Grid (3 Cards) */}\n        <div className=\"mt-12 grid grid-cols-1 gap-6 lg:grid-cols-12\">\n          {/* Left: Model Tuning & Hyperparameters (5 Cols) */}\n          <Card className=\"border-border bg-card/80 flex flex-col justify-between shadow-xs backdrop-blur-xs lg:col-span-5\">\n            <CardContent className=\"space-y-5 p-6\">\n              <div className=\"border-border flex items-center justify-between border-b pb-3\">\n                <div className=\"flex items-center gap-2\">\n                  <Sliders className=\"text-primary size-4\" />\n                  <span className=\"text-foreground text-sm font-semibold\">Inference Hyperparameters</span>\n                </div>\n                <Badge variant=\"outline\" className=\"border-border font-mono text-xs\">\n                  {modelMetrics.name}\n                </Badge>\n              </div>\n\n              {/* Model Switcher */}\n              <div className=\"space-y-2\">\n                <label className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                  Foundation Model\n                </label>\n                <div className=\"grid grid-cols-3 gap-2\">\n                  <button\n                    type=\"button\"\n                    className={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                    onClick={() => setSelectedModel('sonnet')}\n                  >\n                    Sonnet 3.5\n                  </button>\n                  <button\n                    type=\"button\"\n                    className={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                    onClick={() => setSelectedModel('gpt4o')}\n                  >\n                    GPT-4o\n                  </button>\n                  <button\n                    type=\"button\"\n                    className={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                    onClick={() => setSelectedModel('gemini')}\n                  >\n                    Gemini Pro\n                  </button>\n                </div>\n              </div>\n\n              {/* Temperature Slider */}\n              <div className=\"space-y-2\">\n                <div className=\"flex items-center justify-between text-xs\">\n                  <span className=\"text-foreground font-medium\">Sampling Temperature</span>\n                  <span className=\"text-primary font-mono font-bold\">{temperature}</span>\n                </div>\n                <input\n                  type=\"range\"\n                  min=\"0\"\n                  max=\"1\"\n                  step=\"0.1\"\n                  value={temperature}\n                  onChange={(e) => setTemperature(parseFloat(e.target.value))}\n                  className=\"accent-primary w-full cursor-pointer\"\n                />\n                <div className=\"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 className=\"space-y-2\">\n                <label className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                  System Directive\n                </label>\n                <textarea\n                  rows={3}\n                  value={systemPrompt}\n                  onChange={(e) => setSystemPrompt(e.target.value)}\n                  className=\"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 className=\"w-full gap-2 shadow-xs\" disabled={isGenerating} onClick={triggerGeneration}>\n                {!isGenerating ? <Play className=\"size-3.5\" /> : <Zap className=\"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 className=\"border-border bg-card/80 flex flex-col justify-between shadow-xs backdrop-blur-xs lg:col-span-7\">\n            <CardContent className=\"space-y-4 p-6\">\n              {/* Output Header & Telemetry */}\n              <div className=\"border-border flex flex-wrap items-center justify-between gap-3 border-b pb-3\">\n                <div className=\"flex items-center gap-2\">\n                  <BrainCircuit className=\"text-success size-4\" />\n                  <span className=\"text-foreground text-sm font-semibold\">Live Streaming Synthesis</span>\n                </div>\n\n                <div className=\"flex items-center gap-2\">\n                  <Button variant=\"ghost\" size=\"sm\" className=\"h-7 gap-1 px-2 font-mono text-xs\" onClick={copyCode}>\n                    {copied ? <Check className=\"text-primary size-3.5\" /> : <Copy className=\"size-3.5\" />}\n                    <span>{copied ? 'Copied' : 'Copy JSX'}</span>\n                  </Button>\n                </div>\n              </div>\n\n              {/* Telemetry KPI Pill Row */}\n              <div className=\"border-border bg-muted/20 grid grid-cols-3 gap-3 rounded-lg border p-3\">\n                <div className=\"space-y-0.5\">\n                  <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <Activity className=\"text-success size-3\" />\n                    <span>TTFT</span>\n                  </div>\n                  <div className=\"text-foreground font-mono text-sm font-bold\">{modelMetrics.ttftMs}ms</div>\n                </div>\n                <div className=\"space-y-0.5\">\n                  <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <Cpu className=\"text-info size-3\" />\n                    <span>Velocity</span>\n                  </div>\n                  <div className=\"text-foreground font-mono text-sm font-bold\">{modelMetrics.tokPerSec} tok/s</div>\n                </div>\n                <div className=\"space-y-0.5\">\n                  <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <Zap className=\"text-primary size-3\" />\n                    <span>Cost</span>\n                  </div>\n                  <div className=\"text-foreground font-mono text-sm font-bold\">{modelMetrics.costPer1k}/1k</div>\n                </div>\n              </div>\n\n              {/* Code Sandbox Block */}\n              <div className=\"border-border bg-muted/50 text-foreground relative overflow-x-auto rounded-lg border p-4 font-mono text-xs\">\n                <pre className=\"leading-relaxed\">\n                  <code>{generatedStream}</code>\n                </pre>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/feature-bento-ai-copilot/FeatureBentoAiCopilot.tsx"
    },
    {
      "path": "packages/registry-react/blocks/feature-bento-ai-copilot/index.ts",
      "content": "export { FeatureBentoAiCopilot } from './FeatureBentoAiCopilot'\nexport type { FeatureBentoAiCopilotProps } from './FeatureBentoAiCopilot'\n",
      "type": "registry:block",
      "target": "~/components/blocks/feature-bento-ai-copilot/index.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "AI agent copilot bento workbench with model tuning sliders, live inference streaming, and token speed telemetry.",
  "categories": [
    "feature",
    "marketing"
  ]
}