frontend-inspo-mcp 🎨

A local MCP server that lets AI coding agents discover and pull real frontend code, UI components, design mockups, design-system tokens, 3D/WebGL source, and agent guidance — across 89 sources, from shadcn-schema component registries to pmndrs 3D libraries, HTML/CSS galleries, design-token APIs, and free asset libraries.

Give Claude, Cursor, Kiro, or any MCP-compatible agent instant access to thousands of
copy-paste UI components and free design assets — with the actual source code, not
just links. Ask for "a glassmorphism card" or "an animated shadcn button" and get real,
usable code back.

📦 Install from npm (no clone needed)

Add this to your MCP client config and restart it; npx fetches and runs the server for you:

{
  "mcpServers": {
    "frontend-inspo": {
      "command": "npx",
      "args": ["-y", "frontend-inspo-mcp"]
    }
  }
}

• Claude Desktop — paste it into claude_desktop_config.json
  (macOS: ~/Library/Application Support/Claude/, Windows: %APPDATA%\Claude\).
• Claude Code — run claude mcp add frontend-inspo -- npx -y frontend-inspo-mcp,
  or put the same JSON in a project-level .mcp.json.
• Cursor — paste it into ~/.cursor/mcp.json (global) or .cursor/mcp.json (per project).

Prefer to hack on it? See Quick start to run from source.

🎬 Interactive Demo Website

The project includes an interactive web application showcasing all 89 sources and real-time MCP tool executions:

• 🌐 Live Web Demo: https://notsointresting.github.io/frontend-inspo-mcp/
• 💻 Run Locally:

  python -m http.server 3000 --directory demo
  # or
  npx serve demo
  

What's Inside the Demo:

• ⚡ Interactive Component Studio: Live test rendered components including Magic UI Marquee, shadcn/ui Button Suite, Aceternity 3D Tilt Card, Radix Color Workbench, and the Live Sandbox Runner.
• 📦 Live Sandbox Runner (asSandbox: true): Preview and interact with 9 runnable component presets:
  • 🛒 E-Commerce Deal Card (shadcn + Tailwind)
  • ✨ Live Status Badges (shadcn / radix)
  • 💬 AI Agent Chat Thread (assistant-ui)
  • 📊 Responsive Metric Bar Chart (visx / D3)
  • 🌐 5kB WebGL Interactive Globe (cobe)
  • 📑 Enterprise Data Grid (reui / hextaui)
  • 🎛️ Accessible Switch & Slider (base-ui / jolly)
  • 🌌 Aurora Plasma Shader (shaders / babylon)
  • 🌊 Wave Button (uiverse)
• 🎨 Responsive Viewports & Accent Toggling: Test components in Desktop (100%), Tablet (680px), and Mobile (360px) frames, toggle Light/Dark canvas modes, and switch across 5 accent palettes (Cyan, Emerald, Electric Gold, Violet, Rose).
• 💾 Standalone HTML Export: Click Download HTML or Copy Sandbox HTML to generate isolated, zero-dependency HTML previews with Tailwind CDN, Lucide icons, and Babel runtime ready for offline inspection.
• 🏛️ 12 Living Verification Artifacts: Interactive specimens directly generated from real MCP tool calls (typography, color palettes, micro-interactions, Baseline browser radar, D3 charts, GLSL ripples, enterprise tables, and accessible ARIA switches).
• 🔍 89-Source Atlas & Instant Search: Live multi-filter search engine across all 89 sources with exact category counts (React: 45, Tailwind: 39, 3D: 22, Animation: 28, Tokens: 7) and instant 📋 Copy MCP Call actions for every card.

✨ Why use this?

Most component galleries are built for humans clicking around a browser. This server makes
them agent-readable, so your AI assistant can search, compare, and paste real code
directly into your project.

• 🔍 Search 89 sources through one consistent set of tools
• 📋 Get real code — React/TSX, Tailwind, vanilla HTML/CSS/JS, GLSL, design tokens
• 🎨 Design systems & tokens — DESIGN.md, Tailwind themes, CSS variables, color/gradient/font tokens
• 🧊 3D & WebGL — three.js, the pmndrs ecosystem (drei, R3F, postprocessing, rapier, uikit…), shaders
• 🎭 Free design assets — mockups (Figma / Sketch / PSD), HDRIs, PBR textures
• 🧭 Agent guidance — curated R3F, GSAP, accessibility (APG) and Baseline compat references
• ⚡ Fast & polite — in-memory + optional disk cache, per-host throttling, deadline-bounded parallel search
• 🧩 Pluggable — add a new source in one small adapter file

