Pines UI MCP Server

A Model Context Protocol (MCP) server that provides seamless access to the Pines UI component library. Pines UI is a comprehensive collection of 50+ Alpine.js and Tailwind CSS components including forms, navigation, animations, and specialized elements.

Features

• 50+ Components: Access to all Pines UI components
• Smart Search: Search components by name, description, or category
• Category Browsing: Browse components by category (form, navigation, feedback, etc.)
• Code Retrieval: Get complete HTML code for any component
• Metadata Access: Component descriptions, examples, and usage information
• Real-time Updates: Fetches latest components directly from Pines UI GitHub repository

Available Tools

The MCP server provides 6 tools for interacting with Pines UI:

1. list_components

Lists all available Pines UI components with metadata.

Parameters: None

Returns: Complete list of all components with names, descriptions, and categories

2. search_components

Search for components by keyword.

Parameters:

• query (string, required): Search keyword (e.g., "button", "modal", "form")

Returns: Matching components with their details

3. get_component

Get detailed information about a specific component.

Parameters:

• id (string, required): Component ID (e.g., "button", "modal", "accordion")

Returns: Detailed component information including description, categories, and metadata

4. get_component_code

Get the complete HTML code for a component.

Parameters:

• id (string, required): Component ID

Returns: Full HTML code ready to copy and paste, including usage instructions

5. list_categories

List all available component categories.

Parameters: None

Returns: List of categories (form, navigation, feedback, layout, interactive, animation, data-display, specialized)

6. get_components_by_category

Get all components in a specific category.

Parameters:

• category (string, required): Category name (e.g., "form", "navigation")

Returns: All components belonging to that category

Installation

Via npm (Recommended)

1. Install globally:

npm install -g pines-ui-mcp-server

2. Configure Claude Desktop:

Edit your Claude Desktop configuration file:

• MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%/Claude/claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

3. Add the server configuration:

{
  "mcpServers": {
    "pines-ui": {
      "command": "pines-ui-mcp",
      "args": []
    }
  }
}

4. Restart Claude Desktop

That's it! The server is now available in Claude.

Manual Installation (Alternative)

If you prefer to build from source:

1. Clone and build:

   git clone <repository-url>
   cd pines-ui-mcp-server
   npm install
   npm run build

2. Configure Claude Desktop:

   {
     "mcpServers": {
       "pines-ui": {
         "command": "node",
         "args": [
           "/absolute/path/to/pines-ui-mcp-server/dist/index.js"
         ]
       }
     }
   }

3. Restart Claude Desktop

For Other MCP Clients

The server uses stdio transport and can be integrated into any MCP-compatible client:

# If installed via npm
pines-ui-mcp

# If built from source
node /path/to/pines-ui-mcp-server/dist/index.js

Usage Examples

Once configured, you can interact with the server through your MCP client:

List all components

Can you list all Pines UI components?

Search for components

Search for form components in Pines UI

Get component details

Show me details about the modal component

Get component code

Get me the HTML code for the accordion component

Browse by category

What components are in the navigation category?

Component Categories

Components are automatically categorized into:

• form: Input, textarea, checkbox, radio, select, switches, date pickers, range sliders
• navigation: Menus, breadcrumbs, pagination, tabs
• feedback: Alerts, toasts, tooltips, badges, progress indicators
• layout: Cards, modals, slide-overs, banners
• interactive: Accordions, dropdowns, popovers, command palettes, context menus
• animation: Text animations, typing effects, marquees, retro grids
• data-display: Tables, galleries, quotes, ratings
• specialized: Monaco editor, video players, copy-to-clipboard

Requirements

• Node.js 18+
• Alpine.js v3+ (for using the components)
• Tailwind CSS v3+ (for using the components)

Tech Stack

Built with:

• TypeScript
• @modelcontextprotocol/sdk
• node-fetch

Architecture

pines-ui-mcp-server/
├── src/
│   ├── index.ts          # MCP server implementation
│   ├── pines-service.ts  # Pines UI data fetching & caching
│   └── types.ts          # TypeScript type definitions
├── dist/                 # Compiled JavaScript (generated)
├── package.json
├── tsconfig.json
└── README.md

How It Works

1. Data Fetching: Fetches component metadata from Pines UI's data.json file
2. Caching: Caches component data and HTML code for performance
3. Categorization: Automatically categorizes components based on their purpose
4. Code Retrieval: Fetches complete HTML from the Pines UI GitHub repository
5. MCP Protocol: Exposes all functionality via standardized MCP tools

Development

Build

npm run build

Development mode (watch)

npm run dev

Start server

npm start

About Pines UI

Pines UI is a free, open-source UI library featuring:

• 50+ production-ready components
• Alpine.js for interactivity
• Tailwind CSS for styling
• Copy-paste integration
• No build process required
• Marketing sections (heroes, pricing, testimonials)
• Advanced components (command menu, image gallery, Monaco editor)

Official website: https://devdojo.com/pines GitHub: https://github.com/thedevdojo/pines

License

MIT License

Contributing

Contributions welcome! Feel free to:

• Report bugs
• Suggest new features
• Submit pull requests
• Improve documentation

Support

For issues related to:

• This MCP server: Open an issue in this repository
• Pines UI components: Visit https://devdojo.com/pines or https://github.com/thedevdojo/pines
• MCP protocol: Visit https://modelcontextprotocol.io

Credits

• Pines UI by DevDojo
• MCP Protocol by Anthropic
• Built for the Claude Code community