{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "feature-bento-ai-copilot", "title": "Feature Bento Ai Copilot", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/feature-bento-ai-copilot/feature-bento-ai-copilot.component.ts", "content": "// AI agent copilot bento workbench with model tuning sliders, live inference\n// streaming, and token speed telemetry. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n Activity,\n ArrowRight,\n BrainCircuit,\n Check,\n Copy,\n Cpu,\n LucideAngularModule,\n Play,\n Sliders,\n Sparkles,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\n\nexport type CopilotModel = 'sonnet' | 'gpt4o' | 'gemini'\n\nexport interface CopilotModelMetrics {\n name: string\n ttftMs: number\n tokPerSec: number\n costPer1k: string\n}\n\nconst models: { id: CopilotModel; label: string }[] = [\n { id: 'sonnet', label: 'Sonnet 3.5' },\n { id: 'gpt4o', label: 'GPT-4o' },\n { id: 'gemini', label: 'Gemini Pro' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-feature-bento-ai-copilot, [ui-feature-bento-ai-copilot]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent, UiCardContentComponent],\n template: `\n
\n
\n \n
\n \n \n Next-Gen AI Agent Workbench\n \n \n\n

{{ title }}

\n\n

{{ description }}

\n
\n\n \n
\n \n \n
\n
\n
\n \n Inference Hyperparameters\n
\n \n {{ modelMetrics().name }}\n \n
\n\n \n
\n \n
\n @for (model of models; track model.id) {\n \n }\n
\n
\n\n \n
\n
\n Sampling Temperature\n {{ temperature() }}\n
\n \n
\n 0.0 (Deterministic)\n 1.0 (Creative)\n
\n
\n\n \n
\n \n \n
\n\n \n \n @if (!isGenerating()) {\n \n } @else {\n \n }\n {{ isGenerating() ? 'Streaming Inference...' : 'Synthesize UI Primitive' }}\n \n
\n
\n\n \n \n
\n \n
\n
\n \n Live Streaming Synthesis\n
\n\n
\n \n @if (copied()) {\n \n } @else {\n \n }\n {{ copied() ? 'Copied' : 'Copy SFC' }}\n \n
\n
\n\n \n
\n
\n
\n \n TTFT\n
\n
{{ modelMetrics().ttftMs }}ms
\n
\n
\n
\n \n Velocity\n
\n
{{ modelMetrics().tokPerSec }} tok/s
\n
\n
\n
\n \n Cost\n
\n
{{ modelMetrics().costPer1k }}/1k
\n
\n
\n\n \n \n 
{{ generatedStream() }}
\n
\n
\n \n \n \n
\n `,\n})\nexport class UiFeatureBentoAiCopilotComponent {\n protected readonly Activity = Activity\n protected readonly ArrowRight = ArrowRight\n protected readonly BrainCircuit = BrainCircuit\n protected readonly Check = Check\n protected readonly Copy = Copy\n protected readonly Cpu = Cpu\n protected readonly Play = Play\n protected readonly Sliders = Sliders\n protected readonly Sparkles = Sparkles\n protected readonly Zap = Zap\n\n protected readonly models = models\n\n @Input() title = 'AI Copilot tooling built directly into your component architecture.'\n @Input() 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 @Input('class') className?: string\n\n readonly selectedModel = signal('sonnet')\n readonly temperature = signal(0.2)\n readonly isGenerating = signal(false)\n readonly systemPrompt = signal(\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 readonly generatedStream = signal(\n ``,\n )\n readonly copied = signal(false)\n\n private copyTimer: ReturnType | undefined\n private generateTimer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => {\n clearTimeout(this.copyTimer)\n clearTimeout(this.generateTimer)\n })\n }\n\n readonly modelMetrics = computed(() => {\n if (this.selectedModel() === 'sonnet') {\n return { name: 'Claude 3.5 Sonnet', ttftMs: 180, tokPerSec: 142, costPer1k: '$0.003' }\n }\n if (this.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 })\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden py-16 sm:py-24', this.className)\n }\n\n modelButtonClass(id: CopilotModel): string {\n return cn(\n 'rounded-lg border p-2 text-center text-xs font-medium transition-colors',\n this.selectedModel() === id\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\n setTemperature(event: Event): void {\n this.temperature.set(parseFloat((event.target as HTMLInputElement).value))\n }\n\n async copyCode(): Promise {\n try {\n await navigator.clipboard.writeText(this.generatedStream())\n this.copied.set(true)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.copied.set(false), 2000)\n } catch {\n // fallback\n }\n }\n\n triggerGeneration(): void {\n this.isGenerating.set(true)\n clearTimeout(this.generateTimer)\n this.generateTimer = setTimeout(() => this.isGenerating.set(false), 1200)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/feature-bento-ai-copilot/feature-bento-ai-copilot.component.ts" }, { "path": "packages/registry-angular/blocks/feature-bento-ai-copilot/index.ts", "content": "export {\n UiFeatureBentoAiCopilotComponent,\n type CopilotModel,\n type CopilotModelMetrics,\n} from './feature-bento-ai-copilot.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/feature-bento-ai-copilot/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json" ], "description": "AI agent copilot bento workbench with model tuning sliders, live inference streaming, and token speed telemetry.", "categories": [ "feature", "marketing" ] }