dotcms-shadcn-mcp-server by thoiruddin - MCP Server

DotCMS Shadcn UI MCP Server

A powerful Model Context Protocol (MCP) server for shadcn/ui components with specialized Laravel + Vite integration. This server enhances AI assistants and development workflows by providing real-time access to shadcn/ui components and Laravel integration guides.

Introduction

The DotCMS Shadcn UI MCP Server is a specialized tool that bridges the gap between shadcn/ui components and Laravel development. It provides AI assistants and developers with real-time access to component information, source code, and integration guides specifically tailored for Laravel + Vite projects.

This server scrapes and caches information from:

The official shadcn/ui documentation site (https://ui.shadcn.com)
The shadcn/ui GitHub repository

Key Features

Component Library Access: Browse, search, and retrieve the complete shadcn/ui component collection
Source Code Retrieval: Get the exact TypeScript source code for any shadcn/ui component
Usage Examples: Access practical implementation examples for all components
Laravel + Vite Integration: Specialized guides for integrating shadcn/ui with Laravel projects
AI Assistant Enhancement: Improves AI capabilities when working with shadcn/ui components
Real-time Updates: Stays current with the latest shadcn/ui components and documentation
Optimized Performance: Implements caching for faster response times
MCP Protocol Compatibility: Works seamlessly with AI assistants that support the Model Context Protocol

Technology Stack

Backend: Node.js with TypeScript
API Access: Axios for HTTP requests
HTML Parsing: Cheerio for documentation scraping
Schema Validation: Zod for type-safe validation
Protocol: Model Context Protocol (MCP) SDK
Target Frameworks: Laravel with Vite and React

Installation

Quick Start (Recommended)

The easiest way to use this MCP server is through the components.json configuration:

{
  "mcpServers": {
    "Dotcms Shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-dotcms-shadcn@latest"
      ]
    }
  }
}

For Developers

# Clone the repository
git clone https://github.com/yourusername/mcp-dotcms-shadcn.git
cd mcp-dotcms-shadcn

# Install dependencies
npm install

# Build the project
npm run build

# Start the server
npm start

Global Installation

# Install globally from npm
npm install -g mcp-dotcms-shadcn

# Run the server
mcp-dotcms-shadcn

Prerequisites

Node.js v16 or later
npm v7 or later
For Laravel integration: Laravel 9+ with Vite

Using with shadcn/ui

Setting Up Your Project

Create a components.json file in your project root:

{
  "mcpServers": {
    "Dotcms Shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-dotcms-shadcn@latest"
      ]
    }
  }
}

Configure shadcn/ui CLI to use this MCP server:

# Initialize shadcn/ui with the custom MCP server
npx shadcn-ui@latest init --mcp "Dotcms Shadcn"

Verify the configuration:

# Check if the MCP server is properly configured
npx shadcn-ui@latest --help

Laravel + Vite Integration

This MCP server provides specialized guidance for integrating shadcn/ui with Laravel + Vite projects:

Install dependencies in your Laravel project:

npm install -D tailwindcss postcss autoprefixer
npm install class-variance-authority clsx tailwind-merge

Configure Tailwind CSS:
```
npx tailwindcss init -p
```

Update your Vite configuration (vite.config.js):

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        react(),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './resources/js'),
        },
    },
});

Add components using the shadcn/ui CLI:
```
npx shadcn-ui@latest add button
```

Using with AI Assistants

This MCP server enhances AI assistants that support the Model Context Protocol:

Ensure the assistant has access to your components.json file
The assistant can then use the MCP server to provide accurate shadcn/ui component information
For Laravel projects, the assistant can provide specialized integration guides

Available Tools

This MCP server provides the following tools for AI assistants and developers:

Component Discovery

list_shadcn_components
- Description: Get a comprehensive list of all available shadcn/ui components
- Returns: Component names, descriptions, and URLs
- Example: list_shadcn_components
- Use case: When you need to explore the available component library

Component Details

get_component
- Description: Retrieve the source code for any shadcn/ui component
- Parameters: componentName (string) - Name of the component (e.g., "button", "accordion")
- Returns: Complete TypeScript source code
- Example: get_component({ componentName: "button" })
- Use case: When you need to understand the implementation details or customize a component
get_component_demo
- Description: Get example code showing how to use a component
- Parameters: componentName (string) - Name of the component
- Returns: Demo code with usage examples
- Example: get_component_demo({ componentName: "dialog" })
- Use case: When you need to see how to implement a component in your project

Search Functionality

search_components
- Description: Find components by keyword
- Parameters: query (string) - Search term
- Returns: Matching components with details
- Example: search_components({ query: "form" })
- Use case: When you're looking for components related to a specific UI element or functionality

Laravel Integration

get_laravel_vite_guide
- Description: Get specialized Laravel + Vite integration guide
- Parameters: packageManager (string, optional) - Package manager to use (npm, yarn, pnpm, bun)
- Returns: Step-by-step guide for integrating with Laravel
- Example: get_laravel_vite_guide({ packageManager: "npm" })
- Use case: When you need to integrate shadcn/ui components into a Laravel project

Laravel + Vite Integration Benefits

This MCP server provides specialized support for Laravel + Vite projects:

Key Advantages

Optimized Directory Structure: Paths configured specifically for Laravel's resources directory
Vite Configuration: Ready-to-use Vite setup with React and TypeScript support
Blade Integration: Seamless integration with Laravel Blade templates
TypeScript Support: Full TypeScript configuration for type-safe development
React Components: Use shadcn/ui React components directly in your Laravel application
Tailwind CSS Setup: Properly configured Tailwind CSS with shadcn/ui theming

Example: Using a Button Component in Laravel

<!-- resources/views/welcome.blade.php -->
<x-layout>
    <div id="react-root"></div>
    @vite(['resources/js/app.js'])
</x-layout>

// resources/js/app.js
import './bootstrap';
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Button } from './components/ui/button';

createRoot(document.getElementById('react-root')).render(
    <Button variant="outline">Click me</Button>
);

Development

Server Development

# Run in development mode
npm run dev

# Build for production
npm run build

# Start the server
npm start

Adding New Tools

To add new tools to the MCP server:

Define the tool in src/tools.ts
Implement the tool handler function
Add the tool to the exported tools object
Rebuild the server with npm run build

Testing

# Run the test client
node test-client/mcp-client.js

# Or use the simple test script
node test.js

Troubleshooting

Common Issues

Connection errors: Ensure the MCP server is running and accessible
Tool not found: Verify the tool name is correct and the server is properly configured
Component not found: Check if the component name is spelled correctly
Laravel integration issues: Make sure your Laravel project has Vite and Tailwind CSS properly configured