generate_complete_setup

Instructions

Implementation Reference

• index.ts:1334-1479 (registration)

  Tool 'generate_complete_setup' is registered in the ListToolsRequestSchema handler (line 1385) with inputSchema for framework, plugins, and performance_level parameters.

  // Define all tools
  server.setRequestHandler(ListToolsRequestSchema, async () => {
    return {
      tools: [
        {
          name: 'understand_and_create_animation',
          description: 'The main AI engine - understands any animation request and generates perfect GSAP code with surgical precision',
          inputSchema: {
            type: 'object',
            properties: {
              request: {
                type: 'string',
                description: 'Natural language description of the animation you want (e.g., "fade in cards one by one when scrolling", "create a hero entrance with staggered text")'
              },
              context: {
                type: 'string',
                description: 'Development context and requirements',
                enum: ['react', 'vanilla', 'nextjs', 'vue', 'performance-critical', 'mobile-optimized'],
                default: 'react'
              },
              complexity: {
                type: 'string',
                description: 'Animation complexity level',
                enum: ['simple', 'intermediate', 'advanced', 'expert'],
                default: 'intermediate'
              }
            },
            required: ['request']
          }
        },
        {
          name: 'get_gsap_api_expert',
          description: 'Deep dive into any GSAP method, plugin, or property with expert-level knowledge',
          inputSchema: {
            type: 'object',
            properties: {
              api_element: {
                type: 'string',
                description: 'GSAP API element (e.g., "gsap.to", "ScrollTrigger", "SplitText", "drawSVG", "morphSVG")'
              },
              level: {
                type: 'string',
                description: 'Detail level needed',
                enum: ['basic', 'intermediate', 'advanced', 'expert'],
                default: 'advanced'
              }
            },
            required: ['api_element']
          }
        },
        {
          name: 'generate_complete_setup',
          description: 'Generate complete GSAP environment setup with all plugins and optimizations',
          inputSchema: {
            type: 'object',
            properties: {
              framework: {
                type: 'string',
                description: 'Target framework',
                enum: ['react', 'nextjs', 'vue', 'nuxt', 'svelte', 'vanilla'],
                default: 'react'
              },
              plugins: {
                type: 'array',
                description: 'Specific plugins needed',
                items: {
                  type: 'string',
                  enum: ['ScrollTrigger', 'SplitText', 'DrawSVGPlugin', 'MorphSVGPlugin', 'MotionPathPlugin', 'Draggable', 'InertiaPlugin', 'Flip', 'Observer', 'CustomEase', 'GSDevTools', 'Lenis']
                }
              },
              performance_level: {
                type: 'string',
                description: 'Performance optimization level',
                enum: ['basic', 'optimized', '60fps-guaranteed', 'mobile-first'],
                default: 'optimized'
              }
            },
            required: ['framework']
          }
        },
        {
          name: 'debug_animation_issue',
          description: 'Expert debugging for GSAP animation problems with solutions',
          inputSchema: {
            type: 'object',
            properties: {
              issue: {
                type: 'string',
                description: 'Description of the animation problem or unexpected behavior'
              },
              code: {
                type: 'string',
                description: 'Problematic animation code (optional but helpful)'
              },
              expected_behavior: {
                type: 'string',
                description: 'What should happen vs what is happening'
              }
            },
            required: ['issue']
          }
        },
        {
          name: 'optimize_for_performance',
          description: 'Transform any animation into 60fps smoothness with expert optimizations',
          inputSchema: {
            type: 'object',
            properties: {
              animation_code: {
                type: 'string',
                description: 'Existing GSAP animation code to optimize'
              },
              target: {
                type: 'string',
                description: 'Optimization target',
                enum: ['60fps-desktop', 'mobile-smooth', 'battery-efficient', 'memory-optimized'],
                default: '60fps-desktop'
              }
            },
            required: ['animation_code']
          }
        },
        {
          name: 'create_production_pattern',
          description: 'Generate battle-tested, production-ready animation patterns',
          inputSchema: {
            type: 'object',
            properties: {
              pattern_type: {
                type: 'string',
                description: 'Type of production pattern needed',
                enum: ['hero-section', 'scroll-system', 'text-effects', 'interactive-ui', 'loading-sequence', 'page-transitions', 'micro-interactions', 'data-visualization']
              },
              industry: {
                type: 'string',
                description: 'Industry or use case',
                enum: ['portfolio', 'ecommerce', 'saas', 'agency', 'blog', 'app', 'game'],
                default: 'portfolio'
              }
            },
            required: ['pattern_type']
          }
        }
      ]
    };
  });