📚 Sources (89)

Every source is public and read-only. Content is returned as reference data, never executed.
heavy sources (large downloads or tight quotas) are skipped by search_all unless you name them
in its sources argument. Call list_sources for the live list with each source's idFormat.

shadcn-schema component registries (React + Tailwind)

Component libraries & data visualization

HTML / CSS / Tailwind galleries

Design systems, tokens & fonts

3D, WebGL & React Three Fiber

Animation & scroll

Guidance, accessibility & compatibility

Free design assets

Excluded on purpose. Some popular sources are intentionally not included because their
robots.txt disallows the needed path, or their license forbids redistribution: Iconify &
Openverse (API path disallowed), 8bitcn / 21st.dev / Shadcnblocks / ShadcnSpace (/r/
disallowed), Tailark & Preline (paid / fair-use), Efferd (paid blocks mixed into its index
without a flag), Animate UI (Commons Clause), and key-gated media APIs (Unsplash, Pexels,
Sketchfab, Google Fonts API, LottieFiles). See docs/security-assurance-case.md.

🚀 Quick start

git clone https://github.com/notsointresting/frontend-inspo-mcp.git
cd frontend-inspo-mcp
npm install
npm run build

Requires Node 22+ (uses the built-in fetch and current LTS APIs).

Run the offline unit tests (no network needed):

npm test

Verify every source is live:

npm run smoke   # hits all 89 sources and asserts parsing → prints ALL PASS

🔌 Add it to your MCP client

The server speaks MCP over stdio. Point your client at the built dist/index.js.

Claude Desktop / Cursor / generic (claude_desktop_config.json)

{
  "mcpServers": {
    "frontend-inspo": {
      "command": "node",
      "args": ["/absolute/path/to/frontend-inspo-mcp/dist/index.js"]
    }
  }
}

Claude Code (~/.claude.json, global mcpServers)

{
  "mcpServers": {
    "frontend-inspo": {
      "type": "stdio",
      "command": "node",
      "args": ["/absolute/path/to/frontend-inspo-mcp/dist/index.js"]
    }
  }
}

On Windows use escaped backslashes, e.g. "C:\\path\\to\\dist\\index.js".

🛠️ Tools

Every tool takes a source argument — one of the 89 ids returned by list_sources
(e.g. shadcn, magicui, refero, threejs, drei, polyhaven, freefrontend, lsgraphics).
Call list_sources first: it reports each source's stack tags, whether it returns inline code
(hasInlineCode), how to write its ids (idFormat), and whether search_all skips it unless
named (heavy).

Replies that carry third-party content include a notice field restating that the content is
reference data, not instructions. The default reply cap is 150,000 characters (get_code's
maxChars can raise it up to 1,000,000).

Resource & prompts

• Resource template inspo://{source}/{+id} — read any resource as metadata JSON plus one text
  part per code file; add #<file> to read a single file.
• Prompt find_component — find ready-made UI code for a need across every source, then fetch
  the best match (optional stack filter).
• Prompt design_system_from_site — turn a real site's design system into a reference for your
  project (uses the design-token sources).
• Standalone Sandbox Mode (asSandbox: true) — embed Tailwind CDN, Lucide icons, and React/Babel
  runtime into a self-contained sandbox.html preview for instant browser execution and testing.

Examples

Search animated React components:

{ "source": "magicui", "query": "marquee", "limit": 5 }

Get a shadcn button's real source:

{ "source": "shadcn", "id": "button" }

Grab a CSS hover effect with code:

{ "source": "freefrontend", "category": "css-hover-effects", "limit": 5 }

Find a free device mockup:

{ "source": "lsgraphics", "id": "macbook-mockup" }

💬 Try it in one prompt

"Build me a personal portfolio landing page. Use the frontend-inspo MCP: pull an
animated hero text effect from Magic UI, a shadcn card for the projects grid, a CSS
hover effect from FreeFrontend, and a free laptop mockup from LS.GRAPHICS — then
assemble it into a single index.html."

🧭 How it works

Every source is a small adapter implementing one SourceAdapter contract
(src/lib/types.ts). Adapters are grouped by how they fetch:

