superdesign_gallery

Name	Required	Description	Default
`workspace_path`	No	Workspace path (defaults to current directory)

src/index.ts:2310-2373 (handler)

The handler for the superdesign_gallery tool. It validates input with GallerySchema, lists design files, generates a full HTML gallery page using generateGalleryHTML helper, constructs detailed instructions for Claude Code to write the gallery.html file and open it in the browser.

case "superdesign_gallery": { const { workspace_path } = GallerySchema.parse(args); try { const superdesignDir = getSuperdeignDirectory(workspace_path); const designIterationsDir = path.join(superdesignDir, 'design_iterations'); if (!existsSync(designIterationsDir)) { return { content: [{ type: "text", text: "No design iterations found. Generate some designs first using superdesign_generate." }], }; } const designFiles = await glob('*.{html,svg}', { cwd: designIterationsDir }); if (designFiles.length === 0) { return { content: [{ type: "text", text: "No design files found in design_iterations directory." }], }; } const galleryPath = path.join(superdesignDir, 'gallery.html'); // Generate gallery HTML const galleryHtml = generateGalleryHTML(designFiles, superdesignDir); let specifications = `GALLERY GENERATION SPECIFICATION FOR CLAUDE CODE: IMPORTANT: You must create a gallery HTML file to view all designs in a browser. === GALLERY PARAMETERS === - Gallery file: ${galleryPath} - Design files found: ${designFiles.length} - Directory: ${designIterationsDir} === FILES TO DISPLAY === ${designFiles.map((file, index) => `${index + 1}. ${file}`).join('\n')} === GALLERY HTML CONTENT === ${galleryHtml} === EXECUTION INSTRUCTIONS === 1. Create the gallery file at: ${galleryPath} 2. Write the gallery HTML content above to the file 3. **AUTOMATICALLY OPEN** the gallery in the default browser using: open "${galleryPath}" 4. The gallery will show all design variations with enhanced MCP integration 5. Gallery features: smart refresh, auto-refresh, dark mode, file metadata display Please proceed to create the gallery file and **automatically open it in the browser**.`; return { content: [{ type: "text", text: specifications }], }; } catch (error: any) { return { content: [{ type: "text", text: `Error generating gallery: ${error.message}` }], }; } } case "superdesign_delete": { const { filename, workspace_path } = DeleteDesignSchema.parse(args); try {

src/index.ts:45-47 (schema)

Zod input schema for the superdesign_gallery tool defining optional workspace_path parameter.

const GallerySchema = z.object({ workspace_path: z.string().optional().describe("Workspace path (defaults to current directory)") });

src/index.ts:2002-2010 (registration)

Registration of the superdesign_gallery tool in the MCP server's listTools response, including name, description, and inputSchema matching the Zod schema.

name: "superdesign_gallery", description: "Generate an HTML gallery to view all designs in a browser", inputSchema: { type: "object", properties: { workspace_path: { type: "string", description: "Workspace path (defaults to current directory)" } }, }, },

src/index.ts:1168-1926 (helper)

Core helper function that generates the complete HTML for the design gallery, including responsive grid, file previews (iframes/objects), metadata display, dark/light theme, auto-refresh logic, and smart file change detection using embedded manifest.

Superdesign MCP Server

Instructions

Input Schema

Implementation Reference

Other Tools

Related Tools

Latest Blog Posts

MCP directory API