MCP server
by Together AI
Real production websites for coding agents.
Inspo MCP allows coding agents to study real production websites before writing UI. It captures and analyzes 2,320 pages across 832 sites, providing detailed insights into design elements like palettes, fonts, and components. With tools to assemble and tag references, Inspo MCP bridges the gap between coding and design taste.
Inspo MCP is designed to help developers create visually appealing UIs by providing access to a vast archive of real-world website designs.
Run npx -y inspo-mcp install to set up the environment.
MIT
MIT License, copyright Together AI and contributors.
Fetch and extract information from websites automatically
Example
Research competitor pricing, scrape product reviews, monitor news mentions
Automate 5-10 hours/week of manual web research
Track website changes, new content, price updates
Example
Monitor competitor blog for new posts, track stock availability, watch for pricing changes
Stay informed without manual checking, never miss important updates
Extract structured data from multiple websites
Example
Compile product listings from 10 e-commerce sites, aggregate job postings, collect real estate data
Build datasets 100x faster than manual copying
Share your MCP server with the developer community
Inspo MCP is a well-scoped MCP server in the explainx.ai directory — install snippets and categories matched our Claude Code setup.
Strong directory entry: Inspo MCP surfaces stars and publisher context so we could sanity-check maintenance before adopting.
Inspo MCP reduced integration guesswork — categories and install configs on the listing matched the upstream repo.
We wired Inspo MCP into a staging workspace; the listing’s GitHub and npm pointers saved time versus hunting across READMEs.
Inspo MCP is among the better-indexed MCP projects we tried; the explainx.ai summary tracks the official description.
Inspo MCP is among the better-indexed MCP projects we tried; the explainx.ai summary tracks the official description.
We wired Inspo MCP into a staging workspace; the listing’s GitHub and npm pointers saved time versus hunting across READMEs.
Useful MCP listing: Inspo MCP is the kind of server we cite when onboarding engineers to host + tool permissions.
Strong directory entry: Inspo MCP surfaces stars and publisher context so we could sanity-check maintenance before adopting.
Inspo MCP is a well-scoped MCP server in the explainx.ai directory — install snippets and categories matched our Claude Code setup.
showing 1-10 of 64
Real production websites your coding agent can study, over MCP, before it writes UI. inspomcp.dev
With and without Same brief, same model, no design skill on either run. The only difference: the page on the right was built with Inspo MCP on the session.
The bare agent's page: dark theme, neon accent, gradient app mock The page built with Inspo: warm paper, editorial type, detailed product mock
That gap is the product. Agents have tools but not taste, and the open web already holds every reference they need: Inspo assembles, tags, and addresses it.
What's inside 2,320 pages across 832 real sites, each captured on desktop and mobile, with traced palettes, real fonts, detected tech, and a fold-by-fold autopsy on every page. 68 canonical reference components (heroes, pricing, footers, navs, and more), each demonstrating one named macrostructure, with copy-pasteable JSX. A DESIGN.md for every site, extracted from its DOM: semantic palette roles, type ramp, spacing scale, CSS variables, container width. Fifteen tools expose all of it; recommend(brief) composes most of them into one call. The full tool table lives in apps/mcp/README.md.
Tech stack TypeScript MCP server with two transports: stdio via npm, and Streamable HTTP served by the site's own Vercel deployment. No database at query time; the catalogue ships as a static seed. Next.js 16 + Tailwind v4 gallery: the archive browser and the curator dashboard. Playwright capture worker: desktop and mobile shots, palette, type ramp and CSS variable extraction, tag and autopsy passes via Together AI. Together AI embeddings behind semantic search and find_similar. A smoke harness that boots the server in-process and exercises the core tools. Cloning & running One command, any client: npx -y inspo-mcp install (detects Claude Code, Cursor, Codex, VS Code, Windsurf, Zed, Claude Desktop and writes the config; --dry-run shows the plan) Or point a client at the hosted endpoint yourself: claude mcp add --transport http inspo https://inspomcp.dev/api/mcp Or clone: git clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm install Gallery: pnpm dev, then open localhost:3000 Dev loop: pnpm --filter @inspo/mcp test Per-client snippets (Cursor, Windsurf, Zed, Claude Desktop) are on the MCP page; the self-host runbook is DEPLOY.md.
Roadmap show the desktop and mobile capture side by side on every screen page backfill component crops so find_components returns a crop for every hit paginate the list tools instead of capping them re-shoot the mobile set at retina scale Accounts and paywalls are skipped on purpose: the archive is more useful free. Want a site in the archive? Append it to apps/worker/src/seed-urls.ts and open a PR. The bar: does it make the archive better for someone building a website?
Security Every tool is read-only. The one path that touches the outside world - get_design_system(live:true), which supplements thin captured tokens from the screen's own source - passes each URL and redirect through an SSRF guard: public named hosts only, ports 80 and 443, byte-capped body, no JS execution. The hosted endpoint logs tool name, success and duration per call, never IPs or query text.
MIT, copyright Together AI and contributors. The screenshots remain the work of their designers: every screen credits and links its source, and takedowns are honoured at /dmca.
Interact with services that don't offer APIs
Example
Check form submissions, validate website functionality, test user flows
Automate interactions with any website, even without API
Prerequisites
Time Estimate
20-40 minutes including configuration and testing
Steps
Troubleshooting
✓ Do
✗ Don't
💡 Pro Tips
Architecture
MCP server handles HTTP requests, HTML parsing, JavaScript rendering (if headless browser), and returns structured data to Claude.
Protocols
Compatibility
✓ Use when
Use for research automation, content monitoring, data aggregation from multiple sources, and when official APIs don't exist. Best for read-only information gathering.
✗ Avoid when
Avoid for sites with APIs (use API instead), sites that explicitly forbid scraping, when data is copyrighted, or for login-required content without proper authorization.
