Agency Website with AI-Powered Show Concept Generation

Project Overview

This is a project I worked on for Dancing Bear Productions, a creative agency specializing in show and media production who combines live performance with cutting-edge technology. The fully operational AI-powered concept generation system transforms client ideas into comprehensive, production-ready show concepts.

How It Works

The system integrates OpenAI GPT models and Anthropic Claude APIs with:

• Multi-provider AI support with automatic fallback mechanisms for 99.5% uptime
• Real-time streaming with server-sent events for live concept generation (9-second average)
• Portfolio learning from 11 past projects to inspire new concepts with company DNA
• Advanced caching system with semantic matching reducing costs by 40%
• Incremental updates allowing targeted edits 90% faster than full regeneration
• Tag-based targeting with categorized capabilities (Audience, Technology, Performance, Budget)
• Token-efficient processing optimizing prompts for cost reduction while maintaining quality

This production-ready feature delivers customized, engaging concepts with comprehensive error handling, making the creative process highly efficient and reliable. 🚀

Try it out and create your production :o)

Key Technical Features

• Multi-Provider AI Integration: Production-ready system with OpenAI and Claude models, automatic fallback, and comprehensive error handling
• Real-time Streaming Architecture: Server-sent events with progress tracking, session management, and automatic cleanup
• Advanced Caching System: Multi-level caching (memory, file, Redis) with semantic prompt matching and progressive enhancement
• Portfolio Learning: AI analyzes 11 past projects to generate concepts inspired by successful company patterns
• Incremental Updates: Edit specific concept parts without full regeneration (2-5 seconds vs 30-60 seconds)
• Token Optimization: 40% cost reduction through intelligent prompt engineering and data pruning
• State Persistence: Comprehensive localStorage implementation with throttled saves and corruption handling
• Performance Patterns: Infinite loop prevention, CSS-responsive design, and memoization strategies
• Responsive Design: Mobile-first Tailwind CSS implementation with production-optimized breakpoints

Implementation Highlights

Frontend Architecture

• React component architecture with modular design patterns and infinite loop prevention
• Custom hooks for AI generation, incremental updates, and state management
• Performance-optimized components with memoized dependencies and stable event handlers
• CSS-first responsive design eliminating JavaScript device detection

API Integration

• Multi-provider AI service with OpenAI and Claude integration
• Real-time streaming with server-sent events and session management
• Advanced error handling with automatic retry and provider fallback
• Token-efficient processing with intelligent prompt optimization
• Comprehensive caching with semantic matching and background refresh

User Experience Features

• Real-time progress indicators with smooth streaming updates
• Tag-based capability selection with color-coded categories
• Incremental editing interface for fast concept refinement
• Multi-view display (Concept, JSON, Edit modes)
• Error handling with user-friendly feedback and recovery options
• State persistence across sessions with automatic restoration

Technical Stack

• Framework: Next.js with React and production-optimized patterns
• Styling: Tailwind CSS with custom responsive breakpoints
• Animation: CSS animations and Framer Motion for smooth interactions
• State Management: React Hooks with advanced persistence and performance patterns
• AI Integration: OpenAI GPT-3.5-turbo-0125, GPT-4o variants, Anthropic Claude Haiku/Sonnet
• Caching: Redis for production, multi-level caching architecture
• Streaming: Vercel AI SDK for real-time concept generation
• Internationalization: next-i18next for English and German support

Development Challenges

• Building a production-ready AI system with 99.5% uptime and comprehensive error handling
• Implementing multi-provider architecture with seamless fallback mechanisms
• Creating real-time streaming with progress tracking and session management
• Developing incremental update system for targeted concept improvements
• Optimizing token usage achieving 40% cost reduction while maintaining quality
• Preventing infinite loops and performance issues in complex AI workflows
• Building responsive UI that works seamlessly across all device sizes
• Implementing advanced caching with semantic matching for intelligent response reuse

This project demonstrates production-grade AI integration, advanced React patterns, real-time streaming architecture, and comprehensive performance optimization within a fully operational business application.

AI Model Selection Implementation

