Skip to main content
Glama
dianramdhani

shadcn-registry-sync-mcp

by dianramdhani

shadcn-registry-sync-mcp ๐Ÿš€

Automate your shadcn/ui registry maintenance with AI-powered precision

TypeScript MCP shadcn/ui Commitizen Code Style


โœจ Why This Tool?

Tired of manually updating registry.json every time you create a new component?

shadcn-registry-sync-mcp is an intelligent MCP server that automatically scans your project, detects components, analyzes dependencies, and generates a production-ready registry.json โ€” all with a single command to your AI assistant.

๐ŸŽฏ What You Get

Before

After

โŒ Manual registry updates

โœ… One-command sync

โŒ Missing dependencies

โœ… Auto-detected deps

โŒ Inconsistent metadata

โœ… Smart descriptions

โŒ Error-prone copy-paste

โœ… 100% automated


Related MCP server: shadcn/ui MCP Server

๐Ÿš€ Quick Start

1. Install & Build

yarn install
yarn build

2. Configure Your MCP Client

Add to your MCP configuration (e.g., claude_desktop_config.json):

{
  "mcpServers": {
    "shadcn-registry-sync": {
      "command": "node",
      "args": ["/path/to/shadcn-registry-sync-mcp/dist/index.js"],
      "cwd": "/path/to/shadcn-registry-sync-mcp"
    }
  }
}

3. Use with Your AI Assistant

Simply tell your AI:

"Sync my shadcn registry"

Or:

"Update registry.json for my project at /path/to/project"

That's it! โœจ


๐ŸŽ Features

๐Ÿ” Intelligent Scanning

Automatically discovers components in:

  • src/components/* โ€” UI components

  • src/features/* โ€” Feature modules (layouts, components, models)

  • src/hooks/* โ€” Custom React hooks

  • src/lib/* โ€” Utility libraries

  • src/types/* โ€” TypeScript definitions

๐Ÿง  Smart Dependency Analysis

// Your component
import { Button } from '@/components/button';
import { Slot } from '@radix-ui/react-slot';

// Auto-detected:
// - registryDependencies: ["@shadcn-ui/button"]
// - dependencies: ["@radix-ui/react-slot"]

๐Ÿ“ Auto-Generated Descriptions

The tool analyzes your source code to generate meaningful descriptions:

// DialogDeleteUser.tsx
/**
 * Confirmation dialog for deleting users
 */
export function DialogDeleteUser() { ... }

// โ†’ description: "Confirmation dialog for deleting users"

Pattern Recognition:

  • dialog-delete-* โ†’ "Confirmation dialog for deleting *"

  • drawer-configure-* โ†’ "Configuration drawer for *"

  • chart-trend-* โ†’ "Trend line chart visualization"

  • *-models โ†’ "Data models, types, and API service functions"

๐ŸŽฏ shadcn/ui Compatible

Output follows the official shadcn/ui registry schema:

{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "shadcn-ui",
  "homepage": "https://ui.shadcn.com",
  "items": [
    {
      "name": "button",
      "type": "registry:component",
      "title": "Button",
      "description": "A reusable button component",
      "files": [...],
      "dependencies": ["@radix-ui/react-slot"],
      "registryDependencies": ["@shadcn-ui/icon"]
    }
  ]
}

๐Ÿ’ก Use Cases

For Component Library Maintainers

Keep your registry in sync with zero effort:

Developer: "I just added 5 new components to src/components"
AI: "I'll sync the registry for you."
โ†’ registry.json updated automatically

For Large Projects

Handle complex feature-based architectures:

src/features/
โ”œโ”€โ”€ auth/
โ”‚   โ”œโ”€โ”€ components/
โ”‚   โ”‚   โ”œโ”€โ”€ dialog-login/
โ”‚   โ”‚   โ””โ”€โ”€ dialog-otp/
โ”‚   โ”œโ”€โ”€ layouts/
โ”‚   โ”‚   โ””โ”€โ”€ login-page-layout/
โ”‚   โ””โ”€โ”€ models/
โ””โ”€โ”€ report/
    โ””โ”€โ”€ components/
        โ””โ”€โ”€ chart-trend-double-line/

โ†’ All detected and categorized correctly

For Teams

Ensure consistent registry structure across the team:

No more:
- "Who forgot to update the registry?"
- "Why are dependencies missing?"
- "Why does this component break when installed?"

๐Ÿ› ๏ธ Manual Usage

Run standalone without MCP:

# Set project root
export PROJECT_ROOT=/path/to/your/project

# Run sync
node run-local.js

Output:

[run-local] Project root: /path/to/your/project
[run-local] Scanning...
[run-local] Found 42 items
[run-local] Building registry...
[run-local] Written to /path/to/your/project/registry.json

๐Ÿ“Š What Gets Synced?

Type

Directory

Registry Type

Example

Components

