# JSON Prompt Generator - LLMs.txt

## Project Overview
JSON Prompt Generator is a professional web application that helps users create structured JSON prompts for AI video generation tools, particularly optimized for Google's Veo 3 model. The application provides both manual JSON generation and AI-powered text-to-JSON conversion capabilities.

## Core Purpose
- Generate professional, structured JSON prompts for AI video generators
- Convert natural language descriptions into technical JSON specifications
- Provide Veo 3-ready prompt templates and presets
- Offer both manual builder and AI-powered conversion tools

## Technology Stack
- **Frontend**: React 18 with Vite
- **Styling**: Tailwind CSS with custom components
- **Routing**: React Router v6
- **AI Integration**: Groq API (Llama 3.1-8b-instant model)
- **Analytics**: Google Analytics 4, Ahrefs, Microsoft Clarity
- **Deployment**: Static hosting optimized

## Recent Integrations
- Open Graph/Twitter: Per-route static HTML under `public/<route>/index.html` for accurate social previews; runtime meta updates via `useSEO` in `src/App.jsx`.
- Ahrefs Analytics: Script added to `index.html` and all static route pages.
- Google Funding Choices: Script added to `index.html` and all static route pages.
- Microsoft Clarity: Lightweight initializer in `src/lib/clarity.js`, called from `src/main.jsx`.

## Environment Variables
- `VITE_CLARITY_ID`: Microsoft Clarity Project ID (example: `ttlxuvrsq1`). Set in `.env` and restart dev server.

## Project Structure

### Key Directories
```
src/
├── components/          # React components
│   ├── ui/            # Reusable UI components (buttons, inputs, etc.)
│   └── [PageName].jsx # Individual page components
├── lib/               # Utility libraries
└── main.jsx          # Application entry point
```

### Main Components
- **App.jsx**: Main application with routing and navigation
- **TextToJsonPage.jsx**: AI-powered text-to-JSON converter
- **GeneratorPage**: Manual JSON builder with presets
- **HeroSection.jsx**: Landing page hero section
- **FAQSection.jsx**: Frequently asked questions
- **Footer.jsx**: Site footer with navigation links

## Key Features

### 1. AI JSON Builder
- Natural language to JSON conversion
- Groq API integration for intelligent prompt generation
- Error handling with retry mechanisms and rate limiting
- Beautiful loading animations and user feedback

### 2. Manual JSON Generator
- Step-by-step form-based JSON creation
- Professional presets for common video styles
- Camera settings, lighting, and audio specifications
- Real-time JSON preview and validation

### 3. SEO & Performance
- Comprehensive Schema.org markup
- Open Graph and Twitter Card optimization
- Internal linking strategy for better SEO
- Responsive design for all devices

### 4. User Experience
- Professional loading states and animations
- Comprehensive error handling and user feedback
- Rate limiting and traffic management
- Accessibility and mobile optimization

## API Integration

### Groq API Usage
- **Model**: llama-3.1-8b-instant
- **Purpose**: Text-to-JSON conversion for video prompts
- **Rate Limiting**: Built-in handling for 429 responses
- **Error Handling**: Comprehensive error management with retry logic

### API Endpoints
- `https://api.groq.com/openai/v1/chat/completions`
- Used for converting user descriptions to structured JSON

## JSON Schema Structure

### Veo 3 Optimized Format
```json
{
  "model": "veo-3",
  "version": "1.0",
  "title": "Video Title",
  "description": "Video description",
  "duration_seconds": 9,
  "fps": 24,
  "resolution": "1080p",
  "aspect_ratio": "16:9",
  "style": { /* visual specifications */ },
  "audio": { /* audio specifications */ },
  "shots": [ /* shot-by-shot breakdown */ ],
  "negative_prompts": [ /* what to avoid */ ]
}
```

## Development Guidelines

### Code Style
- Functional components with hooks
- Consistent naming conventions
- Proper error handling and user feedback
- Responsive design principles

### State Management
- Local state with useState for component-level state
- useEffect for side effects and API calls
- Proper loading and error state management

### Error Handling
- Comprehensive try-catch blocks
- User-friendly error messages
- Retry mechanisms for transient failures
- Rate limiting and traffic management

## SEO Implementation

### Schema.org Markup
- Organization schema for company information
- WebSite schema for site search functionality
- SoftwareApplication schema for the tool itself
- Product schema for marketing purposes
- FAQ schema for search result enhancement
- HowTo schema for user guidance

### Meta Tags
- Open Graph tags for social media sharing
- Twitter Card optimization
- Comprehensive meta descriptions
- Canonical URLs and proper linking

## Performance Considerations

### Loading States
- 2-second artificial delays to reduce API load
- Beautiful loading animations for user engagement
- Progressive enhancement and graceful degradation

### Error Management
- Automatic retry mechanisms (up to 3 attempts)
- Smart retry delays based on error types
- User education about rate limiting and traffic

## File Organization

### Public Assets
- Favicons and app icons
- Robots.txt and sitemap.xml
- Web app manifest for PWA capabilities
- Social media images

### Source Code
- Modular component architecture
- Reusable UI components
- Utility functions and analytics
- Preset data and configurations

## Deployment

### Build Process
- Vite-based build system
- Optimized for static hosting
- SEO-friendly output
- Performance optimization

### Hosting
- Static file hosting
- CDN optimization
- SEO and performance monitoring
- Analytics integration

## Maintenance Notes

### Regular Updates
- Monitor API rate limits and performance
- Update presets and examples
- Maintain SEO optimization
- User feedback integration

### Monitoring
- Google Analytics for user behavior
- Error tracking and reporting
- Performance metrics
- SEO performance tracking

## Contact Information
- **Website**: https://jsonpromptgenerator.net
- **Email**: info@jsonpromptgenerator.net
- **Repository**: https://github.com/muzammilijaz/veo3json.git

## Version History
- **Current Version**: 1.0
- **Last Updated**: January 2025
- **Major Features**: AI JSON Builder, Manual Generator, SEO Optimization, Error Handling

This project represents a professional-grade tool for AI video prompt generation, with emphasis on user experience, SEO optimization, and reliable performance under high traffic conditions.