npm package: @rubberducky-studio/mcp
Description: MCP Server for Rubberducky Studio Web Components - AI-powered code generation
Latest version: 0.0.4

# @ducksauce/mcp

MCP (Model Context Protocol) Server for Ducksauce Web Components, enabling AI-powered code generation in Cursor and other MCP-compatible IDEs.

## Features

- **Tools**: Generate component code via natural language commands
- **Resources**: Access component documentation and APIs
- **Prompts**: Pre-built templates for common patterns

## Installation

```bash
# From the monorepo root
pnpm install
pnpm --filter @ducksauce/mcp build
```

## Configuration

### Cursor IDE

Copy the following to your `.cursor/mcp.json` file (create the directory if it doesn't exist):

```json
{
  "mcpServers": {
    "ducksauce": {
      "command": "node",
      "args": ["/path/to/webcomponents/packages/mcp/dist/index.js"]
    }
  }
}
```

Or for development with tsx:

```json
{
  "mcpServers": {
    "ducksauce": {
      "command": "npx",
      "args": ["tsx", "/path/to/webcomponents/packages/mcp/src/index.ts"]
    }
  }
}
```

### Global Configuration

For the MCP server to be available in all projects, add the configuration to `~/.cursor/mcp.json`.

## Available Tools

### `generate_site_header`

Generate a WCAG-compliant navigation header.

```
"Add a site header with nav items: Home, About, Projects, Contact"
```

### `generate_button`

Create buttons with various variants and sizes.

```
"Create a primary large button that says 'Get Started'"
```

### `generate_form`

Build forms with input fields and validation.

```
"Create a login form with email and password fields"
```

### `generate_card_layout`

Create card grids for displaying content.

```
"Make a 3-column grid of product cards"
```

### `generate_grid_layout`

Create responsive grid layouts.

```
"Create a 12-column grid with 2 items"
```

### `generate_typography`

Generate semantic typography elements.

```
"Add an h1 heading that says 'Welcome'"
```

## Available Resources

| Resource | Description |
|----------|-------------|
| `ducksauce://components` | Complete component catalog |
| `ducksauce://components/rd-button` | Button component docs |
| `ducksauce://components/rd-input` | Input component docs |
| `ducksauce://components/rd-card` | Card component docs |
| `ducksauce://components/rd-navigation` | Navigation component docs |
| `ducksauce://components/rd-grid` | Grid layout component docs |
| `ducksauce://components/rd-modal` | Modal dialog component docs |
| `ducksauce://components/rd-typography` | Typography component docs |
| `ducksauce://design-tokens` | Design tokens (colors, spacing, etc.) |

## Available Prompts

| Prompt | Description |
|--------|-------------|
| `create_site_header` | Generate complete site headers |
| `create_form` | Generate forms (login, registration, contact, newsletter) |
| `create_card_grid` | Generate card grids with content |
| `create_page_section` | Generate page sections (hero, features, etc.) |
| `component_documentation` | Get detailed component docs |

## Example Usage

After configuring the MCP server in Cursor, you can use natural language to generate components:

1. **Site Header**
   > "I want to add a site header with these nav items: Home, About, Projects, Contact"

2. **Login Form**
   > "Create a login form with email and password fields"

3. **Feature Cards**
   > "Make a grid of 3 feature cards with titles and descriptions"

4. **Hero Section**
   > "Add a hero section with a large heading, subtitle, and CTA button"

The AI will use the MCP tools and component documentation to generate proper Ducksauce web component code.

## Development

```bash
# Build the MCP server
pnpm --filter @ducksauce/mcp build

# Run in development mode
pnpm --filter @ducksauce/mcp dev
```

## License

MIT