UI Beats — Claude Code MCP server: what it does, how to install
Searches the UI Beats catalog for animated React components, reads their props, and retrieves shadcn install commands directly inside coding agents.
claude mcp add mcp -- npx -y @uibeats/mcpWhat UI Beats does
The server gives your coding assistant access to animated React components. Instead of browsing a website manually, the assistant searches items with natural language queries and inspects prop definitions alongside raw source files. When you choose a component, the server outputs the exact shadcn command with any required npm packages.
There is no separate backend. The tool acts as a client reading two static files hosted on the main site. Catalog data stays in memory for ten minutes, keeping an older copy in reserve whenever network requests fail.
Working on the component site offline requires the UIBEATS_URL environment variable. Point it to a local development address if you want the server to bypass production endpoints.
What it helps with
- Locate animated React UI elements using plain queries
- Inspect component props and full source without leaving the editor
- Obtain exact
shadcnsetup commands and required dependencies - Browse the component library grouped into layout categories
Example prompts for the agent
- Search UI Beats for an animated flip card and show its props
- Get the install command and dependencies for the
flip-cardcomponent - List all available UI Beats components organized by category
How to install UI Beats
Platform CLI
claude mcp add mcp -- npx -y @uibeats/mcpPlatform CLI
codex mcp add mcp -- npx -y @uibeats/mcpConfig file
{
"mcpServers": {
"mcp": {
"command": "npx",
"args": [
"-y",
"@uibeats/mcp"
]
}
}
}Config file
{
"servers": {
"mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@uibeats/mcp"
]
}
}
}Platform CLI
gemini mcp add mcp npx -y @uibeats/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 UI Beats
How to install UI Beats in Claude Code?
Run claude mcp add mcp -- npx -y @uibeats/mcp in your terminal. Once added, restart your assistant session to make the tools available.
What does UI Beats do?
It provides tools such as search_components and get_install_command to your agent. This lets the model discover React components, examine their code, and install them into your codebase.
How do you point the server to a local development build?
Set the UIBEATS_URL environment variable to your local port, such as UIBEATS_URL=http://localhost:3000 npx @uibeats/mcp. Without this setting, it fetches files from https://uibeats.com.
