Paragon MCP Server

MCP server for the Open edX Paragon design system (v23.x). Gives AI assistants structured access to component documentation — props, events, code examples, and CSS design tokens — so they can write Paragon-based UI code without guessing.

Installation

The quickest way to use this server is via npx (no clone needed):

claude mcp add paragon -- npx -y @romkask/paragon-mcp-server

Or add it manually to your MCP config (~/.claude/settings.json or project .claude/settings.local.json):

{
  "mcpServers": {
    "paragon": {
      "command": "npx",
      "args": ["-y", "@romkask/paragon-mcp-server"]
    }
  }
}

Related MCP server: ds-pilot

Available Tools

Subcomponent Lookup

All 73 subcomponents (e.g., CardGrid, AlertHeading, FormControl, TableRow) are automatically resolved to their parent component. Querying get_component("CardGrid") returns the full Card component info with a note indicating the subcomponent match.

Data Coverage

• 63 components (Button, Alert, Card, DataTable, Form, Modal, etc.)

• 73 subcomponents with automatic parent resolution

• 410 props with types and descriptions

• 69 events/callbacks

• 295 live code examples

• 443 CSS design token variables

Development

git clone https://github.com/RomkaSk/paragon-mcp-server.git
cd paragon-mcp-server
npm install
npm run build     # generates data + bundles with tsup
npm start         # run server
npm run dev       # dev mode with tsx
npm test          # run tests (348 tests covering all components & subcomponents)

License

MIT