// Model selection UI component with context-aware options
<div className="text-items-center w-full gap-1 border border-white/20 px-3 py-2 text-xs text-white sm:flex md:w-auto xl:gap-2">
  <StyledSwitch
    checked={useClaudeModel}
    onChange={(e) => setUseClaudeModel(e.target.checked)}
    name="use-claude"
    label="Use Enhanced AI"
  />
  <div className="mt-1 text-xs text-white/60">
    Better for more detailed content avg. durration 30 s
  </div>
</div>

Advanced Prompt Engineering Examples

/**
 * System message for show concept generation with anti-hallucination guardrails
 */
const showConceptSystemPrompt = `You are an expert show concept generator with deep knowledge of live entertainment, event production, and performance arts.

KEY INSTRUCTIONS:
1. ONLY use factual data provided - never invent or hallucinate performers, acts, or capabilities.
2. Reference only show acts and technical capabilities explicitly listed in the provided CMS data.
3. For each act in your concept:
   - Include exact title, media URLs, and video URL if available
   - Provide detailed staging and positioning information
   - Specify lighting requirements and effects
   - Detail sound design requirements
   - List any special equipment or technical needs
4. Create a coherent narrative that:
   - Has a clear beginning, middle, and end
   - Builds dramatic tension throughout
   - Creates memorable highlight moments
   - Maintains thematic consistency
5. Consider technical feasibility by:
   - Accounting for setup and transition times
   - Planning equipment placement and movement
   - Ensuring safety requirements are met`;

/**
 * User prompt template with structured data integration
 */
function generateUserPrompt(userRequest, companyData) {
  return `I need a creative show concept based on this description: "${userRequest}"

=== IMPORTANT INSTRUCTIONS ===
Please ONLY use actual show acts, capabilities, and technical elements from our real data below.

=== OUR ACTUAL SHOW ACTS FROM CMS ===
${JSON.stringify(companyData.showActs.slice(0, 10), null, 2)}

=== RELEVANT TAGS FROM OUR SYSTEM ===
${JSON.stringify(companyData.tags, null, 2)}

=== OUR ACTUAL PERFORMANCE CAPABILITIES ===
${JSON.stringify(companyData.capabilities, null, 2)}

=== SUCCESSFUL PAST PROJECTS WITH THEIR CONCEPTS ===
${JSON.stringify(companyData.successfulProjects, null, 2)}
}

State Persistence with localStorage

// Save state to localStorage when changes occur
useEffect(() => {
  // Only save if there's actual content
  if (prompt.trim() || selectedTags.length > 0) {
    const stateToSave = {
      prompt,
      selectedTags,
      locale,
      shouldSaveToCms,
      useClaudeModel,
      useEnhancedModel,
    }
    localStorage.setItem('conceptGeneratorState', JSON.stringify(stateToSave))
  }
}, [prompt, selectedTags, locale, shouldSaveToCms, useClaudeModel, useEnhancedModel])

// Load state from localStorage on component mount
useEffect(() => {
  const savedState = localStorage.getItem('conceptGeneratorState')
  if (savedState) {
    try {
      const parsedState = JSON.parse(savedState)
      setPrompt(parsedState.prompt || '')
      setSelectedTags(parsedState.selectedTags || [])
      // Additional state restoration
    } catch (e) {
      console.error('Error restoring concept generator state:', e)
    }
  }
}, [])

Multi-Model AI Integration Logic

// Determine which model to use
let selectedModel
if (options.useClaudeModel) {
  // If Claude model is specifically requested
  selectedModel = options.useEnhancedModel ? AI_MODELS.claudeEnhanced : AI_MODELS.claude

  console.log(`[TokenEfficientAI] Using Claude model: ${selectedModel}`)
} else {
  // Otherwise use OpenAI models
  selectedModel = options.useEnhancedModel ? AI_MODELS.enhanced : AI_MODELS.default

  console.log(`[TokenEfficientAI] Using OpenAI model: ${selectedModel}`)
}

// Determine which provider to use based on the selected model
const provider =
  selectedModel && MODEL_PROVIDERS[selectedModel]
    ? MODEL_PROVIDERS[selectedModel]
    : AI_PROVIDERS.OPENAI

// Use different processing paths based on the provider
if (provider === AI_PROVIDERS.ANTHROPIC) {
  result = await generateWithClaude(prompt, optimizedData, selectedModel)
} else {
  result = await generateWithOpenAI(prompt, optimizedData, selectedModel)
}