precast-mcp-brutalist-ui

BuunGroup-Packages/precast-mcp-brutalist-ui

3.1

If you are the rightful owner of precast-mcp-brutalist-ui and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

A Model Context Protocol (MCP) server for Brutalist UI components, providing AI assistants with access to component source code, examples, styles, and metadata from the Precast Brutalist UI registry.

Tools
14
Resources
0
Prompts
0

@buun_group/brutalist-ui-mcp-server

A Model Context Protocol (MCP) server for Brutalist UI components, providing AI assistants with access to component source code, examples, styles, and metadata from the Precast Brutalist UI registry.

Installation

npm install -g @buun_group/brutalist-ui-mcp-server

Quick Start

After installation, add the MCP server to your Claude Code configuration:

# Add to Claude Code
claude mcp add brutalist-ui npx @buun_group/brutalist-ui-mcp-server

# Verify installation
claude mcp list

Usage

Standalone

npx @buun_group/brutalist-ui-mcp-server
# or if installed globally
precast-brutalist-mcp
# or
brutalist-ui-mcp

With Claude Desktop

Add to your Claude Desktop MCP configuration:

{
  "mcpServers": {
    "brutalist-ui": {
      "command": "npx",
      "args": ["@buun_group/brutalist-ui-mcp-server"]
    }
  }
}

Available Tools

Component Discovery

  • list_components - List all available Brutalist UI components
  • search_components - Search components by name, description, or category
  • get_categories - Get all component categories with descriptions
  • get_components_by_category - Get components in a specific category
  • get_featured_components - Get featured components

Component Details

  • get_component - Get detailed component information including source code
  • get_component_examples - Get usage examples and demo code
  • get_component_styles - Get CSS styles and brutalist design features
  • get_install_command - Get installation commands for components

Registry Information

  • get_registry_info - Get registry metadata and statistics

Documentation Tools

  • get_component_documentation - Get complete documentation for a component
  • search_documentation - Search through documentation content
  • get_documentation_sections - Get all available documentation sections
  • get_accessibility_info - Get accessibility information for a component

Available Resources

  • brutalist-ui://registry/overview - Registry overview and basic information
  • brutalist-ui://registry/categories - List of all categories with component counts
  • brutalist-ui://registry/featured - Featured components list
  • brutalist-ui://registry/installation - Installation and usage guide
  • brutalist-ui://registry/brutalist-features - Brutalist design principles guide

Examples

List All Components

// Tool: list_components
// Returns: Array of all available components with metadata

Search for Form Components

// Tool: search_components
// Parameters: { "query": "form", "category": "forms" }
// Returns: Components matching the search criteria

Get Button Component Details

// Tool: get_component  
// Parameters: { "componentName": "button" }
// Returns: Complete component information including source code, styles, dependencies

Get Installation Command

// Tool: get_install_command
// Parameters: { "componentName": "button" }
// Returns: CLI commands to install the component

Registry Structure

The server fetches data from the Brutalist UI registry at https://brutalist.precast.dev/registry/react/:

  • index.json - Registry index with all components and metadata
  • {component}.json - Individual component files with source code and styles

Component Categories

  • action - Interactive buttons and triggers
  • display - Content display components
  • feedback - Status indicators and notifications
  • forms - Form inputs and controls
  • layout - Structural and container components
  • navigation - Navigation and routing components
  • overlay - Modals, tooltips, and overlays
  • data-display - Tables, charts, and data visualization

Brutalist Design Features

Components follow brutalist design principles:

  • Thick Borders - Bold, uncompromising outlines (3px+)
  • Bold Shadows - Heavy drop shadows for depth
  • Sharp Corners - Zero border-radius, geometric precision
  • High Contrast - Strong color combinations and text contrast
  • Monospace Typography - Technical, utilitarian fonts
  • Functional Design - Every element serves a purpose

Configuration

Custom Registry URL

precast-brutalist-mcp --registry-url https://your-custom-registry.com/react

Environment Variables

  • REGISTRY_BASE_URL - Override default registry URL

Development

# Clone and install dependencies
git clone https://github.com/precast-dev/brutalist-components.git
cd brutalist-components/packages/mcp/precast-mcp-brutalist-ui
npm install

# Build
npm run build

# Test locally
npm run dev

License

MIT License - see LICENSE file for details.

Support

Built with ❤️ for the MCP ecosystem and brutalist design enthusiasts.

NPM Package Features

✅ 100% Test Coverage - All 14 MCP tools tested against live registry
✅ Production Ready - Automatic environment detection (dev/prod)
✅ TypeScript Support - Full type safety and IntelliSense
✅ Comprehensive Documentation - Complete API reference and examples
✅ Performance Optimized - Caching and efficient API calls
✅ CLI Tools - Built-in help and version commands
✅ MIT Licensed - Open source and free to use

