create_layout
Generate responsive web layouts using Tailwind CSS by specifying layout type, sections, complexity, and target framework. Ideal for developers creating dashboards, landing pages, blogs, or e-commerce sites.
Instructions
Generate responsive layouts with Tailwind CSS
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| complexity | No | Layout complexity | medium |
| framework | No | Target framework | html |
| sections | Yes | Layout sections (header, sidebar, main, footer, etc.) | |
| type | Yes | Layout type |
Implementation Reference
- src/utils/tool-functions.ts:100-109 (handler)The handler function that executes the core logic for the 'create_layout' tool. It processes LayoutOptions and returns an MCP-formatted text response describing the layout.export async function createLayout(args: LayoutOptions) { return { content: [ { type: 'text', text: `Created ${args.type} layout for ${args.framework}\nComponents: ${args.components?.join(', ') || 'basic'}` } ] }; }
- src/index.ts:449-450 (registration)Registration and dispatch point for the 'create_layout' tool within the CallToolRequestSchema handler switch statement.case 'create_layout': return await createLayout(args as unknown as LayoutOptions);
- src/index.ts:361-392 (schema)Input schema definition and tool metadata for 'create_layout', used for tool listing and validation in the MCP protocol.{ 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/types.ts:91-100 (schema)TypeScript interface defining the LayoutOptions type used by the createLayout handler.export interface LayoutOptions { type: 'landing' | 'dashboard' | 'blog' | 'ecommerce' | 'portfolio' | 'admin' | 'custom'; framework: 'html' | 'react' | 'vue' | 'svelte'; components?: string[]; sections?: string[]; responsive?: boolean; darkMode?: boolean; accessibility?: boolean; animations?: boolean; }
- src/tools/layout-generator.ts:41-138 (helper)Comprehensive helper implementation for layout generation using Gemini AI or templates, closely matching the tool schema but not currently integrated into the main tool handler.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'}`); } }