Shadcn Ui MCP Unofficial

🚀 Shadcn UI MCP Server

A Model Context Protocol (MCP) server implemented in TypeScript that helps AI assistants access and manipulate shadcn/ui components. This server acts as a bridge between AI models (such as Claude) and shadcn/ui, enabling assistants to obtain component source code, demo code, and installation guides.

🚀 Quick Start

This MCP server provides tools and resources to assist AI assistants in the following ways:

• Obtain the source code of shadcn/ui components.
• Get component demo code and usage examples.
• Retrieve component installation guides.

📚 Documentation

Project Structure

Directory Structure

shadcnui-mcp-server/
├── src/
│   ├── tools.ts          # Define available tools
│   ├── resources.ts      # Define available resources
│   └── resource-templates.ts    # Define resource templates
├── package.json         # Project dependency management
└── README.md            # Project documentation

Core Features

Tool Definition

In the tools.ts file, you can define various tools:

export const tools = [
  {
    id: "get_component",
    name: "Get Component Source Code",
    description: "Return the source code of the specified shadcn/ui component",
    parameters: {
      type: "object",
      properties: {
        component_name: { type: "string", description: "Component name" }
      }
    }
  },
  {
    id: "get_demo",
    name: "Get Component Demo Code",
    description: "Return the demo code of the specified shadcn/ui component",
    parameters: {
      type: "object",
      properties: {
        component_name: { type: "string", description: "Component name" }
      }
    }
  },
  {
    id: "get_install",
    name: "Get Component Installation Guide",
    description: "Return the installation guide of the specified shadcn/ui component",
    parameters: {
      type: "object",
      properties: {
        component_name: { type: "string", description: "Component name" }
      }
    }
  }
];

Resource Definition

In the resources.ts file, you can define various resources:

export const resources = [
  {
    id: "component_code",
    name: "Component Source Code",
    description: "Source code of shadcn/ui components",
    content: {
      type: "string"
    }
  },
  {
    id: "demo_code",
    name: "Demo Code",
    description: "Demo code of shadcn/ui components",
    content: {
      type: "string"
    }
  },
  {
    id: "install_guide",
    name: "Installation Guide",
    description: "Installation guide for shadcn/ui components",
    content: {
      type: "string"
    }
  }
];

Resource Templates

In the resource-templates.ts file, you can define resource templates:

export const resourceTemplates = [
  {
    id: "component_code_template",
    name: "Component Source Code Template",
    description: "Used to generate the source code of shadcn/ui components",
    template: `
      import { type Component } from 'shadcn-ui'

      export const {{name}}: Component = ({ class, children }) => {
        return (
          <div className={{class}}>
            {children}
          </div>
        )
      }
    `
  },
  {
    id: "demo_code_template",
    name: "Demo Code Template",
    description: "Used to generate the demo code of shadcn/ui components",
    template: `
      import {{name}} from './{{name}}'

      export default function Demo() {
        return (
          <div className="container mx-auto p-4">
            <{{name}}>This is a {{name}} component</{{name}}>
          </div>
        )
      }
    `
  },
  {
    id: "install_guide_template",
    name: "Installation Guide Template",
    description: "Used to generate the installation guide for shadcn/ui components",
    template: `
      To use the {{name}} component, follow these steps:

      1. Install dependencies:
         npm install shadcn-ui-components

      2. Import the component:
         import {{name}} from 'shadcn-ui'

      3. Use the component:
         <{{name}}>Your content</{{name}}>
    `
  }
];

Running the Server

Install Dependencies

First, install the project dependencies:

npm install

Start the Server

Start the MCP server:

npm run start

After starting, you can see the following output in the console:

MCP server has started and is listening on port 3001.
The SSE endpoint can be accessed via http://localhost:3001/sse.
The message endpoint can be accessed via http://localhost:3001/messages.

Integration with VS Code

To use this server in VS Code, configure it as follows:

1. Open the settings.json file in VS Code.
2. Add the MCP server configuration:

{
  "mcp.servers": [
    {
      "id": "shadcnui-server",
      "url": "http://localhost:3001"
    }
  ]
}

💻 Usage Examples

Obtain Component Source Code

Call the get_component tool:

const result = await mcp.execute({
  tool_id: "get_component",
  params: {
    component_name: "Button"
  }
});

console.log(result);
// Output: 
// import { Button } from 'shadcn-ui'
// export default function Button({ class, children }) {
//   return <button className={class}>{children}</button>
// }

Obtain Demo Code

Call the get_demo tool:

const result = await mcp.execute({
  tool_id: "get_demo",
  // The original content seems incomplete here, but we keep it as it is according to the requirements.