frontend-inspo-mcp 🎨

A local MCP server that lets AI coding agents discover and pull real frontend code, UI components, design mockups, and design-system tokens — from FreeFrontend, shadcn/ui, Magic UI, Aceternity UI, React Bits, Fancy Components, VengeanceUI, Refero Styles, three.js, drei, React Three Fiber, react-spring, zustand, glyph, postprocessing, detect-gpu, ShaderGradient, liquid-logo, liquid-glass-js, ThreeUI, img2threejs, GSAP, Two.js, scrollama, Watermelon UI, and LS.GRAPHICS.

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 27 sources through one consistent set of tools
• 📋 Get real code — React/TSX, Tailwind, vanilla HTML/CSS/JS
• 🎭 Free design mockups with direct, un-gated download links (Figma / Sketch / PSD)
• ⚡ Fast — in-memory caching + polite per-host rate limiting
• 🧩 Pluggable — add a new source in one small adapter file

📚 Sources

| Source | What it gives you | Inline code? | Access | | --- | --- | :---: | --- | | FreeFrontend | HTML / CSS / JS / Bootstrap / Tailwind snippets | ✅ | HTML parse + base64 | | shadcn/ui | React + Tailwind + Radix components | ✅ | Registry JSON | | Magic UI | Animated React + Framer Motion components | ✅ | Registry JSON | | Aceternity UI | Bold animated React + Tailwind components | ✅ | Registry JSON | | React Bits | Animated React components (JS/TS, CSS/Tailwind) | ✅ | Registry JSON | | Fancy Components | Motion, scroll, text-physics & 2D effect React components | ✅ | Registry JSON | | VengeanceUI | Animated React + Tailwind + Framer Motion components | ✅ | Registry JSON (GitHub) | | Canvas UI | React WebGL/canvas & animated components | ✅ | Registry JSON | | Refero Styles | Design systems from real sites — DESIGN.md, Tailwind, CSS vars, tokens | ✅ | Public pages (no login) | | three.js | Official examples — GLSL shaders, post-fx, loaders, controls | ✅ | jsdelivr CDN | | drei | React Three Fiber helper components | ✅ | GitHub source | | React Three Fiber | Curated R3F guidance (Canvas/hooks, geometry, scroll storytelling) | ✅ | Bundled offline | | react-spring | Spring-physics animation library for React | ✅ | GitHub source | | zustand | Minimal state management for React (core + middleware) | ✅ | GitHub source | | glyph | GPU text/geometry glyph baking utilities (TSL, typegpu) | ✅ | GitHub source | | postprocessing | Post-processing effects + EffectComposer for three.js | ✅ | GitHub source | | detect-gpu | Classify a device's GPU tier via benchmarks | ✅ | GitHub source | | ShaderGradient | Animated customizable gradient meshes for R3F/three.js | ✅ | GitHub source | | liquid-logo | Animated liquid-metal WebGL effect from a logo/image (GLSL) | ✅ | GitHub source | | liquid-glass-js | Apple-style "liquid glass" refraction effect for the web | ✅ | GitHub source | | ThreeUI | Community Three.js/WebGL components & landing pages | ✅ | GitHub manifest | | img2threejs | Image → three.js/GLB 3D scene pipeline (Python) | ✅ | GitHub source | | GSAP Skills | Official GSAP agent guidance + runnable examples | ✅ | GitHub source | | Two.js | 2D drawing / animation library source | ✅ | jsdelivr CDN | | scrollama | Scrollytelling / scroll-storytelling library source | ✅ | jsdelivr CDN | | Watermelon UI | React components, blocks, dashboards, templates | — | Official JSON API | | LS.GRAPHICS | Free design mockups (Figma / Sketch / PSD) | — | HTML parse |

🚀 Quick start

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

Requires Node 20.18.1+ (uses the built-in fetch).

Run the offline unit tests (no network needed):

npm test

Verify every source is live:

npm run smoke   # hits all 27 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: freefrontend · shadcn · magicui · aceternity · reactbits · fancy · vengeanceui · canvasui · refero · threejs · drei · r3f · reactspring · zustand · glyph · postprocessing · detectgpu · shadergradient · liquidlogo · liquidglass · threeui · img2threejs · gsap · twojs · scrollama · watermelon · lsgraphics

| Tool | Description | | --- | --- | | list_sources | List all sources and whether each returns inline code | | list_categories | Categories/collections/kinds for a source | | search_resources | Search by query, category, tech, limit — returns lightweight summaries | | search_all | Search many sources at once and merge results (parallel; per-source failures are reported, not fatal) | | get_resource | Full detail for one item (metadata, license, code, formats, downloads) | | get_code | Raw source code for code-bearing sources, keyed by language |

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

• Registry sources (shadcn, Magic UI, Aceternity, React Bits, Fancy Components, VengeanceUI, Canvas UI) share one adapter that reads the shadcn registry schema — an index of items plus per-item JSON containing the real component source.
• FreeFrontend parses server-rendered collection pages and base64-decodes the inline code blocks; pagination follows /<collection>/page/N/.
• Watermelon UI calls its documented public API (/api/v1/catalog/*).
• Refero Styles reads the public, server-rendered gallery and /style/<id> pages of styles.refero.design (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 from the embedded design-system data — no Refero subscription is required.
• three.js lists the published npm package file tree via jsdelivr and fetches raw source (GLSL shaders, post-processing, loaders, controls) from the CDN.
• drei reads the pmndrs/drei GitHub source tree and raw files. Set an optional GITHUB_TOKEN env var to lift GitHub's unauthenticated rate limit (60 req/hr).
• GitHub source-tree libraries (react-spring, zustand, glyph, postprocessing, detect-gpu, ShaderGradient, liquid-logo, liquid-glass-js, img2threejs, GSAP Skills, drei) share one adapter that lists a repo's git tree on its default branch, keeps the relevant files, and serves raw source. Branches vary (main/master/next) and are configured per source. The same optional GITHUB_TOKEN applies.
• VengeanceUI uses the registry adapter, reading its shadcn-schema registry.json and per-item JSON directly from raw GitHub.
• React Three Fiber (r3f) serves a bundled, offline R3F guidance skill (no network).
• ThreeUI fetches the MengTo/threeui Community source-code.json manifest once and caches the parsed catalog in-process (the manifest is large), then returns each component's inline HTML/JS/GLSL/CSS.
• LS.GRAPHICS parses the free-mockups listing and each asset page for formats and download links.

Requests use HTTPS only, are cached in memory (10-min TTL), throttled per host to stay polite, and retried with backoff on rate limits.

Optional: persistent cache

By default the cache is in-memory (cleared on restart). To persist responses across restarts, set an env var pointing at a writable directory:

FRONTEND_INSPO_CACHE_DIR=/path/to/cache

When set, responses are stored on disk (same 10-min TTL) so repeated runs skip the network.

🗂️ Project layout

src/
  index.ts              stdio launcher (npm bin)
  server.ts             the six MCP tools, input validation, response 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, cached, throttled HTTP with retry/backoff
  sources/
    registry.ts         shadcn-schema registry factory (7 sources)
    packages.ts         source trees via jsDelivr + GitHub (14 sources)
    freefrontend.ts     HTML parse + base64 code decode
    watermelon.ts       JSON API client
    lsgraphics.ts       HTML parse (mockups)
    refero.ts           Refero public pages -> synthesized DESIGN.md / tokens
    threeui.ts          ThreeUI manifest
    r3f.ts              bundled React Three Fiber guide (offline)
tests/                  offline unit tests (node:test), network faked
scripts/                build helpers + reproducible-build check

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

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.