frontend-inspo-mcp

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 65 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.

🎬 Demo

Demo video coming soon.

---

✨ 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 65 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 (65)

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)

Source	What it gives you	Inline code?
shadcn/ui	React + Tailwind v4 + Radix components, blocks, charts (24 style variants)	✅
Magic UI	Animated React + Framer Motion components	✅
Aceternity UI	Bold animated React + Tailwind components	✅
React Bits	Animated React components (JS/TS, CSS/Tailwind)	✅
Fancy Components	Motion, scroll, text-physics & 2D effect components	✅
VengeanceUI	Animated React + Tailwind + Framer Motion components	✅
Canvas UI	WebGL/WebGPU canvas components (React/Vue/Svelte/Solid/Preact/vanilla)	✅
Cult UI	Animated React + Tailwind + Framer Motion components	✅
Motion Primitives	Motion-first React + Tailwind + Framer Motion primitives	✅
Kibo UI	Composable shadcn-registry React + Tailwind components	✅
coss ui	React + Tailwind application components	✅
Kokonut UI	Animated React + Tailwind components	✅
Eldora UI	Animated React + Tailwind components	✅
UI Layouts	Animated React + Tailwind layout components	✅
SmoothUI · heavy	Animated React + Tailwind components	✅
AI Elements	React + Tailwind building blocks for AI chat UIs	✅
SVGL	SVG brand logos as React components	✅
Watermelon UI	React components, blocks, dashboards, templates	✅

HTML / CSS / Tailwind galleries

Source	What it gives you	Inline code?
FreeFrontend	HTML / CSS / JS / Bootstrap / Tailwind snippets (~900 collections)	✅
Uiverse	Community HTML/CSS + Tailwind UI elements	✅
HyperUI	Copy-paste Tailwind HTML components	✅
Meraki UI	Tailwind HTML components (RTL-ready)	✅
Pines	Alpine.js + Tailwind UI library	✅
daisyUI	Tailwind CSS component classes	✅
Flowbite	Tailwind HTML + JS components	✅

Design systems, tokens & fonts

Source	What it gives you	Inline code?
Refero Styles	Design systems from real sites — DESIGN.md, Tailwind, CSS vars, tokens	✅
tweakcn	shadcn theme presets — CSS variables & Tailwind themes	✅
Open Props	Open-source CSS custom-property design tokens	✅
Radix Colors	Accessible color scales as CSS/JS tokens	✅
Fontsource	Self-hostable open-source font packages & metadata	✅
uiGradients	Curated CSS gradient presets	✅
awesome-design-md	Curated DESIGN.md design-system references	✅
shadcn Registry Directory	Directory of public shadcn registries to point tools at	—

3D, WebGL & React Three Fiber

Source	What it gives you	Inline code?
three.js	Official examples — GLSL shaders, post-fx, loaders, controls	✅
drei	React Three Fiber helper components	✅
React Three Fiber	Curated R3F guidance (bundled, offline)	✅
react-spring	Spring-physics animation for React	✅
zustand	Minimal React state management	✅
glyph	GPU text/geometry glyph baking (TSL, typegpu)	✅
postprocessing	Post-processing effects + EffectComposer	✅
detect-gpu	Classify a device's GPU tier	✅
uikit	Flexbox UI for R3F/three.js	✅
react-three-rapier	Physics for R3F (Rapier)	✅
leva	React GUI controls/panels	✅
math (pmndrs)	Math helpers for 3D	✅
OGL	Minimal WebGL library source	✅
WebGPU Samples	Official WebGPU example source	✅
ShaderGradient	Animated gradient meshes for R3F/three.js	✅
liquid-logo	Liquid-metal WebGL effect from a logo (GLSL)	✅
liquid-glass-js	Apple-style "liquid glass" refraction effect	✅
ThreeUI · heavy	Community Three.js/WebGL components & landing pages	✅
img2threejs	Image → three.js/GLB scene pipeline (Python)	✅

Animation & scroll

Source	What it gives you	Inline code?
GSAP Skills	Official GSAP agent guidance + runnable examples	✅
Lenis	Smooth-scroll library source	✅
Anime.js	JavaScript animation engine source	✅
Two.js	2D drawing / animation library source	✅
scrollama	Scrollytelling library source	✅
Codrops demos · heavy	Tutorial demo source (HTML/CSS/JS effects)	✅

Guidance, accessibility & compatibility

Source	What it gives you	Inline code?
WAI-ARIA APG	Accessible component patterns + example source	✅
Anthropic Agent Skills	Design-focused agent skills (guidance)	✅
Vercel Web Interface Guidelines	Web interface quality guidelines	✅
web-features (Baseline) · heavy	Baseline browser-support data for web features	✅

Free design assets

Source	What it gives you	Inline code?
LS.GRAPHICS	Free design mockups (Figma / Sketch / PSD)	—
Poly Haven · heavy	CC0 HDRIs, textures and models	—
ambientCG	CC0 PBR materials and textures	—

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 (/r/ disallowed), Tailark & Preline (paid / fair-use), 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 65 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 65 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).

Tool	Description
list_sources	List all 65 sources with stack tags, hasInlineCode, idFormat, and heavy
list_categories	Categories / collections / kinds for one source
search_resources	Search one source by query, category, tech, limit — lightweight summaries
search_all	Search many sources in parallel, best match first. Narrow with sources or stack; heavy sources are listed in skipped unless named; per-source failures/timeouts land in errors without failing the call
get_resource	Full detail for one item (metadata, license, code, formats, downloads). includeAiPrompt opts into FreeFrontend's "Copy for AI" text
get_code	Raw source, keyed by file (e.g. tsx, css, tsx:<path>). Pass file for one file or maxChars to cap the reply; oversized replies list each file's size instead

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).

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) 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, …) 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.

Variable	Default	Purpose
GITHUB_TOKEN	—	Lift GitHub's 60 req/hr limit for GitHub-backed sources (a placeholder value is ignored)
FRONTEND_INSPO_CACHE_DIR	—	Persist responses to this directory across restarts (memory stays the fast first layer)
FRONTEND_INSPO_CACHE_TTL_MS	600000 (10 min)	Lifetime of an ordinary cached response
FRONTEND_INSPO_CACHE_MAX_BYTES	67108864 (64 MB)	In-memory cache budget
FRONTEND_INSPO_MAX_BODY_BYTES	104857600 (100 MB)	Largest response body read
FRONTEND_INSPO_MIN_GAP_MS	400	Per-host politeness gap (0 disables throttling); a host's Crawl-delay can raise it
FRONTEND_INSPO_SEARCH_DEADLINE_MS	20000 (20 s)	Per-source deadline in search_all

🗂️ 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)
• 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.