Who inspo is for#
Developers building UIs with AI coding agents
Add Inspo to Claude Code, Cursor, or Codex via one install command and the agent can pull real production references before drafting any component. The side-by-side in the README shows the gap between a bare agent's output and an Inspo-assisted one using the same brief and model.
Skip if:
If your project's UI is mostly internal tooling or the visual bar is low, the overhead of agent-queried references may not pay off. Generic dashboards rarely need brand-level design context.
Frontend engineers studying production design systems
The gallery browser at inspomcp.dev lets you search 2,320 screens from 832 sites without installing anything. Filter by component type, layout pattern, or visual style to study how real teams solve specific design problems.
Skip if:
If you need a mood board for client presentations, Refero's visual-browsing UI is optimized for that workflow in a way Inspo's MCP-first archive is not.
Teams adding a design-reference MCP server to an existing AI workflow
The hosted Streamable HTTP endpoint at inspomcp.dev/api/mcp works with any MCP-compatible client with no local setup. Point a client config file at the endpoint and the 15 tools are immediately available alongside existing agents and tools.
Skip if:
Teams with strict data privacy requirements should self-host. The hosted endpoint logs tool call metadata (tool name, success, duration) even though it does not log query text or IPs.
The problem it solves#
AI coding agents produce visually generic output by default. Without a reference layer, an agent given a UI brief falls back on its training data, which skews toward common patterns: dark themes, neon accents, floating card layouts. The result is recognizable as AI-generated and rarely matches what a designer would produce after studying real-world examples.
The gap is not intelligence; it is exposure. A trained designer carries a mental library built from years of studying production sites. Agents have no equivalent. They cannot scan design archives or extract a site's CSS variables before writing a component. Inspo closes that gap by packaging 832 real production sites in a form agents can query: captured screenshots, traced palettes and type ramps, canonical JSX components, and per-site DESIGN.md files, all addressable from a single MCP server.
How it solves it#
832-site production archive with 2,320 captured pages
Every site is captured on desktop and mobile with traced palettes, real fonts, detected tech stack, and a fold-by-fold structural analysis. The archive covers 2,320 pages across 832 real production sites and is queryable by vibe, layout pattern, or component type via MCP tools.
68 canonical reference components with JSX
Heroes, pricing sections, footers, navs, and more, each demonstrating one named macrostructure with copy-pasteable JSX. An agent can pull a specific component pattern by name and use the JSX directly in generated code without translating from a screenshot.
Machine-readable DESIGN.md per site
Every site in the archive has a DESIGN.md extracted from its DOM: semantic palette roles, type ramp, spacing scale, CSS variables, and container width. Agents can read a site's actual design system before writing styles, not just look at a screenshot and infer.
Semantic search via Together AI embeddings
The `find_similar` tool and `recommend(brief)` use Together AI embeddings for semantic search across the archive. Ask for a minimal SaaS pricing page or an editorial blog with serif type and the server returns relevant captures ranked by similarity.
One-command MCP install across seven clients
`npx -y inspo-mcp install` detects the active MCP client (Claude Code, Cursor, Codex, VS Code, Windsurf, Zed, or Claude Desktop) and writes the config automatically. A `--dry-run` flag shows the planned changes without applying them.
Strengths and trade-offs#
Strengths
- MIT license with no accounts or paywallsThe full archive is freely accessible with no accounts, usage limits, or subscription. The README states accounts and paywalls are skipped on purpose because the archive is more useful free. The MIT license also lets teams run a private self-hosted instance with no licensing fees, unlike paid design-reference services.
- Structured design data, not just screenshotsMost design-inspiration tools deliver a screenshot and stop. Inspo extracts the actual design system from each site's DOM: palette variables, type ramp, spacing scale, and CSS custom properties. An agent gets a DESIGN.md it can apply directly, not just an image it can describe.
- No database at query timeThe catalogue ships as a static seed, so the MCP server stays fast and lightweight. There is no database to provision or manage when self-hosting, and no cold-start latency per query.
- Read-only security posture with SSRF guardEvery MCP tool is read-only. The one path that touches an external URL passes through an SSRF guard: public named hosts only, ports 80 and 443, byte-capped body, no JavaScript execution. The hosted endpoint logs only tool name, success, and duration, not IPs or query text.
Trade-offs
- -Archive is a snapshot, not continuously updatedThe 832 sites were captured at a point in time. Sites that redesign after capture will show outdated screens until the archive is refreshed. The open roadmap also notes that mobile shots still need a retina-scale re-shoot, and component crops for `find_components` are not yet complete for every entry.
- -Self-hosting requires building from a TypeScript monorepoRunning the full stack locally means cloning the repo, running pnpm install, and starting the Next.js gallery and MCP server separately. There is no Docker image or single-command self-host documented in the README; the hosted endpoint at inspomcp.dev/api/mcp is the easier path for most teams.
inspo vs alternatives#
Inspo vs Refero
Inspo and Refero both serve the design reference space, but with different primary users in mind. Inspo is an MIT-licensed MCP server built for AI coding agents; Refero is a paid design-inspiration product built for human designers.
| Feature | Inspo | Refero |
|---|---|---|
| License | MIT | Proprietary (paid) |
| Price | Free | Paid subscription |
| Primary user | AI coding agent | Human designer |
| Archive | 832 sites, 2,320 pages with DESIGN.md | Curated screenshots |
| Interface | MCP tools (agent-queryable) | Visual gallery browser |
| Self-hosting | Yes (clone + pnpm) | No |
| API access | MCP server, 15 tools | No public API |
Inspo is the stronger choice when the consumer of the reference material is an AI assistant. Its 15 MCP tools, semantic search, and per-site DESIGN.md files are structured for machine use: an agent can call recommend(brief) and get actionable design context it can apply directly without a human interpreting a screenshot first.
Refero is worth considering when the workflow centers on human designers browsing visually, building client mood boards, or presenting design directions for review. Its paid offering focuses on that gallery experience, which Inspo does not try to replicate.
The use cases are distinct enough that teams using both are not doubling up. Inspo serves the agent before it writes code; Refero serves the designer before they brief the agent or review the output.
Quick start#
Run one install command and Inspo detects your MCP client and writes the config automatically.
```bash
npx inspo-mcp install
```What it's built on#
- Languages
- JavaScriptTypeScript
- Frameworks
- React
- Tooling
- esbuild
FAQ#
Is Inspo free to use?
Yes. The hosted endpoint and the full archive are free with no accounts or usage limits. The project is MIT licensed, so self-hosting is also free. The README notes that accounts and paywalls are skipped on purpose because the archive is more useful free.
Which AI coding tools does Inspo support?
The npx -y inspo-mcp install command auto-detects and configures Claude Code, Cursor, Codex, VS Code, Windsurf, Zed, and Claude Desktop. Any other MCP-compatible client can connect directly to the hosted Streamable HTTP endpoint at inspomcp.dev/api/mcp without any install script.
Can I self-host Inspo?
Yes. Clone the repo from GitHub, run pnpm install, and start the gallery and MCP server locally. The self-host runbook is in DEPLOY.md in the repository. For most teams the hosted endpoint is the easier starting point; self-hosting makes sense when you need local control or have data privacy requirements.
How does Inspo handle screenshot copyright?
Every captured screen credits and links its source site. Screenshots remain the work of their original designers; Inspo does not claim that copyright. Takedown requests are honored at inspomcp.dev/dmca.
How is Inspo different from Refero?
Refero is a paid design-inspiration tool aimed at human designers browsing screenshots. Inspo is MIT-licensed and built for the agent workflow: its archive is queryable via MCP tools, and each site ships a machine-readable DESIGN.md rather than just a screenshot. The primary consumer of Inspo's archive is an AI coding agent querying an API, not a human browsing a gallery.
Similar open-source tools#
God's Eye View
Real-time global intelligence on a 3D globe
bg0
Background removal that runs in your browser, never uploads
hyperframes
Turn HTML and CSS into rendered MP4 videos, built for AI agents.
garden-skills
Production-ready agent skills for Claude Code, Cursor, and Codex
design.md
Generate UIs effortlessly with AI.
agent-browser
Browser automation CLI with ref-based snapshots for AI agents