@nectary/mcp

MCP (Model Context Protocol) server that exposes the Nectary design library (sinch-* web components) to AI agents. Component reference data is resolved at runtime from @nectary/kb — this package ships only the MCP server.

Prerequisites

• Node ^18.19.0 or >=20.5.0

@nectary/kb is installed automatically as a dependency — you do not add it separately.

Installation

@nectary/mcp is published to npm. For Cursor and other MCP clients, you typically do not add it to your app's package.json — the client spawns it via npx.

Recommended: npx (no install)

npx -y @nectary/mcp

Pin latest explicitly (same as unpinned, but fixed to the dist-tag):

npx -y @nectary/mcp@latest

Global install (optional)

npm install -g @nectary/mcp
nectary-mcp

Cursor MCP configuration

Open Cursor Settings → Features → MCP (or edit your MCP config file directly).

Published package (recommended):

{
  "mcpServers": {
    "nectary-design-system": {
      "command": "npx",
      "args": ["-y", "@nectary/mcp"]
    }
  }
}

Explicit latest tag:

{
  "mcpServers": {
    "nectary-design-system": {
      "command": "npx",
      "args": ["-y", "@nectary/mcp@latest"]
    }
  }
}

Pin an exact version (for reproducible setups):

{
  "mcpServers": {
    "nectary-design-system": {
      "command": "npx",
      "args": ["-y", "@nectary/[email protected]"]
    }
  }
}

Local development:

{
  "mcpServers": {
    "nectary-design-system": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/nectary-mcp/dist/index.js"]
    }
  }
}

After saving, reload MCP servers in Cursor. The agent will see nectary-design-system and its resources, tools, and prompts.

What the agent can do

• Resources

  • design-system://tokens — design tokens from @nectary/kb
  • design-system://components/list — primitive registry (tagName + description)
  • design-system://components/{component-name} — per-component markdown from KB (e.g. sinch-button)
  • design-system://skills/catalog — Nectary agent skills manifest (internal-skills install)

• Tools

  • search_components — search by intent or tag name
  • get_component_snippet — HTML/JS starter generated from KB component records (props and events); use design-system://components/{name} for full docs and examples
  • validate_markup — validate sinch-* attributes against KB mcpSchemaAttrs
  • get_skill_install_commands — sparse-clone internal-skills and symlink skills into Cursor or Claude Code

• Prompts

  • scaffold_ui — build a UI from requirements using only documented sinch-* components
  • scaffold_compositions — build a React UI from requirements using Nectary compositions (@nectary/cli) plus primitives where needed

Development

From a clone of this repository:

pnpm install
pnpm run build
pnpm run start

Architecture

• @nectary/kb is the single source of truth for catalog, tokens, component JSON, and markdown docs.
• src/kb.ts resolves KB artifacts via Node module resolution (@nectary/kb/catalog, @nectary/kb/tokens, dist/components/*.json, dist/md/*.md).
• No bundled data/ directory — the published MCP package is a thin server over KB.