sleekcms-next

Generate complete, fully-functional Next.js applications directly from your SleekCMS content structure with optional AI-powered code generation.

Features

• 🚀 Instant Next.js Apps: Create production-ready Next.js 14+ applications in seconds
• 🤖 AI-Powered Generation: Use OpenAI GPT-4 to intelligently generate contextually appropriate components
• 📡 Smart Data Inference: Automatically detects pages, collections, and data structures from SleekCMS
• 🎨 Intelligent Components: Generates optimized React components for products, HTML content, lists, and more
• 🎯 Built-in Styling: Tailwind CSS configured out of the box
• 📱 Responsive Design: Mobile-first responsive layouts automatically generated
• 🔐 Type Safe: Full TypeScript support included

Installation & Usage

Basic Usage (Template-Based)

npx sleekcms-next <YOUR_SLEEKCMS_TOKEN>

Interactive AI Provider Selection

npx sleekcms-next <YOUR_SLEEKCMS_TOKEN> --ai

This will prompt you to choose an AI provider via keyboard:

1. OpenAI (GPT-4) - Most advanced, $0.03/1K tokens
2. Claude 3 (Anthropic) - Cost-effective, $0.003/1K tokens
3. Gemini (Google) - Free tier available
4. Skip AI - Use template-based generation

Direct AI Provider Usage

OpenAI:

npx sleekcms-next dev-mysite-abc123 --openai-key=sk-proj-...

Claude (Anthropic):

npx sleekcms-next dev-mysite-abc123 --claude-key=sk-ant-...

Gemini (Google):

npx sleekcms-next dev-mysite-abc123 --gemini-key=AIza...

Examples

Without AI (Fast, Template-Based)

npx sleekcms-next dev-mysite-abc123xyz456

With Interactive Provider Selection

npx sleekcms-next dev-mysite-abc123xyz456 --ai

Then select your preferred AI provider from the menu.

Direct Provider Selection

npx sleekcms-next dev-mysite-abc123xyz456 --openai-key=sk-proj-...

The AI will:

• Analyze your content structure
• Generate beautiful, contextually appropriate components
• Apply modern design patterns
• Create better user experiences
• Use appropriate spacing, hover effects, and animations

This will:

1. Fetch your SleekCMS content structure
2. Analyze pages, collections, and field types
3. [If AI enabled] Use your chosen AI provider to generate intelligent, contextually aware components
4. [If AI disabled] Use smart template-based component generation
5. Create a complete Next.js project with Tailwind CSS
6. Create .env.local with your token pre-configured

Why Use AI Mode?

| Feature | Template-Based | AI-Powered | |---------|---------------|-----------| | Speed | ⚡ Very Fast | 🐢 ~10-30s per page | | Cost | 💰 Free | 💳 Varies by provider | | Quality | ✅ Good | 🌟 Excellent | | Customization | 📋 Standard layouts | 🎨 Contextually optimized | | Design Patterns | 📐 Template-based | 🤖 AI understands content | | Creativity | 🔄 Predictable | ✨ Creative & Adaptive |

AI Provider Comparison

| Provider | Cost | Speed | Quality | Free Tier | |----------|------|-------|---------|-----------| | OpenAI GPT-4 | $0.03/1K tokens | Fast | Excellent | ❌ | | Claude 3 | $0.003/1K tokens | Fast | Excellent | ❌ | | Gemini | Variable | Medium | Good | ✅ |

Recommendation:

• Use template mode for quick prototypes or testing
• Use Claude for best cost-efficiency
• Use OpenAI for highest quality
• Use Gemini for free tier with reasonable quality

Getting API Keys

OpenAI (GPT-4)

1. Visit OpenAI Platform
2. Sign up or log in
3. Create a new API key
4. Copy the key (starts with sk-proj-...)
5. Use with: --openai-key=sk-proj-...
6. Cost: ~$0.01-0.05 per page

Claude (Anthropic)

1. Visit Anthropic Console
2. Sign up or log in
3. Create a new API key
4. Copy the key (starts with sk-ant-...)
5. Use with: --claude-key=sk-ant-...
6. Cost: ~$0.001-0.01 per page (more cost-efficient)

Gemini (Google)

1. Visit Google AI Studio
2. Click "Create API Key"
3. Copy your API key (starts with AIza...)
4. Use with: --gemini-key=AIza...
5. Free tier available with rate limits

Token Format

Your SleekCMS token should be in the format: environment-siteId-apiKey

For example: dev-my-site-abc123xyz456

Getting Started with Generated App

cd sleekcms-app-<timestamp>
npm install
npm run dev

Then open http://localhost:3000 in your browser.

What Gets Generated

Pages

• One page component for each SleekCMS page
• Automatic routing based on page slugs
• Tailwind-styled layouts

Components

• Product Cards: Grid layouts for product collections
• Lists: Styled lists for menu items, job listings, etc.
• HTML Content: Rich text with Tailwind prose styling
• Images: Responsive image components

Config Files

• next.config.js - Next.js configuration
• tsconfig.json - TypeScript configuration
• tailwind.config.ts - Tailwind CSS setup
• postcss.config.js - PostCSS configuration
• .env.local - Environment variables (token pre-filled)

Supported Data Structures

Product Collections

Automatically generates beautiful product grids:

{
  "products": [
    {
      "product_name": "Product Name",
      "product_description": "<p>Description</p>",
      "price": "$9.99",
      "product_image": { "url": "..." }
    }
  ]
}

Text Lists

Styled bullet lists:

{
  "items": ["Item 1", "Item 2", "Item 3"]
}

HTML Content

Rich HTML rendered with prose styling:

{
  "description": "<h1>Welcome</h1><p>Content here...</p>"
}

Images

Responsive images with proper aspect ratios:

{
  "hero_image": {
    "url": "https://...",
    "description": "Alt text",
    "attribution": { "name": "Creator" }
  }
}

Environment Variables

After generation, the .env.local file will contain:

• SLEEKCMS_TOKEN - Your API token
• SLEEKCMS_API_URL - Your API endpoint

You can modify these to point to different sites without regenerating.

Development

Built-in Scripts

npm run dev     # Start development server
npm run build   # Build for production
npm start       # Run production server
npm run lint    # Run ESLint

Customization

The generated app is fully yours to customize! You can:

• Modify component styling in app/globals.css
• Update Tailwind config in tailwind.config.ts
• Add new pages and components as needed
• Integrate with other services

How It Works

1. Token Parsing: Extracts environment, site ID, and API key from your token
2. API Fetch: Retrieves your SleekCMS content structure
3. Structure Analysis:
   • Identifies pages and their slugs
   • Detects collections (arrays of items)
   • Infers field types (images, HTML, lists, products)
4. Component Generation: Creates optimized React/Next.js components
5. Project Scaffolding: Generates complete Next.js boilerplate

Requirements

• Node.js 18 or higher
• npm 8 or higher

License

MIT

Support

For issues, feature requests, or questions about SleekCMS, visit:

• SleekCMS Documentation
• SleekCMS GitHub