Frutjam Cherry

Stop AI hallucinations.Your AI editor knows Tailwind CSS.

Cherry is a free MCP server (Model Context Protocol) that feeds your AI coding assistant the exact Tailwind CSS component specs, themes, docs, and blocks it needs, on demand, no hallucinations.

Why AI assistants get Tailwind CSS wrong, and how Cherry fixes it

What Cherry can do

Just describe what you want. Cherry gives your AI the exact knowledge it needs to build it right.

You ask your AI...	Cherry makes it happen
"Add a pricing section to this page"	Fetches the real pricing block HTML and drops it in
"What badge variants does Frutjam have?"	Pulls the full badge spec: classes, sizes, states, examples
"Apply the blueberry theme to this layout"	Loads the exact design tokens for that theme
"Convert this Bootstrap navbar to Frutjam"	Migrates the markup to correct Frutjam classes
"Turn this Figma design into Frutjam HTML"	Reads the Figma link and reproduces it with Frutjam components
"Migrate this plain Tailwind card to Frutjam"	Replaces Tailwind utilities with the right Frutjam component classes

Pro / Team

Built-in AI slash commands

Cherry includes ready-made prompts for the most common Frutjam tasks. Type the command in your AI editor, provide your input, and get accurate Frutjam code, no manual prompting needed.

All slash commands are available in Claude Code, Cursor, VS Code, and any MCP-compatible editor.

How Cherry compares

Not all AI context is equal.

	Cherry MCP	llms.txt	No context
Accurate class names	✓	Partial
On-demand: only what's needed	✓
Token efficient	✓		✓
Always up to date	✓	✓
Themes & design tokens	✓	Partial
Ready-made page blocks	✓
Figma / image → code	✓
Framework migration	✓ Tailwind, Bootstrap
Tailwind CSS v4 accurate class names	✓	Partial

Setup in under a minute

No account needed to get started. Free tier works out of the box: just add Cherry to your editor and go. License key and email are only required for Pro and Team plans.

Claude Code

Free tier no account needed

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

Pro / Team license required

claude mcp add frutjam-cherry \
  --env LICENSE=your-license-key \
  --env EMAIL=your@email.com \
  -- npx -y frutjam-cherry@latest

Cursor

Open Cursor Settings → MCP and add:

Free tier no account needed

{
  "frutjam-cherry": {
    "command": "npx",
    "args": ["-y", "frutjam-cherry@latest"]
  }
}

Pro / Team license required

{
  "frutjam-cherry": {
    "command": "npx",
    "args": ["-y", "frutjam-cherry@latest"],
    "env": {
      "LICENSE": "your-license-key",
      "EMAIL": "your@email.com"
    }
  }
}

VS Code

Press Ctrl+Shift+P → MCP: Open User Configuration, then add:

Free tier no account needed

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

Pro / Team license required

{
  "servers": {
    "frutjam-cherry": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "frutjam-cherry@latest"],
      "env": {
        "LICENSE": "your-license-key",
        "EMAIL": "your@email.com"
      }
    }
  }
}

Other editors

Free tier no account needed

{
  "mcpServers": {
    "frutjam-cherry": {
      "command": "npx",
      "args": ["-y", "frutjam-cherry@latest"]
    }
  }
}

Pro / Team license required

{
  "mcpServers": {
    "frutjam-cherry": {
      "command": "npx",
      "args": ["-y", "frutjam-cherry@latest"],
      "env": {
        "LICENSE": "your-license-key",
        "EMAIL": "your@email.com"
      }
    }
  }
}

After setup, your first 60 seconds

Three steps to confirm Cherry is working and start building.

Step 2

Run your first test

Open your AI chat panel and type:

List all available Frutjam components

If Cherry is active, your AI will call list_components and return a list of component names. That's it, it's working.

Cherry is included in Pro and Team

Free tier available: limited daily requests, no account needed.

Upgrade to Pro or Team for unlimited requests and access to premium blocks and AI slash commands.

FAQ

What is an MCP server?

MCP (Model Context Protocol) is an open standard that lets AI assistants call external tools at runtime. Cherry acts as a tool server, your AI editor calls it to fetch Frutjam specs on demand, instead of guessing from training data.

Why do AI assistants hallucinate Tailwind CSS class names?

AI models are trained on a snapshot of the web, they don't know your specific component library's exact class names, especially for newer libraries or Tailwind CSS v4 APIs. Without live context, they invent plausible-sounding but non-existent classes. Cherry solves this by feeding your AI the real, up-to-date Frutjam component docs at the moment it needs them, eliminating hallucinations entirely.

Which editors does Cherry support?

Any editor with MCP support: Claude Code, Cursor, VS Code, Windsurf, Zed, Cline, and any other editor that implements the MCP standard.

What's the difference between free and Pro/Team?

Free gives you limited daily requests and access to component docs and free blocks. Pro and Team unlock unlimited requests, premium blocks, templates, and all AI slash commands.

How do I receive my license key?

Your license key is emailed immediately after subscribing. You can also manage your subscription and seats from your account dashboard.

Can I use Cherry offline?

Cherry validates your license online on first use, then caches it locally for 7 days. After that it re-validates. A short internet connection is all you need.

Can I cancel anytime?

Yes. Cancel at any time. Your access continues until the end of the billing period.