reablocks -experiment

This MCP server provides an AI-assisted Reablocks-based React component generation and composition toolchain. It accepts natural language prompts to generate production-ready React components with TypeScript, leveraging a deep library of Reablocks components and patterns. Available tools include: generate_intelligent_dashboard to build entire dashboards from descriptions, explore_reablocks_components to browse components by category or search, ask_about_components to get recommendations and best practices, get_component_documentation to retrieve component usage details, and list_all_components to view all components organized by category. Use these tools to rapidly assemble UI patterns such as forms, dashboards, data tables, and responsive layouts with accessibility considerations baked in.

Prerequisites:

• Node.js 18+ installed
• A Cloudflare Workers account (or preferred deployment target for the MCP server)
• A client (Claude Desktop or MCP-compatible) to connect to the server

Setup steps:

1. Create a project directory and initialize:

mkdir reablocks-mcp-server
cd reablocks-mcp-server
npm init -y

2. Install the MCP SDK and dependencies:

npm install @modelcontextprotocol/sdk zod
npm install -D typescript @types/node

3. Replace src/index.ts with your enhanced server implementation or integrate the MCP server code accordingly.
4. Deploy to your hosting target (example for Cloudflare Workers):

wrangler deploy

5. Configure Claude Desktop (example config):

{
  "mcpServers": {
    "reablocks": {
      "command": "node",
      "args": ["path/to/your/server"],
      "env": {
        "MCP_SERVER_URL": "https://your-worker.your-subdomain.workers.dev"
      }
    }
  }
}

Tips and notes:

• Ensure MCP_SERVER_URL is reachable from your Claude Desktop or client configuration.
• The server leverages Reablocks components; familiarize yourself with component names (e.g., Button, Input, Card) via explore_reablocks_components.
• When generating dashboards or complex UIs, use the describe-and-iterate workflow: start with a high-level prompt, then refine with styling, accessibility, and data requirements.
• Monitor for accessibility and WCAG 2.1 AA compliance in generated components and adjust prop types accordingly.
• If you encounter deployment issues, verify environment variables, network access, and that the server process starts without TS compilation errors.