06_nextjs_app_generator/

06_nextjs_app_generator.rs

//! Next.js App Generator Example
//!
//! This example demonstrates how to use a Ceylon Agent to:
//! - Create a goal-based task for generating a Next.js application
//! - Use tools to interact with the file system and run commands
//! - Extract structured output from the agent's work
//! - Display generated code and configuration
//!
//! The agent will:
//! 1. Analyze the requirements for a Next.js app
//! 2. Generate project structure and configuration files
//! 3. Create essential components and pages
//! 4. Output the complete generated code
//!
//! Run with: cargo run --example 06_nextjs_app_generator --manifest-path ceylon/Cargo.toml

use ceylon_next::agent::Agent;
use ceylon_next::goal::{Goal, GoalStatus};
use ceylon_next::tasks::{OutputData, TaskRequest};
use std::collections::HashMap;

// ============================================
// Helper: Extract task output
// ============================================

fn extract_output_text(output: &OutputData) -> String {
    match output {
        OutputData::Text(text) => text.clone(),
        OutputData::File(bytes) => String::from_utf8_lossy(bytes).to_string(),
        _ => "No text output available".to_string(),
    }
}

// ============================================
// Example 1: Basic Next.js App Generation
// ============================================

async fn example_1_basic_nextjs_app() {
    println!("=== Example 1: Generate a Basic Next.js App ===\n");

    // Create an agent that will generate the app
    let mut agent = Agent::new("NextJsGenerator", "ollama::gemma3:latest");

    // Create a goal for generating a Next.js app
    let mut goal = Goal::new(
        "Generate a Next.js web application with essential structure".to_string()
    );

    // Define success criteria
    goal.add_criterion("package.json created with dependencies".to_string());
    goal.add_criterion("next.config.js configuration file generated".to_string());
    goal.add_criterion("pages directory with index and api route created".to_string());
    goal.add_criterion("styles directory with global CSS".to_string());
    goal.add_criterion("README.md with setup instructions".to_string());

    // Define sub-goals (steps to generate the app)
    goal.add_sub_goal("Analyze Next.js requirements and best practices".to_string(), 0);
    goal.add_sub_goal("Generate package.json with required dependencies".to_string(), 1);
    goal.add_sub_goal("Create next.config.js configuration".to_string(), 2);
    goal.add_sub_goal("Generate pages (index.tsx, _app.tsx, _document.tsx)".to_string(), 3);
    goal.add_sub_goal("Create API route examples".to_string(), 4);
    goal.add_sub_goal("Generate styling setup (global.css, utilities)".to_string(), 5);
    goal.add_sub_goal("Create components directory with example components".to_string(), 6);
    goal.add_sub_goal("Generate README with setup and usage instructions".to_string(), 7);

    goal.status = GoalStatus::InProgress;
    agent.set_goal(goal.clone());

    // Create a task to generate a Next.js app
    let task = TaskRequest::new(
        "Generate a modern Next.js 14 application with TypeScript, Tailwind CSS, and best practices. \
         Include package.json, next.config.js, sample pages, API routes, and components. \
         The app should be production-ready and follow Next.js conventions."
    );

    println!("📝 Task: Generate a Next.js application\n");
    println!("🎯 Success Criteria:");
    for criterion in &goal.success_criteria {
        println!("  • {}", criterion.description);
    }

    println!("\n⏳ Agent is generating the Next.js app...\n");
    let response = agent.run(task).await;

    // Extract and display the output
    let output = extract_output_text(&response.result());
    println!("📄 Generated Output:\n");
    println!("{}\n", output);

    // Show progress
    println!("📊 Goal Progress: {}%", goal.get_progress());
    println!("Status: {:?}", goal.status);

    println!("\n✅ Example 1 completed!\n");
}

// ============================================
// Example 2: E-Commerce Next.js App
// ============================================

