MCP

Connect Iconiq UI to shadcn MCP so AI tools can add registry components to your codebase.

If you work with Cursor, Claude Code, or another MCP-compatible coding tool, you can let the shadcn MCP flow expose the Iconiq UI registry to the assistant. That keeps the experience natural for AI-driven edits while still landing real component files inside your repository.

For the latest shadcn MCP behavior, keep the official docs handy at ui.shadcn.com/docs/mcp. The setup below adapts that flow for the Iconiq UI registry.

Automatic configuration

The quickest path is the shadcn MCP init flow. Pick the client you use, run the generated command in the same project where you want to install Iconiq UI components, and let shadcn scaffold the editor-side configuration it supports.

Scaffold the shadcn MCP server for Claude Code and then restart the client.

npx shadcn@latest mcp init --client claude

After setup, run /mcp in Claude Code to confirm the server is connected.

  • Run the command from the root of the app where your assistant should install Iconiq components.
  • Restart or re-enable your MCP client after the config is written so the server is reloaded.
  • Even with automatic setup, you still need the Iconiq registry entry in components.json.

Manual configuration

If you want full control or your client needs a manual setup path, install shadcn as a dev dependency and add the MCP server entry yourself.

npm install -D shadcn@latest

.mcp.json

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

Restart Claude Code and run /mcp to verify the shadcn server shows as connected.

Registry configuration

The standard shadcn/ui registry works without extra registry setup, but Iconiq UIuses a namespaced registry. Add it to your project's components.json so shadcn and your AI tooling know how to resolve Iconiq component names.

components.json

{
  "registries": {
    "@iconiq": "https://iconiqui.com/r/{name}.json"
  }
}
  • Keep any registries you already use and add @iconiq alongside them.
  • The {name} token lets shadcn resolve registry entries like @iconiq/b-button and @iconiq/accordion.
  • Once this is in place, your assistant can install Iconiq components without pasting full registry URLs.

Example prompts

With MCP enabled and the registry configured, you can ask your coding assistant to work with Iconiq UI in plain language. These prompts map well to the registry workflow:

Prompt examples

Add the @iconiq/b-button component to this page.
Install the @iconiq/accordion component and keep the generated files editable.
Show me all available components in the iconiq registry.
Create a feature section using Iconiq components and keep the generated files local.

The important part is that the assistant should still use the registry install flow rather than inventing a fresh component from scratch when an Iconiq version already exists.

Troubleshooting

If MCP is not responding, the fix is usually one of a few boring but important checks.

  • Confirm the MCP server is enabled in your editor and restart the client after configuration changes.
  • Make sure shadcn is installed and that your project has a valid components.json.
  • If you see No tools or prompts, run npx clear-npx-cache and then re-enable the MCP server.
  • Verify the Iconiq registry URL is reachable and the @iconiq namespace is spelled correctly in your prompt or install request.