shadcn-registry-sync-mcp
Automates the maintenance of shadcn/ui component registries by scanning projects, detecting components, analyzing dependencies, and generating registry.json files.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@shadcn-registry-sync-mcpSync my shadcn registry"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
shadcn-registry-sync-mcp ๐
Automate your shadcn/ui registry maintenance with AI-powered precision
โจ 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 MCP Server
๐ Quick Start
1. Install & Build
yarn install
yarn build2. 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 componentssrc/features/*โ Feature modules (layouts, components, models)src/hooks/*โ Custom React hookssrc/lib/*โ Utility librariessrc/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 automaticallyFor 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 correctlyFor 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.jsOutput:
[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 |
|
| button, card, dialog |
Blocks |
|
| layouts, multi-file components |
Hooks |
|
| use-mobile, use-debounce |
Libraries |
|
| utils, axios, storage |
Types |
|
| 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 buildWatch Mode
npm run devTest 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
Clone and install:
git clone https://github.com/your-org/shadcn-registry-sync-mcp.git cd shadcn-registry-sync-mcp yarn installBuild the project:
yarn buildRun linter:
yarn lintFormat code:
yarn format
Available Scripts
Command | Description |
| Compile TypeScript to JavaScript |
| Watch mode for development |
| Run ESLint |
| Auto-fix ESLint errors |
| Format code with Prettier |
| Check code formatting |
| Run both lint and format check |
| Interactive commit with Commitizen |
Commit Guidelines
This project uses Commitizen for standardized commit messages:
yarn commitThis will launch an interactive prompt that helps you create commits following the Conventional Commits specification.
Commit types:
feat: New featuresfix: Bug fixesdocs: Documentation changesstyle: Code style changes (formatting, etc.)refactor: Code refactoringperf: Performance improvementstest: Adding testsbuild: Build system changesci: CI/CD changeschore: Maintenance tasksrevert: 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
Fork the repository
Create a feature branch:
git checkout -b feature/amazing-featureMake your changes
Build and test:
yarn build && node run-local.jsCommit and push
Open a Pull Request
๐ License
MIT License โ feel free to use in your projects!
๐ Acknowledgments
shadcn/ui โ Amazing component library
Model Context Protocol โ AI integration standard
Radix UI โ Accessible primitives
Made with โค๏ธ for the shadcn/ui community
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/dianramdhani/shadcn-registry-sync-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server