UICapsule — Claude Code MCP server: what it does, how to install
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.
claude mcp add --transport http components https://www.uicapsule.com/mcpWhat UICapsule 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.
What it helps with
- 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 for the agent
- 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.
How to install UICapsule
Platform CLI: remote server
claude mcp add --transport http components https://www.uicapsule.com/mcpPlatform CLI: remote server
codex mcp add uicapsule --url https://www.uicapsule.com/mcpConfig file
{
"mcpServers": {
"uicapsule": {
"url": "https://www.uicapsule.com/mcp"
}
}
}Config file
{
"servers": {
"uicapsule": {
"type": "http",
"url": "https://www.uicapsule.com/mcp"
}
}
}Platform CLI: remote server
gemini mcp add -t http uicapsule https://www.uicapsule.com/mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about UICapsule
How do I install UICapsule in Claude Code?
Run claude mcp add --transport http uicapsule https://www.uicapsule.com/mcp. The server is remote and speaks Streamable HTTP.
What does UICapsule do?
It lets an agent search a catalog of interactive components and install a match with the shadcn CLI. Each install pulls the component in by its slug.
Does the server work outside Claude Code?
Yes, one address covers all: any client with Streamable HTTP transport can use https://www.uicapsule.com/mcp. Codex takes codex mcp add uicapsule --url https://www.uicapsule.com/mcp, Cursor takes a url entry in its config.