src/components/*

registry:component

button, card, dialog

Blocks

src/features/*

registry:block

layouts, multi-file components

Hooks

src/hooks/*

registry:hook

use-mobile, use-debounce

Libraries

src/lib/*

registry:lib

utils, axios, storage

Types

src/types/*.d.ts

registry:file

tanstack-table, zod-schema


๐Ÿ”ง Configuration

Customize Scan Directories

Edit src/constants.ts:

export const COMPONENT_DIRS = ['src/components', 'src/ui', 'src/shared'];
export const FEATURE_DIR = 'src/features';
export const HOOKS_DIR = 'src/hooks';
export const LIB_DIR = 'src/lib';
export const TYPES_DIR = 'src/types';

Skip Patterns

export const SKIP_FILE_PATTERNS = [
  /\.stories\.tsx?$/, // Storybook
  /\.test\.tsx?$/, // Tests
  /\.spec\.tsx?$/, // Specs
];

export const LIB_SKIP_DIRS = ['storybook', 'docs'];

Dependency Filters

export const FRAMEWORK_DEPS = new Set([
  'react',
  'react-dom',
  'react-router',
  // These won't be tracked as dependencies
]);

๐Ÿ—๏ธ Architecture

For detailed architecture documentation, see ARCHITECTURE.md.

Key Modules:

  • scanner.ts โ€” Discovers components in your project

  • parser.ts โ€” Analyzes imports and classifies dependencies

  • builder.ts โ€” Constructs shadcn-compatible registry

  • describer.ts โ€” Generates smart descriptions from source code


๐Ÿงช Development

Build

npm run build

Watch Mode

npm run dev

Test Locally

# Point to your project
export PROJECT_ROOT=/path/to/test/project
node run-local.js

# Verify output
cat registry.json | jq '.items | length'

๐Ÿ“ Example Output

After running sync, your registry.json will look like:

{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "shadcn-ui",
  "homepage": "https://ui.shadcn.com",
  "items": [
    {
      "name": "utils",
      "type": "registry:lib",
      "title": "Utils",
      "description": "General utility functions including className merging (cn) and common helper methods",
      "files": [
        {
          "type": "registry:lib",
          "path": "src/lib/utils.ts"
        }
      ]
    },
    {
      "name": "use-mobile",
      "type": "registry:hook",
      "title": "useMobile",
      "description": "React hook for detecting mobile viewport. Returns a boolean indicating whether the current screen width is below the mobile breakpoint",
      "files": [
        {
          "type": "registry:hook",
          "path": "src/hooks/use-mobile.ts"
        }
      ],
      "dependencies": ["react"]
    },
    {
      "name": "button",
      "type": "registry:component",
      "title": "Button",
      "description": "A reusable button component built on Radix UI Slot",
      "files": [
        {
          "type": "registry:component",
          "path": "src/components/button/index.tsx"
        }
      ],
      "dependencies": ["@radix-ui/react-slot", "class-variance-authority"],
      "registryDependencies": ["@shadcn-ui/icon"]
    }
  ]
}

๐Ÿ› ๏ธ Development

Setup Development Environment

  1. Clone and install:

    git clone https://github.com/your-org/shadcn-registry-sync-mcp.git
    cd shadcn-registry-sync-mcp
    yarn install
  2. Build the project:

    yarn build
  3. Run linter:

    yarn lint
  4. Format code:

    yarn format

Available Scripts

Command

Description

yarn build

Compile TypeScript to JavaScript

yarn dev

Watch mode for development

yarn lint

Run ESLint

yarn lint:fix

Auto-fix ESLint errors

yarn format

Format code with Prettier

yarn format:check

Check code formatting

yarn check

Run both lint and format check

yarn commit

Interactive commit with Commitizen

Commit Guidelines

This project uses Commitizen for standardized commit messages:

yarn commit

This will launch an interactive prompt that helps you create commits following the Conventional Commits specification.

Commit types:

  • feat: New features

  • fix: Bug fixes

  • docs: Documentation changes

  • style: Code style changes (formatting, etc.)

  • refactor: Code refactoring

  • perf: Performance improvements

  • test: Adding tests

  • build: Build system changes

  • ci: CI/CD changes

  • chore: Maintenance tasks

  • revert: Reverting changes

Pre-commit hooks automatically run linting and formatting on staged files using Husky and lint-staged.


๐Ÿ“ Contributing

We welcome contributions! Please see our Contributing Guide for details on:

  • Development setup

  • Code standards

  • Commit message format

  • Pull request process

  • Testing guidelines


๐Ÿค Contributing

Contributions are welcome! See our Architecture Guide for understanding the codebase.

Quick Contribution Guide

  1. Fork the repository

  2. Create a feature branch: git checkout -b feature/amazing-feature

  3. Make your changes

  4. Build and test: yarn build && node run-local.js

  5. Commit and push

  6. Open a Pull Request


๐Ÿ“„ License

MIT License โ€” feel free to use in your projects!


๐Ÿ™ Acknowledgments


Made with โค๏ธ for the shadcn/ui community

Report Issue ยท Request Feature ยท View Architecture

Related MCP Connectors

Related MCP Servers