🎉 MCP Server Successfully Created

Location: /home/sacha/repositories/brutalist-components/packages/mcp/precast-mcp-brutalist-ui/

Key Features:

  1. 🔧 Smart Environment Detection

    • Development: Uses http://localhost:3000/registry/react
    • Production: Uses https://brutalist.precast.dev/registry/react

  2. 🛠️ Comprehensive Tool Set (10 Tools)

    • list_components - List all components
    • get_component - Get component details + source code
    • search_components - Search with filters
    • get_component_examples - Usage examples
    • get_component_styles - CSS and brutalist features
    • get_categories - All categories with counts
    • get_components_by_category - Components by category
    • get_featured_components - Featured components
    • get_registry_info - Registry metadata
    • get_install_command - Installation commands

  3. 📚 Resource System (5 Resources)

    • Registry overview
    • Categories list
    • Featured components
    • Installation guide
    • Brutalist design principles

  4. 🚀 Ready for Use

    • ✅ TypeScript build successful
    • ✅ CLI commands work (--help, --version)
    • ✅ Server starts correctly
    • ✅ Clean, optimized code (no unnecessary comments)
    • ✅ Proper error handling and validation

Development Usage:

# Development (uses localhost:3000)
node build/index.js

# Help
node build/index.js --help

# Version
node build/index.js --version

# Custom registry URL
node build/index.js --registry-url https://custom-registry.com

For Claude Desktop Integration:

{
  "mcpServers": {
    "brutalist-ui": {
      "command": "node",
      "args": ["/path/to/build/index.js"]
    }
  }
}

For Claude Code Integration:

Add the MCP server to Claude Code using the claude mcp add command:

# For local development (uses localhost:3000)
claude mcp add brutalist-ui node /home/sacha/repositories/brutalist-components/packages/mcp/precast-mcp-brutalist-ui/build/index.js

# For production (uses published npm package)
claude mcp add brutalist-ui npx @buun_group/brutalist-ui-mcp-server

# View available MCP servers
claude mcp list

# Remove if needed
claude mcp remove brutalist-ui

Using the MCP Server in Claude Code:

Once added, you can use the Brutalist UI MCP server in Claude Code:

# Access resources using @server:protocol syntax
@brutalist-ui:brutalist-ui://registry/overview

# Use slash commands for MCP prompts
/mcp__brutalist-ui__get_component button
/mcp__brutalist-ui__search_components form components

Example Usage:

  • Type @ to see available resources
  • Type / to discover available MCP commands
  • Reference components: @brutalist-ui:brutalist-ui://registry/featured
  • Get install commands: /mcp__brutalist-ui__get_install_command textarea

📚 Complete Usage Guide & Prompt Documentation

🎯 Natural Language Prompt Examples

1. Discovering Components

Find all available components:

What brutalist components are available in the library? Show me all components with descriptions.

Search for specific functionality:

I need brutalist form components for my React app. What form-related components do you have?

Find featured components:

Show me the best brutalist UI components - what are the featured ones and why are they recommended?
2. Building New Pages

Create a contact form page:

I want to build a contact form page with brutalist styling. What components should I use for inputs, buttons, and layout? Show me the source code and installation.

Build a dashboard layout:

Help me create a brutalist dashboard. I need cards for metrics, navigation, and data display components. Get me the code and styling for each.

Create a landing page:

Design a landing page with brutalist components - I need hero sections, feature cards, and call-to-action buttons. Show me complete examples.
3. Component Deep Dives

Understand a specific component:

Tell me everything about the brutalist Button component - props, variants, styling, and usage examples.

Compare similar components:

What's the difference between brutalist Input and Textarea components? When should I use each one?
4. Installation & Setup

Get installation commands:

I want to use brutalist Button, Card, and Input components in my React project. How do I install and set them up?

Full project setup:

Help me get started with Brutalist UI - show me installation, common components, and basic setup for a new React project.
5. Advanced Usage

Custom theming:

How do I customize the brutalist theme? Which components support custom styling and how do I override defaults?

Component composition:

Create a user profile card combining multiple brutalist components - use Avatar, Button, and Card with proper TypeScript.
6. Documentation & Learning

Get comprehensive documentation:

Show me the complete documentation for the Accordion component including examples, API reference, and accessibility information.

Search for specific topics:

Find documentation about form validation and accessibility best practices in the Brutalist UI library.

Browse all available docs:

What documentation sections are available? Show me all the guides, component docs, and API references.

Check component accessibility:

How accessible is the Button component? Show me the keyboard support, ARIA attributes, and best practices.

