@romkask/paragon-mcp-server
v1.1.0
Published
MCP server for OpenedX Paragon v23 design system documentation
Downloads
355
Maintainers
Readme
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-serverOr 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"]
}
}
}Available Tools
| Tool | Description |
|------|-------------|
| list_components | List all 63 Paragon components with categories, status, and counts |
| get_component | Get full details for a component or subcomponent (description, props, events, subcomponents) |
| get_component_props | Get all props with types and descriptions |
| get_component_events | Get all callback events (onClose, onToggle, etc.) |
| list_examples | List available code examples for a component |
| get_example | Get the full JSX code for a specific example |
| get_components_variables | Get CSS custom properties / design tokens |
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
