What is frontend-inspo-mcp?
frontend-inspo-mcp by notsointresting is a local MCP server that lets an AI coding agent discover and pull real frontend code, UI components, design mockups and design system tokens across 65 sources. It speaks MCP over stdio, exposes six tools and needs Node 22 or newer.
frontend-inspo-mcp is a local MCP server that lets AI coding agents discover and pull real frontend code, UI components, design mockups, design system tokens, 3D and WebGL source, and agent guidance across 65 sources.
It returns the actual source code for each result. Ask for a glassmorphism card or an animated shadcn button and the agent gets real, usable code back through one consistent set of tools.
Source groups
- shadcn schema component registries for React and Tailwind, including shadcn/ui, Magic UI, Aceternity UI and React Bits.
- HTML, CSS and Tailwind galleries such as FreeFrontend, Uiverse, HyperUI, daisyUI and Flowbite.
- Design systems, tokens and fonts, including Refero Styles, tweakcn, Open Props, Radix Colors and Fontsource.
- 3D, WebGL and React Three Fiber sources such as three.js, drei, postprocessing and uikit.
- Animation and scroll libraries, including GSAP Skills, Lenis and Anime.js.
- Guidance on accessibility and compatibility, including the WAI-ARIA APG and Baseline browser support data.
- Free design assets, including mockups in Figma, Sketch and PSD formats and CC0 textures.
Design system and token sources
Refero Styles reads design systems from real sites and synthesizes a DESIGN.md, a Tailwind theme, CSS variables and design token JSON. tweakcn serves shadcn theme presets, and Open Props, Radix Colors and uiGradients supply tokens, color scales and gradients.
Limits and safety
Content is returned as reference data and is not executed. Replies that carry third party content include a notice field, and the default reply cap is 150,000 characters, which the maxChars argument of get_code can raise up to 1,000,000.
Who frontend-inspo-mcp is for
Best for
- Pulling real component source from shadcn/ui, Magic UI, Aceternity UI or React Bits into a project.
- Reading a real site's design system as a DESIGN.md, Tailwind theme, CSS variables and tokens.
- Pulling a free laptop mockup from LS.GRAPHICS and a Magic UI hero text effect into one landing page.
Not for
- Querying a hosted knowledge base of curated entries on design system practice, standards and agent-interface protocols, which the Design Systems MCP server covers.
- Linting generated UI code against one of 148 curated visual styles with tokens and component recipes, which the StyleKit MCP server covers.
- Reading component metadata, usage examples and accessibility notes from monday.com's React design system, which the Vibe MCP server covers.
- Applying UI principles and accessibility review rules drawn from 31 shadcn-based design systems, which the Better Design MCP server covers.
Connect Frontend Inspo MCP: Real UI Code for AI Coding Agents to your AI client
claude mcp add frontend-inspo -- npx -y frontend-inspo-mcpCheck the prerequisite
Node 22 or newer is required, because the server uses the built-in fetch and current LTS APIs.
Add the server
Run the command above in Claude Code, or add the JSON config to your MCP client config and restart the client. npx fetches and runs the server for you.
Find your config file
Claude Desktop uses
claude_desktop_config.json, in~/Library/Application Support/Claude/on macOS and%APPDATA%\Claude\on Windows. Cursor uses~/.cursor/mcp.jsonglobally or.cursor/mcp.jsonper project. Claude Code also accepts a project level.mcp.json.List the sources
Call
list_sourcesfirst. It reports each source's stack tags, whether it returns inline code, how to write its ids and whethersearch_allskips it unless named.
Client configuration
{
"mcpServers": {
"frontend-inspo": {
"command": "npx",
"args": ["-y", "frontend-inspo-mcp"]
}
}
}Endpoints and ports
stdioThe server speaks MCP over stdiooptionalLifts GitHub's 60 requests per hour limit for GitHub-backed sourcesWhat you can do with it
- 65 sources, one toolsetSearch 65 sources through one consistent set of tools.
- Real codeReturns React/TSX, Tailwind, vanilla HTML/CSS/JS, GLSL and design tokens.
- Design systems and tokensCovers DESIGN.md, Tailwind themes, CSS variables, and color, gradient and font tokens.
- 3D and WebGLIncludes three.js, the pmndrs ecosystem with drei, R3F, postprocessing, rapier and uikit, and shaders.
- Free design assetsMockups in Figma, Sketch or PSD formats, HDRIs and PBR textures.
- Agent guidanceCurated R3F, GSAP, accessibility (APG) and Baseline compatibility references.
- Parallel search
search_allruns a deadline-bounded parallel search, with a 20 second per-source default. - Polite fetchingIn-memory and optional disk cache, per-host throttling, HTTPS-only requests and retries with backoff.
Tools it exposes
list_sources
List all 65 sources with stack tags, hasInlineCode, idFormat and heavy.
list_categories
Categories, collections or kinds for one source.
search_resources
Search one source by query, category, tech and limit, returning lightweight summaries.
search_all
Search many sources in parallel, best match first, narrowed with sources or stack. Heavy sources are listed in skipped unless named.
get_resource
Full detail for one item, including metadata, license, code, formats and downloads.
get_code
Raw source keyed by file, such as tsx, css or tsx:<path>. Pass file for one file or maxChars to cap the reply.
Frequently asked questions
What is frontend-inspo-mcp?
It is a local MCP server by notsointresting that lets AI coding agents discover and pull real frontend code, UI components, design mockups, design system tokens, 3D and WebGL source, and agent guidance. It covers 65 sources, from shadcn schema component registries to pmndrs 3D libraries, HTML and CSS galleries, design token APIs and free asset libraries.
How do I add frontend-inspo-mcp to my AI coding agent?
Add the mcpServers JSON with the npx command and the arguments -y and frontend-inspo-mcp to your MCP client config, then restart the client. In Claude Code you can run claude mcp add frontend-inspo -- npx -y frontend-inspo-mcp instead. Claude Desktop and Cursor use the config files for their own clients, and npx fetches and runs the server.
Which tools does frontend-inspo-mcp expose?
Six tools: list_sources, list_categories, search_resources, search_all, get_resource and get_code. Every tool takes a source argument, one of the 65 ids returned by list_sources, such as shadcn, magicui, refero, threejs, drei, polyhaven or freefrontend. The server also offers a resource template, inspo://{source}/{+id}, and two prompts.
How does search_all handle many sources at once?
It searches many sources in parallel and returns the best match first. You can narrow it with the sources or stack arguments. Heavy sources, which have large downloads or tight quotas, are listed in skipped unless you name them. Per-source failures and timeouts land in errors without failing the call, and each source has a deadline of 20 seconds by default.
Does it return real code or only links?
It returns the actual source code. get_code returns raw source keyed by file, such as tsx or css, and accepts a file argument for one file or maxChars to cap the reply. The default reply cap is 150,000 characters and maxChars can raise it up to 1,000,000. Oversized replies list each file's size instead.
Which design system sources does it include?
Refero Styles synthesizes a DESIGN.md, a Tailwind theme, CSS variables and design token JSON from a real site's public pages, with no subscription required. Other design sources are tweakcn shadcn theme presets, Open Props, Radix Colors, Fontsource, uiGradients, awesome-design-md and a directory of public shadcn registries.
What do I need before setup?
Node 22 or newer and an MCP compatible client such as Claude Desktop, Claude Code, Cursor or Kiro. Everything else is optional. Setting GITHUB_TOKEN lifts GitHub's unauthenticated limit of 60 requests per hour for the GitHub-backed sources, and FRONTEND_INSPO_CACHE_DIR persists responses across restarts.
How does it treat downloaded content?
Downloaded content is treated as data and is not executed. Requests are HTTPS-only, cached, throttled per host and retried with backoff on transient failures. Replies that carry third party content include a notice field restating that the content is reference data, not instructions. If the GitHub API is rate-limited, GitHub-backed sources fall back to the jsDelivr mirror.