• shadcn-schema registries (shadcn, Magic UI, Aceternity, React Bits, Fancy, VengeanceUI,
  Canvas UI, Cult UI, Motion Primitives, Kibo UI, coss, Kokonut, Eldora, UI Layouts, SmoothUI,
  AI Elements, SVGL, Watermelon, HextaUI, ReUI, Cnippet, Systaliko, UI TripleD, Ruixen,
  useLayouts, Spell, Jolly UI, assistant-ui) share one factory that reads the
  shadcn registry schema — an index of items plus per-item
  JSON containing the real component source.
• GitHub / jsDelivr source-tree libraries (drei, react-spring, zustand, glyph, postprocessing,
  detect-gpu, uikit, rapier, leva, maath, OGL, WebGPU Samples, ShaderGradient, liquid-logo,
  liquid-glass-js, img2threejs, GSAP, Lenis, Anime.js, Two.js, scrollama, three.js, APG, Base UI,
  visx, REAVIZ, Radix Themes, Reka UI, Tamagui, Ionic, Vuestic Admin, Semantic UI, TW Elements,
  Babylon.js, PlayCanvas, Shaders, COBE, …) share
  a factory that lists a repo's git tree (or an npm package's file tree), keeps the relevant files,
  and serves raw source. If the GitHub API is rate-limited it falls back to the jsDelivr mirror; pin
  a commit SHA for an immutable read.
• HTML galleries (FreeFrontend, Uiverse, HyperUI, Meraki, Pines, LS.GRAPHICS, Codrops, …) parse
  server-rendered pages with cheerio; FreeFrontend base64-decodes inline code blocks.
• JSON / data APIs (Watermelon catalog, Poly Haven, ambientCG, Fontsource, uiGradients,
  Radix Colors, Open Props, web-features Baseline) call documented public endpoints.
• Refero Styles reads the public, server-rendered gallery and /style/<id> pages
  (its /api/ path is disallowed by robots.txt, so it is not used) and synthesizes a DESIGN.md,
  Tailwind theme, CSS variables, and design-token JSON — no subscription required.
• React Three Fiber (r3f) serves a bundled, offline guidance skill (no network).
• ThreeUI fetches the MengTo/threeui manifest once and caches the parsed catalog in-process
  (it is large, hence heavy).

Set an optional GITHUB_TOKEN to lift GitHub's unauthenticated rate limit (60 req/hr) for the
GitHub-backed sources. Requests are HTTPS-only, cached, throttled per host to stay polite, and
retried with backoff on transient failures. Downloaded content is treated as data and is never
executed.

Configuration (environment variables)

All optional — the defaults work out of the box.

🗂️ Project layout

src/
  index.ts              stdio launcher (npm bin)
  server.ts             the six MCP tools, inspo:// resource, two prompts, validation, size cap
  smoke.ts              live per-source checks (npm run smoke)
  lib/
    types.ts            shared types + SourceAdapter contract
    validate.ts         allowlist schemas for tool arguments
    fetch.ts            HTTPS-only HTTP: memory+disk cache, per-host throttle, retry/backoff
    search.ts           query ranking shared by every adapter
    memo.ts             small async memoizer (shared index/manifest caches)
  sources/
    index.ts            the single source registry (ids, enum, getAdapter)
    registry.ts         shadcn-schema registry factory + core registries
    community-registries.ts  more shadcn-schema registries (Cult, Kokonut, …)
    tweakcn.ts          shadcn theme presets
    shadcn-directory.ts directory of public shadcn registries
    packages.ts         source trees via jsDelivr + GitHub (factories + libraries)
    libraries.ts        more GitHub/jsDelivr library sources
    collections.ts      curated collections (Uiverse, HyperUI, Pines, …)
    codrops.ts          Codrops demo source (heavy)
    design-apis.ts      Open Props, Radix Colors, daisyUI, Flowbite, …
    open-data.ts        Poly Haven, ambientCG, web-features (Baseline)
    fontsource.ts       self-hostable open-source fonts
    uigradients.ts      CSS gradient presets
    freefrontend.ts     HTML parse + base64 code decode
    watermelon.ts       JSON API client + shadcn registry code
    lsgraphics.ts       HTML parse (mockups)
    refero.ts           Refero public pages -> synthesized DESIGN.md / tokens
    threeui.ts          ThreeUI manifest (heavy)
    r3f.ts              bundled React Three Fiber guide (offline)
    r3f-content/        the bundled R3F skill markdown (copied into dist on build)
tests/                  offline unit tests (node:test), network faked
scripts/                build helpers + reproducible-build + version checks

How the pieces fit together is described in ARCHITECTURE.md.