🔧 Tool-Specific Prompts

Using MCP Tools Directly:

List Components:

/mcp__brutalist-ui__list_components

Get Component Details:

/mcp__brutalist-ui__get_component button
/mcp__brutalist-ui__get_component textarea

Search Components:

/mcp__brutalist-ui__search_components form
/mcp__brutalist-ui__search_components navigation

Get Examples:

/mcp__brutalist-ui__get_component_examples button
/mcp__brutalist-ui__get_component_examples card

Get Styling Information:

/mcp__brutalist-ui__get_component_styles button
/mcp__brutalist-ui__get_component_styles textarea

Get Installation Commands:

/mcp__brutalist-ui__get_install_command button
/mcp__brutalist-ui__get_install_command textarea

Get Documentation:

/mcp__brutalist-ui__get_component_documentation accordion
/mcp__brutalist-ui__get_component_documentation button

Search Documentation:

/mcp__brutalist-ui__search_documentation accessibility
/mcp__brutalist-ui__search_documentation form validation

Get Accessibility Info:

/mcp__brutalist-ui__get_accessibility_info button
/mcp__brutalist-ui__get_accessibility_info dialog

Browse by Category:

/mcp__brutalist-ui__get_components_by_category forms
/mcp__brutalist-ui__get_components_by_category navigation
/mcp__brutalist-ui__get_components_by_category display
Using Resources:

Registry Overview:

@brutalist-ui:brutalist-ui://registry/overview

Featured Components:

@brutalist-ui:brutalist-ui://registry/featured

Installation Guide:

@brutalist-ui:brutalist-ui://registry/installation

Brutalist Design Principles:

@brutalist-ui:brutalist-ui://registry/brutalist-features

🎨 Project Templates & Examples

Complete Project Prompts:

E-commerce Product Page:

Create a product page using Brutalist UI components with:
1. Product image gallery using Card and AspectRatio
2. Product details with Typography components
3. Add to cart form with Button and Select components
4. Customer reviews section with Card and Avatar
5. Provide complete React component code with TypeScript

Admin Dashboard:

Build an admin dashboard using Brutalist UI components:
1. Sidebar navigation with Navigation component
2. Data tables using Table component
3. Statistics cards with Card and Badge
4. Form components for data entry
5. Include responsive design and proper TypeScript types

Blog Article Page:

Design a blog article page featuring:
1. Article content with Typography components
2. Navigation breadcrumbs
3. Social sharing buttons
4. Related articles section with Cards
5. Comment form with form components
HTML/CSS Brutalist Pages (Non-React):

Create a brutal portfolio website:

I want to create a brutalist portfolio website using HTML and CSS. What brutalist components work best for portfolios? Show me the design principles and get the CSS styles from button, card, and typography components. Build me a complete HTML portfolio with hero section, project showcase, contact form, and navigation using brutalist styling.

Build a brutalist landing page:

Help me create a brutalist product landing page using HTML and CSS. I need the brutalist design principles and form components. Get the CSS styles from button, card, and table components. Build a complete responsive landing page with hero section, features grid, pricing table, and contact form using brutalist styling.

Create a brutalist blog theme:

Help me build a brutalist blog theme with HTML/CSS. Get the styling information for typography, card, and navigation components. Show me the brutalist design principles. Create templates for homepage with article grid, article detail page, archive pages, and search/comment forms using brutalist CSS.

Build a brutalist dashboard (HTML/CSS only):

I want to create a data dashboard using HTML/CSS with brutalist design. Get the component styles for card, badge, table, and data-display components. Show me the brutalist design principles. Create a complete dashboard with metrics cards, data tables, status indicators, and responsive CSS Grid layout.

Create a brutalist e-commerce page:

Design an e-commerce product page using HTML/CSS with brutalist styling. Get design patterns from Card, Button, and Badge components. Create sections for product image gallery, product details, add to cart form, and customer reviews. Include CSS for product grid layouts, form styling, button variations, and badge/tag styling.

🎯 Magic Keywords That Trigger MCP Server

Use these natural phrases to automatically trigger the Brutalist UI MCP server:

Discovery Keywords:
  • "What brutalist components..." → triggers list_components
  • "Search for brutalist..." → triggers search_components
  • "Show me brutalist form components" → triggers get_components_by_category
  • "What are the featured brutalist..." → triggers get_featured_components
  • "Browse brutalist components by category" → triggers get_categories
Component Keywords:
  • "Tell me about the brutalist Button component" → triggers get_component
  • "Show me Button component examples" → triggers get_component_examples
  • "Get Button component styling" → triggers get_component_styles
  • "How do I install the Button component" → triggers get_install_command
