MCP

Browse and add Animate UI's Vue icons, backgrounds and styled components from your AI assistant with the shadcn-vue MCP server.

The shadcn-vue MCP server lets your AI assistant search Animate UI's Vue registry and add its icons, backgrounds and styled components (the Liquid, Flip, GitHub Stars and Theme Toggler buttons, the Code Block, the Page Transition) to your project as .vue files.

Add the registry

The MCP server searches the registries listed in your components.json. Add Animate UI's Vue registry:

components.json
{
  "registries": {
    "@animate-ui": "https://animate-ui.com/r/vue/{name}.json"
  }
}

The same entry lets the shadcn-vue CLI add them by name: shadcn-vue add @animate-ui/icons-lucide-bell.

Configure the MCP server

Run the command for your MCP client:

npx shadcn-vue@latest mcp init --client claude
pnpm dlx shadcn-vue@latest mcp init --client claude
yarn dlx shadcn-vue@latest mcp init --client claude
bun x shadcn-vue@latest mcp init --client claude
npx shadcn-vue@latest mcp init --client cursor
pnpm dlx shadcn-vue@latest mcp init --client cursor
yarn dlx shadcn-vue@latest mcp init --client cursor
bun x shadcn-vue@latest mcp init --client cursor
npx shadcn-vue@latest mcp init --client vscode
pnpm dlx shadcn-vue@latest mcp init --client vscode
yarn dlx shadcn-vue@latest mcp init --client vscode
bun x shadcn-vue@latest mcp init --client vscode
npx shadcn-vue@latest mcp init --client codex
pnpm dlx shadcn-vue@latest mcp init --client codex
yarn dlx shadcn-vue@latest mcp init --client codex
bun x shadcn-vue@latest mcp init --client codex

Or add the server to your client's MCP configuration yourself (.mcp.json for Claude Code, .cursor/mcp.json for Cursor, .vscode/mcp.json for VS Code):

{
  "mcpServers": {
    "shadcnVue": {
      "command": "npx",
      "args": ["shadcn-vue@latest", "mcp"]
    }
  }
}

Use it

Ask your assistant things like:

  • "Show me the animated icons in the Animate UI registry."
  • "Add the Lucide bell icon from Animate UI."
  • "Add Animate UI's stars background to the hero."
  • "Add Animate UI's liquid button."

To animate your shadcn-vue components, use the CLI or the skill.

Built by Skyleen. The source code is available on GitHub.

Last updated: 10/23/2026