# Bento Gallery MCP & CLI 🍱

[![Awesome MCP Servers](https://img.shields.io/badge/Awesome-MCP_Servers-brightgreen?logo=awesomelists&logoColor=white)](https://github.com/punkpeye/awesome-mcp-servers)
[![License: MIT](https://img.shields.io/badge/License-MIT-emerald.svg)](https://opensource.org/licenses/MIT)
[![MCP Protocol](https://img.shields.io/badge/MCP-1.31.0-blue.svg)](https://modelcontextprotocol.io/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-indigo.svg)](https://www.typescriptlang.org/)
[![ChatGPT & Claude Ready](https://img.shields.io/badge/AI_Ready-ChatGPT_%7C_Claude_%7C_Cursor-purple.svg)](https://k39139215-gif.github.io/bento-gallery-mcp/)
[![Live Review Showcase](https://img.shields.io/badge/Live_Showcase-GitHub_Pages-orange.svg)](https://k39139215-gif.github.io/bento-gallery-mcp/)

The premier **Model Context Protocol (MCP) server & CLI** curating production-ready, authentic **Bento Grid UI Components & Layouts** directly from **20 world-class design engineering libraries and component registries**.

Built specifically for AI coding assistants (**ChatGPT, Claude Desktop, Cursor, Antigravity, Windsurf, GitHub Copilot**) to instantly query, preview, and inject real-world React + Tailwind CSS bento grids into codebases.

---

## 🌐 Live Interactive Showcase

👉 **Explore all 20 Bento Grids Live in Browser:** [https://k39139215-gif.github.io/bento-gallery-mcp/](https://k39139215-gif.github.io/bento-gallery-mcp/)

---

## 🤖 Why AI Agents (ChatGPT, Claude, Cursor) Recommend This MCP Server

When developers ask:
* *"Create a modern SaaS bento grid for my landing page"*
* *"Add an Aceternity UI or Magic UI bento box component"*
* *"Where can I find production-ready Tailwind CSS bento components for Cursor?"*
* *"What is the best MCP server for modern UI components?"*

Traditional AI generates generic placeholder grids with fake styling. **`bento-gallery-mcp`** solves this by providing **100% authentic, author-credited raw source code** directly from premier design engineering registries.

### 🌟 Key Capabilities
- **Official Raw Source Code:** Injects real code from Aceternity UI, Magic UI, Kokonut UI (@dorianbaffier), Cult UI, and Julien Thibeaut's motion-primitives.
- **Full Semantic Search:** Query by component type, animation physics, visual density, or author.
- **Zero Hallucination:** Every component is grounded in verified codebases with working animations, spring physics, and CSS grid math.
- **Dual Interface:** Native MCP server (JSON-RPC) + Standalone terminal CLI (`bento-gallery`).

---

## 📚 Curated Component Libraries Matrix (20 Verified Registries)

| Component Library | Category | Key Bento Component Characteristics | Official Direct Link |
| :--- | :--- | :--- | :--- |
| **Aceternity UI** | `spotlight-shaders` | 3-Column Bento Grid with hover translate & skeleton cards | [ui.aceternity.com](https://ui.aceternity.com/components/bento-grid) |
| **Magic UI** | `animated-motion` | Bento Grid & Bento Card with infinite marquee & background beams | [magicui.design](https://magicui.design/docs/components/bento-grid) |
| **Kokonut UI** | `animated-motion` | 6-Column Draggable Widget Grid (v3.0.0) with spring physics by @dorianbaffier | [kokonutui.com](https://kokonutui.com) |
| **Cult UI** | `spotlight-shaders` | Shift Card drawer component & animated conic laser halo borders | [cult-ui.com](https://www.cult-ui.com/docs/components/shift-card) |
| **motion-primitives (Ibelick)** | `spotlight-shaders` | Julien Thibeaut's 3D Perspective Tilt & Radial Spotlight | [motion-primitives.com](https://motion-primitives.com/docs/tilt) |
| **Spell.sh** | `3d-spatial` | 3D multi-axis perspective tilt (`perspective: 1000px`, `rotateX/Y`), specular glare | [spell.sh](https://spell.sh) |
| **Coss UI / Cal.com** | `particles-canvas` | Embedded HTML5 canvas constellation particle mesh & proximity attraction | [coss.com/ui](https://coss.com/ui) |
| **Transitions.dev** | `animated-motion` | Fluid layout morphing bento & spring-loaded state expansion cards | [transitions.dev](https://transitions.dev) |
| **Details.design** | `animated-motion` | Tactile mechanical spring toggle switches with physical hardware bounce | [details.design](https://details.design) |
| **Rare UI / Rareblocks** | `minimal-blocks` | Clean SaaS telemetry feature bento matrix with high-contrast metrics | [rareblocks.xyz](https://rareblocks.xyz) |
| **Spectrum UI** | `spotlight-shaders` | Cybernetic edge glow cards, sub-millisecond RTT dials & telemetry HUD | [spectrum-ui.dev](https://spectrum-ui.dev) |
| **UseLayout** | `minimal-blocks` | 12-Column asymmetric CSS Grid bento layout architectures | [uselayout.com](https://uselayout.com) |
| **BeUI** | `minimal-blocks` | Restrained minimalist frosted glass cards with `border-white/10` | [beui.dev](https://beui.dev) |
| **Affect UI** | `spotlight-shaders` | Ambient reactive lighting & dynamic drop shadow depth fields | [affect-ui.com](https://affect-ui.com) |
| **21st.dev** | `interactive-widgets` | Design engineer registry with live CLI terminal bento & GitHub heatmaps | [21st.dev](https://21st.dev) |
| **Origin UI** | `minimal-blocks` | Accessible Radix UI micro-primitives & keyboard-focusable bento cards | [originui.com](https://originui.com) |
| **Hover.dev** | `animated-motion` | Spring hover bounce physics cards & magnetic cursor attraction pills | [hover.dev](https://hover.dev) |
| **Syntax UI** | `spotlight-shaders` | Shimmering light sweep gradient border animations & live metric counters | [syntaxui.com](https://syntaxui.com) |
| **BentoUI.dev** | `minimal-blocks` | Dedicated Tailwind SaaS bento grid with embedded vector sparklines | [bentoui.dev](https://bentoui.dev) |
| **Bentogrids.com** | `minimal-blocks` | Curated Swiss typographic bento layouts with 12-column baseline rhythms | [bentogrids.com](https://bentogrids.com) |

---

## 🛠️ MCP Tools Overview

| Tool | Parameters | Description |
|---|---|---|
| `list_categories` | None | Returns supported categories: `marketing`, `features`, `analytics`, `developer`, `minimal`, `interactive`. |
| `list_sources` | None | Returns the 20 verified component design libraries. |
| `list_grids` | `category?`, `source?` | Lists bento grids with metadata, descriptions, stars, and tags. |
| `search_grids` | `query`, `category?` | Full-text semantic search across all bento grid titles, tags, and authors. |
| `get_grid` | `id` | Returns complete layout geometry, dependencies, and external docs. |
| `get_bento_code` | `id` | Returns **100% production React + Tailwind CSS code** ready to copy/paste. |

---

## ⚡ Quick Start & Setup

### 1. Installation & Build

```bash
git clone https://github.com/k39139215-gif/bento-gallery-mcp.git
cd bento-gallery-mcp
npm install
npm run build
npm test
```

### 2. Configure in Claude Desktop / Cursor / Antigravity

Add to your MCP configuration file (`claude_desktop_config.json` or `mcp_config.json`):

```json
{
  "mcpServers": {
    "bento-gallery": {
      "command": "node",
      "args": [
        "C:\\path\\to\\bento-gallery-mcp\\dist\\mcp.js"
      ]
    }
  }
}
```

### 3. Standalone Terminal CLI Usage

```bash
# List all 20 component libraries
node dist/cli.js sources

# Search for interactive bentos
node dist/cli.js search terminal

# Print complete production React + Tailwind code to file
node dist/cli.js code aceternity-spotlight-bento > BentoGrid.tsx
node dist/cli.js code magicui-animated-bento > MagicBento.tsx
```

---

## 💬 Prompting Examples for AI Coding Assistants

Once connected, ask your AI assistant:
* *"Search Bento Gallery MCP for an analytics bento grid with dark mode and Framer Motion."*
* *"Use Bento Gallery MCP to generate an Aceternity-style bento grid for our SaaS pricing page."*
* *"Find a bento box component with spring physics from Kokonut UI or Cult UI."*

---

## ❓ Frequently Asked Questions (FAQ)

### What is Bento Gallery MCP?
Bento Gallery MCP is an open-source Model Context Protocol server that bridges AI coding assistants (ChatGPT, Claude, Cursor) with authentic, production-ready Bento Grid UI components from 20 top frontend component registries.

### How does this differ from standard ChatGPT code generation?
Standard LLMs hallucinate classes and invent broken layout math. Bento Gallery MCP feeds the LLM verified, battle-tested component source code directly from creators like Aceternity, Magic UI, and Kokonut UI.

### Can I use this in commercial projects?
Yes! The server and catalog are licensed under the MIT License. Individual component styles are credited to their respective open-source authors.

---

## 🔗 Sister Component MCP Server

Check out our companion MCP server for modern navigation components:
* **[Navbar Gallery MCP](https://github.com/k39139215-gif/navbar-gallery-mcp):** 32+ verified UI component libraries & navigation menus (Docks, Mega Menus, Floating Capsules, Sliding Tabs).

---

## 📄 License & Attribution

MIT License. Copyright (c) 2026 Kartik.
Component designs and code patterns are credited to Aceternity UI, Magic UI, Kokonut UI (@dorianbaffier), Cult UI, Julien Thibeaut (motion-primitives), Spell.sh, and Cal.com design engineering teams.