generate_preview
Create visual previews of Tailwind CSS components with customizable dimensions, dark mode, and responsive breakpoint options to verify design implementation.
Instructions
Generate visual preview of Tailwind components
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| html | Yes | HTML code to preview | |
| width | No | Preview width in pixels | |
| height | No | Preview height in pixels | |
| darkMode | No | Generate dark mode preview | |
| responsive | No | Generate responsive breakpoint previews |
Implementation Reference
- src/tools/preview-generator.ts:12-87 (handler)Primary handler implementation for the 'generate_preview' tool. Uses Puppeteer to render HTML with Tailwind CSS CDN, capture screenshot as base64 PNG, embed in Markdown response, includes HTML code block and responsive notes.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'}`); } }
- src/index.ts:268-301 (registration)Tool registration entry in the server's TOOLS array, defining name, description, and input schema precisely matching the preview-generator parameters.{ 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 (handler)Dispatcher in the CallToolRequestHandler switch statement that invokes the generatePreview handler for 'generate_preview' tool calls.case 'generate_preview': return await generatePreview(args as unknown as PreviewOptions);
- src/types.ts:57-66 (schema)TypeScript interface for PreviewOptions used in type annotations, though parameters slightly differ from runtime schema.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/utils/tool-functions.ts:64-73 (handler)Placeholder/stub handler imported and called by index.ts, returns dummy text response (note: parameter mismatch with schema).export async function generatePreview(args: PreviewOptions) { return { content: [ { type: 'text', text: `Generated preview for ${args.devices?.join(', ') || 'all devices'}\nTheme: ${args.theme || 'light'}` } ] }; }