sonance-brand-mcp 1.3.117 → 1.3.118

package/dist/index.js

@@ -2635,6 +2635,25 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
                     required: ["logo_path"],
                 },
             },
+            {
+                name: "get_logo_base64",
+                description: "Returns a logo as base64-encoded data URL ready for embedding in React artifacts, HTML, or web applications. USE THIS for artifacts instead of drawing/approximating logos. Returns a data URL that works directly in <img src='...'> tags. CRITICAL: NEVER draw, recreate, or approximate logos with SVG, CSS, or styled text - always use this tool to get the actual image data.",
+                inputSchema: {
+                    type: "object",
+                    properties: {
+                        logo_path: {
+                            type: "string",
+                            description: "Path to the logo from list_logos output (e.g., 'sonance/Sonance_Logo_2C_Dark_RGB.png')",
+                        },
+                        format: {
+                            type: "string",
+                            enum: ["dataUrl", "base64", "both"],
+                            description: "Output format. 'dataUrl' for img src (default), 'base64' for raw data, 'both' for both formats",
+                        },
+                    },
+                    required: ["logo_path"],
+                },
+            },
             {
                 name: "diagnose_logos",
                 description: "Diagnose logo loading issues. Returns validation status, path resolution examples, and environment info. Use this when logos fail to embed or appear in responses.",
@@ -3109,6 +3128,8 @@ ${formatCodeBlock(content, { language: "typescript", filename: "lib/utils.ts" })
                 const base64Data = imageBuffer.toString('base64');
                 const mimeType = getImageMimeType(resolvedPath);
                 const fileName = path.basename(resolvedPath);
+                // Create data URL for artifact use
+                const dataUrl = `data:${mimeType};base64,${base64Data}`;
                 // Determine logo variant info for recommendations
                 const isLightLogo = /light|reverse|white/i.test(fileName);
                 const isDarkLogo = /dark|black/i.test(fileName);
@@ -3139,28 +3160,45 @@ ${variantSuggestion}
 
 ---
 
-### Implementation (Next.js with next/image)
+## CRITICAL: Logo Usage Rules
+
+> **NEVER draw, recreate, or approximate this logo.** This includes:
+> - SVG drawings or paths
+> - Styled text (e.g., colored letters spelling "SONANCE")
+> - CSS recreations or shapes
+> - Unicode character approximations
+>
+> **ALWAYS use the actual image data provided below.**
+
+---
+
+### For React Artifacts (USE THIS - includes actual image data)
+\`\`\`tsx
+<img
+  src="${dataUrl}"
+  alt="${brandName}"
+  className="h-10 w-auto"
+/>
+\`\`\`
+
+### For Next.js Projects (with file system access)
 \`\`\`tsx
 import Image from 'next/image';
 
-// In your component:
 <Image
   src="${normalizedPath}"
   alt="${brandName}"
   width={150}
   height={40}
   className="h-10 w-auto"
-  priority // Add if logo is above the fold
+  priority
 />
 \`\`\`
 
-### Implementation (React/HTML)
-\`\`\`tsx
-<img
-  src="${normalizedPath}"
-  alt="${brandName}"
-  className="h-10 w-auto"
-/>
+### Base64 Data URL (copy for artifacts)
+Use this data URL directly in img src for artifacts:
+\`\`\`
+${dataUrl}
 \`\`\`
 
 ### With Dark Mode Support
@@ -3169,12 +3207,12 @@ import Image from 'next/image';
 <img
   src="${normalizedPath}"
   alt="${brandName}"
-  className="h-10 w-auto dark:hidden"  {/* Light mode */}
+  className="h-10 w-auto dark:hidden"
 />
 <img
   src="${normalizedPath.replace(/dark/gi, 'Light').replace(/black/gi, 'Reverse')}"
   alt="${brandName}"
-  className="h-10 w-auto hidden dark:block"  {/* Dark mode */}
+  className="h-10 w-auto hidden dark:block"
 />
 \`\`\`
 
@@ -3211,6 +3249,98 @@ import Image from 'next/image';
                 };
             }
         }
+        case "get_logo_base64": {
+            const logoArgs = args;
+            const logoPath = logoArgs.logo_path;
+            const format = logoArgs.format || "dataUrl";
+            if (!logoPath) {
+                return {
+                    content: [{ type: "text", text: "Error: logo_path is required. Use list_logos to see available logos." }],
+                    isError: true,
+                };
+            }
+            try {
+                const resolvedPath = resolveLogoPath(logoPath);
+                if (!resolvedPath) {
+                    return {
+                        content: [{ type: "text", text: `Error: Invalid logo path: ${logoPath}` }],
+                        isError: true,
+                    };
+                }
+                if (!fs.existsSync(resolvedPath)) {
+                    return {
+                        content: [{ type: "text", text: `Error: Logo not found: ${logoPath}. Use list_logos to see available logos.` }],
+                        isError: true,
+                    };
+                }
+                // Read and encode the image
+                const imageBuffer = fs.readFileSync(resolvedPath);
+                const base64Data = imageBuffer.toString('base64');
+                const mimeType = getImageMimeType(resolvedPath);
+                const fileName = path.basename(resolvedPath);
+                const dataUrl = `data:${mimeType};base64,${base64Data}`;
+                // Determine brand for alt text
+                const brandMatch = logoPath.match(/\/(sonance|iport|blaze|james|trufig)/i);
+                const brandName = brandMatch ? brandMatch[1].charAt(0).toUpperCase() + brandMatch[1].slice(1) : "Brand";
+                // Build response based on format
+                let responseText = `## Logo for Artifacts: ${fileName}
+
+> **CRITICAL:** Use ONLY this image data. NEVER draw, recreate, or approximate this logo with SVG, CSS, styled text, or any other method.
+
+### Ready-to-Use Code (copy this directly)
+\`\`\`tsx
+<img
+  src="${dataUrl}"
+  alt="${brandName}"
+  className="h-10 w-auto"
+/>
+\`\`\`
+`;
+                if (format === "dataUrl" || format === "both") {
+                    responseText += `
+### Data URL (use in img src)
+\`\`\`
+${dataUrl}
+\`\`\`
+`;
+                }
+                if (format === "base64" || format === "both") {
+                    responseText += `
+### Raw Base64 Data
+\`\`\`
+${base64Data}
+\`\`\`
+
+**MIME Type:** ${mimeType}
+`;
+                }
+                responseText += `
+---
+
+**File:** ${fileName}
+**Size:** ${imageBuffer.length} bytes
+`;
+                return {
+                    content: [
+                        {
+                            type: "image",
+                            data: base64Data,
+                            mimeType: mimeType,
+                        },
+                        {
+                            type: "text",
+                            text: responseText,
+                        },
+                    ],
+                };
+            }
+            catch (e) {
+                return {
+                    content: [{ type: "text", text: `Error reading logo: ${e}` }],
+                    isError: true,
+                };
+            }
+        }
         case "diagnose_logos": {
             // Run validation and collect diagnostic info
             const validation = validateLogoMap();
@@ -3994,6 +4124,28 @@ Now design the **${component_description}** following these tokens and principle
                 // Single-theme mode: embed the appropriate logo
                 await embedLogoWithFeedback(logoPath, `Brand Logo (${theme === "light" ? "for Light Backgrounds" : "for Dark Backgrounds"})`, contentBlocks);
             }
