https://webzooo.com/assets/Mcp-657r5v_g.js

1import{j as e,L as s,r as c}from"./react-vendor-De9fHIuN.js";import{u as m}from"./index-BNludUco.js";import{u as p,p as h}from"./index-Cx94C-ON.js";import{S as x}from"./SiteFooter-B2LJNZrA.js";import{B as a}from"./button-D4ZvhJXX.js";import{C as u}from"./ClientGrid-j7c0RZZn.js";import{C as g}from"./check-mZ_fHYwF.js";import{C as b}from"./copy-C4UEZ9w-.js";import"./radix-base-Dh91VGHp.js";import"./radix-vendor-BQCqNqg0.js";import"./query-vendor-CRtkK6HE.js";import"./postgrest-vendor-DPuxUKz0.js";import"./footer-dots-UTegXgL9.js";import"./input-ByNtl6d_.js";import"./label-Bs9ubFll.js";import"./radix-label-DhIN3S0V.js";import"./index-D3TFbZtg.js";import"./textarea-Y4ZewLuk.js";import"./loader-circle-BwnpLtSb.js";const f="claude mcp add webzooo --env WEBZOOO_API_KEY=wz_... -- npx -y webzooo-mcp",y=`{
2  "mcpServers": {
3    "webzooo": {
4      "command": "npx",
5      "args": ["-y", "webzooo-mcp"],
6      "env": { "WEBZOOO_API_KEY": "wz_..." }
7    }
8  }
9}`,j=[{look:"Editorial, understated",filters:"serif + one family + heading weight ≤ 400"},{look:"Brutalist, raw",filters:"sharp UI + visible borders + big typography"},{look:"Modern SaaS",filters:"rounded UI + cards + pills + pinned nav"},{look:"Spacious, minimal",filters:"spacious + centered + ≤ 5 nav links"},{look:"Dense, information-rich",filters:"dense + grid + 12 columns"},{look:"Classic magazine",filters:"grid + serif + container ≥ 1100px"}],w=[{want:"Sites built on a colour you have already chosen",tool:"search_by_color",detail:"Ranked by perceptual distance in OKLab, not by colour name."},{want:"The real tokens behind a site you like",tool:"get_design_dna",detail:"Typefaces per role, background and text hex, container width, grid, heading weight."},{want:"What is normal for an industry before you commit",tool:"get_token_stats",detail:"“88% of design studios are sans. 58% set one family for both roles.”"},{want:"How people build one kind of section",tool:"search_sections",detail:"Cropped bands of heroes, pricing, FAQs and footers — not whole-page screenshots."},{want:"A look you can describe but not name",tool:"search_websites",detail:"Filters AND together. The recipes below each return real results."},{want:"Mobile and logo references",tool:"search_apps · search_logos",detail:"Mobile and brand references from the same measured colour index."}],N=[{h:"Measured, not guessed",p:"Every value is read off the live DOM at scan time — typefaces per role, background and text hex, container width, grid, heading weight. Nothing is inferred from a picture."},{h:"Section crops, not whole pages",p:"Heroes, pricing, FAQs and footers come back as cropped bands, so the part you asked for is the part you get — and a crop is only served when the scan and the screenshot provably match."},{h:"Colour matched the way eyes work",p:"Search by hex and results are ranked by perceptual distance in OKLab, so a search for orange returns sites that read orange — not every page containing an orange pixel."},{h:"Real interfaces only",p:"App Store screenshots are advertisements. Every one is measured and the ones with no interface in them are filtered out before they reach you."},{h:"Your agent does the thinking",p:"Webzooo supplies measured references; the reasoning stays with you or your agent. There is no model in the middle adding its opinion to your data."}],n=[{q:"What is the Webzooo MCP server?",a:"An MCP server that gives Claude, Cursor or any MCP client direct access to 4,600+ curated references — websites, iOS apps and logos — with the measured values attached: real typefaces per role, background and text hex, container width, grid, heading weight."},{q:"Is there a free tier?",a:"No. The MCP is a paid product: $9/month, or $6/month billed $72 annually. Keys are issued on payment."},{q:"Where does the data come from?",a:"Every value is read off the live DOM at scan time, not judged from a screenshot. Colours are indexed in OKLab, section bands are measured as percentages of page height."},{q:"Which clients work?",a:"Any MCP client. Claude Code, Claude Desktop and Cursor are the ones with a one-line setup above; everything else takes the same JSON config."}

9,{q:"What happens to my key if I cancel?",a:"It is revoked when Stripe reports the subscription has ended. Nothing else changes, and webzooo.com stays free to browse."}],i=({code:o,label:t})=>{const[d,r]=c.useState(!1),l=async()=>{try{await navigator.clipboard.writeText(o),r(!0),setTimeout(()=>r(!1),1600)}catch{m.error("Could not copy — select the text instead")}};return e.jsxs("div",{className:"relative rounded-lg border border-border bg-muted/40",children:[t&&e.jsx("div",{className:"border-b border-border px-4 py-2 text-[11px] uppercase tracking-wide text-muted-foreground",children:t}),e.jsx("pre",{className:"overflow-x-auto px-4 py-3 text-[13px] leading-relaxed text-foreground/90",children:e.jsx("code",{children:o})}),e.jsx("button",{type:"button",onClick:l,"aria-label":"Copy to clipboard",className:"absolute right-2 top-2 rounded-md border border-border bg-background/80 p-1.5 text-muted-foreground transition-colors hover:text-foreground",style:t?{top:"2.75rem"}:void 0,children:d?e.jsx(g,{className:"h-3.5 w-3.5"}):e.jsx(b,{className:"h-3.5 w-3.5"})})]})},B=()=>{p({title:"Webzooo MCP — Design References With the Numbers Attached",description:"An MCP server for Claude, Cursor, Codex and Kimi: 4,600+ design references with real typefaces, hex values, container widths and grids, measured not guessed.",canonical:"https://webzooo.com/mcp",ogImage:"https://webzooo.com/og-image.webp"});const o={"@context":"https://schema.org","@graph":[{"@type":"SoftwareApplication",name:"Webzooo MCP",applicationCategory:"DeveloperApplication",operatingSystem:"Any",url:"https://webzooo.com/mcp",description:"An MCP server exposing 4,600+ curated websites, iOS apps and logos with measured design tokens — typefaces per role, hex values, container widths, grids and section bands.",offers:[{"@type":"Offer",price:"9.00",priceCurrency:"USD",name:"Monthly"},{"@type":"Offer",price:"72.00",priceCurrency:"USD",name:"Annual"}],publisher:{"@type":"Organization",name:"Webzooo",url:"https://webzooo.com"}},{"@type":"FAQPage",mainEntity:n.map(t=>({"@type":"Question",name:t.q,acceptedAnswer:{"@type":"Answer",text:t.a}}))},{"@type":"BreadcrumbList",itemListElement:[{"@type":"ListItem",position:1,name:"Home",item:"https://webzooo.com"},{"@type":"ListItem",position:2,name:"MCP",item:"https://webzooo.com/mcp"}]}]};return e.jsxs("div",{className:"min-h-screen bg-background text-foreground",children:[e.jsx(h,{}),e.jsx("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(o)}}),e.jsxs("main",{className:"container max-w-2xl mx-auto px-4 py-16 md:py-24",children:[e.jsxs("section",{className:"mb-12 md:mb-16",children:[e.jsx("span",{className:"inline-block mb-3 rounded-full border border-border px-2.5 py-1 text-[11px] uppercase tracking-wide text-muted-foreground",children:"Model Context Protocol"}),e.jsx("h1",{className:"font-heading font-medium text-h1 mb-3",children:"Design references with the numbers attached"}),e.jsx("p",{className:"text-lg text-foreground/90 mb-6",children:"Every design library hands your agent a picture of the answer. This one read the page and kept the values."}),e.jsx("p",{className:"text-[15px] leading-relaxed text-foreground/80 mb-6",children:"The actual typefaces in both roles, the real background and text hex, the container width, the grid, the heading weight — measured off the live DOM at scan time, not judged from a screenshot. So you can ask things no screenshot library can answer:"}),e.jsx("blockquote",{className:"mb-6 border-l-2 border-primary pl-4 text-[15px] italic leading-relaxed text-foreground/90",children:"design studios that set one typeface for both heading and body, light weight"}),e.jsxs("p",{className:"text-[15px] leading-relaxed text-foreground/80 mb-8",children:["and get back 49 real sites with ",e.jsx("code",{className:"rounded bg-muted px-1 py-0.5 text-[13px]",children:"FolioStd Light"}),","," ",e.jsx("code",{className:"rounded bg-muted px-1 py-0.5 text-[13px]",children:"#282828"})," and"," ",e.jsx("code",{className:"rounded bg-muted px-1 py-0.5 text-[13px]",children:"0px"})," corners — not a mood board you then have to eyedropper."]}),e.jsxs("p",{className:"mb-8 text-[15px] leading-relaxed text-foreground

9/80",children:[e.jsx("strong",{className:"font-medium text-foreground",children:"4,600+ real references"})," — curated websites, iOS apps and logos, every one of them scanned and measured."]}),e.jsx("p",{className:"border-t border-border pt-6 text-[13px] text-muted-foreground",children:"Works with the agent you already use. No API key beyond your Webzooo key."}),e.jsx("div",{className:"mt-4",children:e.jsx(u,{})})]}),e.jsx("section",{className:"mb-12 md:mb-16",children:e.jsxs("div",{className:"rounded-2xl border border-border p-7",children:[e.jsx("p",{className:"text-[11px] font-medium uppercase tracking-wide text-muted-foreground",children:"Pricing"}),e.jsx("p",{className:"mt-2 font-heading text-[22px] font-medium leading-snug tracking-[-0.02em]",children:"$9/month, or $6/month billed $72 annually."}),e.jsx("p",{className:"mt-2 text-[15px] leading-relaxed text-muted-foreground",children:"10,000 requests a month. No free tier. Keys are issued on payment."}),e.jsx(a,{asChild:!0,className:"mt-5 rounded-full px-6",children:e.jsx(s,{to:"/pricing",children:"See pricing & set up"})})]})}),e.jsxs("section",{className:"mb-12 md:mb-16",children:[e.jsx("h2",{className:"font-heading font-medium text-h3 mb-4",children:"Install"}),e.jsx("p",{className:"mb-4 text-[15px] leading-relaxed text-foreground/80",children:"One line in Claude Code, with the key from your email:"}),e.jsx("div",{className:"mb-6",children:e.jsx(i,{code:f})}),e.jsxs("p",{className:"mb-4 text-[15px] leading-relaxed text-foreground/80",children:["Cursor (",e.jsx("code",{className:"rounded bg-muted px-1 py-0.5 text-[13px]",children:"~/.cursor/mcp.json"}),"), Claude Desktop (",e.jsx("code",{className:"rounded bg-muted px-1 py-0.5 text-[13px]",children:"~/Library/Application Support/Claude/claude_desktop_config.json"}),"), Kimi (",e.jsx("code",{className:"rounded bg-muted px-1 py-0.5 text-[13px]",children:"~/.kimi-code/mcp.json"}),") or any other client take the same config:"]}),e.jsx(i,{code:y,label:"mcp.json"}),e.jsxs("p",{className:"mt-4 text-[15px] leading-relaxed text-foreground/80",children:["Your key never reaches a third party and the server only ever reads. Every response carries your remaining allowance in"," ",e.jsx("code",{className:"rounded bg-muted px-1 py-0.5 text-[13px]",children:"x-webzooo-used"})," and"," ",e.jsx("code",{className:"rounded bg-muted px-1 py-0.5 text-[13px]",children:"x-webzooo-limit"}),", so you see the ceiling coming rather than meeting it as a failed call."]})]}),e.jsxs("section",{className:"mb-12 md:mb-16",children:[e.jsx("h2",{className:"font-heading font-medium text-h3 mb-5",children:"What you can ask it"}),e.jsx("div",{className:"divide-y divide-border border-y border-border",children:w.map(t=>e.jsxs("div",{className:"py-4",children:[e.jsxs("div",{className:"mb-1 flex flex-wrap items-baseline gap-x-3 gap-y-1",children:[e.jsx("span",{className:"text-[15px] font-medium text-foreground",children:t.want}),e.jsx("code",{className:"rounded bg-muted px-1.5 py-0.5 text-[12px] text-muted-foreground",children:t.tool})]}),e.jsx("p",{className:"text-[14px] leading-relaxed text-muted-foreground",children:t.detail})]},t.tool))})]}),e.jsxs("section",{className:"mb-12 md:mb-16",children:[e.jsx("h2",{className:"font-heading font-medium text-h3 mb-3",children:"Describing a look"}),e.jsx("p",{className:"mb-5 text-[15px] leading-relaxed text-foreground/80",children:"There is no free-text search and you do not need one — the filters AND together. Six worked recipes, each verified to return results:"}),e.jsx("div",{className:"overflow-x-auto",children:e.jsx("table",{className:"w-full border-collapse text-left text-[14px]",children:e.jsx("tbody",{className:"divide-y divide-border border-y border-border",children:j.map(t=>e.jsxs("tr",{children:[e.jsx("th",{scope:"row",className:"py-3 pr-6 align-top font-medium text-foreground whitespace-nowrap",children:t.look}),e.jsx("td",{className:"py-3 align-top text-muted-foreground",children:t.filters})]},t.look))})})})]}),e.jsxs("section",{className:"mb-12 md:mb-16",children:[e.jsx("h2",{className:"font-heading font-medium text-h3 mb-5",children:"Why it's different"}),e.jsx("div",{className:"space-y-5",children:N.map(t=>e.jsxs("div",{children:[e.jsx("h3",{className:"mb-1 text-base font-semibold text-foreground",children:t.h}),e.jsx("p",{className:"text-[15px] leading-relaxed text-muted-foreground",children:t.p})]},t.h))})]}),e.jsxs("section",{className:"mb-12 md:mb-16",children:[e.jsx("h2",{className:"font-heading font-medium text-h3 mb-4",children:"FAQ"}),e.jsx("div",{className:"space-y-6",children:n.map(t=>e.jsxs("div",{children:[e.jsx("h3",{className:"mb-2 text-base font-semibold text-foreground",children:t.q}),e.jsx("p",{className:"text-[15px] leading-relaxed text-muted-foreground",children:t.a})]},t.q))})]}),e.jsxs("section",{children:[e.jsx("p",{className:"mb-4 text-[15px] leading-relaxed text-foreground

9/80",children:"Fourteen tools, measured values, no model in the middle."}),e.jsx(a,{asChild:!0,className:"rounded-full px-6",children:e.jsx(s,{to:"/pricing",children:"See pricing"})})]})]}),e.jsx(x,{})]})};export{B as default};