Skip to content
+

Model Context Protocol (MCP) for MUI

Gain access to the official Material UI docs and code in your AI client.

Introduction & What is MCP?

The Model Context Protocol (MCP) is a new open standard for connecting AI assistants to real, trusted sources of documentation and code. For Material UI users, this means you get answers that are accurate, up-to-date, and directly reference the official docs.

Want to learn more about MCP? See the official MCP documentation.

Why the Model Context Protocol?

Traditional AI coding assistants are excellent at providing answers, especially to straightforward questions. However, when faced with a deeper, more complex question which requires understanding concepts from multiple parts of the documentation, they often hallucinate links, cite non-existent documentation, or provide answers that are hard to verify. MCP solves these problems by:

  • Quoting real, direct sources in answers
  • Linking to actual documentation (no imaginary links that lead to 404s)
  • Making responses easier to follow and trust

Getting Started: Installation & Setup

The MCP is available as a separate package and runs locally, communicate via your AI client using the stdio transport. Use the following command to test the MCP in the MCP inspector:

npx -y @mui/mcp-docs@latest

Cursor/Windsurf

  1. Open MCP configuration in Windsurf ("Settings" -> "MCP" -> "Add Server")
  2. Add a new MCP:
"mcp": {
  "servers": {
    "mui-mcp-docs": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@mui/mcp-docs@latest"]
    }
  }
}

VS Code

Apart from the setup provided above, VS Code requires the following conditions to be met for the MCP to be usable:

  1. Enable Agent mode (for Copilot Chat)
  2. Add the following to your settings.json:
  "chat.mcp.enabled": true,
  "chat.mcp.discovery.enabled": true

Example

Here's a real-world comparison of how MCP helps you get answers that are accurate, up-to-date, and directly reference the official docs.

Question

I am using DataGrid Pro version and I am trying to use pinning and reordering in the same time. I don't want the reorder handler to disappear when I have the row pinned. I am using it for functionality with pagination so I can:

Pin a row to the top,

Move the pagination forwards or backwards,

Drag into the new page row to change order on the different pages with a pinned row,

However, when I'm trying to use GRID_REORDER_COL_DEF the renderCell is returning null for pinned rows.

AI clients with MCP

You are encountering this issue because, according to the official MUI DataGrid Pro documentation, row pinning and row reordering are not fully compatible. Specifically:

"Pinned rows do not support the following features: selection, row grouping, tree data, row reordering, master detail..."

When a row is pinned, the reorder handler (the drag handle) is intentionally not rendered for those rows. This is why GRID_REORDER_COL_DEF's renderCell returns null for pinned rows.

Workarounds and Recommendations: You can still reorder non-pinned rows as usual For pinned rows, implement a custom UI/UX (action buttons like "Move Up/Down" or "Unpin and Move" for example) To move a pinned row to a different page, first unpin it, reorder, then pin it again

Summary: This is a current limitation of MUI DataGrid Pro. The reorder handler is hidden for pinned rows by design. You can upvote or comment on the related GitHub issues to help prioritize this feature.

If you want a code example for a custom workaround, let me know!

The MCP-aided response is more coherent and directly references the documentation, building trust and enabling the user to be able to discover further details. While the tool calls to fetch and parse required documentation add some delay to the response, the difference is made up by a better quality response.

FAQ

I've installed the MCP, but there are errors in connection

Try and use the MCP inspector to debug the connection. To do so, run:

 npx @modelcontextprotocol/inspector

  1. Wait till the terminal says: "🔍 MCP Inspector is up and running at http://127.0.0.1:6274".

  2. Navigate to this URL in your browser

  3. Choose "Transport type" as "Stdio"

  4. Set the "Command" to npx

  5. Set the "Arguments" to y @mui/mcp-docs@latest

  6. Click on "Connect"

  7. Wait for the connection to be established

The MCP should successfully connect, and you should see a list of available tools. If not, check the logs in the terminal where you ran the MCP inspector for more details

I've installed the MCP, but it is not being used when I ask questions

If you've installed the MCP and enabled all the necessary settings, but it is not being used when you ask questions, you might need to supply rules to your AI client to use the MCP.

Most editors allow you to specify rules for AI assistants to follow. Depending on the editor, the rules file might be specified in different locations. For VS Code, for instance, add the following to .github/instructions/mui.md:

## Use the mui-mcp-docs server to answer any MUI questions --

- 1. call the "useMuiDocs" tool to fetch the docs of the package relevant in the question
- 2. call the "fetchDocs" tool to fetch any additional docs if needed using ONLY the URLs
     present in the returned content.
- 3. repeat steps 1-2 until you have fetched all relevant docs for the given question
- 4. use the fetched content to answer the question