npm install genkit

import { VibeFrame } from 'genkit/react'

// Render AI-generated code in a secure sandbox
function Preview({ code, data }) {
  return (
    <VibeFrame
      code={code}
      data={data}
      onRender={() => console.log('Component rendered')}
      onError={(err) => console.error('Render error:', err)}
    />
  )
}

import { VibeArtifact } from 'genkit/react'

// Full-featured component display with actions
function ComponentPreview({ component, onRegenerate }) {
  return (
    <VibeArtifact
      name={component.name}
      description={component.description}
      code={component.code}
      data={appData}
      onRegenerate={onRegenerate}
      onShare={() => copyShareLink()}
    />
  )
}

import { createVibeApi, createPrismaStorage } from 'genkit'

const vibe = createVibeApi({
  storage: createPrismaStorage(prisma)
})

// Save a generated component
await vibe.save({
  userId: user.id,
  name: 'Sales Dashboard',
  description: 'Pipeline visualization',
  code: generatedCode
})

// Load saved components
const components = await vibe.list({ userId: user.id })

┌─────────────────────────────────────────────────────────────┐
│                      Your Application                        │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │   AI Model  │  │  GenKit SDK │  │   Your Data Layer   │  │
│  │  (Claude,   │  │             │  │   (Prisma, etc.)    │  │
│  │   GPT, etc) │  │ VibeFrame   │  │                     │  │
│  │             │  │ VibeArtifact│  │                     │  │
│  │  Generates  │──│ Storage     │──│  Persists           │  │
│  │  React code │  │ Compiler    │  │  components         │  │
│  └─────────────┘  └─────────────┘  └─────────────────────┘  │
└─────────────────────────────────────────────────────────────┘

<iframe
  sandbox="allow-scripts"  // No same-origin, no forms, no popups
  src={dataUrl}            // Code loaded via data URL
/>

// Blocked patterns
eval()           // ❌ Dynamic code execution
Function()       // ❌ Function constructor
import()         // ❌ Dynamic imports
window.          // ❌ Window access
document.        // ❌ Document access

"Show me a pie chart of deals by status"
"Create a table of contacts sorted by last activity"
"Build a card showing this month's revenue"

"Make a form to update user permissions"
"Create a data grid with filtering and sorting"
"Build a workflow diagram of our approval process"

"Design a pricing page with 3 tiers"
"Create a hero section with animated background"
"Build a testimonial carousel"