Give AI coding agents access to a curated library of real-world website designs, screenshots, design systems, and reusable UI components. Search visual references, find similar designs, analyze layouts, extract colors and typography, compare websites, and retrieve copy-ready JSX components for building better interfaces
The official MCP SDK for TypeScript lets Node and edge services call MCP servers directly, with an API key for headless auth.
This guide connects Inspo MCP to TypeScript through MewCP, so TypeScript can use Inspo MCP's 15 tools, like search_screens, get_screen and get_design_system.
Inspo MCP needs no credentials, but every call still runs through MewCP: scoped, checked and logged like any other.
More apps
Manage repositories, pull requests, issues, branches and development workflows on GitHub. Automate software delivery and collaborate across engineering projects.
Connect to external APIs, webhooks and internet services through standard HTTP requests. Build integrations with virtually any platform that exposes a web-based interface.
Turn your AI agent into a creative studio The world's best image, video, audio and 3D models, inside the AI assistant you already use.
HotAPI provides a unified API for AI-powered image, video, and audio generation, image editing, and conversational AI. Developers can access multiple models through a single API key, track asynchronous generation tasks, and retrieve results with polling or webhooks.
Other clients
Inspo MCP works the same way in every client below. Pick yours for its own guide.
Free to start.
Scope access to the exact Inspo MCP tools and accounts you allow, work and personal side by side. Anything outside that scope is refused at call time, even when the model asks for it.
Each call is logged: what ran, on which account, and whether it worked. Failures come back structured, so the agent knows whether to retry instead of guessing.
Every app sits behind one secure MCP URL, and there is no server for you to deploy or keep running. Add an integration in the dashboard and it is live on the next call, with no config to change and no new credentials to wire up. Tools load only when a task needs them, so your agent stays fast and focused however many apps you connect.
SDK clients sign in with an API key. Create one in your dashboard and replace API_KEY in the code below.
SDK clients run without a browser, so they sign in with your API key. Needs Node 18+ as an ES module (for example npx tsx script.ts).
Search the archive of real website screenshots. Returns screens with palette, fonts, components and image URLs.
Fetch the full record for one screen by slug - every viewport variant, palette, fonts, tech stack, designer credit.
The full DESIGN.md for one screen - real fonts, frequency-ranked palette, CSS variables, detected tech, colour roles, type ramp. Thin captured tokens are supplemented by a live fetch of the source; `live=false` skips that.
A screen's nearest design neighbours - ranked by design-similarity embeddings where available, else by macrostructure / industry / style overlap. One result per site.
Compare 2-4 captured sites across palette, typefaces, macrostructure, mode, style tags, type/spacing/radius scales and container width. Returns per-site breakdowns plus what they share - triangulates a house style from a few references.
Real sites whose extracted palette sits near a hex colour (OKLAB distance, so 'close' means the same colour family, not just the same hue). Use when a brief names a brand colour.
Real sites exemplifying one of the 19 named macrostructures. Call it at the macrostructure-pick step. Accepts slugs ('bento-grid') or display names ('Bento Grid').
List every editor-curated issue. Use this for thematic browsing - e.g. all 'Editorial Layouts' or 'Dark Product Pages'.
Every value the filters accept: styles, industries, macrostructures, modes, vibes, colors, page types, component types. Zero input. Call it when unsure - an out-of-vocabulary value errors.
A site's captured pages as an ordered flow (landing → pricing → features → ...) with titles, northstars and thumbnails - how a real product sequences its pages. No arguments returns the directory of flow-capable sites. Accepts a site or screen slug.
Real sites featuring a specific UI component (hero, pricing, features, cta, nav, footer, testimonial, logo-cloud, faq, stat), with a per-element crop where one exists. For copy-pasteable code use get_reference_jsx.
Fetch one issue by slug, including the editor's blurb and ordered screen list.
The canonical reference components as an index: id, label, macrostructure and a note for each hero / pricing / cta / nav / footer archetype. Pick one, then get_reference_jsx(type, id) for its source.
Orchestrator - start here for a brief. One call returns a macrostructure pick, 5 real exemplars, matching reference components (source via get_reference_jsx), a palette suggestion, and an `evidence` packet measuring the genre's paper band / display class / accent hue. Pass a macrostructure to skip the pick step. No LLM call.
The full canonical JSX source for one reference component, including the header stamp naming its macrostructure / theme / states. Copy-pasteable; tweak tokens to the target brand.
