Skip to content

[docs] Improve MCP docs #46557

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jul 22, 2025
Merged

[docs] Improve MCP docs #46557

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2db8e70
improve mcp docs
siriwatknp Jul 18, 2025
e3a653f
copyediting
mapache-salvaje Jul 21, 2025
7f52189
nbsps
mapache-salvaje Jul 21, 2025
747e08d
fix lint
siriwatknp Jul 22, 2025
ca88ab3
Merge branch 'master' of github.com:mui/material-ui into docs/mcp-ins…
siriwatknp Jul 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 42 additions & 28 deletions docs/data/material/getting-started/mcp/mcp.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,7 @@

## Installation & Setup

The MCP is available as a separate package that runs locally and communicates via your AI client using the `stdio` transport.
Use the following command to test the MCP in the [MCP inspector](https://modelcontextprotocol.io/docs/tools/inspector):

```bash
npx -y @mui/mcp@latest
```
Below are the list of MCP clients that are supported.

### Cursor/Windsurf

Expand Down Expand Up @@ -105,6 +100,8 @@

### Question

Below is a prompt related to the [MUI X — DataGrid Pro](/x/react-data-grid/#pro-version):

> 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:
Expand All @@ -117,29 +114,12 @@
>
> However, when I'm trying to use GRID_REORDER_COL_DEF the renderCell is returning null for pinned rows.

### AI clients without MCP
### Response

> This is a known limitation in MUI DataGrid Pro: when a row is pinned, the default row reorder handler
> (provided by GRID_REORDER_COL_DEF) is hidden for pinned rows, and the renderCell returns null.
> This is by design to prevent reordering of pinned rows, but your use case requires both features together.
>
> To achieve your goal (showing the reorder handler for pinned rows and allowing cross-page drag-and-drop with pinned rows), you need to:
>
> Override the default renderCell of the reorder column to always render the reorder handler, even for pinned rows.
> Implement custom logic to handle reordering, especially across pages and with pinned rows.
>
> Here's how you can proceed:
>
> Create a custom reorder column definition
> Use your own renderCell that always renders the reorder handler, regardless of pinning
> You can copy the default reorder handler from MUI source and adjust the logic as needed
> Add this custom column to your columns array, replacing the default reorder column
> Handle the row reordering logic in your onRowOrderChange callback
>
> Would you like a code example for a custom reorder column that works with pinned rows?
> If yes, please specify if you're using TypeScript or JavaScript, and if you want the handler to be visible for both pinned and unpinned rows
Let's compare the response with and without MCP:

Check warning on line 119 in docs/data/material/getting-started/mcp/mcp.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[Google.We] Try to avoid using first-person plural like 'Let's'.

Raw Output:
{"message": "[Google.We] Try to avoid using first-person plural like 'Let's'.", "location": {"path": "docs/data/material/getting-started/mcp/mcp.md", "range": {"start": {"line": 119, "column": 1}}}, "severity": "WARNING"}

### AI clients with MCP
<details open>
<summary><b>AI clients with MCP</b></summary>

> You are encountering this issue because, according to the official MUI DataGrid Pro documentation, row pinning and row reordering are not fully compatible.
> Specifically:
Expand All @@ -161,7 +141,32 @@
>
> If you want a code example for a custom workaround, let me know!

<hr/>
</details>

<details>
<summary><b>AI clients without MCP</b></summary>

> This is a known limitation in MUI DataGrid Pro: when a row is pinned, the default row reorder handler

Check warning on line 149 in docs/data/material/getting-started/mcp/mcp.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[MUI.NoCompanyName] We avoid referencing the company name 'MUI DataGrid'. Instead you can reference a product or the team.

Raw Output:
{"message": "[MUI.NoCompanyName] We avoid referencing the company name 'MUI DataGrid'. Instead you can reference a product or the team.", "location": {"path": "docs/data/material/getting-started/mcp/mcp.md", "range": {"start": {"line": 149, "column": 33}}}, "severity": "WARNING"}
> (provided by GRID_REORDER_COL_DEF) is hidden for pinned rows, and the renderCell returns null.
> This is by design to prevent reordering of pinned rows, but your use case requires both features together.
>
> To achieve your goal (showing the reorder handler for pinned rows and allowing cross-page drag-and-drop with pinned rows), you need to:
>
> Override the default renderCell of the reorder column to always render the reorder handler, even for pinned rows.
> Implement custom logic to handle reordering, especially across pages and with pinned rows.
>
> Here's how you can proceed:
>
> Create a custom reorder column definition
> Use your own renderCell that always renders the reorder handler, regardless of pinning
> You can copy the default reorder handler from MUI source and adjust the logic as needed

Check warning on line 162 in docs/data/material/getting-started/mcp/mcp.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[MUI.NoCompanyName] We avoid referencing the company name 'MUI source'. Instead you can reference a product or the team.

Raw Output:
{"message": "[MUI.NoCompanyName] We avoid referencing the company name 'MUI source'. Instead you can reference a product or the team.", "location": {"path": "docs/data/material/getting-started/mcp/mcp.md", "range": {"start": {"line": 162, "column": 49}}}, "severity": "WARNING"}
> Add this custom column to your columns array, replacing the default reorder column
> Handle the row reordering logic in your onRowOrderChange callback
>
> Would you like a code example for a custom reorder column that works with pinned rows?
> If yes, please specify if you're using TypeScript or JavaScript, and if you want the handler to be visible for both pinned and unpinned rows

</details>

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.

Expand Down Expand Up @@ -212,3 +217,12 @@
```

You can use the same content as rules for whichever AI-enabled IDE you're using.

## Troubleshooting

The MCP is available as a separate package that runs locally and communicates via your AI client using the `stdio` transport.
Use the following command to test the MCP in the [MCP inspector](https://modelcontextprotocol.io/docs/tools/inspector):

```bash
npx -y @mui/mcp@latest
```
Loading