• index.ts:1698-1850 (handler)

  Handler implementation for 'generate_complete_setup' in the CallToolRequestSchema switch-case, generating complete GSAP environment setup code with plugins, performance optimizations, and framework-specific boilerplate.

  case 'generate_complete_setup': {
    const framework = args?.framework as string || 'react';
    const plugins = args?.plugins as string[] || ['ScrollTrigger', 'SplitText'];
    const performance_level = args?.performance_level as string || 'optimized';
    
    let result = `# 🚀 Complete GSAP Setup - ${framework.toUpperCase()}\n\n`;
    const needsLenis = plugins.includes('Lenis');
    result += `## 📦 Installation\n\n`;
    if (framework === 'react' || framework === 'nextjs') {
      result += `\`\`\`bash\nnpm install gsap @gsap/react ${needsLenis ? 'lenis' : ''}\n\`\`\`\n\n`;
    } else {
      result += `\`\`\`bash\nnpm install gsap ${needsLenis ? 'lenis' : ''}\n\`\`\`\n\n`;
    }
    
    result += `## ⚡ Complete Setup with All Plugins\n\n`;
    
    if (framework === 'react' || framework === 'nextjs') {
      result += `\`\`\`javascript\n// GSAP Master Setup - React/Next.js\nimport { gsap } from "gsap";\nimport { useGSAP } from "@gsap/react";\nimport { useRef } from "react";\n\n`;
      
      // Add all requested plugins
      const allPlugins = [
        'ScrollTrigger', 'SplitText', 'DrawSVGPlugin', 'MorphSVGPlugin', 
        'MotionPathPlugin', 'ScrambleTextPlugin', 'Draggable', 'InertiaPlugin',
        'Flip', 'Observer', 'CustomEase', 'CustomBounce', 'CustomWiggle',
        'GSDevTools', 'Physics2DPlugin', 'TextPlugin', 'ScrollToPlugin'
      ];
      
      allPlugins.forEach(plugin => {
        result += `import { ${plugin} } from "gsap/${plugin}";\n`;
      });
      
      result += `\n// Register all plugins\ngsap.registerPlugin(\n`;
      result += `  useGSAP,\n`;
      result += allPlugins.map(plugin => `  ${plugin}`).join(',\n');
      result += `\n);\n\n`;
      
      result += `// Master Animation Component\nexport default function AnimationMaster() {\n`;
      result += `  const container = useRef();\n\n`;
      result += `  useGSAP(() => {\n`;
      result += `    // Your animations here\n`;
      result += `    gsap.from(".animate-in", {\n`;
      result += `      y: 50,\n`;
      result += `      opacity: 0,\n`;
      result += `      duration: 1,\n`;
      result += `      stagger: 0.2,\n`;
      result += `      ease: "power3.out",\n`;
      result += `      force3D: true\n`;
      result += `    });\n\n`;
      
      if (plugins.includes('ScrollTrigger')) {
        result += `    // ScrollTrigger example\n`;
        result += `    ScrollTrigger.batch(".scroll-item", {\n`;
        result += `      onEnter: elements => gsap.from(elements, {\n`;
        result += `        y: 100,\n`;
        result += `        opacity: 0,\n`;
        result += `        stagger: 0.15,\n`;
        result += `        duration: 1.2,\n`;
        result += `        ease: "power3.out"\n`;
        result += `      })\n`;
        result += `    });\n\n`;
      }
      
      result += `  }, { scope: container });\n\n`;
      result += `  return (\n`;
      result += `    <div ref={container}>\n`;
      result += `      <div className="animate-in">Content 1</div>\n`;
      result += `      <div className="animate-in">Content 2</div>\n`;
      result += `      <div className="scroll-item">Scroll Item</div>\n`;
      result += `    </div>\n`;
      result += `  );\n`;
      result += `}\n\`\`\`\n\n`;
    } else {
      result += `\`\`\`javascript\n// GSAP Master Setup - Vanilla JS\nimport { gsap } from "gsap";\n`;
      
      plugins.forEach(plugin => {
        result += `import { ${plugin} } from "gsap/${plugin}";\n`;
      });
      
      result += `\n// Register plugins\ngsap.registerPlugin(${plugins.join(', ')});\n\n`;
      result += `// Initialize animations\ngsap.from(".animate-in", {\n`;
      result += `  y: 50,\n`;
      result += `  opacity: 0,\n`;
      result += `  duration: 1,\n`;
      result += `  stagger: 0.2,\n`;
      result += `  ease: "power3.out"\n`;
      result += `});\n\`\`\`\n\n`;
    }
    
    if (performance_level === '60fps-guaranteed' || performance_level === 'mobile-first') {
      result += `## 🔧 Performance Optimizations (${performance_level})\n\n`;
      result += `\`\`\`css\n/* Critical CSS for smooth animations */\n`;
      result += `.animated-element {\n`;
      result += `  will-change: transform, opacity;\n`;
      result += `  backface-visibility: hidden;\n`;
      result += `  transform: translateZ(0); /* Force GPU layer */\n`;
      result += `}\n\n`;
      result += `/* Reduce motion for accessibility */\n`;
      result += `@media (prefers-reduced-motion: reduce) {\n`;
      result += `  .animated-element {\n`;
      result += `    animation: none !important;\n`;
      result += `    transition: none !important;\n`;
      result += `  }\n`;
      result += `}\n\`\`\`\n\n`;
      
      result += `\`\`\`javascript\n// Performance monitoring\n`;
      result += `const performanceConfig = {\n`;
      result += `  // Force GPU acceleration\n`;
      result += `  force3D: true,\n`;
      result += `  // Clear properties after animation\n`;
      result += `  clearProps: "transform,opacity",\n`;
      result += `  // Optimize for mobile\n`;
      result += `  lazy: false,\n`;
      result += `  // Batch DOM reads/writes\n`;
      result += `  invalidateOnRefresh: true\n`;
      result += `};\n\n`;
      result += `// Apply to all animations\n`;
      result += `gsap.defaults(performanceConfig);\n\`\`\`\n\n`;
    }
    
    result += `## 🎯 Ready-to-Use Patterns\n\n`;
    result += `### Scroll Reveal System\n`;
    result += `\`\`\`javascript\nScrollTrigger.batch(".reveal", {\n`;
    result += `  onEnter: elements => gsap.from(elements, {\n`;
    result += `    y: 100, opacity: 0, stagger: 0.15, duration: 1\n`;
    result += `  }),\n`;
    result += `  start: "top 80%"\n`;
    result += `});\n\`\`\`\n\n`;
    
    result += `### Text Animation\n`;
    result += `\`\`\`javascript\nconst split = new SplitText(".title", { type: "chars" });\n`;
    result += `gsap.from(split.chars, {\n`;
    result += `  y: 100, opacity: 0, stagger: 0.02, duration: 0.8\n`;
    result += `});\n\`\`\`\n\n`;
    
    result += `## 📱 Mobile Optimization\n`;
    result += `- ✅ Touch-friendly interactions\n`;
    result += `- ✅ Reduced complexity on mobile\n`;
    result += `- ✅ Battery-efficient animations\n`;
    result += `- ✅ Respects motion preferences\n\n`;
    
    result += `## 🎨 All Plugins Available (100% FREE!)\n`;
    result += `Thanks to Webflow, all GSAP plugins are now completely free:\n`;
    result += `- **ScrollTrigger** - Scroll-based animations\n`;
    result += `- **SplitText** - Advanced text effects\n`;
    result += `- **DrawSVG** - SVG path animations\n`;
    result += `- **MorphSVG** - Shape morphing\n`;
    result += `- **Draggable** - Drag and drop\n`;
    result += `- **And many more!** 🎉`;
  
    return {
      content: [{ type: 'text', text: result }]
    };
  }

