material-ui: Instructions file for Codex

AGENTS.md

This file provides guidance for AI agents working with code in this repository.

Package Manager

Only pnpm is supported (yarn/npm will fail). Use the -F flag for workspace operations:

pnpm -F @mui/material add some-package    # Add dependency to a package
pnpm -F @mui/material build               # Build a specific package

Never use cd to navigate into package directories for commands.

Common Commands

Development

pnpm install                  # Install deps if necessary
pnpm docs:dev                 # Start docs dev server only

Building

pnpm release:build            # Build all packages (except docs)
pnpm docs:build               # Build documentation site

Testing

pnpm test:unit                # Run all unit tests (jsdom)
pnpm test:unit ComponentName  # Run tests matching pattern
pnpm test:unit -t "test name" # Grep for specific test name
pnpm test:browser             # Run tests in real browsers (Chrome, Firefox, WebKit)
pnpm test:e2e                 # End-to-end tests
pnpm test:regressions         # Visual regression tests

Code Quality

pnpm prettier                 # Format staged changes
pnpm eslint                   # Lint with cache
pnpm typescript               # Type check all packages

API Documentation

After changing component props or TypeScript declarations:

pnpm proptypes && pnpm docs:api

Docs demos

Demos live next to their page under docs/data/<product>/components/<component>/demos/<demo-name>/. Each demo folder contains three files:

• <ComponentName>.tsx — the demo source, authored as TypeScript (.tsx).

• client.ts — marks the demo's client boundary:

  'use client';
  
  import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient';
  
  export default createDemoClient(import.meta.url);
  

• index.ts — wires the demo into the docs pipeline:

  import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
  import ClientProvider from './client';
  import BasicButtons from './BasicButtons';
  
  export default createDemo(import.meta.url, BasicButtons, { ClientProvider });