UI Beats MCP
MCP server for the UI Beats catalog of animated React components: search, props, source code and install command for an agent
- 235 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The server reads public catalog pages and gets no access to your code, while installing a component is done by the shadcn command that you or the agent run
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/ui-beatsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The server reads public catalog pages and gets no access to your code, while installing a component is done by the shadcn command that you or the agent run
This is third-party code. Review the repository files before installing.
What it does
UI Beats is a collection of 55 animated React components in TypeScript, Tailwind CSS and Motion. It is not a package to import: a component is copied into your project with the shadcn command or by hand and the code becomes yours. The `@uibeats/mcp` MCP server places the catalog inside Claude Code, Cursor or Windsurf so the agent picks a component and reads its real props instead of guessing them. The server has four tools: `search_components` ranks the catalog against a plain-language description or a name, `get_component` returns the props table, a usage example and the full source, `list_components` lists everything by category, and `get_install_command` gives the exact `shadcn` command and the npm packages it pulls in. There is no separate backend: the server caches two static files of the site (`/r/components.json` and `/docs/<category>/<name>.md` pages) for ten minutes and keeps a stale copy in case of a network failure.
Who it is for. Frontend developers on React and Next.js who build an animated interface with an agent and want ready components with real props.
Good fit when
- The agent needs a card that flips: it searches by description, reads the props and installs the right component
- Before writing JSX the agent checks the component's props table and does not invent props
- You need to see the whole catalog by category and pick an animation for a landing page
- You need the exact install command and dependency list without opening the site
Not a fit when
- The stack has no React or Tailwind: components are written in React with Tailwind CSS and Motion
- You need an installed package with versions and updates: components are copied rather than imported
- You need a strict design system with a client's tokens: the catalog sets its own animation style
Example request
Find an animated card with a flip effect in UI Beats, read its props and give the install commandMCP
- Transport
- stdio
- Authentication
- not required
Environment variables
UIBEATS_URL- Catalog URL, https://uibeats.com by default; for a local next dev
Limitations
The server reads the catalog from uibeats.com over the network, so without access to the site it works only from the in-memory cache of ten minutes and a stale copy. The address is changed with the `UIBEATS_URL` variable, for example for a local `next dev`. The `shadcn` install command writes files into the project and installs npm packages, and Node.js is needed. The MCP registry version is 0.1.3 and the license is MIT. Components belong to you after copying and the author does not push updates into the project.
How to disable. Remove the uibeats block from the client config (`claude mcp remove uibeats`). Components already added stay in the project and are removed by hand.
FAQ
How do I connect UI Beats to Claude Code?
Run `claude mcp add uibeats -- npx -y @uibeats/mcp`. For Cursor, Windsurf and Claude Desktop add an `mcpServers` block with the `npx` command and the arguments `-y`, `@uibeats/mcp`.
How do I install a component without MCP?
With the shadcn command from the component page, for example `npx shadcn@latest add https://uibeats.com/r/flip-card.json`, or by copying the source from the Installation, Manual section.
What tools does the server have?
`search_components`, `get_component`, `list_components` and `get_install_command`. A typical path is search, reading props, then the install command.
Is a separate backend needed?
No, the server caches two static files of the site: the `/r/components.json` index and component pages in Markdown. The cache lives ten minutes.
Is there a version for agents that only fetch URLs?
Yes: `/llms.txt` with a component index, `/llms-full.txt` with every props table and source in one file and any component page as Markdown when `.md` is appended.
Discussion
No questions or reviews yet.
Related
MCP serversA skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets
MCP server of a React component library for agent interfaces: the agent finds a component and adds it to your project
The Arc UI MCP server: an agent searches animated React components, reads docs and props and gets the shadcn install command.
The hosted Watermelon UI MCP searches free React and Tailwind components, blocks and dashboards and returns source code.
21st.dev MCP server and plugin: search ready React/Tailwind components and logos and generate UI from your agent
Shadcn UI MCP Server
Shadcn UI v4 MCP Server
An MCP server that gives the agent shadcn/ui component source, demos and blocks for React, Svelte, Vue and React Native
README in short
The text explains that UI Beats consists of animated components you own: installed with the shadcn command or copied by hand. Next come a section for agents with four MCP tools, a list of URLs for link-reading agents and notes on the stack.