+            // Add critical logo usage warning
+            contentBlocks.push({
+                type: "text",
+                text: `## Logo Usage Warning
+
+> **CRITICAL:** The logo image(s) shown above are the ONLY acceptable representations.
+>
+> **NEVER:**
+> - Draw the logo with SVG paths or shapes
+> - Recreate it with styled text or colored letters
+> - Approximate it with CSS or Unicode characters
+>
+> **ALWAYS:**
+> - Use the embedded image directly in your artifact
+> - Or use \`get_logo_base64\` for a ready-to-use data URL
+> - If you cannot embed the image, use placeholder text: "[Logo: ${brand.charAt(0).toUpperCase() + brand.slice(1)}]"
+
+To get the logo as a base64 data URL for artifacts, use:
+\`\`\`
+get_logo_base64({ logo_path: "${logoPath}" })
+\`\`\``,
+            });
             // Add the main response text
             contentBlocks.push({ type: "text", text: response });
             return {
@@ -5031,6 +5183,23 @@ ${palette.preferredTheme === "dark" ? `- **Note**: ${palette.name} prefers dark
                 type: "text",
                 text: `## Logo Usage\n\nTo add the logo to your document:\n1. Save the appropriate logo image above (right-click → Save as)\n2. Use the saved path in your code:\n\n**Word (python-docx):**\n\`\`\`python\ndoc.add_picture('logo_dark.png', width=Inches(2))  # For light backgrounds\n\`\`\`\n\n**PDF (ReportLab):**\n\`\`\`python\ncontent.append(Image('logo_dark.png', width=2*inch, height=0.5*inch))\n\`\`\`\n`,
             });
+            // Add critical logo usage warning
+            templateContentBlocks.push({
+                type: "text",
+                text: `## Logo Warning
+
+> **CRITICAL:** Use ONLY the actual logo image files shown above.
+>
+> **NEVER:**
+> - Draw the logo with shapes or vector tools in your document
+> - Recreate it with styled text or colored letters
+> - Use any visual approximation or placeholder
+>
+> **ALWAYS:**
+> - Save and embed the actual PNG image file
+> - Use the code snippets above that reference the saved image file
+> - The logo images are embedded above - save them directly`,
+            });
             // Add the main template text
             templateContentBlocks.push({ type: "text", text: template });
             return {
@@ -5322,6 +5491,23 @@ ${rebrandArgs.source_format === "word" ? `
                     text: `> **Logo Note:** Brand logos could not be embedded automatically. Download the appropriate ${palette.name} logo from your brand assets folder or use the \`get_logo\` tool.`,
                 });
             }
+            // Add critical logo usage warning
+            rebrandContentBlocks.push({
+                type: "text",
+                text: `## Logo Usage Warning
+
+> **CRITICAL:** When adding the logo to your document, use the ACTUAL image files shown above.
+>
+> **NEVER:**
+> - Draw the logo with shapes or vector tools
+> - Recreate it with styled text or colored letters
+> - Use any visual approximation
+>
+> **ALWAYS:**
+> - Download and embed the actual logo image
+> - Or use \`get_logo_base64\` for a data URL for web/HTML
+> - For Word/PDF: Save the image above and use it directly`,
+            });
             // Add the main guide text
             rebrandContentBlocks.push({ type: "text", text: rebrandGuide });
             return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.117",
+  "version": "1.3.118",
   "description": "MCP Server for Sonance Brand Guidelines and Component Library - gives Claude instant access to brand colors, typography, and UI components.",
   "main": "dist/index.js",
   "type": "module",