MCP

Install Atelier UI components from your AI editor with the shadcn MCP server.

Model Context Protocol (MCP) is an open standard that lets AI agents connect to external tools.
We strongly recommend the use of an MCP server. Atelier UI works with the shadcn MCP server. Your agent can browse, search, and install components from a prompt, instead of doing it manually or from the CLI.

Quick start

Before anything, add the @atelier registry to the components.json created during installation.

components.json

{
  "registries": {
    "@atelier": "https://www.atelier-ui.com/r/{name}.json"
  }
}

Then set up the shadcn MCP server:

Terminal

npx shadcn@latest mcp init --client claude

Restart Claude Code, then try prompts like:

Example prompts

Install the sphere gallery from Atelier and fill it with my images
Replace my hero image with Atelier's pixel media so it breaks into pixels under the cursor
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

Before anything, add the @atelier registry to the components.json created during installation.

components.json

{
  "registries": {
    "@atelier": "https://www.atelier-ui.com/r/{name}.json"
  }
}

Then set up the shadcn MCP server:

Terminal

npx shadcn@latest mcp init --client cursor

Open Cursor Settings, enable the shadcn MCP server, then try prompts like:

Example prompts

Install the sphere gallery from Atelier and fill it with my images
Replace my hero image with Atelier's pixel media so it breaks into pixels under the cursor
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

Before anything, add the @atelier registry to the components.json created during installation.

components.json

{
  "registries": {
    "@atelier": "https://www.atelier-ui.com/r/{name}.json"
  }
}

Then set up the shadcn MCP server:

Terminal

npx shadcn@latest mcp init --client vscode

Start the shadcn server from the MCP panel, then try prompts like:

Example prompts

Install the sphere gallery from Atelier and fill it with my images
Replace my hero image with Atelier's pixel media so it breaks into pixels under the cursor
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

Before anything, add the @atelier registry to the components.json created during installation.

components.json

{
  "registries": {
    "@atelier": "https://www.atelier-ui.com/r/{name}.json"
  }
}

Then set up the shadcn MCP server:

Terminal

npx shadcn@latest mcp init --client codex

Restart Codex, then try prompts like:

Example prompts

Install the sphere gallery from Atelier and fill it with my images
Replace my hero image with Atelier's pixel media so it breaks into pixels under the cursor
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

Use pro components

Pro components need your license key on each request. Use the object form of the registry instead, with the key read from a git-ignored .env.local as described in install a pro component. Free components install without a key either way.

components.json

{
  "registries": {
    "@atelier": {
      "url": "https://www.atelier-ui.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${ATELIER_PRO_KEY}"
      }
    }
  }
}

Learn more

For manual configuration, other clients, and everything the shadcn MCP server can do, see the shadcn MCP documentation:

shadcn MCP documentation.

Quick start

Before anything, add the @atelier registry to the components.json created during installation.

components.json

{
  "registries": {
    "@atelier": "https://www.atelier-ui.com/r/{name}.json"
  }
}

Then set up the shadcn MCP server:

Terminal

npx shadcn@latest mcp init --client claude

Restart Claude Code, then try prompts like:

Example prompts

Install the sphere gallery from Atelier and fill it with my images
Replace my hero image with Atelier's pixel media so it breaks into pixels under the cursor
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

Before anything, add the @atelier registry to the components.json created during installation.

components.json

{
  "registries": {
    "@atelier": "https://www.atelier-ui.com/r/{name}.json"
  }
}

Then set up the shadcn MCP server:

Terminal

npx shadcn@latest mcp init --client cursor

Open Cursor Settings, enable the shadcn MCP server, then try prompts like:

Example prompts

Install the sphere gallery from Atelier and fill it with my images
Replace my hero image with Atelier's pixel media so it breaks into pixels under the cursor
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

Before anything, add the @atelier registry to the components.json created during installation.

components.json

{
  "registries": {
    "@atelier": "https://www.atelier-ui.com/r/{name}.json"
  }
}

Then set up the shadcn MCP server:

Terminal

npx shadcn@latest mcp init --client vscode

Start the shadcn server from the MCP panel, then try prompts like:

Example prompts

Install the sphere gallery from Atelier and fill it with my images
Replace my hero image with Atelier's pixel media so it breaks into pixels under the cursor
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

Before anything, add the @atelier registry to the components.json created during installation.

components.json

{
  "registries": {
    "@atelier": "https://www.atelier-ui.com/r/{name}.json"
  }
}

Then set up the shadcn MCP server:

Terminal

npx shadcn@latest mcp init --client codex

Restart Codex, then try prompts like:

Example prompts

Install the sphere gallery from Atelier and fill it with my images
Replace my hero image with Atelier's pixel media so it breaks into pixels under the cursor
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

Use pro components

components.json

{
  "registries": {
    "@atelier": {
      "url": "https://www.atelier-ui.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${ATELIER_PRO_KEY}"
      }
    }
  }
}