create_layout

Instructions

Implementation Reference

• src/index.ts:361-392 (registration)

  Registration of the 'create_layout' tool in the TOOLS array, including name, description, and input schema validation.

  {
    name: 'create_layout',
    description: 'Generate responsive layouts with Tailwind CSS',
    inputSchema: {
      type: 'object',
      properties: {
        type: {
          type: 'string',
          enum: ['dashboard', 'landing', 'blog', 'ecommerce', 'portfolio', 'documentation'],
          description: 'Layout type'
        },
        sections: {
          type: 'array',
          items: { type: 'string' },
          description: 'Layout sections (header, sidebar, main, footer, etc.)'
        },
        complexity: {
          type: 'string',
          enum: ['simple', 'medium', 'complex'],
          default: 'medium',
          description: 'Layout complexity'
        },
        framework: {
          type: 'string',
          enum: ['html', 'react', 'vue', 'svelte'],
          default: 'html',
          description: 'Target framework'
        }
      },
      required: ['type', 'sections']
    }
  }

• src/index.ts:449-450 (registration)

  Dispatch/registration of the create_layout handler in the CallToolRequestSchema switch statement.

  case 'create_layout':
    return await createLayout(args as unknown as LayoutOptions);

• src/tools/layout-generator.ts:41-138 (handler)

  Core handler implementation for the create_layout tool. Generates responsive Tailwind CSS layouts using Gemini AI prompt or fallback template generators, cleans output, and returns formatted response with documentation.

  export async function createLayout(args: LayoutRequest) {
    try {
      const {
        type,
        sections,
        complexity = 'medium',
        framework = 'html'
      } = args;
  
      let layoutCode = '';
  
      if (isGeminiAvailable()) {
        const prompt = `Generate a complete ${complexity} ${type} layout using Tailwind CSS with the following specifications:
  
  Layout Type: ${type}
  Sections: ${sections.join(', ')}
  Complexity: ${complexity}
  Framework: ${framework}
  
  Requirements:
  1. Create a fully responsive layout using Tailwind CSS
  2. Include proper semantic HTML structure
  3. Use modern CSS Grid and Flexbox techniques
  4. Implement mobile-first responsive design
  5. Include placeholder content that's realistic for a ${type}
  6. Add proper spacing, typography, and visual hierarchy
  7. Include interactive elements with hover states
  8. Ensure accessibility with proper ARIA labels
  9. Use appropriate color scheme and styling
  
  ${framework === 'react' ? 'Generate as React functional components with TypeScript' : ''}
  ${framework === 'vue' ? 'Generate as Vue 3 composition API components' : ''}
  ${framework === 'svelte' ? 'Generate as Svelte components' : ''}
  
  For ${type} layout, focus on:
  ${getLayoutFocusPoints(type)}
  
  Return complete, production-ready code with proper structure and styling.`;
  
        layoutCode = await callGemini(prompt);
      } else {
        layoutCode = generateTemplateLayout(type, sections, complexity, framework);
      }
  
      // Clean up the generated code
      layoutCode = layoutCode.replace(/```[\w]*\n?/g, '').trim();
  
      return {
        content: [
          {
            type: 'text',
            text: `# ${type.charAt(0).toUpperCase() + type.slice(1)} Layout - ${complexity.charAt(0).toUpperCase() + complexity.slice(1)} Complexity
  
  ## Generated Layout
  \`\`\`${framework === 'html' ? 'html' : framework}
  ${layoutCode}
  \`\`\`
  
  ## Layout Features
  - **Type**: ${type}
  - **Complexity**: ${complexity}
  - **Framework**: ${framework}
  - **Sections**: ${sections.join(', ')}
  
  ## Responsive Breakpoints
  - **Mobile**: Base styles (< 640px)
  - **Tablet**: sm: prefix (≥ 640px)
  - **Desktop**: md: prefix (≥ 768px)
  - **Large**: lg: prefix (≥ 1024px)
  - **Extra Large**: xl: prefix (≥ 1280px)
  
  ## Customization Tips
  - Adjust color scheme by modifying color classes
  - Change spacing with different padding/margin classes
  - Modify typography with font size and weight classes
  - Add animations with transition and transform classes
  - Customize breakpoints for different responsive behavior
  
  ## Accessibility Features
  - Semantic HTML structure
  - Proper heading hierarchy
  - ARIA labels where appropriate
  - Keyboard navigation support
  - Screen reader friendly content
  
  ## Performance Considerations
  - Optimized class usage
  - Minimal custom CSS required
  - Efficient responsive design
  - Fast rendering with Tailwind's utility-first approach`
          }
        ]
      };
    } catch (error) {
      console.error('Layout generation error:', error);
      throw new Error(`Failed to create layout: ${error instanceof Error ? error.message : 'Unknown error'}`);
    }
  }