idrac-design-mcp
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., "@idrac-design-mcplook up the button component"
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.
idrac-design-mcp
A local Model Context Protocol (MCP) server that
exposes iDRAC design-system knowledge to MCP-compatible clients. It runs over
stdio (no web server) and currently registers a single get_component tool
backed by hardcoded placeholder data.
Protocol note: In stdio mode,
stdoutis reserved exclusively for MCP protocol messages. All logging in this server goes tostderrviaconsole.error(). Never write tostdout.
Requirements
Node.js 18+ (ES modules, built-in
node:test)
Related MCP server: web-ui-component-spec-mcp
Install
npm installBuild
Compiles TypeScript from src/ to dist/:
npm run buildRun
Starts the server on stdio (it will wait for an MCP client to connect):
npm startTest
Runs the automated test for the get_component handler (builds first):
npm testThe test asserts that get_component("button") contains ic-button and that an
unknown component returns No record found.
The get_component tool
Field | Type | Description |
| string | Component name to look up, e.g. |
Behavior (placeholder data):
"button"->Use ic-button from @idrac/ui. Do not use raw HTML buttons.anything else ->
No record found for that component.
Inspect with the MCP Inspector
The MCP Inspector lets you exercise the tools interactively. After building:
npm run build
npx @modelcontextprotocol/inspector node dist/index.jsThis launches the Inspector UI and starts this server as its stdio child
process. Open the printed URL, select the get_component tool, and try
name: "button".
Register in an MCP client
Add an entry to your client's MCP config. Use an absolute path to the built
entry file. Example (Claude Desktop / generic mcpServers format):
{
"mcpServers": {
"idrac-design": {
"command": "node",
"args": ["C:/Users/Ashwini_Paradkar/CascadeProjects/idrac-design-mcp/dist/index.js"]
}
}
}Build first (npm run build) so dist/index.js exists, then restart the client.
Project layout
src/
index.ts # McpServer + StdioServerTransport wiring, tool registration
getComponent.ts # Pure lookup logic (testable, hardcoded data for now)
getComponent.test.ts# node:test unit tests for the lookup logicAvailable Tools
1 toolget_componentGet ComponentA
Look up iDRAC design-system guidance for a named component (e.g. "button").
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | The component name to look up, e.g. "button". |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It only states that the tool looks up guidance, implying a read-only operation, but does not disclose any behavioral details such as authentication needs, rate limits, error handling, or whether the tool performs any side effects.
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 sentence that is concise and front-loaded with the key information. Every word serves a purpose without any waste.
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 simple input (one string parameter) and no output schema, the description is mostly adequate. However, it does not describe the return value format or content, which is a gap for an AI agent deciding whether the tool's output is useful.
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% (the 'name' parameter has a description), so the baseline is 3. The tool description does not add additional meaning beyond repeating the example; it provides no extra context about parameter constraints or formats.
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 specifies a clear action ('look up') and a specific resource ('iDRAC design-system guidance for a named component'), with a concrete example (e.g., 'button'). No sibling tools exist, so no differentiation needed.
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 implies when to use the tool (when design guidance for a named component is needed), but it does not explicitly state conditions for when not to use it or mention alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
1 tool update
v0.1.0- First observed
get_component
TDQS
Scored across 1 tool
With only one tool, there is no possibility of confusion or overlap between tools.
A single tool trivially follows a consistent naming pattern.
One tool is minimal but may be appropriate for a simple lookup server; however, it feels thin for a design system with many components.
The server only provides a single lookup operation, lacking list, search, or management functions, which are significant gaps for a design system guidance tool.
Maintenance
Related MCP Connectors
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Software component catalog: search your org's services, docs, APIs, dependencies, and ownership.
Accessible React components, tokens, usage guidance, and install commands for product interfaces.
Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
Related MCP Servers
- FlicenseNot gradedqualityDmaintenanceExposes the Grocers Design System as queryable tools for coding agents, including design tokens, UI components, brand foundations, and a skill manifest.-
- AlicenseAqualityCmaintenanceProvides AI coding assistants with on-demand access to component specs, test scenarios, accessibility requirements, and build guides from the Web UI Component Specification.10MIT
- FlicenseNot gradedqualityFmaintenanceProvides AI assistants with access to WordPress Design System component information and design guidance.9-
- AlicenseNot gradedqualityDmaintenanceProvides resources, tools, and prompts for a Design System via MCP protocol, enabling component search, reading, and related component discovery.205 npmMIT