Stop guessing.
AI that knows Frutjam.
Frutjam Cherry is an MCP server that feeds your AI coding assistant the exact component specs, themes, docs, and blocks it needs — on demand, no hallucinations.
Without Cherry
- AI hallucinates class names that don't exist in Frutjam
- You copy-paste docs into every prompt, wasting tokens
- llms.txt dumps everything — AI gets overwhelmed
- Generated UI breaks because AI used outdated component APIs
With Cherry
- AI fetches the exact spec for each component it needs
- Right context at the right time — no token waste
- Always in sync with the latest Frutjam version
- Output is accurate, semantic, and production-ready
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 |
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.
/figma_to_frutjam
Figma → Frutjam
Paste a Figma design description or exported JSON. Cherry converts it to accurate, copy-pasteable Frutjam HTML.
/image_to_frutjam
Screenshot → Frutjam
Describe a UI screenshot or share an image URL. Cherry reproduces it with the closest Frutjam components.
/tailwind_to_frutjam
Tailwind → Frutjam
Paste raw Tailwind HTML. Cherry replaces hand-crafted utilities with the correct Frutjam component classes.
/bootstrap_to_frutjam
Bootstrap → Frutjam
Paste Bootstrap markup. Cherry maps every Bootstrap class to its Frutjam equivalent and outputs clean HTML.
/generate_theme
Generate a theme
Describe a mood, brand, or color palette. Cherry generates a complete Frutjam theme with all required CSS variables.
+
More prompts added with each update.
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 | ✓ | ✗ dumps everything | ✗ |
| Token efficient | ✓ | ✗ | ✓ |
| Always up to date | ✓ | ✓ | ✗ |
| Themes & design tokens | ✓ | Partial | ✗ |
| Ready-made page blocks | ✓ | ✗ | ✗ |
| Figma / image → code | ✓ | ✗ | ✗ |
| Framework migration | ✓ Tailwind, Bootstrap | ✗ | ✗ |
Setup in under a minute
Add this config to your editor with your license key and email. Free tier users can skip the license fields.
Claude Code
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:
{
"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:
{
"servers": {
"frutjam-cherry": {
"type": "stdio",
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}
}
Other editors
{
"mcpServers": {
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}
}
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.
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. See full comparison.
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.
Ready to build faster?
Get your AI working with accurate Frutjam code from the first prompt.
See plans