
Enhanced Reablocks MCP Server
A Model Context Protocol server that generates production-ready React components using the Reablocks design system through natural language processing.
README
Enhanced Reablocks MCP Server
A powerful Model Context Protocol (MCP) server that provides intelligent React component generation and composition using the Reablocks design system. This server combines natural language processing with deep component knowledge to generate production-ready React components.
🚀 Features
- 🧠 Natural Language Processing - Describe what you want in plain English
- ⚛️ Intelligent Component Generation - Generates complete React components with TypeScript
- 📚 Comprehensive Component Knowledge - Deep understanding of 50+ Reablocks components
- 🎨 Smart Code Composition - Automatically combines components with proper props and patterns
- 📱 Responsive Design - Generated components include mobile-first responsive layouts
- ♿ Accessibility Built-in - WCAG 2.1 AA compliant components with ARIA labels
- 🔧 Production Ready - Includes error handling, loading states, and TypeScript definitions
📦 Installation
Prerequisites
- Node.js 18+
- Cloudflare Workers account
- Claude Desktop or MCP-compatible client
Setup
- Clone or create your MCP server project
mkdir reablocks-mcp-server
cd reablocks-mcp-server
npm init -y
- Install dependencies
npm install @modelcontextprotocol/sdk zod
npm install -D typescript @types/node
-
Replace your
src/index.ts
with the enhanced server code -
Deploy to Cloudflare Workers
wrangler deploy
- Configure Claude Desktop
Add to your claude_desktop_config.json
:
{
"mcpServers": {
"reablocks": {
"command": "node",
"args": ["path/to/your/server"],
"env": {
"MCP_SERVER_URL": "https://your-worker.your-subdomain.workers.dev"
}
}
}
}
🛠️ Available Tools
1. generate_intelligent_dashboard
Generate complete dashboard components from natural language descriptions.
Parameters:
description
(string): Natural language description of what you want to buildrequirements
(array, optional): Specific requirementsstyling
(object, optional): Theme and styling preferences
Example:
Generate a dashboard with user metrics, data visualization, and action buttons for an admin panel
2. explore_reablocks_components
Discover and explore available Reablocks components by category or search.
Parameters:
category
(enum, optional): Elements, Form, Layout, Layers, Data, Typographysearch
(string, optional): Search term to filter components
Examples:
Category: "Form"
Search: "button"
3. ask_about_components
Ask questions about components in natural language and get intelligent recommendations.
Parameters:
question
(string): Your question about components
Examples:
"I need a form with validation and error handling"
"How do I create a data table with sorting and filtering?"
"What's the best way to display file sizes?"
4. get_component_documentation
Get comprehensive documentation for any Reablocks component.
Parameters:
componentName
(string): Name of the component (e.g., "Button", "Input")
Example:
componentName: "Button"
5. list_all_components
Get a complete overview of all available Reablocks components organized by category.
Parameters: None
💡 Usage Examples
Creating a Login Form
Prompt: "Create a login form with email, password fields, and validation"
Generated Output:
- Complete React component with TypeScript
- Form validation and error handling
- Responsive design
- Accessibility features
- Loading states
Building a Dashboard
Prompt: "Generate a dashboard with metrics cards, user table, and navigation"
Generated Output:
- Grid-based responsive layout
- Metric cards with data visualization
- Interactive data table with search/filter
- Navigation sidebar
- Loading and error states
Data Display Components
Prompt: "Show me components for displaying file sizes and dates"
Generated Output:
- DataSize component for human-readable file sizes
- DateFormat component for flexible date display
- Usage examples and props documentation
🎨 Generated Component Features
All generated components include:
✅ React Best Practices
- Functional components with hooks
- Proper state management
- Event handling
- Component composition
✅ TypeScript Support
- Full type definitions
- Interface declarations
- Type-safe props
- Generic type support where applicable
✅ Responsive Design
- Mobile-first approach
- Flexible grid layouts
- Breakpoint-aware styling
- Touch-friendly interactions
✅ Accessibility
- ARIA labels and roles
- Keyboard navigation
- Screen reader support
- Focus management
- Color contrast compliance
✅ Error Handling
- Loading states
- Error boundaries
- Graceful degradation
- User feedback
✅ Modern Styling
- Tailwind CSS classes
- CSS Grid and Flexbox
- Consistent spacing
- Theme-aware colors
📋 Component Categories
Elements (UI Building Blocks)
- Button - Primary, secondary, and text variants
- IconButton - Icon-only buttons with accessibility
- Badge - Status indicators and counts
- Avatar - User profile images and initials
- Chip - Tags, labels, and selectable items
Form Components
- Input - Text, email, password, and other input types
- Select - Dropdown selection with search and multi-select
- Textarea - Multi-line text input
- Checkbox - Single and group checkboxes
- Radio - Radio button groups
- Toggle - Switch controls
- Calendar - Date selection with range support
Layout Components
- Card - Content containers
- Stack - Flexible spacing and alignment
- Divider - Visual separation
- Tabs - Tabbed interfaces
- Breadcrumbs - Navigation trails
- Stepper - Step-by-step processes
Data Display
- DataSize - Human-readable file sizes (1.2 MB, 3.4 GB)
- DateFormat - Flexible date formatting
- Duration - Time duration display
- Ellipsis - Text truncation with expansion
- Pager - Pagination controls
- Sort - Sortable column headers
Overlay Components (Layers)
- Dialog - Modal dialogs and popups
- Drawer - Slide-out panels
- Notification - Toast messages and alerts
- Tooltip - Contextual help text
- Popover - Rich contextual content
- Menu - Dropdown and context menus
🔧 Customization
Styling Options
{
styling: {
theme: "light" | "dark" | "auto",
spacing: "compact" | "normal" | "spacious",
colorScheme: "blue" | "green" | "purple" | "custom"
}
}
Component Props
All generated components support standard Reablocks props:
variant
- Visual style variantssize
- Small, medium, large sizingcolor
- Theme-based color schemesdisabled
- Disabled statesclassName
- Custom CSS classes
🤖 Natural Language Processing
The server understands various ways to describe component needs:
Intent Recognition
- Dashboard: "dashboard", "admin panel", "overview", "metrics"
- Form: "form", "input", "submit", "validation", "contact"
- Table: "table", "list", "data grid", "rows and columns"
- Navigation: "menu", "nav", "sidebar", "breadcrumbs"
Component Mapping
- Buttons: "button", "click", "action", "submit"
- Data: "display data", "show information", "file size"
- Layout: "card", "container", "section", "organize"
- Interactive: "select", "choose", "toggle", "check"
📖 Example Conversations
Building a Contact Form
You: "I need a contact form with name, email, message fields and validation"
Server Response:
- Suggests Input, Textarea, Button, Card components
- Generates complete form with validation
- Includes error handling and submission logic
- Provides TypeScript interfaces
Creating a Data Dashboard
You: "Create a dashboard showing user metrics with charts and action buttons"
Server Response:
- Generates responsive grid layout
- Creates metric cards with DataSize components
- Adds interactive buttons and navigation
- Includes loading and error states
Component Discovery
You: "What components can I use to display file information?"
Server Response:
- DataSize for file sizes
- DateFormat for timestamps
- Ellipsis for long filenames
- Badge for file types
- Complete usage examples
🚨 Error Handling
The server provides helpful error messages for:
- Invalid component names
- Missing required parameters
- Incompatible component combinations
- Malformed requests
🔄 Updates and Maintenance
Keeping Components Current
The server's component database is based on the latest Reablocks documentation. To update:
- Review new Reablocks releases
- Update component schemas in the code
- Add new examples and use cases
- Test generated components
Performance Optimization
- Component metadata is cached in memory
- Generated code is optimized for bundle size
- Minimal runtime dependencies
- Tree-shakeable imports
🤝 Contributing
Adding New Components
- Add component schema to
ENHANCED_REABLOCKS_COMPONENTS
- Include comprehensive prop definitions
- Add usage examples and use cases
- Update category mappings
Improving NLP
- Extend intent patterns in
ComponentNLP
- Add new keyword mappings
- Improve component suggestion logic
- Test with various user inputs
📄 License
This MCP server is built for use with the Reablocks component library. Please refer to Reablocks licensing for component usage terms.
🔗 Related Links
🆘 Support
For issues related to:
- Generated components: Check Reablocks documentation
- MCP server functionality: Review this README and error messages
- Deployment: Consult Cloudflare Workers documentation
Built with ❤️ for the React and Reablocks community
Recommended Servers
playwright-mcp
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
Magic Component Platform (MCP)
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Audiense Insights MCP Server
Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

VeyraX MCP
Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.
graphlit-mcp-server
The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.
Kagi MCP Server
An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

E2B
Using MCP to run code via e2b.
Neon Database
MCP server for interacting with Neon Management API and databases
Exa Search
A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.
Qdrant Server
This repository is an example of how to create a MCP server for Qdrant, a vector search engine.