NewMCP Apps — interactive section cards now render inside your AI chatRead the changelog

MCP-native · works in Cursor, v0, Lovable & Claude Code

Find the exact section.
Not a section like it.

Every other library sorts by hero, footer, pricing. Layercraft also sorts by real estate, interior design, agency — then hands the result to your AI tool through MCP, already themed to your client's brand.

2,412 sections · 285 wireframes · 168 design systems

  • Northbay
  • Aurora
  • Ferro
  • Meridian
  • Kite AI
  • Studio Halden

Browse by what you're actually building

Type-based browsing is solved everywhere. Industry isn't — so "show me only the real-estate heroes" is a filter here, not a search-and-hope.

All 24 industries

MCP is the spine, not a bolt-on

Most libraries added an MCP server to an existing design tool. This one was built the other way round — the same query engine powers the website and your agent.

Search that understands facets

Your agent filters by type, industry, style and platform in one call — the same filters you use in the UI.

Brand-aware output

extract_style reads any URL into a token set. Every section your agent pulls comes back already themed to it.

Cards, not walls of JSON

In clients that support MCP Apps, results render as interactive cards with Copy, Open and Save built in.

Tool- and platform-aware

get_section formats differently for Claude Code, Cursor, v0 or Lovable — and for Webflow, Framer, Figma or React.

Self-onboarding agents

A published skill.md tells any new AI client how to sequence calls, so it works well on the first try.

Scoped, revocable keys

Read-only search keys for CI, full-access keys for your editor. Revoke either without touching the other.

Every section ships graded

Accessibility has been law across the EU since 2025, and AI agents now audit sites the way browsers render them. So nothing here ships on vibes — every section carries a verified scorecard, per version.

Accessibility
WCAG AA
Keyboard + screen-reader tested. EAA-safe by default.
Performance
96 avg
Lighthouse score and gzipped weight on every card.
Agent-readable
AEO
Semantic HTML + schema — passes the Agentic Browsing audit.
Global-ready
RTL
RTL and long-text i18n tested, badge included.

Motion library

State-machine-ready Rive, Lottie and GSAP assets — because in 2026, motion is behavior.

Explore

Academy & certification

Free courses, a real exam, and a public badge clients can verify.

Learn

One source. Every platform.

Sections aren't maintained as five separate copies that drift apart. There's one structural spec plus tokens, and each platform is a compiled adapter off it.

Webflow
<section class="hero_component">
  <div class="padding-global">
    …
Framer
export function Hero() {
  return <Frame …>
}
React
<section className="relative
  isolate px-6 py-24">…
MCP
get_section({
  id: "s1000",
  target_platform: "react"
})

What people build with it

The industry filter alone saved me an afternoon per project. I stopped scrolling and started picking.

Maya Chen
Founder, Northbay Studio

I pointed Cursor at the MCP and it started pulling real sections instead of inventing markup. The baseline is just good now.

Tomas Reyes
Design engineer

Bound a client's extracted brand to a project and every section came out on-palette. No re-theming pass at all.

Aisha Rahman
Freelance designer

Start with the free tier

40+ sections, every icon, and one platform — no card, no trial clock.

Create a free accountCompare plans