flowbite-mcp 1.1.0 → 1.1.2

package/README.md

@@ -1,5 +1,5 @@
 <p>
-    <a href="https://flowbite.com" >
+    <a href="[https://flowbite.com](https://flowbite.com/docs/getting-started/mcp/)" >
       <img alt="Flowbite - Tailwind CSS components" width="350" src="https://flowbite.s3.amazonaws.com/github/flowbite-mcp-github-2.png">
     </a><br>
     Official MCP server for Flowbite to leverage AI for UI creation and theme generation
@@ -14,24 +14,22 @@
 
 [![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/en-US/install-mcp?name=flowbite&config=eyJlbnYiOnsiRklHTUFfQUNDRVNTX1RPS0VOIjoiWU9VUl9QRVJTT05BTF9GSUdNQV9BQ0NFU1NfVE9LRU4ifSwiY29tbWFuZCI6Im5weCAteSBmbG93Yml0ZS1tY3AifQ%3D%3D)
 
-An MCP server that enables AI assistants to access the [Flowbite](https://flowbite.com/) library of Tailwind CSS components—including UI elements, forms, typography, and plugins—while offering an intelligent theme generator for creating custom branded designs within AI-driven development environments.
+An [MCP server](https://flowbite.com/docs/getting-started/mcp/) that enables AI assistants to access the [Flowbite](https://flowbite.com/) library of Tailwind CSS components—including UI elements, forms, typography, and plugins—while offering an intelligent theme generator for creating custom branded designs within AI-driven development environments.
 
 ## MCP Features
 
-### Resources:
-
-- **📦 60+ UI Components** - Complete access the [Flowbite Library](https://flowbite.com/docs/getting-started/introduction/) components of buttons, cards, modals, dropdowns, and more
-
 ### Tools:
 
-- **🎯 AI-Powered Theme Generator** - Create custom branded themes from any branded hex color
-- **🎨 [NEW] Figma to Code Generator** - Copy the Figma node url and generate code ([video demo](https://x.com/zoltanszogyenyi/status/1996953610966405547))
+- **🎨 [NEW] Figma to code** - Copy the Figma node url and generate code ([video demo](https://x.com/zoltanszogyenyi/status/1996953610966405547))
+- **🎯 Theme file generator** - Create custom branded themes from any branded hex color
+
+### Resources:
 
+- **📦 60+ UI components** - Complete access to the [Flowbite UI components](https://flowbite.com/docs/getting-started/introduction/)
 ### Server:
 
-- **🌐 Dual Transport Support** - Standard I/O (stdio) for CLI or HTTP Streamable for server deployments
-- **⚡ Production Ready** - Docker support with health checks and monitoring
-- **🎨 Quickstart Guide** - Complete setup and integration documentation
+- **🌐 Dual transport support** - Standard I/O (stdio) for CLI or HTTP Streamable for server deployments
+- **⚡ Production ready** - Docker support with health checks and monitoring
 
 ## Quickstart
 

package/build/index.js

@@ -744,6 +744,122 @@ Node data was retrieved successfully.`,
             const imageData = await imageResponse.json();
             // Extract the image URL from the response
             const imageUrl = imageData.images?.[nodeId] || imageData.images?.[Object.keys(imageData.images)[0]] || null;
+            // Helper function to simplify Figma node data - extracts only essential info for code conversion
+            const simplifyNode = (node) => {
+                if (!node)
+                    return null;
+                const simplified = {
+                    type: node.type,
+                    name: node.name,
+                };
+                // Add dimensions if available
+                if (node.absoluteBoundingBox) {
+                    simplified.size = {
+                        width: Math.round(node.absoluteBoundingBox.width),
+                        height: Math.round(node.absoluteBoundingBox.height),
+                    };
+                }
+                // Add layout info for frames
+                if (node.layoutMode) {
+                    simplified.layout = {
+                        mode: node.layoutMode, // HORIZONTAL, VERTICAL, NONE
+                        padding: node.paddingLeft || node.paddingTop ? {
+                            top: node.paddingTop,
+                            right: node.paddingRight,
+                            bottom: node.paddingBottom,
+                            left: node.paddingLeft,
+                        } : undefined,
+                        gap: node.itemSpacing,
+                        align: node.primaryAxisAlignItems,
+                        justify: node.counterAxisAlignItems,
+                    };
+                }
+                // Add corner radius
+                if (node.cornerRadius) {
+                    simplified.borderRadius = node.cornerRadius;
+                }
+                else if (node.rectangleCornerRadii) {
+                    simplified.borderRadius = node.rectangleCornerRadii;
+                }
+                // Add fills (background colors)
+                if (node.fills && node.fills.length > 0) {
+                    simplified.fills = node.fills
+                        .filter((fill) => fill.visible !== false)
+                        .map((fill) => ({
+                        type: fill.type,
+                        color: fill.color ? {
+                            r: Math.round(fill.color.r * 255),
+                            g: Math.round(fill.color.g * 255),
+                            b: Math.round(fill.color.b * 255),
+                            a: fill.color.a !== undefined ? Math.round(fill.color.a * 100) / 100 : 1,
+                        } : undefined,
+                        opacity: fill.opacity,
+                    }));
+                }
+                // Add strokes (borders)
+                if (node.strokes && node.strokes.length > 0) {
+                    simplified.strokes = node.strokes
+                        .filter((stroke) => stroke.visible !== false)
+                        .map((stroke) => ({
+                        type: stroke.type,
+                        color: stroke.color ? {
+                            r: Math.round(stroke.color.r * 255),
+                            g: Math.round(stroke.color.g * 255),
+                            b: Math.round(stroke.color.b * 255),
+                        } : undefined,
+                    }));
+                    if (node.strokeWeight) {
+                        simplified.strokeWeight = node.strokeWeight;
+                    }
+                }
+                // Add effects (shadows, blur)
+                if (node.effects && node.effects.length > 0) {
+                    simplified.effects = node.effects
+                        .filter((effect) => effect.visible !== false)
+                        .map((effect) => ({
+                        type: effect.type,
+                        radius: effect.radius,
+                        offset: effect.offset,
+                        color: effect.color ? {
+                            r: Math.round(effect.color.r * 255),
+                            g: Math.round(effect.color.g * 255),
+                            b: Math.round(effect.color.b * 255),
+                            a: Math.round(effect.color.a * 100) / 100,
+                        } : undefined,
+                    }));
+                }
+                // Add text-specific properties
+                if (node.type === 'TEXT') {
+                    simplified.text = node.characters;
+                    if (node.style) {
+                        simplified.textStyle = {
+                            fontFamily: node.style.fontFamily,
+                            fontWeight: node.style.fontWeight,
+                            fontSize: node.style.fontSize,
+                            lineHeight: node.style.lineHeightPx,
+                            letterSpacing: node.style.letterSpacing,
+                            textAlign: node.style.textAlignHorizontal,
+                        };
+                    }
+                }
+                // Recursively process children
+                if (node.children && node.children.length > 0) {
+                    simplified.children = node.children.map(simplifyNode).filter(Boolean);
+                }
+                return simplified;
+            };
+            // Simplify the node data
+            const simplifiedNodeData = nodeData.nodes ?
+                Object.keys(nodeData.nodes).reduce((acc, key) => {
+                    const node = nodeData.nodes[key];
+                    acc[key] = {
+                        document: simplifyNode(node.document),
+                        components: node.components ? Object.keys(node.components).length + ' components' : undefined,
+                        styles: node.styles ? Object.keys(node.styles).length + ' styles' : undefined,
+                    };
+                    return acc;
+                }, {})
+                : simplifyNode(nodeData);
             // Return combined result with AI instructions
             return {
                 content: [
@@ -834,15 +950,17 @@ Generate clean, semantic HTML with Tailwind CSS classes following these guidelin
 - **Source URL**: ${figmaNodeUrl}
 
 ### Rendered Design Image
-${imageUrl ? `![Figma Design](${imageUrl})
+${imageUrl ? `
+
+<img src="${imageUrl}">
 
 **Direct Image URL**: ${imageUrl}` : '⚠️ No image URL available - analyze the node data structure below'}
 
-### Node Structure Data
-The following JSON contains the Figma node structure with layers, styles, and properties:
+### Node Structure Data (Simplified)
+The following JSON contains the essential Figma node structure for code conversion:
 
 \`\`\`json
-${JSON.stringify(nodeData, null, 2)}
+${JSON.stringify(simplifiedNodeData, null, 2)}
 \`\`\`
 
 ---

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "flowbite-mcp",
-  "version": "1.1.0",
-  "description": "Model Context Protocol server providing AI assistants with access to Flowbite UI components and an intelligent theme generator for Tailwind CSS",
+  "version": "1.1.2",
+  "mcpName": "io.github.themesberg/flowbite-mcp",
+  "description": "MCP server to convert Figma designs to Flowbite UI components in Tailwind CSS",
   "main": "build/index.js",
   "type": "module",
   "bin": {
-    "flowbite-mcp": "./build/index.js"
+    "flowbite-mcp": "build/index.js"
   },
   "files": [
     "build",