@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

# 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):

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

Or for development with tsx:

{
  "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

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

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

License

MIT