• index.ts:1385-1413 (schema)

  Input schema for 'generate_complete_setup' defining parameters: framework (enum: react, nextjs, vue, nuxt, svelte, vanilla), plugins (array of plugin names), and performance_level (basic, optimized, 60fps-guaranteed, mobile-first).

    name: 'generate_complete_setup',
    description: 'Generate complete GSAP environment setup with all plugins and optimizations',
    inputSchema: {
      type: 'object',
      properties: {
        framework: {
          type: 'string',
          description: 'Target framework',
          enum: ['react', 'nextjs', 'vue', 'nuxt', 'svelte', 'vanilla'],
          default: 'react'
        },
        plugins: {
          type: 'array',
          description: 'Specific plugins needed',
          items: {
            type: 'string',
            enum: ['ScrollTrigger', 'SplitText', 'DrawSVGPlugin', 'MorphSVGPlugin', 'MotionPathPlugin', 'Draggable', 'InertiaPlugin', 'Flip', 'Observer', 'CustomEase', 'GSDevTools', 'Lenis']
          }
        },
        performance_level: {
          type: 'string',
          description: 'Performance optimization level',
          enum: ['basic', 'optimized', '60fps-guaranteed', 'mobile-first'],
          default: 'optimized'
        }
      },
      required: ['framework']
    }
  },