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.
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Component name (e.g., 'Button', 'Alert', 'DataTable') |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, idempotentHint=true, and destructiveHint=false, so the safety profile is covered. The description adds the return contents (props, events, etc.) but does not disclose any additional behaviors such as error conditions or prerequisites.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, front-loaded sentence that conveys the tool's purpose and the scope of returned data without any waste. Every word earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple read-only tool with one well-documented parameter and strong annotations, the description is nearly complete. It lists all returned fields, but could be enhanced by indicating that sibling tools offer more focused alternatives, though this is a minor gap.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema provides 100% coverage for the single 'component' parameter with a clear description and examples. The tool description adds no extra meaning beyond what is already in the schema, so the baseline score of 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool gets detailed component info and enumerates exactly what that includes (description, status, props, events, examples, CSS variables). This distinguishes it from sibling tools that focus on individual aspects like props or events.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to use this tool versus alternatives like get_component_props or get_component_events. There is no mention of use cases, exclusions, or conditions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get all callback events (onClose, onClick, etc.) for a component.
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Component name (e.g., 'Button', 'Alert', 'DataTable') |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, idempotentHint, and non-destructive behavior, lowering the burden on the description. The description adds the word 'all' and event examples, but does not disclose return format, potential empty results, or any filtering behavior. This is adequate but not rich.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, front-loaded sentence that conveys the action, resource, and examples without wasted words. It earns a high score for being concise yet informative.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (one parameter, no output schema), the description sufficiently covers what the tool does and the examples clarify the meaning of callback events. It could mention return format, but the implied return (the events themselves) is adequate for most use cases. A score of 4 reflects the small gap.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema already provides 100% coverage for the single 'component' parameter, including an example. The description adds no additional parameter-specific meaning beyond what the schema states, justifying the baseline score of 3.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb ('Get') and identifies the resource ('callback events') with concrete examples (onClose, onClick). It distinguishes this from sibling tools like get_component_props by focusing on events rather than properties.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description clearly indicates the tool is for retrieving callback events for a component, but provides no explicit alternatives or exclusions. While siblings like get_component_props imply different use cases, the description does not state when to choose this tool over them.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get all props for a component with names, types, and descriptions.
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Component name (e.g., 'Button', 'Alert', 'DataTable') |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, idempotentHint=true, and destructiveHint=false, covering the safety profile. The description adds the output contents (names, types, descriptions) but does not disclose any edge cases, auth requirements, or limitations. This is a baseline level of additional behavioral context.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single concise sentence that directly states the action and result. Every word contributes to understanding the tool's function, and there is no unnecessary filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple read-only getter with one parameter and strong annotations, the description is mostly complete. It indicates the returned data includes names, types, and descriptions, but does not explicitly state the return format (e.g., array vs object). This is a minor gap given the tool's simplicity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema fully explains the single 'component' parameter with a description and examples, so schema coverage is 100%. The tool description adds no further meaning beyond what the schema already provides, aligning with the baseline score for complete schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it retrieves all props for a component, naming the resource ('props') and the scope ('for a component'). It also previews the return contents (names, types, descriptions). Sibling tool names (e.g., get_component_events, get_components_variables) make the distinction apparent by topic.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. Sibling tools like get_component_events or get_components_variables are not mentioned, and there are no exclusions or context hints about choosing this tool.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get CSS custom properties (design tokens) for a component. Filter by category.
| Name | Required | Description | Default |
|---|---|---|---|
| category | No | Filter by category (e.g., 'spacing', 'typography', 'size') | |
| component | Yes | Component name (e.g., 'Button', 'Alert', 'DataTable') |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, idempotentHint, and destructiveHint, so the safety profile is known. The description adds the 'design tokens' clarification and the filtering capability, but no further behavioral details such as return format or pagination. This is sufficient given the annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two short sentences front-load the core purpose ('Get CSS custom properties') and mention the optional filter. No wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description is adequate for a simple read-only tool with two well-documented parameters and comprehensive annotations. It conveys what is retrieved and the optional filtering aspect, leaving little ambiguity for an agent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Both parameters are fully described in the schema (100% coverage), including examples. The description's 'Filter by category' aligns with the category parameter but adds no additional semantic nuance beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb ('Get') and resource ('CSS custom properties (design tokens)') for a component, with a scope ('Filter by category'). This clearly differentiates from sibling tools like get_component_props and get_component_events.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context that this tool retrieves CSS variables for a component, and the filter option is stated. It does not explicitly name alternative tools or when-not-to-use conditions, but the specificity of 'CSS custom properties' signals the intended use case.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get full JSX code for a specific example. Search by ID or title (partial match).
| Name | Required | Description | Default |
|---|---|---|---|
| title | No | Example title to search (partial match) | |
| component | Yes | Component name (e.g., 'Button', 'Alert', 'DataTable') | |
| example_id | No | Example ID (e.g., 'example-0') |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, idempotentHint=true, and destructiveHint=false, so the safety profile is covered. The description adds behavioral context by stating the return is 'full JSX code' and that title search supports partial matches. This is useful but minimal; there is no mention of pagination, limits, or error cases.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise: two short sentences, front-loaded with the core purpose. Every word earns its place, with no fluff or repetition of schema details.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple read-only getter, the description adequately conveys that the tool returns JSX code and supports search. There is no output schema, so the description's mention of 'full JSX code' covers the return type. However, it does not clarify that the 'component' parameter is required, which could lead to confusion given the 'search by ID or title' phrase. This minor gap prevents a perfect score.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, with all three parameters described. The description adds the note that title supports partial match, which is already in the schema. It does not add additional semantics like how component and example_id interact, so the baseline of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's function: 'Get full JSX code for a specific example.' It uses a specific verb (get) with a clear resource (full JSX code for an example). This distinguishes it from siblings like get_component_props or get_component_events, which fetch metadata rather than code.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides a clear usage context: 'Search by ID or title (partial match).' It implies that the tool is used when you need the exact JSX for an example, and it explains how to locate the example. However, it does not explicitly mention alternatives or when not to use it, which keeps it a step below full guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
List all Paragon components with categories and status. Optionally filter by category.
| Name | Required | Description | Default |
|---|---|---|---|
| category | No | Filter by category (e.g., 'Buttonlike', 'Content') |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, idempotentHint, and destructiveHint false. The description adds useful behavioral context by stating the output includes categories and status, and that filtering is possible. It does not contradict annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, front-loaded with the main action, and no redundant information. Every word earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple list tool with one optional parameter and rich annotations, the description is sufficient. It covers purpose, output content, and filtering, though it does not detail pagination or edge cases, which are not critical here.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the baseline is 3. The description mentions the optional category filter but adds no new information beyond what the schema already provides (including examples).
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb 'list' and the resource 'Paragon components', and specifies what is returned (categories and status). It distinguishes itself from sibling tools that retrieve component details (props, events, examples, variables).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It provides clear context: lists all components with an optional category filter. However, it does not explicitly state when not to use it or name alternatives for fetching specific component details, so it misses the explicit alternative guidance of a 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
List example IDs and titles for a component. Use get_example for full code.
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Component name (e.g., 'Button', 'Alert', 'DataTable') |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and idempotentHint=true, so the safety profile is covered. The description adds minimal extra behavior—only the output shape (IDs and titles). It does not disclose edge cases or additional constraints, but the annotation coverage lowers the burden.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two concise sentences, front-loaded with the verb and object, and a brief pointer to the alternative tool. Every word earns its place, making it highly efficient.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool is simple (one parameter, no output schema), and the description sufficiently explains what it returns (IDs and titles) and how it relates to get_example. There are no apparent gaps for an agent to invoke it correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, with 'component' fully documented by name and examples. The description adds no new parameter semantics beyond mirroring the schema, so the baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific action ('List example IDs and titles') and resource ('for a component'), clearly distinguishing it from sibling tools like get_example (which provides full code) and list_components (which lists components).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It explicitly tells the agent when to use an alternative: 'Use get_example for full code.' This provides clear context for choosing between list_examples and get_example, making the usage guidance strong.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.1.0get_componentget_component_eventsget_component_propsget_components_variablesget_examplelist_componentslist_examplesScored 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.
