Provides structured access to component documentation (props, events, code examples, CSS design tokens) for the Open edX Paragon design system, enabling AI assistants to write Paragon-based UI code.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Paragon MCP Server what props does the Button component have?"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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.
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"]
}
}
}Related MCP server: ds-pilot
Tool | Description |
| List all 63 Paragon components with categories, status, and counts |
| Get full details for a component or subcomponent (description, props, events, subcomponents) |
| Get all props with types and descriptions |
| Get all callback events (onClose, onToggle, etc.) |
| List available code examples for a component |
| Get the full JSX code for a specific example |
| Get CSS custom properties / design tokens |
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.
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
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)MIT
Get detailed component info: description, status, props, events, examples, and CSS variables.
Inputs: component (required).
Get all callback events (onClose, onClick, etc.) for a component.
Inputs: component (required).
Get all props for a component with names, types, and descriptions.
Inputs: component (required).
Get CSS custom properties (design tokens) for a component. Filter by category.
Inputs: component (required), category.
Get full JSX code for a specific example. Search by ID or title (partial match).
Inputs: component (required), title, example_id.
List all Paragon components with categories and status. Optionally filter by category.
Inputs: category.
List example IDs and titles for a component. Use get_example for full code.
Inputs: component (required).
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 7 tools
get_component aggregates props, events, examples, and CSS variables, making the separate tools like get_component_props and get_component_events redundant and ambiguous. An agent may struggle to decide whether to use the general or specific tool, though the list/detail distinction for examples is clear.
Most tools follow a consistent verb_noun pattern using get_ and list_. The only inconsistency is get_components_variables using plural 'components' while others use singular 'component'. Overall, the naming is predictable and readable.
Seven tools is well within the ideal range for a component documentation server. Each tool addresses a legitimate aspect of component exploration, and the count feels appropriately scoped without being bloated.
The server provides a complete surface for exploring Paragon components: listing components, getting detailed info, and accessing props, events, CSS variables, and examples. No obvious gaps exist for the intended purpose of discovering component APIs.
MCP server that lets AI assistants use all OneSchema features exposed via the public API.
MCP server for querying Forkast documentation
Token-free MCP server for structured RevoGrid Core, Pro, and Enterprise knowledge retrieval.
Nifty's MCP server — exposes tasks, projects, messages, and files as tools for AI agents.
