generative-ui-patterns

# Generative UI Patterns

**Purpose:** Provide reusable templates, patterns, and validation scripts for implementing Generative UI with Vercel AI SDK RSC (React Server Components).

**Activation Triggers:**
- Building generative UI interfaces
- Implementing AI SDK RSC patterns
- Creating server-side streaming components
- Dynamic UI generation based on AI responses
- Client-server component coordination
- Next.js App Router RSC integration

**Key Resources:**
- `templates/server-action-pattern.tsx` - Server action template for AI RSC
- `templates/streaming-component.tsx` - Streaming component pattern
- `templates/client-wrapper.tsx` - Client component wrapper pattern
- `templates/route-handler.ts` - API route handler for streaming UI
- `scripts/validate-rsc-setup.sh` - Validate Next.js RSC configuration
- `scripts/generate-ui-component.sh` - Generate UI component from schema
- `examples/` - Real-world generative UI implementations

## Core Patterns

### 1. Server Action Pattern (AI SDK RSC)

**When to use:** Next.js App Router with React Server Components

**Template:** `templates/server-action-pattern.tsx`

**Pattern:**
```typescript
'use server'
import { streamUI } from 'ai/rsc'
import { openai } from '@ai-sdk/openai'

export async function generateUI(prompt: string) {
  const result = await streamUI({
    model: openai('gpt-4')
    prompt
    text: ({ content }) => <p>{content}</p>
    tools: {
      // Tool definitions for dynamic UI generation
    }
  })

  return result.value
}
```

**Key features:**
- Server-side only execution (security)
- Streaming UI components to client
- Tool-based dynamic component selection
- Type-safe component generation

### 2. Streaming Component Pattern

**When to use:** Need real-time UI updates during AI generation

**Template:** `templates/streaming-component.tsx`

**Pattern:**
- Server component streams UI chunks
- Client component receives and renders
- Suspense boundaries for loading states
- Error boundaries for failure han