async fn example_2_ecommerce_app() {
    println!("\n=== Example 2: Generate E-Commerce Next.js App ===\n");

    let mut agent = Agent::new("EcommerceGenerator", "ollama::gemma3:latest");

    let mut goal = Goal::new(
        "Generate a complete e-commerce Next.js application".to_string()
    );

    // Success criteria for e-commerce
    goal.add_criterion("Product listing page with filtering and sorting".to_string());
    goal.add_criterion("Product detail pages with dynamic routes".to_string());
    goal.add_criterion("Shopping cart functionality".to_string());
    goal.add_criterion("User authentication setup".to_string());
    goal.add_criterion("Payment integration structure".to_string());
    goal.add_criterion("Database models and API endpoints".to_string());
    goal.add_criterion("Admin dashboard layout".to_string());

    // Sub-goals
    goal.add_sub_goal("Design database schema for products and orders".to_string(), 0);
    goal.add_sub_goal("Create product API endpoints".to_string(), 1);
    goal.add_sub_goal("Build product listing and search components".to_string(), 2);
    goal.add_sub_goal("Implement product detail pages".to_string(), 3);
    goal.add_sub_goal("Create shopping cart context and management".to_string(), 4);
    goal.add_sub_goal("Build checkout flow pages".to_string(), 5);
    goal.add_sub_goal("Integrate payment gateway API".to_string(), 6);
    goal.add_sub_goal("Create admin dashboard pages".to_string(), 7);
    goal.add_sub_goal("Add authentication middleware".to_string(), 8);

    goal.status = GoalStatus::InProgress;
    agent.set_goal(goal.clone());

    let task = TaskRequest::new(
        "Generate a complete e-commerce Next.js application with: \
         1. Product management system (listing, search, filters)\n\
         2. Shopping cart with add/remove/update functionality\n\
         3. User authentication and profile pages\n\
         4. Payment integration endpoints\n\
         5. Order history and tracking\n\
         6. Admin dashboard for managing products and orders\n\
         7. Database models for PostgreSQL or MongoDB\n\
         8. RESTful API endpoints\n\
         Use TypeScript, Tailwind CSS, and modern React patterns."
    );

    println!("📝 Task: Generate E-Commerce Next.js Application\n");
    println!("🎯 Features to Generate:");
    for criterion in &goal.success_criteria {
        println!("  ✓ {}", criterion.description);
    }

    println!("\n⏳ Agent is generating e-commerce app...\n");
    let response = agent.run(task).await;

    let output = extract_output_text(&response.result());
    println!("📄 Generated Output:\n");
    println!("{}\n", output);

    println!("📊 Goal Progress: {}%", goal.get_progress());
    println!("\n✅ Example 2 completed!\n");
}

// ============================================
// Example 3: SaaS Dashboard App
// ============================================

async fn example_3_saas_dashboard() {
    println!("\n=== Example 3: Generate SaaS Dashboard Next.js App ===\n");

    let mut agent = Agent::new("SaasDashboardGenerator", "ollama::gemma3:latest");

    let mut goal = Goal::new(
        "Generate a SaaS dashboard application with user management".to_string()
    );

    goal.add_criterion("User authentication and authorization".to_string());
    goal.add_criterion("Multi-tenant database structure".to_string());
    goal.add_criterion("Dashboard with analytics and metrics".to_string());
    goal.add_criterion("User and team management pages".to_string());
    goal.add_criterion("Settings and preferences pages".to_string());
    goal.add_criterion("Billing and subscription management".to_string());
    goal.add_criterion("API for data collection and reporting".to_string());

    goal.add_sub_goal("Design multi-tenant database schema".to_string(), 0);
    goal.add_sub_goal("Implement OAuth authentication".to_string(), 1);
    goal.add_sub_goal("Create dashboard with charts and metrics".to_string(), 2);
    goal.add_sub_goal("Build team and user management interfaces".to_string(), 3);
    goal.add_sub_goal("Create settings pages for users and organization".to_string(), 4);
    goal.add_sub_goal("Implement billing API integration".to_string(), 5);
    goal.add_sub_goal("Create analytics and reporting system".to_string(), 6);
    goal.add_sub_goal("Add email notification templates".to_string(), 7);

    goal.status = GoalStatus::InProgress;
    agent.set_goal(goal.clone());

    let task = TaskRequest::new(
        "Generate a complete SaaS dashboard Next.js application with:\n\
         1. Multi-tenant authentication (OAuth + JWT)\n\
         2. Organization and team management\n\
         3. Comprehensive dashboard with charts and analytics\n\
         4. User permission and role management\n\
         5. Billing integration with Stripe\n\
         6. Settings pages for users and teams\n\
         7. Email notifications system\n\
         8. API logging and activity tracking\n\
         9. Dark mode support\n\
         10. Mobile responsive design\n\
         Include TypeScript, Tailwind CSS, Recharts for visualizations, \
         and PostgreSQL database models."
    );

    println!("📝 Task: Generate SaaS Dashboard Application\n");
    println!("🎯 Dashboard Features:");
    for criterion in &goal.success_criteria {
        println!("  ✓ {}", criterion.description);
    }

    println!("\n⏳ Agent is generating SaaS dashboard...\n");
    let response = agent.run(task).await;

    let output = extract_output_text(&response.result());
    println!("📄 Generated Output:\n");
    println!("{}\n", output);

    println!("📊 Goal Progress: {}%", goal.get_progress());
    println!("\n✅ Example 3 completed!\n");
}

