> ## Documentation Index
> Fetch the complete documentation index at: https://docs.morphllm.com/llms.txt
> Use this file to discover all available pages before exploring further.
# GenKit
> SDK for building generative UI applications where AI creates and renders React components in real-time
# 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
Secure iframe rendering for AI-generated components with PostMessage data passing
Production-ready component display with Run, Copy, Regenerate, Download, Share actions
Persist user-generated components with Prisma, Drizzle, or custom adapters
Validate and compile generated code with security checks
## Quick Start
### Installation
```bash theme={null}
npm install genkit
```
### Basic Usage
```tsx theme={null}
import { VibeFrame } from 'genkit/react'
// Render AI-generated code in a secure sandbox
function Preview({ code, data }) {
return (
console.log('Component rendered')}
onError={(err) => console.error('Render error:', err)}
/>
)
}
```
### With Artifact Container
```tsx theme={null}
import { VibeArtifact } from 'genkit/react'
// Full-featured component display with actions
function ComponentPreview({ component, onRegenerate }) {
return (
copyShareLink()}
/>
)
}
```
### Persisting Components
```tsx theme={null}
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:
```tsx theme={null}
```
* **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:
```tsx theme={null}
// 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
Deep dive into secure component rendering
Build production-ready component displays
Persist components with your database
See GenKit in action with real examples