Berhentilah menebak.
AI yang mengetahui Frutjam.
Cherry adalah server MCP (Model Context Protocol) gratis yang memberi asisten pengkodean AI Anda spesifikasi komponen Tailwind CSS yang tepat, tema, dokumen, dan blok yang diperlukan — sesuai permintaan, tanpa halusinasi.
Tanpa ceri
- 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
Dengan ceri
- 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
Apa yang bisa dilakukan Cherry
Jelaskan saja apa yang Anda inginkan. Cherry memberi AI Anda pengetahuan tepat yang dibutuhkan untuk membangunnya dengan benar.
| Anda bertanya pada AI Anda... | Cherry mewujudkannya |
|---|---|
| "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 |
Perintah garis miring AI bawaan
Cherry menyertakan petunjuk siap pakai untuk tugas Frutjam yang paling umum. Ketik perintah di editor AI Anda, berikan masukan Anda, dan dapatkan kode Frutjam yang akurat — tidak perlu perintah manual.
/figma_to_frutjam
Figma → Buah
Tempelkan deskripsi desain Figma atau JSON yang diekspor. Cherry mengubahnya menjadi Frutjam HTML yang akurat dan dapat disalin.
/image_to_frutjam
Tangkapan layar → Buah
Jelaskan tangkapan layar UI atau bagikan URL gambar. Cherry mereproduksinya dengan komponen Frutjam terdekat.
/tailwind_to_frutjam
Angin belakang → Buah-buahan
Tempel HTML Tailwind mentah. Cherry menggantikan utilitas buatan tangan dengan kelas komponen Frutjam yang benar.
/bootstrap_to_frutjam
Bootstrap → Buah
Tempel markup Bootstrap. Cherry memetakan setiap kelas Bootstrap ke setara Frutjam dan menghasilkan HTML yang bersih.
/generate_theme
Hasilkan tema
Jelaskan suasana hati, merek, atau palet warna. Cherry menghasilkan tema Frutjam lengkap dengan semua variabel CSS yang diperlukan.
＋
Lebih banyak petunjuk ditambahkan dengan setiap pembaruan.
Semua perintah garis miring tersedia di Claude Code, Cursor, VS Code, dan editor apa pun yang kompatibel dengan MCP.
Bagaimana Cherry membandingkannya
Tidak semua konteks AI sama.
| Cherry MCP | llms.txt | No context | |
|---|---|---|---|
| Nama kelas yang akurat | ✓ | Sebagian | ✗ |
| Sesuai permintaan — hanya yang diperlukan | ✓ | ✗ membuang semuanya | ✗ |
| Token efisien | ✓ | ✗ | ✓ |
| Selalu terkini | ✓ | ✓ | ✗ |
| Tema & token desain | ✓ | Sebagian | ✗ |
| Blok halaman siap pakai | ✓ | ✗ | ✗ |
| Figma / gambar → kode | ✓ | ✗ | ✗ |
| Migrasi kerangka kerja | ✓ Angin belakang, Bootstrap | ✗ | ✗ |
| Nama kelas akurat Tailwind CSS v4 | ✓ | Sebagian | ✗ |
Penyiapan dalam waktu kurang dari satu menit
Tidak diperlukan akun untuk memulai. Tingkat gratis langsung berfungsi — cukup tambahkan Cherry ke editor Anda dan mulai. Kunci lisensi dan email hanya diperlukan untuk paket Pro dan Tim.
Claude Code
Tingkat gratis tidak diperlukan akun
claude mcp add frutjam-cherry -- npx -y frutjam-cherry@latestPro / Tim lisensi diperlukan
claude mcp add frutjam-cherry \
--env LICENSE=your-license-key \
--env EMAIL=your@email.com \
-- npx -y frutjam-cherry@latestCursor
Buka Pengaturan Kursor → MCP dan tambahkan:
Tingkat gratis tidak diperlukan akun
{
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}Pro / Tim lisensi diperlukan
{
"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:
Tingkat gratis tidak diperlukan akun
{
"servers": {
"frutjam-cherry": {
"type": "stdio",
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}
}Pro / Tim lisensi diperlukan
{
"servers": {
"frutjam-cherry": {
"type": "stdio",
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}
}Other editors
Tingkat gratis tidak diperlukan akun
{
"mcpServers": {
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}
}Pro / Tim lisensi diperlukan
{
"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.
Verify it's running
VS Code
Ctrl+Shift+U → select MCP in the Output dropdown. Look for frutjam-cherry: Running.
Cursor
Settings → MCP. The server should show a green connected status next to frutjam-cherry.
Claude Code
Run claude mcp list in the terminal. frutjam-cherry should appear as connected.
Run your first test
Open your AI chat panel and type:
List all available Frutjam componentsIf Cherry is active, your AI will call list_components and return a list of component names. That's it — it's working.
Start building — example prompts
| Say this to your AI | What Cherry does |
|---|---|
| "Show me how to use the Frutjam button component" | Calls get_component and returns the full spec |
| "Build me a pricing card using Frutjam" | Looks up the card component and writes accurate code |
| "Show me the darkberry theme tokens" | Calls get_theme and returns all CSS variables |
| "Get me the hero block" | Calls get_block and returns copy-paste HTML |
| "How do I install Frutjam?" | Calls get_docs and returns the installation guide |
You don't need to mention Cherry — just describe what you want. Your AI calls the right tool automatically.
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.
Ready to build faster?
Get your AI working with accurate Frutjam code from the first prompt.