// ============================================
// Example 4: Blog Platform with CMS
// ============================================

async fn example_4_blog_platform() {
    println!("\n=== Example 4: Generate Blog Platform with CMS ===\n");

    let mut agent = Agent::new("BlogCMSGenerator", "ollama::gemma3:latest");

    let mut goal = Goal::new(
        "Generate a comprehensive blog platform with CMS".to_string()
    );

    goal.add_criterion("Blog post management system".to_string());
    goal.add_criterion("Rich text editor with markdown support".to_string());
    goal.add_criterion("Category and tag system".to_string());
    goal.add_criterion("Search and filtering functionality".to_string());
    goal.add_criterion("Comments system with moderation".to_string());
    goal.add_criterion("SEO optimization (meta tags, sitemap)".to_string());
    goal.add_criterion("Author management and permissions".to_string());
    goal.add_criterion("Analytics and engagement tracking".to_string());

    goal.add_sub_goal("Design blog database schema".to_string(), 0);
    goal.add_sub_goal("Create CMS backend API".to_string(), 1);
    goal.add_sub_goal("Build post editor with markdown".to_string(), 2);
    goal.add_sub_goal("Create blog listing and search pages".to_string(), 3);
    goal.add_sub_goal("Build individual post pages with SEO".to_string(), 4);
    goal.add_sub_goal("Implement comments system".to_string(), 5);
    goal.add_sub_goal("Create author profiles and bio".to_string(), 6);
    goal.add_sub_goal("Build admin dashboard for content management".to_string(), 7);
    goal.add_sub_goal("Add analytics tracking and reporting".to_string(), 8);

    goal.status = GoalStatus::InProgress;
    agent.set_goal(goal.clone());

    let task = TaskRequest::new(
        "Generate a full-featured blog platform with CMS:\n\
         1. Post creation and editing with rich text editor\n\
         2. Markdown support with preview\n\
         3. Category and tag system\n\
         4. Advanced search with filters\n\
         5. Comments system with nested replies\n\
         6. Author profiles with biography\n\
         7. SEO optimization (sitemaps, meta tags, structured data)\n\
         8. Social sharing integration\n\
         9. Email newsletter subscription\n\
         10. Analytics dashboard for authors\n\
         11. Reading time estimates\n\
         12. Related posts suggestions\n\
         Include TypeScript, Tailwind CSS, next-mdx-remote for markdown, \
         and MongoDB/PostgreSQL models."
    );

    println!("📝 Task: Generate Blog Platform with CMS\n");
    println!("🎯 Blog Features:");
    for criterion in &goal.success_criteria {
        println!("  ✓ {}", criterion.description);
    }

    println!("\n⏳ Agent is generating blog platform...\n");
    let response = agent.run(task).await;

    let output = extract_output_text(&response.result());
    println!("📄 Generated Output:\n");
    println!("{}\n", output);

    println!("📊 Goal Progress: {}%", goal.get_progress());
    println!("\n✅ Example 4 completed!\n");
}

// ============================================
// Example 5: Extracting and Processing Output
// ============================================

async fn example_5_output_extraction() {
    println!("\n=== Example 5: Output Extraction and Processing ===\n");

    let mut agent = Agent::new("OutputProcessor", "ollama::gemma3:latest");

    // Create a simple task to generate specific file outputs
    let task = TaskRequest::new(
        "Generate ONLY the following files in proper format:\n\
         1. A complete package.json file for a Next.js project\n\
         2. A next.config.js configuration\n\
         3. A TypeScript types file for common types\n\
         Format each file with proper headers like:\n\
         === FILE: package.json ===\n\
         [file content]\n\
         === FILE: next.config.js ===\n\
         [file content]"
    );

    println!("📝 Task: Generate Specific Configuration Files\n");
    println!("⏳ Processing...\n");

    let response = agent.run(task).await;
    let output = extract_output_text(&response.result());

    // Parse output by file
    let files: HashMap<String, String> = parse_output_by_file(&output);

    println!("📦 Generated Files:\n");
    for (filename, content) in &files {
        println!("📄 File: {}", filename);
        println!("   Lines: {}", content.lines().count());
        println!("   Size: {} bytes\n", content.len());
    }

    println!("✅ Example 5 completed!\n");
}

