Skip to main content

​
GenKit

GenKit is an SDK for building applications where AI generates UI components on demand. Instead of building static interfaces that anticipate every user need, GenKit enables “vibe coding”—users describe what they want, and the AI generates it instantly.

​
The Vision

Software has always been static. Developers write code, users interact with predetermined interfaces. GenKit changes this paradigm:
  • Users describe what they want in natural language
  • AI generates React components with Tailwind CSS
  • Components render instantly in sandboxed iframes
  • Users save useful components for later
This is the future of software—interfaces that adapt to users, not users adapting to interfaces.

​
Core Components

VibeFrame

Secure iframe rendering for AI-generated components with PostMessage data passing

VibeArtifact

Production-ready component display with Run, Copy, Regenerate, Download, Share actions

Vibe Storage

Persist user-generated components with Prisma, Drizzle, or custom adapters

Vibe Compiler

Validate and compile generated code with security checks

​
Quick Start

​
Installation

npm install genkit

​
Basic Usage

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)}
    />
  )
}

​
With Artifact Container

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()}
    />
  )
}

​
Persisting Components

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 })

​
Architecture

GenKit follows a minimal, composable architecture: 
┌─────────────────────────────────────────────────────────────┐
│                      Your Application                        │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │   AI Model  │  │  GenKit SDK │  │   Your Data Layer   │  │
│  │  (Claude,   │  │             │  │   (Prisma, etc.)    │  │
│  │   GPT, etc) │  │ VibeFrame   │  │                     │  │
│  │             │  │ VibeArtifact│  │                     │  │
│  │  Generates  │──│ Storage     │──│  Persists           │  │
│  │  React code │  │ Compiler    │  │  components         │  │
│  └─────────────┘  └─────────────┘  └─────────────────────┘  │
└─────────────────────────────────────────────────────────────┘
GenKit handles:
  • Secure code execution in sandboxed iframes
  • PostMessage communication for data passing
  • Component validation and compilation
  • Storage adapters for persistence
You bring:
  • Your AI model of choice
  • Your application data
  • Your authentication/authorization
  • Your deployment infrastructure

​
Security Model

Generated code runs in sandboxed iframes with strict policies: 
<iframe
  sandbox="allow-scripts"  // No same-origin, no forms, no popups
  src={dataUrl}            // Code loaded via data URL
/>
  • No DOM access to parent window
  • No network requests from generated code
  • No localStorage/cookies access
  • PostMessage only communication
The compiler also validates code before execution: 
// Blocked patterns
eval()           // ❌ Dynamic code execution
Function()       // ❌ Function constructor
import()         // ❌ Dynamic imports
window.          // ❌ Window access
document.        // ❌ Document access

​
Use Cases

​
Dashboard Widgets

Users create custom visualizations for their data: 
"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"

​
Internal Tools

Generate admin interfaces on demand: 
"Make a form to update user permissions"
"Create a data grid with filtering and sorting"
"Build a workflow diagram of our approval process"

​
Prototyping

Rapid iteration without writing code: 
"Design a pricing page with 3 tiers"
"Create a hero section with animated background"
"Build a testimonial carousel"

​
Next Steps

VibeFrame Guide

Deep dive into secure component rendering

VibeArtifact Guide

Build production-ready component displays

Storage Adapters

Persist components with your database

Examples

See GenKit in action with real examples