🤝 Contributing

New sources are welcome — most fit in one small adapter file implementing the
SourceAdapter contract in src/lib/types.ts. Open a PR.

See CONTRIBUTING.md for the step-by-step guide, code standards, and the checks a PR must pass.

Project documents:

• ROADMAP.md: what is planned for the next year, and what is out of scope
• GOVERNANCE.md: how decisions are made, roles, and releases
• ARCHITECTURE.md: how the server is built
• SECURITY.md and the security assurance case: reporting vulnerabilities, and what to expect
• RELEASING.md: how releases are signed and how to verify them
• CODE_OF_CONDUCT.md

🙏 Credits & acknowledgements

This project is a discovery layer over third-party resources. All content, code
snippets, components, and mockups belong to their original creators. Please respect each
source's license before reusing anything.

• FreeFrontend — curated frontend code snippets (per-item licenses, often MIT)
• shadcn/ui by @shadcn — MIT
• Magic UI — MIT
• Aceternity UI by Manu Arora
• React Bits by David Haz — MIT
• Refero — design-system references extracted from public websites (data read from Refero's public pages; each referenced site owns its brand)
• three.js by mrdoob & contributors — MIT
• drei by pmndrs — MIT
• react-spring by pmndrs — MIT
• zustand by pmndrs — MIT
• glyph by pmndrs — MIT
• postprocessing by Raoul van Rüschen — Zlib
• detect-gpu by pmndrs — MIT
• ShaderGradient by ruucm
• liquid-logo by collidingScopes — MIT
• liquid-glass-js by Armagan Amcalar — MIT
• ThreeUI by Meng To — MIT
• img2threejs — Apache-2.0
• GSAP by GreenSock — MIT
• VengeanceUI by Ashutosh — MIT
• Canvas UI by David Haz — MIT
• Fancy Components by Daniel Petho — MIT
• Two.js by jonobr1 — MIT
• scrollama by Russell Samora — MIT
• Watermelon UI — open-source React platform
• LS.GRAPHICS — free & premium design mockups
• Cult UI, Kibo UI, coss ui, Kokonut UI, Eldora UI, UI Layouts, SmoothUI, Motion Primitives — shadcn-schema component registries (MIT)
• HextaUI, ReUI by Keenthemes, Cnippet UI, Systaliko UI, UI TripleD, Ruixen UI, useLayouts, Spell UI, Jolly UI — shadcn-schema component registries (MIT)
• Base UI by MUI — MIT · visx by Airbnb — MIT · REAVIZ — Apache-2.0
• assistant-ui, Radix Themes by WorkOS, Reka UI by UnoVue, Tamagui, Ionic Framework, Vuestic Admin by Epicmax, Semantic UI, TW Elements by MDBootstrap — MIT
• Babylon.js — Apache-2.0 · PlayCanvas — MIT · Shaders by Shader Effects Inc. — MIT · COBE by Shu Ding — MIT
• AI Elements by Vercel · SVGL by pheralb
• Uiverse, HyperUI, Meraki UI, Pines, daisyUI, Flowbite — HTML/Tailwind component galleries
• tweakcn, Open Props, Radix Colors, Fontsource, uiGradients, awesome-design-md — design tokens, themes & fonts
• pmndrs ecosystem: uikit, react-three-rapier, leva, maath — MIT
• OGL by Nathan Gordon · WebGPU Samples — BSD-3-Clause
• Lenis by darkroom.engineering — MIT · Anime.js by Julian Garnier — MIT
• Codrops by Codrops · WAI-ARIA APG by the W3C
• Anthropic Agent Skills · Vercel Web Interface Guidelines · web-features by the W3C WebDX CG
• Poly Haven — CC0 HDRIs/textures/models · ambientCG by Lennart Demes — CC0

Built with the Model Context Protocol SDK and
cheerio.

📄 License

MIT © notsointresting — for the server code.
Third-party resources retrieved through it remain under their respective licenses.

_{Keywords: MCP server · Model Context Protocol · AI coding agent · UI components ·
React components · Tailwind CSS · shadcn/ui · Magic UI · Aceternity UI · React Bits ·
FreeFrontend · design mockups · Figma · component library · copy-paste UI ·
design tokens · DESIGN.md · design system · Refero · three.js · GLSL shaders · WebGL ·
React Three Fiber · drei ·
Claude · Cursor · frontend design · CSS snippets · Watermelon UI · LS.GRAPHICS.}