Design Keywords:
  • "Show me brutalist design principles" → triggers brutalist-features resource
  • "What makes components brutalist" → triggers brutalist-features resource
  • "Brutalist styling guidelines" → triggers brutalist-features resource
Setup Keywords:
  • "Help me get started with Brutalist UI" → triggers installation resource
  • "How to install brutalist components" → triggers installation resource
  • "Setup brutalist UI in React" → triggers installation resource
Documentation Keywords:
  • "Show me the docs for..." → triggers get_component_documentation
  • "Find documentation about..." → triggers search_documentation
  • "What docs are available?" → triggers get_documentation_sections
  • "How accessible is the Button component?" → triggers get_accessibility_info
  • "Search the docs for accordion examples" → triggers search_documentation

🚀 Best Practices & Tips

Effective Prompting:

  1. Use Natural Language: Just mention "brutalist" and your need

    ✅ "I need brutalist form components for my React app"
❌ "Execute /mcp__brutalist-ui__search_components form"

  2. Be Conversational: Ask like you're talking to a developer

    ✅ "What's the difference between brutalist Input and Textarea?"
❌ "Compare Input vs Textarea using tool comparison"

  3. Include Context: Mention your project type naturally

    ✅ "Help me build a brutalist dashboard for my Next.js project"
❌ "For a Next.js project, show me how to use the Card component"

  4. Ask for Complete Solutions: Request everything you need

    ✅ "Create a brutalist login form with validation and styling"
❌ "Show me an Input component"
Combining Tools:
Help me build a user registration form:
1. First, search for form-related components
2. Get details for Input, Button, and Checkbox components
3. Show me the installation commands for all components
4. Create a complete registration form with validation
5. Include proper TypeScript types and error handling

📖 Learning Path

For Beginners:
  1. Start with @brutalist-ui:brutalist-ui://registry/overview
  2. Browse @brutalist-ui:brutalist-ui://registry/featured
  3. Read @brutalist-ui:brutalist-ui://registry/installation
  4. Try simple components like Button and Card
For Intermediate Users:
  1. Explore categories with /mcp__brutalist-ui__get_categories
  2. Deep dive into specific components
  3. Build small projects combining multiple components
  4. Study the brutalist design principles
For Advanced Users:
  1. Create complex component compositions
  2. Customize themes and styling
  3. Build complete application layouts
  4. Contribute to the component library

This MCP server is your gateway to mastering Brutalist UI components! 🎉

📦 NPM Package Installation

Install from NPM

Once published, users can install the MCP server globally:

# Install globally
npm install -g @buun_group/brutalist-ui-mcp-server

# Or use with npx (no installation needed)
npx @buun_group/brutalist-ui-mcp-server

Add to Claude Desktop

Add to your Claude Desktop MCP configuration (claude_desktop_config.json):

{
  "mcpServers": {
    "brutalist-ui": {
      "command": "npx",
      "args": ["@buun_group/brutalist-ui-mcp-server"]
    }
  }
}

Add to Claude Code

# Add MCP server to Claude Code
claude mcp add brutalist-ui npx @buun_group/brutalist-ui-mcp-server

# Verify it's added
claude mcp list

# Use in Claude Code
# Type @ to see resources: @brutalist-ui:brutalist-ui://registry/overview
# Type / to see tools: /mcp__brutalist-ui__get_component button

CLI Usage

After global installation, use the CLI commands:

# Start the MCP server
precast-brutalist-mcp

# Or alternative command
brutalist-ui-mcp

# Show help
precast-brutalist-mcp --help

# Show version
precast-brutalist-mcp --version

# Use custom registry URL
precast-brutalist-mcp --registry-url https://custom-registry.com

🚀 Publishing to NPM

For Package Maintainers

To publish this package to NPM:

# 1. Make sure you're logged in to NPM
npm whoami

# 2. If not logged in
npm login

# 3. Build the package
bun run build

# 4. Publish to NPM
npm publish

# 5. For updates, increment version first
npm version patch  # 1.0.0 → 1.0.1
npm version minor  # 1.0.0 → 1.1.0
npm version major  # 1.0.0 → 2.0.0

# 6. Then publish again
npm publish

Package Details

  • Package Name: @buun_group/brutalist-ui-mcp-server
  • Scope: @buun_group (public scoped package)
  • CLI Commands: precast-brutalist-mcp, brutalist-ui-mcp
  • Main Entry: ./build/index.js
  • License: MIT

The prepublishOnly script automatically:

  • Cleans the build directory
  • Compiles TypeScript
  • Makes the CLI executable

The MCP server is now ready to serve your Brutalist UI components to AI assistants, with automatic environment detection for development vs production!