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-mcp look 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: WordPress Design System MCP Server
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").
Inputs: name (required).
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
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.
Design system contracts, docs search, and usage validation for @digitaltableteur components.
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.
Related MCP Servers
- 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
- AlicenseNot gradedqualityFmaintenanceProvides AI assistants with access to WordPress Design System component information and design guidance.9GPL 2.0
- AlicenseNot gradedqualityDmaintenanceProvides resources, tools, and prompts for a Design System via MCP protocol, enabling component search, reading, and related component discovery.547 npmMIT
- AlicenseAqualityDmaintenanceExposes design system component documentation to LLM clients via MCP, allowing listing and retrieving component contexts from Markdown files with YAML frontmatter.230 npmMIT