Local MCP Superpower for AI Coding Agents
Real frontend code. Zero hallucinations.
Connect your coding agent to 89 public sources of production React, Tailwind CSS, Framer Motion, Three.js shaders, design tokens, and ARIA patterns. Runs locally over stdio, fetches exact source files, and arms your AI with real design systems.
npx -y frontend-inspo-mcp
search_all { query: "marquee", limit: 3 }...
↳ aceternity · review-marquee (score: 8.7)
get_code { source: "magicui", id: "marquee" }...
marquee.tsx (1,956 chars, MIT license).✓ Implementing into project without hallucinated CSS.
The Machine Transformation
What this brings to your machine
Without this MCP, even the smartest models hallucinate outdated CSS classes, imagine unsupported animation props, and build brittle UI from memory. Here is how your agent behaves when grounded in reality:
- Guessed CSS & Tailwind: Generates non-existent Tailwind utility classes and awkward keyframe animations that break on reload.
- Broken ARIA Semantics: Implements custom tabs and modals without keyboard bindings, failing WCAG compliance.
- Generic 2021 Aesthetics: Defaults to bland blue gradient cards with inconsistent paddings and discordant color palettes.
- Silent 3D/Shader Failures: Writes Three.js code that fails due to outdated matrix methods or broken GLSL vertex shaders.
- Exact TSX & CSS Source: Fetches verified code directly from shadcn, Magic UI, Aceternity, and Uiverse with 100% correct imports.
- W3C Authoring Standards: Uses canonical W3C ARIA implementations (keyboard focus loops, Home/End keys, tabindexes).
- Systematic Color Harmony: Employs Radix 12-step color scales and real-world brand token systems extracted via Refero.
- Safe Security Boundary: Every payload is wrapped in untrusted data delimiters to prevent prompt injection from third-party code.
⚡ Zero Overhead Stdio
Runs as a lightweight subprocess on your machine. No background HTTP ports opened, zero cloud dependencies, and fast sub-millisecond local queries.
🛡️ Memory & Disk Caching
Polite HTTPS client with automated 10-minute in-memory caching and optional persistent disk cache via FRONTEND_INSPO_CACHE_DIR.
📜 Clean Licensing
Every resource carries its upstream license (MIT, Apache-2.0, OFL-1.1), author attribution, and origin repository links.
Interactive Studio
Test Live Components in Real-Time
Interact with live rendered components directly produced by the server's adapters. Toggle states, tweak controls, and inspect the underlying source code in real-time.
// Loading component source...Living Verification
Rendered from real MCP tool calls
Every component on this sheet is alive, interactive, and styled directly with assets supplied by the server. No mock data: each frame below documents the tool call, the upstream source, and the verified license.
Typography · Fontsource get_resource
Big Shoulders Display + Atkinson Hyperlegible Next.
Atkinson Hyperlegible Mono handles formatted tool calls.
Palette · Radix Colors get_code
Click any swatch to inspect its step, luminance, and hex value. Radix 12-step scales provide mathematically balanced contrast.
Active: Step 4 (--blue-4: #003362)
Registry · shadcn/ui get_code
Clean CVA (Class Variance Authority) button variants fetched directly as button.tsx.
Micro-Interaction · Uiverse get_code
Adapted from calm-tiger-42. Dual-bezier radial fill responding to pointer and keyboard focus.
Browser Baseline · webfeatures get_resource
- Chrome: 105+
- Safari: 15.4+
- Firefox: 121+
- Edge: 105+
The source atlas filter below uses CSS :has(). We validated Baseline compatibility before writing a single rule.
Atmosphere · uiGradients get_resource
Curated linear & radial CSS gradients ready for instant application in hero sections and CTAs.
Token Extraction · refero get_code
Linear Midnight Palette: Design system tokens extracted from live web platforms into machine-readable JSON:
Extracted for design reference without needing a proprietary subscription.
AI Agent UI · assistant-ui get_code
Composable chat threads, message streaming, composer bars, and agent tool-call cards.
Data Visualization · visx get_code
Airbnb's low-level React + D3 primitives for custom charting, SVG math, and accessible data graphics.
3D & Shaders · shaders get_code
Shader Effects Inc GLSL fragments & Babylon.js procedural textures.
Data Grid · ReUI get_code
| Component | Stack | Status |
|---|---|---|
| KanbanBoard | React | Ready |
| DataGrid | Tailwind | Verified |
| FilterDrawer | Base UI | Active |
Enterprise data tables, filters, calendars, and gantt patterns with 1,000+ variants.
Accessible Primitives · Jolly UI get_code
Unstyled, fully accessible UI on React Aria and Base UI primitives with WCAG AA compliance.
Interactive Tool Inspector
What your agent can call
Six read-only tools designed specifically for AI agent context windows. Inspect live requests and trimmed server replies captured directly from the built server.
asSandbox: true (get_code)
Generates self-contained, standalone runnable HTML previews with Tailwind CSS, Lucide icons, and Babel React runtime directly inside returned code.
inspo://{source}/{+id}
Direct Resource URI Template. Read any component as metadata and code parts natively inside Claude Desktop or Cursor.
find_component
A guided workflow prompt that transitions from natural language query to multi-source ranking to clean adapted code.
design_system_from_site
A prompt that transforms real-world URL tokens into a full DESIGN.md specification and Tailwind configuration.
Comprehensive Catalog
89 Curated Sources
Every source is public, respects robots.txt, and is tagged with its stack. Sources marked heavy require explicit naming in search_all to preserve agent response latency.
Zero Setup Hassle
Add it to your agent in seconds
Runs on your local machine using Node 22+. Talks to any MCP client over standard I/O (stdio). Opens no network ports and requires zero accounts.
💡 Pro Tips
- Disk Cache: Set
FRONTEND_INSPO_CACHE_DIR=/path/to/cacheto persist fetched components across editor restarts. - GitHub Token: Set
GITHUB_TOKENto raise GitHub's rate limit from 60 to 5,000 requests per hour.
claude mcp add frontend-inspo -- npx -y frontend-inspo-mcpSupport Open Source
Star frontend-inspo-mcp on GitHub
Grounding AI agents in 89 real UI libraries, design tokens, and WebGL graphics. Help spread the word and empower developers to vibe-code without hallucinated CSS!