mcpField
U
UI Beats

UI Beats

Local
uibeats.comDeveloper Tools234Updated 10w ago
RepositoryVisit website

About UI Beats

UI Beats MCP server gives coding agents access to the UI Beats catalogue of animated React components. It lets an agent search components, read source and props, and install them without visiting the website.

Key features

  1. 01Search components by plain-language query or name
  2. 02Read props table and usage example
  3. 03Read complete component source code
  4. 04List all components grouped by category
  5. 05Generate shadcn install command and npm dependencies

Use cases

  1. 01Letting a coding agent find a component from a description
  2. 02Checking real props before writing JSX
  3. 03Installing a component and its npm packages automatically

MCP support

The server exposes four MCP tools to clients: search_components, get_component, list_components and get_install_command.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "com-uibeats": {
      "command": "npx",
      "args": [
        "-y",
        "@uibeats/mcp"
      ]
    }
  }
}
Run commandnpx -y @uibeats/mcp

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@uibeats/mcp0.1.3

Tools

4

Saved tool list · updated 2w ago

ParameterTypeRequiredDescription
limitintegerNoMaximum number of results (default 10).
querystringYesWhat the component should do, in plain words, or its exact name.
categorystringNoRestrict results to one category, e.g. 'card' or 'block'. Omit to search everything; list_components shows the current set.

Details

From the project README

@uibeats/mcp

MCP server for UI Beats. Lets a coding agent search the component catalogue, read a component's full source and props, and install it, without anyone opening the website.

Install

Claude Code:

claude mcp add uibeats -- npx -y @uibeats/mcp

Cursor, Windsurf, Claude Desktop and anything else that reads an mcpServers block:

{
  "mcpServers": {
    "uibeats": {
      "command": "npx",
      "args": ["-y", "@uibeats/mcp"]
    }
  }
}

Tools

ToolWhat it does
search_componentsRank the catalogue against a plain-language query or a name
get_componentFull docs for one component: props table, usage example, complete source
list_componentsEverything available, grouped by category
get_install_commandThe exact shadcn command, plus the npm packages it pulls in

A typical exchange: the agent calls search_components("card that flips"), then get_component("flip-card") to read the real props before writing any JSX, then get_install_command("flip-card") and runs it.

How it works

There is no backend. The server is a cached client over two static files the site already publishes:

  • /r/components.json: the search index (names, descriptions, props, guidance)
  • /docs/<category>/<name>.md: the canonical document for one component

The catalogue is cached in memory for ten minutes, and a stale copy is kept as a fallback so a brief network failure does not break every tool call.

Configuration

VariableDefaultPurpose
UIBEATS_URLhttps://uibeats.comPoint at a local next dev while working
UIBEATS_URL=http://localhost:3000 npx @uibeats/mcp

Development

This package is standalone: it is not part of the site's Yarn install.

cd packages/mcp
npm install
npm run build

License

MIT

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.