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:
{
"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:
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.