material-web-mcp
Click on "Install 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., "@material-web-mcpGenerate a Material Web button template"
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.
Material Web MCP Server
An MCP server providing programmatic access to Material Web documentation for AI agents (Claude, Cursor, Cline, Copilot, etc.).
Requirements: Node.js >= 18.17
Quick Start
Connect to AI agents using npx (no installation required):
{
"mcpServers": {
"material-web": {
"command": "npx",
"args": ["-y", "material-web-mcp"]
}
}
}Related MCP server: MUI MCP Server
Tools Overview
list_components: Returns JSON array of available Material Web components.
search_docs: Searches documentation for keywords (input: keyword string), returns matching paths with excerpts.
health_check: Verifies server uptime and documentation accessibility.
get_component_doc: Fetches full documentation for a specific component (input: component name).
get_theming_docs: Returns theming documentation for Material Web.
get_installation_docs: Returns installation and quick-start documentation.
generate_template: Generates basic HTML templates with Material Web components based on prompts (input: prompt string).
validate_website: Validates HTML code for correct Material Web component usage (input: HTML string).
Links
Contributing Guide - How to contribute
Changelog - Version history
Development
Quick Setup
git clone https://github.com/shantoislamdev/material-web-mcp.git
cd material-web-mcp
npm install
npm test
npm startAvailable Tools
7 toolsget_component_docGet Component DocumentationA
Returns the full documentation for a specific Material Web component
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes |
Output Schema
| Name | Required | Description |
|---|---|---|
| documentation | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the burden of behavior disclosure. It states the output (returns documentation) and implies a read-only operation, but it does not mention behavior for invalid component names, case sensitivity, or error handling. There is no contradiction, but the disclosure is minimal.
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?
A single, focused sentence that immediately communicates the tool's purpose and result. No wasted words or unnecessary 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?
Given the tool's simplicity (one parameter, output schema present), the description adequately covers the core purpose and parameter meaning. It does not explain edge cases, but these are less critical for a straightforward documentation retrieval tool.
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 zero description coverage for the 'component' parameter. The description adds semantic meaning by indicating it identifies a specific Material Web component, which clarifies the parameter's purpose. It stops short of providing format examples or constraints beyond the schema's minLength.
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 action ('Returns'), the resource ('full documentation'), and the scope ('a specific Material Web component'). This distinguishes it from sibling tools like get_theming_docs and list_components, which target different aspects.
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 usage is implied through the description: use this when you need full docs for a specific component. However, it does not explicitly contrast with alternatives like search_docs or list_components, nor does it provide when-not-to-use guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_installation_docsGet Installation DocumentationA
Returns the installation and quick-start documentation for Material Web
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Output Schema
| Name | Required | Description |
|---|---|---|
| documentation | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the burden of conveying behavior. 'Returns' unambiguously indicates a read-only operation with no side effects. The simplicity of the tool (no parameters) means no additional behavioral caveats are necessary.
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 contains no redundant words. It covers the essential information succinctly.
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 zero-parameter, read-only documentation retrieval tool with an output schema, the description is complete. It tells exactly what the tool returns and is sufficient for an agent to select and invoke it.
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 tool has zero parameters, and the schema covers 100% of the (empty) parameter set. The description adds no parameter details because there are none to document, which 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 verb ('Returns') and a specific resource ('installation and quick-start documentation for Material Web'). It clearly distinguishes from sibling tools like get_theming_docs and get_component_doc by focusing on installation.
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 implies a clear use case: use this tool when you need installation or quick-start documentation. It does not explicitly name alternatives or exclusions, but the context is clear enough for a simple retrieval tool.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_theming_docsGet Theming DocumentationA
Returns the theming documentation for Material Web
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Output Schema
| Name | Required | Description |
|---|---|---|
| documentation | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden of behavioral disclosure. It only states that it 'returns' documentation, but does not explicitly mention that it is a read-only operation, any potential side effects, or the format of the returned content. For a simple retrieval tool, the behavior is somewhat implied, but the lack of any explicit safety or side-effect information is a gap.
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 directly states the tool's purpose with no unnecessary words or repetition. It is concise and well-structured.
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 low complexity (no parameters) and the presence of an output schema, the description is largely complete. It clearly identifies the documentation topic and tool scope. However, it could briefly mention the intended audience or relationship to other docs, but this is not critical.
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 tool has zero parameters, so the baseline is 4. The description does not need to explain parameters, and its mention of 'theming documentation' provides sufficient context for what the tool returns.
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 identifies the action ('Returns') and the specific resource ('theming documentation for Material Web'). It distinguishes itself from sibling tools like get_installation_docs and get_component_doc by specifying the theming 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. It does not mention prerequisites, use cases, or exclusions relative to other documentation retrieval tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
health_checkHealth CheckA
Performs a health check on the server, verifying uptime, documentation accessibility, and basic functionality
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Output Schema
| Name | Required | Description |
|---|---|---|
| errors | Yes | |
| status | Yes | |
| uptime | Yes | |
| docsCount | Yes | |
| docsAccessible | Yes | |
| componentsCount | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of disclosing behavior. It discloses what is checked (uptime, docs accessibility, basic functionality), which implies a read-only operation, but it does not mention side effects, requirements, or output format. This is partially transparent but lacks depth.
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, well-structured sentence that immediately states the action and scope. Every word earns its place, and it is sufficiently concise without unnecessary detail.
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 tool with zero parameters and an output schema, the description is complete. It clearly covers the tool's purpose and the specific items checked. No additional information is necessary 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?
The tool has zero parameters, and the schema is empty with 100% coverage. According to the rubric, zero parameters baseline is 4. The description adds no parameter semantics because none are needed.
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: 'Performs a health check on the server'. It specifies what is verified (uptime, documentation accessibility, and basic functionality), making it distinct from sibling documentation tools. The verb 'performs' and resource 'server' are specific.
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 implies usage: use this tool when you need to assess server health and functionality. While it does not explicitly name alternatives or exclusions, the context is clear given the sibling tools are all documentation-related. The tool's purpose naturally distinguishes it.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_componentsList ComponentsA
Returns a JSON array of available Material Web component names
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Output Schema
| Name | Required | Description |
|---|---|---|
| components | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden. It explicitly states the output type (JSON array) and content (component names), making the primary behavior transparent. However, it does not mention error cases or clarify what 'available' means (e.g., all components vs. those installed), but for a simple list operation this is adequate.
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, well-structured sentence that immediately conveys the purpose. No filler or redundant information.
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 (0 parameters, output schema present), the description is complete. It tells the user exactly what to expect—a JSON array of component names. No additional context is necessary for a list operation of this scope.
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 tool has zero parameters, so the baseline is 4. There is nothing to add about parameters, and the description does not need to elaborate on input semantics.
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 ('Returns') and the resource ('available Material Web component names'). It is specific and distinguishes this tool from siblings like get_component_doc and search_docs, which focus on individual documentation or searching.
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 vs alternatives. With sibling tools like search_docs and get_component_doc, it would be helpful to mention that this is the starting point for discovering available components, but the description remains silent on usage context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_docsSearch DocsA
Searches Material Web documentation for a keyword and returns matching file paths with excerpts
| Name | Required | Description | Default |
|---|---|---|---|
| keyword | Yes |
Output Schema
| Name | Required | Description |
|---|---|---|
| results | Yes |
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 states the read-only search behavior and return format (file paths with excerpts), but does not disclose potential limitations such as case sensitivity, result limits, or pagination. The description is adequate but not rich in behavioral detail.
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 one sentence of 14 words, front-loaded with the active verb 'Searches'. Every word contributes to the core purpose and output, with no extraneous information.
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 search tool with an output schema, the description covers the primary purpose and return format. However, it lacks usage guidance and behavioral context, and the existence of sibling doc-retrieval tools suggests that clarification on when to use search_docs versus alternatives would improve completeness.
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 parameter 'keyword' is only referenced as 'a keyword', which is nearly redundant with the schema property name. With 0% schema description coverage, the description adds minimal meaning beyond the type and minLength, failing to specify search semantics like exact match, case sensitivity, or which fields are searched.
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 the specific verb 'Searches' and identifies the resource as 'Material Web documentation', with a clear output of 'matching file paths with excerpts'. This distinctively sets it apart from siblings like get_component_doc which likely retrieves a single specific document.
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 implies use for keyword-based search but provides no explicit guidance on when to choose this tool over alternatives such as get_component_doc or get_theming_docs. No exclusions or alternative tool references are mentioned.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
validate_websiteValidate WebsiteB
Validates HTML code for correct Material Web component usage
| Name | Required | Description | Default |
|---|---|---|---|
| html | Yes |
Output Schema
| Name | Required | Description |
|---|---|---|
| valid | Yes | |
| errors | Yes | |
| warnings | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It only states that it validates HTML but does not disclose whether the operation is read-only, if it makes external requests, whether it has side effects, or what constitutes 'correct usage'. This is insufficient for a validation tool.
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 with no filler. It is front-loaded with the key verb and resource, and every word contributes to the purpose.
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 with one parameter and an output schema, so the description doesn't need to explain return values. However, it lacks clarity on the exact scope of validation (which components are checked, what counts as correct usage) and potential limitations. This ambiguity may cause an agent to misuse it in contexts where a more specific tool would be appropriate.
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 defines one required parameter 'html' with no description. The description adds meaning by specifying that the html parameter is the code to be validated, clarifying its role beyond the schema. However, it does not provide details on expected formats, encoding, or constraints beyond the schema's minLength.
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 ('Validates') applied to a clear resource ('HTML code') with a precise intent ('for correct Material Web component usage'). It clearly distinguishes this from sibling documentation and health-check tools, which have different purposes.
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 given on when to use this tool versus the alternatives. It does not state when validation is appropriate, what prerequisites exist, or when to choose a documentation tool instead. The agent must infer the use case from the description alone.
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.
7 tool updates
v0.1.2- First observed
get_component_doc - First observed
get_installation_docs - First observed
get_theming_docs - First observed
health_check - First observed
list_components - First observed
search_docs - First observed
validate_website
TDQS
Scored across 7 tools
Each tool targets a distinct purpose: documentation retrieval for theming, installation, components, plus listing, searching, health checking, and validation. There is no overlap between tool responsibilities.
Most tools follow a clear verb_noun pattern (get_*, list_*, search_*, validate_*), but health_check is a noun phrase rather than check_health. This minor inconsistency is the only deviation from an otherwise uniform convention.
Seven tools provide a focused and well-scoped set for a documentation and validation server. Each tool earns its place, and the count is neither too sparse nor overwhelming.
The domain—Material Web documentation and HTML validation—is fully covered: installation and theming docs, component listing and retrieval, documentation search, and validation. No obvious gaps exist for the intended read-only and analysis purposes.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
Versioned documentation registry and semantic search for AI tools and coding assistants.
Serves your design system and coding standards to coding agents, so they stop guessing.
Web data tools for AI agents: pages as markdown, search, maps, commerce, jobs, AI answers.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Related MCP Servers
- AlicenseBqualityDmaintenanceProvides AI assistants with tools to grade, generate, and validate UI components against the components.build specification. Supports searching documentation, checking compliance, and generating framework-agnostic accessible components.117Apache 2.0
- FlicenseBqualityDmaintenanceProvides real-time access to Material-UI component documentation, enabling users to search, browse, and generate MUI React components with up-to-date props and examples directly from official documentation.5-
- AlicenseNot gradedqualityFmaintenanceEnables browsing Material Design 3 documentation by listing top-level sections and retrieving page content as Markdown.GPL 3.0
- AlicenseAqualityCmaintenanceProvides AI agents with tools to access Material 3 design components, design tokens, icons, and accessibility guidelines across multiple frameworks.8206MIT