frutjam-cherry — MCP Server for Frutjam UI Components

frutjam-cherry is the official Model Context Protocol (MCP) server for the Frutjam UI component library. It gives AI coding assistants — Claude, Cursor, GitHub Copilot, and others — real-time access to Frutjam's full component documentation, Tailwind CSS design tokens, page blocks, and AI prompt commands, so your assistant generates accurate Frutjam code instead of hallucinating class names.

Works with Claude Code, Cursor, VS Code, Windsurf, Zed, and any editor that supports MCP.

Why frutjam-cherry?

Without an MCP server, AI assistants guess Frutjam class names and get them wrong. With frutjam-cherry:

• ✅ Accurate code generation — the AI fetches real docs before writing, not training-data guesses
• ✅ No hallucinated classes — every class name comes from the live Frutjam documentation
• ✅ Works free, no account needed — install and start using immediately
• ✅ Server-controlled rate limits — limits update server-side without an npm release
• ✅ Offline-resilient — signed local cache keeps the AI working when your connection drops
• ✅ All editors — stdio transport works with any MCP-compatible editor

Free Tier

Cherry works without a license key. No account, no sign-up — just install and go.

The free tier includes:

• All component documentation (get_component, search_components)
• All theme tokens (list_themes, get_theme)
• All documentation pages (get_docs)
• Free page blocks (get_block)
• 50 requests/day (account-based key) or limited anonymous allowance

Get a free key to lock in a stable daily limit tied to your email.

Installation

VS Code

1. Press Ctrl+Shift+P → search MCP: Open User Configuration
2. Add the entry below. Leave LICENSE and EMAIL blank for the free tier:

{
  "servers": {
    "frutjam-cherry": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "frutjam-cherry@latest"],
      "env": {
        "LICENSE": "",
        "EMAIL": ""
      }
    }
  }
}

Cursor

Open Cursor Settings → MCP → Add server:

{
  "frutjam-cherry": {
    "type": "stdio",
    "command": "npx",
    "args": ["-y", "frutjam-cherry@latest"],
    "env": {
      "LICENSE": "",
      "EMAIL": ""
    }
  }
}

Claude Code

Free tier (no key):

claude mcp add frutjam-cherry -- npx -y frutjam-cherry@latest

With a license key:

claude mcp add frutjam-cherry \
  --env LICENSE=YOUR_LICENSE_KEY \
  --env EMAIL=YOUR_EMAIL \
  -- npx -y frutjam-cherry@latest

Windsurf / Zed / Other Editors

Add to your editor's MCP configuration file:

{
  "frutjam-cherry": {
    "type": "stdio",
    "command": "npx",
    "args": ["-y", "frutjam-cherry@latest"],
    "env": {
      "LICENSE": "",
      "EMAIL": ""
    }
  }
}

Quick Start — After Setup

Once you've added frutjam-cherry to your editor config, follow these steps to confirm it's working and start using it.

Step 1 — Verify it's running

VS Code / Windsurf / Zed Open the Output panel (Ctrl+Shift+U) and select MCP from the dropdown. You should see:

frutjam-cherry: Running in free tier with key (50 requests/day).

Or for paid users:

frutjam-cherry: License validated. Running on paid plan.

Cursor Go to Settings → MCP — the server should show a green connected status.

Claude Code Run claude mcp list in the terminal — frutjam-cherry should appear as connected.

If it shows an error, make sure Node.js 18+ is installed: node --version

Step 2 — Test it with your first prompt

Open your AI chat panel and type:

List all available Frutjam components

The AI will call list_components and return a list of component names. If you see a list — it's working.

Step 3 — Start building

Here are ready-to-use prompts to get started:

Get a component:

Show me how to use the Frutjam button component

Build a UI section:

Build me a pricing card using Frutjam components

Search for something specific:

What Frutjam component should I use for a dropdown menu?

Get theme tokens:

Show me the CSS design tokens for the darkberry theme

Migrate existing code (paid):

/tailwind_to_frutjam

Step 4 — Let the AI use it automatically

You don't need to think about which tool to call. Just describe what you want and the AI picks the right tool:

| What you say | Tool called | |---|---| | "What classes does the badge component use?" | get_component | | "Show me all available blocks" | list_blocks | | "Get me the hero block" | get_block | | "What themes are available?" | list_themes | | "Get the snowberry theme tokens" | get_theme | | "How do I install Frutjam?" | get_docs |

Available Tools

| Tool | Description | Plan | |---|---|---| | list_components | List all available Frutjam component names | Free | | get_component | Full spec: description, class reference table, and code examples | Free | | search_components | Search components and classes by keyword | Free | | list_docs | List all Frutjam documentation pages | Free | | get_docs | Get a documentation page (installation, configuration, etc.) | Free | | list_themes | Overview of all available Frutjam themes | Free | | get_theme | CSS design tokens for a specific theme (e.g. darkberry, snowberry) | Free | | list_blocks | List all available Frutjam page blocks | Free | | get_block | Get a full copy-paste page block (hero, pricing, navbar, etc.) | Paid |

Available Prompts (Paid)

Prompts appear as slash commands directly in your AI editor (e.g. /figma_to_frutjam). They require a Pro, Team, or Enterprise license.

| Prompt | Description | |---|---| | figma_to_frutjam | Convert a Figma design description or exported JSON to Frutjam HTML | | image_to_frutjam | Reproduce a screenshot or UI mockup using Frutjam components | | tailwind_to_frutjam | Migrate plain Tailwind CSS HTML to Frutjam component classes | | bootstrap_to_frutjam | Migrate Bootstrap HTML to Frutjam components | | generate_theme | Generate a custom Frutjam theme with a unique name and color palette |

Usage

Once installed, just describe what you want in plain English:

"Use the Frutjam MCP to build me a pricing card with a primary button."

"Convert this Bootstrap navbar to Frutjam."

"What Frutjam classes should I use for a success alert?"

The AI calls the appropriate tool automatically, fetches accurate class references from live docs, and writes correct code.

Upgrade to Pro

The free tier covers most daily use. Upgrade to Pro, Team, or Enterprise for:

• 🔓 Unlimited requests/day
• 🔓 Premium page blocks (hero sections, pricing tables, full layouts)
• 🔓 AI slash commands (Figma-to-code, image-to-code, theme generator, migration tools)
• 🔓 Team seat management via frutjam.com/account

View pricing →

How It Works

1. Startup — Cherry validates your license key against the Frutjam server and stores a signed local cache (valid 7 days offline)
2. Tool calls — component/doc pages are fetched from frutjam.com and cached to disk (24 hr TTL, server-controlled)
3. Rate limiting — free-tier requests are counted server-side per machine fingerprint and IP subnet; paid users are unlimited
4. Prompt templates — loaded from the server (1hr cache) so they update without an npm release

Requirements

• Node.js 18 or later
• An MCP-compatible editor (VS Code, Cursor, Claude Code, Windsurf, Zed, etc.)

License

frutjam-cherry is not open source. A valid Frutjam paid plan is required to unlock premium features. The free tier is available to everyone without a license. Redistribution, resale, or sharing of this package or your license key is not permitted.

See LICENSE for full terms.