Frontend Inspo Mcp banner
notsointresting notsointresting

Frontend Inspo Mcp

AI community

Description

Local MCP server that lets AI coding agents (Claude, Cursor, Kiro) discover and pull real frontend code & UI components from FreeFrontend, shadcn/ui, Magic UI, Aceternity UI, React Bits, Watermelon UI, and LS.GRAPHICS.

Installation

This entry records only its repository, not the path inside it, so there is no exact command to give. Open the source below and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

README

frontend-inspo-mcp 🎨

**A local MCP server that lets AI coding agents discover and pull real frontend code, UI components, and design mockups** — from FreeFrontend, shadcn/ui, Magic UI, Aceternity UI, React Bits, Watermelon UI, and LS.GRAPHICS.

[![MCP](https://img.shields.io/badge/Model_Context_Protocol-server-blue)](https://modelcontextprotocol.io) [![TypeScript](https://img.shields.io/badge/TypeScript-5.5-3178c6)](https://www.typescriptlang.org/) [![Node](https://img.shields.io/badge/Node-18%2B-339933)](https://nodejs.org/) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](#license) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](#contributing)

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.


✨ 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 7 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 J