generate_preview
Create visual previews of Tailwind CSS components by inputting HTML code. Customize dimensions, enable dark mode, and generate responsive breakpoint views for design validation.
Instructions
Generate visual preview of Tailwind components
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| darkMode | No | Generate dark mode preview | |
| height | No | Preview height in pixels | |
| html | Yes | HTML code to preview | |
| responsive | No | Generate responsive breakpoint previews | |
| width | No | Preview width in pixels |
Implementation Reference
- src/utils/tool-functions.ts:64-72 (handler)Placeholder handler function for the generate_preview tool that returns a mock text response describing the preview.export async function generatePreview(args: PreviewOptions) { return { content: [ { type: 'text', text: `Generated preview for ${args.devices?.join(', ') || 'all devices'}\nTheme: ${args.theme || 'light'}` } ] };
- src/types.ts:57-66 (schema)TypeScript interface defining the PreviewOptions type used by the generatePreview handler.export interface PreviewOptions { html: string; css?: string; devices?: ('mobile' | 'tablet' | 'desktop' | 'wide')[]; theme?: 'light' | 'dark' | 'auto'; interactive?: boolean; showCode?: boolean; format?: 'html' | 'image' | 'pdf'; quality?: 'low' | 'medium' | 'high'; }
- src/index.ts:268-301 (registration)Registration of the generate_preview tool in the TOOLS array, including name, description, and input schema.{ name: 'generate_preview', description: 'Generate visual preview of Tailwind components', inputSchema: { type: 'object', properties: { html: { type: 'string', description: 'HTML code to preview' }, width: { type: 'number', default: 800, description: 'Preview width in pixels' }, height: { type: 'number', default: 600, description: 'Preview height in pixels' }, darkMode: { type: 'boolean', default: false, description: 'Generate dark mode preview' }, responsive: { type: 'boolean', default: false, description: 'Generate responsive breakpoint previews' } }, required: ['html'] } },
- src/index.ts:443-444 (registration)Dispatch case in the CallToolRequestSchema handler that invokes the generatePreview function for generate_preview tool calls.case 'generate_preview': return await generatePreview(args as unknown as PreviewOptions);
- src/tools/preview-generator.ts:12-87 (helper)Comprehensive helper implementation using Puppeteer to generate actual image previews of HTML components (not currently registered in main server).export async function generatePreview(args: PreviewRequest) { try { const { html, width = 800, height = 600, darkMode = false, responsive = false } = args; // Create full HTML document const fullHtml = ` <!DOCTYPE html> <html lang="en" ${darkMode ? 'class="dark"' : ''}> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind Preview</title> <script src="https://cdn.tailwindcss.com"></script> ${darkMode ? '<script>tailwind.config = { darkMode: "class" }</script>' : ''} </head> <body class="${darkMode ? 'dark:bg-gray-900 dark:text-white' : 'bg-white'}"> ${html} </body> </html>`; let result = '# Component Preview\n\n'; try { // Launch headless browser for screenshot const browser = await puppeteer.launch({ headless: true }); const page = await browser.newPage(); await page.setViewport({ width, height }); await page.setContent(fullHtml); // Take screenshot const screenshot = await page.screenshot({ encoding: 'base64', fullPage: false }); await browser.close(); result += `**Preview Generated**: ${width}x${height}px ${darkMode ? '(Dark Mode)' : '(Light Mode)'}\n\n`; result += `\n\n`; } catch (screenshotError) { console.error('Screenshot error:', screenshotError); result += '**Note**: Preview screenshot could not be generated. Here\'s the rendered HTML:\n\n'; } result += '## HTML Code\n```html\n' + html + '\n```\n\n'; if (responsive) { result += '## Responsive Breakpoints\n\n'; result += '- **Mobile**: 375px width\n'; result += '- **Tablet**: 768px width\n'; result += '- **Desktop**: 1024px width\n'; result += '- **Large**: 1280px width\n\n'; result += '*Note: Test your component at different screen sizes to ensure responsive behavior.*\n'; } return { content: [ { type: 'text', text: result } ] }; } catch (error) { console.error('Preview generation error:', error); throw new Error(`Failed to generate preview: ${error instanceof Error ? error.message : 'Unknown error'}`); } }