MCP for Claude Code · Cursor · Windsurf · VS Code

Your agent fetches a curated dev-tool section. Already in your stack.

Scraphe's MCP returns adapted React + Tailwind — your tokens, your component names — not a screenshot, not generic HTML. ~10 credits per section. Browse free, always.

Add to CursorSoonBrowse the library →

Browsing is free, no sign-in requiredFree on every plan once it shipsInstall support — Soon

hero-section.tsx~10 credits
<HeroSection className="bg-[--brand-600]">
  <Button variant="primary">Get started</Button>
</HeroSection>

What lands in your agent's context

Stack-conformant code

React + Tailwind rewritten with your actual design tokens and component imports. Not a generic template. Paste-ready.

<HeroSection
  className="bg-[--brand-600]"
>
  <Button variant="primary">
    Get started
  </Button>
</HeroSection>

AI-ready prompt brief

A structured brief your agent can act on immediately — which tokens were mapped, which primitives were used, what to build next.

Mapped: --brand-600 → bg
Primitive: Button (yours)
Next: wire the CTA handler

Version-controllable artifact

Every adaptation produces a DESIGN.md-compatible record. Diff it, commit it, share it with your team.

## hero-section
- source: scraphe/datacore
- tokens: --brand-600

Connect your editor

MCP is free on all plans. No credit required to connect.

  1. 1

    Add Scraphe to your agent

    Add this as a remote MCP server in Claude Code, Cursor, Windsurf, or VS Code. There is nothing to install.

    https://www.scraphe.com/api/mcp

    Searching the library and pulling a design's details work straight away, with no account. Adapting a design from your agent is not available yet — that step still needs an account credential you cannot get today.

  2. 2

    Restart your IDE

    Reloads the MCP connection so your agent can see Scraphe.

  3. 3

    Authorize with Google or GitHub

    Soon

    A browser tab opens once — sign in and you're done. Automatic after the first time, no API key to paste.

Nothing to copy yet — install support ships in a later update. The design library is fully browsable today at /library.

Try it now

Copy any of these into Claude Code or Cursor once you're connected.

Each prompt uses ~10 credits. Free tier credits refresh daily, up to 100.

MCP on all plans

Free

Free tier refreshes

Daily, up to 100 credits

Adapting a section

~10 credits

See full pricing

Browsing the library is free and unmetered. Credits are spent only when your agent applies an adaptation. Failed adaptations are never charged.