Install Atelier UI components from your coding agent with the shadcn MCP server.
Model Context Protocol (MCP) is an open standard that lets AI agents connect to external tools.
Atelier UI works with the shadcn MCP server, so your agent can search the catalog and install from a plain request instead of a copied prompt. None of this is needed to install a component.
The server finds Atelier through your components.json. Installing with a prompt writes it for you, but MCP comes before your first install, so you set it up by hand.
1. Create a components.json if you don't already have one:
npx shadcn@latest init -d2. Add the @atelier entry:
{
"registries": {
"@atelier": "https://www.atelier-ui.com/r/{name}.json"
}
}That entry covers the whole catalog and every free component. Pro components use the same entry with a license header, see license.
npx shadcn@latest mcp init --client claudeRestart Claude Code, then try prompts like:
- Install the sphere gallery from Atelier and fill it with my images
- Replace my hero image with Atelier's pixel media
- Set up Atelier's clip transition and explain how my routes and links need to change
- Show me the cursor effects available in the Atelier registry
- Explain to me how the scroll effect work with Aterlier
- Why does Atelier uses Motion instead of GSAP?npx shadcn@latest mcp init --client cursorOpen Cursor Settings, enable the shadcn MCP server, then try prompts like:
- Install the sphere gallery from Atelier and fill it with my images
- Replace my hero image with Atelier's pixel media
- Set up Atelier's clip transition and explain how my routes and links need to change
- Show me the cursor effects available in the Atelier registry
- Explain to me how the scroll effect work with Aterlier
- Why does Atelier uses Motion instead of GSAP?npx shadcn@latest mcp init --client vscodeStart the shadcn server from the MCP panel, then try prompts like:
- Install the sphere gallery from Atelier and fill it with my images
- Replace my hero image with Atelier's pixel media
- Set up Atelier's clip transition and explain how my routes and links need to change
- Show me the cursor effects available in the Atelier registry
- Explain to me how the scroll effect work with Aterlier
- Why does Atelier uses Motion instead of GSAP?npx shadcn@latest mcp init --client codexRestart Codex, then try prompts like:
- Install the sphere gallery from Atelier and fill it with my images
- Replace my hero image with Atelier's pixel media
- Set up Atelier's clip transition and explain how my routes and links need to change
- Show me the cursor effects available in the Atelier registry
- Explain to me how the scroll effect work with Aterlier
- Why does Atelier uses Motion instead of GSAP?For manual setup, or a client not listed above, see the shadcn MCP documentation.