# UICapsule

Remote MCP server holding a catalog of React components that move in unusual ways. Your agent finds one by description and installs it through the shadcn CLI.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 32
- Author: kyh
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/kyh/uicapsule
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/mcp/uicapsule

## What it does

UICapsule puts its component catalog behind MCP so a coding agent can reach it. Say which behaviour you need, the agent looks it up, then the piece lands in your repo via `npx shadcn@latest add @uicapsule/<slug>`. You can also browse slugs on the site yourself.

There is nothing to host. Requests go to `https://www.uicapsule.com/mcp` over Streamable HTTP, and that single address serves every client with the transport — Claude Code, Codex, Cursor included. In the MCP Registry it appears as `com.uicapsule/components`.

A client that lacks Streamable HTTP will fail to connect, so confirm your setup supports it first. After that the search runs on what a component does, which is faster than guessing its slug from a list.

## Requirements
- Remote server: `https://www.uicapsule.com/mcp`

## Install

### Claude Code (native platform)

**Platform CLI: remote server**
```bash
claude mcp add --transport http components https://www.uicapsule.com/mcp
```

### Codex

**Platform CLI: remote server**
```bash
codex mcp add uicapsule --url https://www.uicapsule.com/mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "uicapsule": {
            "url": "https://www.uicapsule.com/mcp"
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "uicapsule": {
            "type": "http",
            "url": "https://www.uicapsule.com/mcp"
        }
    }
}
```

### Gemini CLI

**Platform CLI: remote server**
```bash
gemini mcp add -t http uicapsule https://www.uicapsule.com/mcp
```

## When to use it
- look a component up by the motion it makes instead of its name
- add a chosen component to a shadcn project with one command
- drop an animated React block into a page
- wire the catalog into an agent in Cursor or Claude Code
- get the right slug from the agent instead of guessing

## Example prompts
- Find a UICapsule component with a magnetic hover button and add it to the project.
- Search uicapsule for scroll-driven text animation and install the one that fits.
- Which UICapsule components handle page transitions? Install the first one.

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4402
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3450

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md