// ============================================
// Helper function to parse output by file
// ============================================

fn parse_output_by_file(output: &str) -> HashMap<String, String> {
    let mut files: HashMap<String, String> = HashMap::new();
    let mut current_file = String::new();
    let mut current_content = String::new();

    for line in output.lines() {
        if line.starts_with("=== FILE:") {
            // Save previous file if exists
            if !current_file.is_empty() && !current_content.is_empty() {
                files.insert(current_file.clone(), current_content.trim().to_string());
            }

            // Extract filename
            if let Some(filename) = line
                .strip_prefix("=== FILE:")
                .and_then(|s| s.strip_suffix(" ==="))
            {
                current_file = filename.trim().to_string();
                current_content.clear();
            }
        } else if !current_file.is_empty() {
            current_content.push_str(line);
            current_content.push('\n');
        }
    }

    // Save last file
    if !current_file.is_empty() && !current_content.is_empty() {
        files.insert(current_file, current_content.trim().to_string());
    }

    files
}

// ============================================
// Main function
// ============================================

#[tokio::main]
async fn main() {
    println!("🚀 Ceylon Agent - Next.js App Generator Examples\n");
    println!("This example demonstrates how to use Ceylon agents to:");
    println!("  • Generate complete Next.js applications");
    println!("  • Create project structures and configuration");
    println!("  • Extract structured output from agent responses\n");
    println!("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n");

    // Run examples
    example_1_basic_nextjs_app().await;
    example_2_ecommerce_app().await;
    example_3_saas_dashboard().await;
    example_4_blog_platform().await;
    example_5_output_extraction().await;

    println!("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
    println!("\n✅ All Next.js generator examples completed successfully!\n");

    println!("📚 Key Takeaways:");
    println!("  1. Goals help structure app generation into clear steps");
    println!("  2. Success criteria define what files/features must exist");
    println!("  3. extract_output_text() gets text from OutputData");
    println!("  4. Output can be parsed to extract individual files");
    println!("  5. Combine with tools for file system operations\n");

    println!("🔗 Next steps:");
    println!("  • Add tools to write generated files to disk");
    println!("  • Create custom tools for running npm/git commands");
    println!("  • Integrate with file system for actual project creation");
    println!("  • Add validation tools to verify generated code");
    println!("  • Store generated code in memory for multi-step workflows\n");

    println!("💡 Example: Connecting to Tools");
    println!("```rust");
    println!("// Create file writing tool");
    println!("let file_tool = FileWriterTool::new(\"/path/to/project\");");
    println!("agent.add_tool(Arc::new(file_tool));");
    println!("");
    println!("// Agent can now write files during generation");
    println!("let response = agent.run(task).await;");
    println!("```\n");
}

/*

NEXT.JS APP GENERATION WORKFLOW:

1. CREATE GOAL
   └─ Define what the app should contain
   └─ List success criteria (files, features)
   └─ Break into generation steps

2. CREATE TASK
   └─ Request comprehensive app generation
   └─ Include tech stack (TypeScript, Tailwind, etc)
   └─ Specify features and structure

3. RUN AGENT
   └─ Agent generates code and configuration
   └─ Returns as OutputData::Text

4. EXTRACT OUTPUT
   └─ Convert OutputData to String
   └─ Parse by file sections (=== FILE: name ===)
   └─ Extract individual components

5. SAVE TO DISK (optional with tools)
   └─ Create project directory
   └─ Write each file to correct location
   └─ Run npm install to set up

EXAMPLE OUTPUT STRUCTURE:

=== FILE: package.json ===
{
  "name": "my-app",
  "version": "1.0.0",
  ...
}

=== FILE: next.config.js ===
/** @type {import('next').NextConfig} */
const nextConfig = {
  ...
}

=== FILE: pages/index.tsx ===
export default function Home() {
  ...
}

*/