{ "name": "Brand board from any website with MiroMiro", "nodes": [ { "parameters": { "content": "## Brand board from any website\n\nOpen the webhook URL in your browser with `?url=` and get a designed brand board: logo, brand colors with their roles, the full palette, fonts, and how sure MiroMiro is about each.\n\n**Setup**\n1. Get a free MiroMiro API key at https://miromiro.app/api/onboarding and add it as a **MiroMiro API** credential.\n2. Activate the workflow.\n3. Open `/webhook/brand-board?url=stripe.com` in a browser.\n\nEach new site costs 10 credits; the same site again within 24 hours is free.", "height": 400, "width": 420 }, "id": "note-1", "name": "Sticky Note", "type": "n8n-nodes-base.stickyNote", "typeVersion": 1, "position": [ -520, -140 ] }, { "parameters": { "path": "brand-board", "responseMode": "responseNode", "options": {} }, "id": "hook-1", "name": "Open in browser", "type": "n8n-nodes-base.webhook", "typeVersion": 2, "position": [ 0, 0 ], "webhookId": "miromiro-brand-board" }, { "parameters": { "resource": "website", "operation": "brand", "url": "={{ $json.query.url }}", "options": {} }, "id": "brand-1", "name": "Extract Brand", "type": "n8n-nodes-miromiro.miroMiro", "typeVersion": 1, "position": [ 220, 0 ], "credentials": { "miroMiroApi": { "id": "", "name": "MiroMiro API" } } }, { "parameters": { "jsCode": "// Draws a brand board page from MiroMiro's Extract Brand result.\nconst b = $input.first().json\nconst esc = (s) => String(s ?? '').replace(/[&<>\"]/g, (c) => ({ '&': '&', '<': '<', '>': '>', '\"': '"' }[c]))\nconst hex = (c) => String(c || '').toLowerCase()\n// Black or white text, whichever reads better on the color.\nconst ink = (c) => {\n const m = /^#?([0-9a-f]{6})$/i.exec(hex(c).replace('#', '').padEnd(6, '0'))\n if (!m) return '#111'\n const n = parseInt(m[1], 16)\n const lum = (0.299 * (n >> 16) + 0.587 * ((n >> 8) & 255) + 0.114 * (n & 255)) / 255\n return lum > 0.6 ? '#111' : '#fff'\n}\nconst host = String(b.url || '').replace(/^https?:\\/\\//, '').replace(/^www\\./, '').replace(/\\/.*$/, '')\nconst colors = b.colors || {}\nconst names = b.colorNames || {}\nconst roles = ['primary', 'accent', 'text', 'background'].filter((r) => colors[r])\nconst palette = (b.palette || []).slice(0, 12)\nconst fonts = b.typography || {}\nconst fontList = [fonts.primary, fonts.mono].filter(Boolean)\nconst socials = (b.socials || []).slice(0, 6)\nconst logo = (b.logos || []).find((l) => /\\.svg/i.test(l.url)) || (b.logos || [])[0] || (b.logo ? { url: b.logo } : null)\n\nconst roleCard = (r) => `\n

\n ${esc(r)}\n ${esc(hex(colors[r]))}\n ${esc(names[r] || '')}\n

`\nconst swatch = (p) => `\n

${esc(p.name)}${esc(hex(p.color))}

`\n\nconst html = `\n\n${esc(host)} brand board\n\n

\n ${logo ? ` $\"\"$ ` : ''}\n

${esc(host)}

${esc(b.description || b.title || '')}

\n\n

Brand colors

${roles.map(roleCard).join('')}

\n\n ${palette.length ? `

Palette

${palette.map(swatch).join('')}

` : ''}\n\n ${fontList.length ? `

Typography

${fontList.map((f, i) => `\n

${i === 0 && f === fonts.primary ? 'Primary' : 'Mono'}\n

Aa Bb Cc 123

\n ${esc(f)}

`).join('')}

` : ''}\n\n

How sure is this

${esc(b.signals && b.signals.explanation ? b.signals.explanation : '')}\n ${socials.length ? `

${socials.map((s) => `${esc(s.platform)} ${esc(s.handle || '')}`).join('')}

` : ''}\n

\n\n \n

`\n\nreturn [{ json: { html } }]\n" }, "id": "board-1", "name": "Draw the brand board", "type": "n8n-nodes-base.code", "typeVersion": 2, "position": [ 440, 0 ] }, { "parameters": { "respondWith": "text", "responseBody": "={{ $json.html }}", "options": { "responseHeaders": { "entries": [ { "name": "Content-Type", "value": "text/html; charset=utf-8" } ] } } }, "id": "respond-1", "name": "Show the page", "type": "n8n-nodes-base.respondToWebhook", "typeVersion": 1.1, "position": [ 660, 0 ] } ], "connections": { "Open in browser": { "main": [ [ { "node": "Extract Brand", "type": "main", "index": 0 } ] ] }, "Extract Brand": { "main": [ [ { "node": "Draw the brand board", "type": "main", "index": 0 } ] ] }, "Draw the brand board": { "main": [ [ { "node": "Show the page", "type": "main", "index": 0 } ] ] } }, "settings": { "executionOrder": "v1" } }