@urbint/cl 1.0.1

package/mcp-config.example.json

@@ -0,0 +1,10 @@
+{
+  "mcpServers": {
+    "urbint-cl": {
+      "command": "node",
+      "args": ["__REPLACE_WITH_ABSOLUTE_PATH__/mcp-server/dist/index.js"],
+      "env": {}
+    }
+  }
+}
+

package/mcp-server/README.md

@@ -0,0 +1,192 @@
+# Urbint Component Library - MCP Server
+
+This MCP (Model Context Protocol) server enables AI assistants across your organization to interact with the Urbint Component Library design system.
+
+## Features
+
+The MCP server provides the following capabilities:
+
+### Tools
+
+| Tool | Description |
+|------|-------------|
+| `list_components` | List all available components, optionally filter by category |
+| `get_component` | Get detailed documentation for a specific component |
+| `search_components` | Search components by name, description, or tags |
+| `get_design_tokens` | Get design tokens (colors, spacing, typography, etc.) |
+| `search_tokens` | Search for specific design tokens |
+| `generate_component_code` | Generate code snippets for components |
+| `get_form_pattern` | Get form pattern code with validation |
+| `get_layout_pattern` | Get layout pattern code (dashboard, sidebar, etc.) |
+
+### Resources
+
+- `urbint://docs/overview` - Library overview and getting started
+- `urbint://docs/components` - Complete component documentation
+- `urbint://docs/tokens` - All design tokens
+- `urbint://docs/installation` - Installation guide
+- `urbint://component/{name}` - Individual component documentation
+
+## Installation
+
+```bash
+cd mcp-server
+npm install
+npm run build
+```
+
+## Usage with Cursor/Claude
+
+Add this to your MCP settings (e.g., `~/.cursor/mcp.json` or Cursor settings):
+
+```json
+{
+  "mcpServers": {
+    "urbint-cl": {
+      "command": "node",
+      "args": ["/path/to/urbint-cl/mcp-server/dist/index.js"]
+    }
+  }
+}
+```
+
+### For Cursor IDE
+
+1. Open Cursor Settings (`Cmd+,`)
+2. Search for "MCP"
+3. Add the server configuration:
+
+```json
+{
+  "urbint-cl": {
+    "command": "node",
+    "args": ["/absolute/path/to/urbint-cl/mcp-server/dist/index.js"]
+  }
+}
+```
+
+### For Claude Desktop
+
+Add to `~/Library/Application Support/Claude/claude_desktop_config.json`:
+
+```json
+{
+  "mcpServers": {
+    "urbint-cl": {
+      "command": "node",
+      "args": ["/absolute/path/to/urbint-cl/mcp-server/dist/index.js"]
+    }
+  }
+}
+```
+
+## Development
+
+```bash
+# Run in development mode
+npm run dev
+
+# Build
+npm run build
+
+# Start production server
+npm start
+```
+
+## Example Interactions
+
+Once configured, you can ask Claude/AI assistants:
+
+- "List all form components in the Urbint design system"
+- "Show me how to use the Button component"
+- "What colors are available in the design system?"
+- "Generate a form with email, password, and remember me fields"
+- "Show me a dashboard layout pattern"
+- "Search for loading indicators"
+
+## API Reference
+
+### list_components
+
+```json
+{
+  "category": "form" // optional: layout, typography, form, feedback, data-display, overlay, action, utility
+}
+```
+
+### get_component
+
+```json
+{
+  "name": "Button" // required: component name
+}
+```
+
+### search_components
+
+```json
+{
+  "query": "loading" // required: search query
+}
+```
+
+### get_design_tokens
+
+```json
+{
+  "category": "colors" // optional: colors, spacing, typography, borderRadius, elevation, all
+}
+```
+
+### generate_component_code
+
+```json
+{
+  "component": "Button",
+  "variant": "primary",
+  "withState": true,
+  "props": { "size": "lg" }
+}
+```
+
+### get_form_pattern
+
+```json
+{
+  "fields": [
+    { "name": "email", "type": "email", "label": "Email", "required": true },
+    { "name": "password", "type": "password", "label": "Password", "required": true }
+  ],
+  "includeValidation": true
+}
+```
+
+### get_layout_pattern
+
+```json
+{
+  "pattern": "dashboard" // card-grid, sidebar-layout, header-content, list-detail, dashboard, form-layout
+}
+```
+
+## Troubleshooting
+
+### Server not connecting
+
+1. Ensure the server is built: `npm run build`
+2. Check the path in your MCP configuration is absolute
+3. Restart Cursor/Claude after configuration changes
+
+### Tools not appearing
+
+1. Wait for the server to initialize (check console for "MCP Server running")
+2. Refresh the MCP connection in Cursor settings
+
+## Contributing
+
+To add new components to the registry:
+
+1. Edit `src/registry/components.ts`
+2. Add component metadata following the `ComponentMetadata` interface
+3. Rebuild with `npm run build`
+