What is the UI Beats MCP server?
UI Beats ships an MCP server that puts its catalogue of 52 animated React components inside your AI coding agent. Four tools search components, read real props, list the catalogue and return the shadcn CLI install command, so the agent stops guessing at props and names.
UI Beats is a collection of animated React components built with TypeScript, Tailwind CSS and Motion. You do not import it as a package. You add a component with the shadcn CLI or copy its source, then own and edit the code.
The MCP server exposes that catalogue to an AI coding agent. The agent can search for a component and read its real props instead of guessing them.
What changes in your agent's output
- Components are picked from a catalogue of 52 across six categories: animation, background, button, card, component and text.
- Props come from the registry data, so generated usage matches the actual API.
- Install is one shadcn CLI command per component, returned by the server.
- Motion respects the user's reduced-motion setting. The README says a CI test fails the build if a component ignores it.
How the setup works
- Add the server entry for your client. It runs
npx -y @uibeats/mcpover stdio. - Ask your agent for an effect, such as a flip card or an aurora background.
- The agent searches, reads the component, then runs the install command in your project.
Who the UI Beats MCP server is for
Best for
- React and Tailwind projects that want motion without writing each animation by hand.
- Teams that follow the copy-the-source model of shadcn registries and want the same loop for animated pieces.
- Builders comparing sources such as Magic UI and Magic MCP.
Not for
- Projects without React and Tailwind. The components are built on both, plus the Motion library.
- Pages that must stay quiet. Motion still needs review, and the motion performance skill covers that check.
- Design handoff from Figma. This server only serves a component catalogue.
Use it with UiChemy
UI Beats gives you React source for a front end you deploy yourself. If the site lives in WordPress, UiChemy covers that side: AI to WordPress imports an existing AI build, and Composer edits it inside Elementor or Gutenberg. Click Get Started on uichemy.com.
Connect UI Beats MCP Server: Animated React Components for Agents to your AI client
claude mcp add uibeats -- npx -y @uibeats/mcpAdd the server
In Claude Code, run
claude mcp add uibeats -- npx -y @uibeats/mcp. In Cursor, Windsurf or another client, add the JSON entry shown above to the MCP config.Restart the client
Reload so the client launches the stdio server, then confirm four tools appear.
Ask for a component
Describe the effect you want. The agent searches the catalogue and reads the component page data.
Install it
Run the command the server returns, for example
npx shadcn@latest add https://uibeats.com/r/flip-card.json, then edit the source freely.
Client configuration
{
"mcpServers": {
"uibeats": {
"command": "npx",
"args": ["-y", "@uibeats/mcp"]
}
}
}Endpoints and ports
https://uibeats.com/r/registry.jsonFull component index for the shadcn CLIhttps://uibeats.com/llms.txtFor agents that only fetch URLshttps://uibeats.com/llms-full.txtProps and full source in one filenpx -y @uibeats/mcpstdio serverWhat you can do with it
- 52 animated componentsSix categories cover text, backgrounds, buttons, cards, animation helpers and larger components such as Dock, Marquee and Timeline.
- Real props for agentsProps live in one array that renders both the docs table and the playground controls, so docs and controls cannot disagree.
- Reduced motion checked in CIA test fails the build if a component ignores the reduced-motion preference or reads it and animates anyway.
- Themed by your tokensComponents read shadcn variables such as the card, border and muted colors, so they wear your palette.
- Plain-text endpointsAn llms.txt index, a full-source file and a markdown version of every docs page serve agents that only fetch URLs.
- Playground and Motion StudioEach component has a live props playground, and a separate editor tunes cubic-bezier curves and springs.
Tools it exposes
search_components
Searches the UI Beats catalogue for components that match a request.
get_component
Returns one component with its real props and guidance.
list_components
Lists the catalogue, grouped by category.
get_install_command
Returns the shadcn CLI command that installs a given component.
Frequently asked questions
What is the UI Beats MCP server?
It is the MCP server from the UI Beats project. It exposes the catalogue of 52 animated React components to an AI coding agent through four tools, so the agent can search, read props, list components and get the install command without guessing.
How do I install the UI Beats MCP server?
In Claude Code run claude mcp add uibeats -- npx -y @uibeats/mcp. For other clients, add an entry that runs npx -y @uibeats/mcp over stdio to your MCP config. Restart the client afterward so it starts the server.
Do I have to install UI Beats as a dependency?
No. The README says it is not a package you install and import. You add a component with the shadcn CLI or copy its source, then the code is yours to change, with no version pinning or wrapper APIs.
Does it respect reduced motion?
The README says every component honors the reduced-motion preference, checked by a test in CI. What that means differs per component. A carousel stops auto-advancing but still moves on a button press, and Flip Card cuts instead of sweeping.
How does it differ from the Magic UI server?
Both serve animated components from a registry. The Magic UI server reads the Magic UI registry, while this one reads the UI Beats catalogue with its own props data. Pick by which components fit your design.
What stack does it need?
The components use TypeScript, Tailwind CSS and Motion, and the repository site runs on Next.js 16, React 19 and Tailwind 4. Local development of the repository needs Node 20.9 or newer and Yarn 4.
Is UI Beats open source?
Yes. The repository carries the MIT license. The README shows an MIT badge and links the license file, and GitHub detects MIT too, so you can copy, change and ship the component source in your own projects.