feat(muix): add MUI X Charts (community, React/TSX) as a JavaScript entry (#8517)

Closes #8243.

Adds the **community `@mui/x-charts`** package (MIT) as the catalog's
**first React (`framework: react`) and first `.tsx`** library — the
Tier-3 / Phase-4 entry from `docs/concepts/library-expansion.md`, pulled
forward to validate the React/TSX render path end to end. `language_id`
stays `javascript`: React is a runtime constraint, not a language (§6).

## The new surface: the harness `framework: react` branch

The framework-agnostic JS libs (Chart.js/D3/ECharts/Highcharts) load a
UMD global and draw imperatively. MUI X is different and gets its own
branch in `automation/js-render/render.mjs`:

- the `.tsx` snippet **default-exports a React component**;
- the harness **esbuild-bundles** it with `react` / `react-dom` /
`@mui/x-charts` / `@mui/material` / `@emotion`, wraps it in a
**theme-aware MUI `ThemeProvider`** (mapped onto `ANYPLOT_TOKENS`),
mounts it via `createRoot`, and Playwright-screenshots `#container` at
the **exact** canvas size (3200×1800 / 2400×2400) + emits the
self-contained interactive HTML — the same contract as the UMD libs;
- it emulates **`prefers-reduced-motion: reduce`** so MUI X skips
entrance animation and the screenshot is a deterministic *final* frame.

Validated end-to-end locally with the real harness (Playwright +
Chromium): light & dark, landscape **3200×1800** and square
**2400×2400**, exact pixels from the PNG IHDR, first series in brand
green `#009E73`, theme-adaptive chrome, no clipped legends. `setup-node`
now smoke-tests the React path too (the sibling of the existing chartjs
smoke test).

## What changed

**Runtime** — `package.json` / lockfile pin `react@18.3.1`,
`react-dom@18.3.1`, `@mui/x-charts@7.29.1`, `@mui/material@5.18.0`,
`@emotion@11`. `render.mjs` gains the esbuild React branch. `npm ci
--dry-run` clean.

**Registry & backend** — `core/constants.py`: `muix` (`javascript`,
`framework: react`, `.tsx` override), added to `INTERACTIVE_LIBRARIES`.
`/libraries` surfaces `framework`. The debug matrix now builds
per-library scores via a **registry spread** (also fixes the
pre-existing bug where chartjs/d3/echarts columns were silently
dropped). `seo` + `insights` counts and display names. **No alembic
migration needed** — the `framework` column already exists and a
brand-new row inserts via the existing `on_conflict_do_nothing` seed.

**Frontend** — `LIB_TO_FRAMEWORK` + per-library extension override
(`muix → tsx`); TSX syntax highlighting (`CodeHighlighter` + d.ts shim);
`LibraryCard` React badge + MIT note; `LibrariesPage` generic
**"React-compatible" filter** (built off `LIB_TO_FRAMEWORK` so
Recharts/Vue/etc. slot in with no UI change); `PlotOfTheDay(Terminal)`
`.tsx` runner; library-count meta copy bumped **14 → 15**.

**Prompts / workflows / docs** — new `prompts/library/muix.md`; `muix`
arms in the impl-generate/repair/review/merge case tables + workflow
choices + `ALL_LIBRARIES`; canvas-gate hint; `plot-generator.md` /
`impl-*-claude.md` updated; `library-expansion.md` §1/§8/§9,
`project-guide.md`, `prompts/README.md`, `README.md`.

### Community-only hard rule (emphasized per request)

Snippets use the **MIT community `@mui/x-charts` surface only** —
`@mui/x-charts-pro` / Premium are **forbidden** (only the community
package is installed, so a Pro import fails the build). `muix.md` and
`plot-generator.md` state this prominently, while explicitly allowing
the LLM to add richer chart features when they serve the spec, as long
as every one comes from the community surface.

## Tests

- `uv run pytest tests/unit` — **1496 passed** (new: muix registry
assertions, `.tsx` discovery, framework checks).
- Frontend `yarn vitest run` — **536 passed** (new: tsx-highlighting
case, `?language=javascript` fetch, React-filter test, debug muix
column); `yarn tsc --noEmit` + `yarn lint` clean (no TS7016
carry-forward).
- `ruff check` / `ruff format --check` clean; workflow YAML validated.

Integration tests (DB-backed) run in CI; the `/libraries` shape change
only **adds** `framework`, which is safe against the existing fixtures.

https://claude.ai/code/session_01HEs4b7jkqVUSTMt8mAo7in

---
_Generated by [Claude
Code](https://claude.ai/code/session_01HEs4b7jkqVUSTMt8mAo7in)_

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: MarkusNeusinger

.github/actions/setup-node/action.yml

@@ -1,10 +1,11 @@
 name: "Setup Node + JS render harness"
 description: >-
   Installs Node.js, the pinned JavaScript charting toolchain (Chart.js, D3,
-  ECharts) and the headless-browser render harness (Playwright + Chromium) used
-  by anyplot's JavaScript implementations. The toolchain is restored exactly
-  from the committed top-level package-lock.json (`npm ci`) for reproducibility —
-  the JS sibling of setup-r's Posit snapshot and setup-julia's Manifest.toml.
+  ECharts, Highcharts, plus the React stack for MUI X — react, react-dom, @mui)
+  and the headless-browser render harness (Playwright + Chromium) used by
+  anyplot's JavaScript implementations. The toolchain is restored exactly from
+  the committed top-level package-lock.json (`npm ci`) for reproducibility — the
+  JS sibling of setup-r's Posit snapshot and setup-julia's Manifest.toml.
 inputs:
   node-version:
     description: "Node.js version to install"
@@ -63,3 +64,46 @@ runs:
           if (w !== 3200 || h !== 1800) { console.error(`smoke-test PNG is ${w}x${h}, expected 3200x1800`); process.exit(1); }
           console.log(`ok: ${process.argv[1]} (${w}x${h}, ${b.length} bytes)`);
         ' "$PNG"
+
+    - name: Smoke-test the React (MUI X) render path
+      # The framework=react branch is the only one that esbuild-bundles the
+      # snippet (react + react-dom + @mui/x-charts) and mounts it in a MUI
+      # ThemeProvider — a different code path from the UMD-global libs above.
+      # Render a minimal default-exported @mui/x-charts component to guard it end
+      # to end (esbuild bundle → Playwright → exact-pixel PNG + interactive HTML),
+      # the React sibling of the chartjs smoke test.
+      shell: bash
+      run: |
+        set -euo pipefail
+        TMP="$(mktemp -d)"
+        cat > "$TMP/muix.tsx" <<'TSX'
+        import { BarChart } from "@mui/x-charts/BarChart";
+        const t = window.ANYPLOT_TOKENS;
+        export default function Chart() {
+          return (
+            <BarChart
+              width={window.ANYPLOT_SIZE.width}
+              height={window.ANYPLOT_SIZE.height}
+              colors={t.palette}
+              skipAnimation
+              xAxis={[{ scaleType: "band", data: ["a", "b", "c"] }]}
+              series={[{ data: [3, 1, 2], label: "demo" }]}
+            />
+          );
+        }
+        TSX
+        ( cd "$TMP" && ANYPLOT_THEME=dark node "$GITHUB_WORKSPACE/automation/js-render/render.mjs" muix.tsx )
+        PNG="$TMP/plot-dark.png"
+        test -f "$PNG"
+        test -s "$PNG"
+        # The harness also writes the self-contained interactive page for the
+        # detail view — assert it landed (MUI X is in INTERACTIVE_LIBRARIES).
+        test -s "$TMP/plot-dark.html"
+        # Confirm exact landscape pixels (3200×1800) straight from the PNG IHDR.
+        node -e '
+          const fs = require("fs");
+          const b = fs.readFileSync(process.argv[1]);
+          const w = b.readUInt32BE(16), h = b.readUInt32BE(20);
+          if (w !== 3200 || h !== 1800) { console.error(`MUI X smoke-test PNG is ${w}x${h}, expected 3200x1800`); process.exit(1); }
+          console.log(`ok: react path ${process.argv[1]} (${w}x${h}, ${b.length} bytes)`);
+        ' "$PNG"

.github/workflows/bulk-generate.yml

@@ -33,6 +33,7 @@ on:
           - chartjs
           - d3
           - echarts
+          - muix
       dry_run:
         description: "List what would be generated without executing"
         type: boolean
@@ -57,7 +58,7 @@ on:
         default: '{}'
 
 env:
-  ALL_LIBRARIES: "matplotlib seaborn plotly bokeh altair plotnine pygal highcharts letsplot ggplot2 makie chartjs d3 echarts"
+  ALL_LIBRARIES: "matplotlib seaborn plotly bokeh altair plotnine pygal highcharts letsplot ggplot2 makie chartjs d3 echarts muix"
 
 # Serialise bulk-generate runs. Each run paces its own dispatches with
 # `pace_seconds`; letting two runs overlap would interleave their

.github/workflows/impl-generate.yml

@@ -34,6 +34,7 @@ on:
           - chartjs
           - d3
           - echarts
+          - muix
       issue_number:
         description: "Issue number (optional, for tracking)"
         required: false
@@ -131,6 +132,12 @@ jobs:
               LANGUAGE="javascript"
               EXT=".js"
               ;;
+            muix)
+              # MUI X — JavaScript with framework=react, authored as TSX and
+              # bundled through the render harness's esbuild React branch.
+              LANGUAGE="javascript"
+              EXT=".tsx"
+              ;;
             *)
               LANGUAGE="python"
               EXT=".py"
@@ -601,12 +608,16 @@ jobs:
                 ;;
             esac
           elif [ "$LANGUAGE" = "javascript" ]; then
-            # Catalogue id `chartjs` maps to the npm package `chart.js`; `d3` and
+            # Catalogue id `chartjs` maps to the npm package `chart.js` and
+            # `muix` to the scoped community package `@mui/x-charts`; `d3` and
             # `echarts` match their npm names directly.
             case "$LIBRARY" in
               chartjs)
                 LIBRARY_VERSION=$(get_npm_version "chart.js")
                 ;;
+              muix)
+                LIBRARY_VERSION=$(get_npm_version "@mui/x-charts")
+                ;;
               *)
                 LIBRARY_VERSION=$(get_npm_version "$LIBRARY")
                 ;;

.github/workflows/impl-merge.yml

@@ -117,6 +117,12 @@ jobs:
               LANGUAGE="javascript"
               EXT=".js"
               ;;
+            muix)
+              # MUI X — JavaScript with framework=react, authored as TSX and
+              # bundled through the render harness's esbuild React branch.
+              LANGUAGE="javascript"
+              EXT=".tsx"
+              ;;
             *)
               LANGUAGE="python"
               EXT=".py"

.github/workflows/impl-repair.yml

@@ -83,6 +83,12 @@ jobs:
               LANGUAGE="javascript"
               EXT=".js"
               ;;
+            muix)
+              # MUI X — JavaScript with framework=react, authored as TSX and
+              # bundled through the render harness's esbuild React branch.
+              LANGUAGE="javascript"
+              EXT=".tsx"
+              ;;
             *)
               LANGUAGE="python"
               EXT=".py"

.github/workflows/impl-review.yml

@@ -113,6 +113,12 @@ jobs:
               LANGUAGE="javascript"
               EXT=".js"
               ;;
+            muix)
+              # MUI X — JavaScript with framework=react, authored as TSX and
+              # bundled through the render harness's esbuild React branch.
+              LANGUAGE="javascript"
+              EXT=".tsx"
+              ;;
             *)
               LANGUAGE="python"
               EXT=".py"
@@ -275,6 +281,7 @@ jobs:
               "chartjs":    "The harness owns exact pixels (Playwright deviceScaleFactor 2 over a fixed mount). Drift means the snippet forced its own canvas size: set `responsive: true` + `maintainAspectRatio: false` and let the canvas fill `#container` — do NOT set canvas width/height. Use `//# anyplot-orientation: square` only for square specs.",
               "d3":         "The harness owns exact pixels (Playwright deviceScaleFactor 2 over a fixed mount). Size the `<svg>` to `window.ANYPLOT_SIZE` (1600×900 landscape / 1200×1200 square) — never hard-code other dimensions. Use `//# anyplot-orientation: square` only for square specs.",
               "echarts":    "The harness owns exact pixels (Playwright deviceScaleFactor 2 over a fixed mount). Call `echarts.init(document.getElementById('container'))` with no explicit width/height so it fills the mount; do not pass a `devicePixelRatio` (the page already runs at 2×). Use `//# anyplot-orientation: square` only for square specs.",
+              "muix":       "The harness owns exact pixels (Playwright deviceScaleFactor 2 over a fixed mount via a MUI ThemeProvider). Size the chart with `width={window.ANYPLOT_SIZE.width}` / `height={window.ANYPLOT_SIZE.height}` (1600×900 landscape / 1200×1200 square) — never hard-code other dimensions. Use `//# anyplot-orientation: square` only for square specs.",
           }
           cause = causes.get(LIBRARY, f"Review `prompts/library/{LIBRARY}.md` 'Canvas — hard rule' section.")
 

README.md

@@ -15,9 +15,9 @@
 ## What is anyplot?
 
 **anyplot** is an AI-powered platform for data visualization that automatically discovers, generates, tests, and
-maintains plotting examples. Browse hundreds of plots across 11 major visualization libraries in Python, R, and Julia —
-matplotlib, seaborn, plotly, bokeh, altair, plotnine, pygal, highcharts, lets-plot, ggplot2, and Makie.jl — with an
-architecture ready to welcome additional ecosystems over time.
+maintains plotting examples. Browse hundreds of plots across 15 major visualization libraries in Python, R, Julia, and
+JavaScript — matplotlib, seaborn, plotly, bokeh, altair, plotnine, pygal, lets-plot, ggplot2, Makie.jl, Chart.js, D3.js,
+ECharts, Highcharts, and MUI X Charts (React) — with an architecture ready to welcome additional ecosystems over time.
 
 **Community-driven, AI-maintained** - Propose plot ideas via GitHub Issues, AI generates the code, automated quality
 checks ensure excellence. Zero manual coding required.
@@ -38,22 +38,31 @@ checks ensure excellence. Zero manual coding required.
 ## Architecture
 
 **Specification-first design**: Every plot starts as a Markdown spec (library-agnostic), then AI generates
-implementations for all 11 supported libraries across Python, R, and Julia.
+implementations for all 15 supported libraries across Python, R, Julia, and JavaScript.
 
 ```
 plots/scatter-basic/
 ├── specification.md     # Library-agnostic specification
 ├── specification.yaml   # Tags, created, issue, suggested
 ├── metadata/            # Per-library metadata (quality scores, preview URLs)
-│   └── python/
-│       ├── matplotlib.yaml
-│       └── ...
-└── implementations/
-    └── python/
-        ├── matplotlib.py
-        ├── seaborn.py
-        ├── plotly.py
-        └── ... (6 more)
+│   ├── python/
+│   │   ├── matplotlib.yaml
+│   │   └── ...
+│   └── javascript/
+│       └── muix.yaml
+└── implementations/     # Grouped by language; one file per library
+    ├── python/
+    │   ├── matplotlib.py
+    │   ├── seaborn.py
+    │   └── ... (6 more)
+    ├── r/ggplot2.R
+    ├── julia/makie.jl
+    └── javascript/
+        ├── chartjs.js   # framework-agnostic JS libs → .js
+        ├── d3.js
+        ├── echarts.js
+        ├── highcharts.js
+        └── muix.tsx     # MUI X — React, authored as .tsx
 ```
 
 **Issue-based workflow**: GitHub Issues as state machine for plot lifecycle. Status tracked via live-updating table (no sub-issues). Each library generates in parallel, creating PRs to a feature branch.
@@ -70,9 +79,10 @@ See [docs/reference/](docs/reference/) for details.
 
 **Frontend**: React 19 • Vite • TypeScript • MUI
 
-**Plotting (Python)**: matplotlib • seaborn • plotly • bokeh • altair • plotnine • pygal • highcharts • lets-plot
+**Plotting (Python)**: matplotlib • seaborn • plotly • bokeh • altair • plotnine • pygal • lets-plot
 **Plotting (R)**: ggplot2
 **Plotting (Julia)**: Makie.jl
+**Plotting (JavaScript)**: Chart.js • D3.js • ECharts • Highcharts • MUI X Charts (React)
 
 **Infrastructure**: Google Cloud Run • Cloud SQL • Cloud Storage
 

agentic/docs/project-guide.md

@@ -6,17 +6,16 @@ This document contains comprehensive project documentation for AI agents working
 
 **anyplot** is an AI-powered platform for Python data visualization that automatically discovers, generates, tests, and maintains plotting examples. The platform is specification-driven: every plot starts as a library-agnostic Markdown spec, then AI generates implementations for all supported libraries.
 
-**Supported Libraries** (10 total):
+**Supported Libraries** (15 total):
 
-*Python (9):*
+*Python (8):*
 - **matplotlib** - The classic standard, maximum flexibility
 - **seaborn** - Statistical visualizations, beautiful defaults
 - **plotly** - Interactive web plots, dashboards, 3D
 - **bokeh** - Interactive, streaming data, large datasets
 - **altair** - Declarative/Vega-Lite, elegant exploration
 - **plotnine** - ggplot2 syntax for R users
 - **pygal** - Minimalistic SVG charts
-- **highcharts** - Interactive web charts, stock charts (requires license for commercial use)
 - **lets-plot** - ggplot2 grammar of graphics by JetBrains, interactive
 
 *R (1):*
@@ -25,6 +24,13 @@ This document contains comprehensive project documentation for AI agents working
 *Julia (1):*
 - **Makie.jl** - High-performance Julia visualization. CairoMakie ships publication-quality static PNG via a pure-Cairo backend.
 
+*JavaScript (5):* — rendered through the Node 22 + Playwright browser harness (`automation/js-render/render.mjs`)
+- **Chart.js** - Simple, flexible HTML5-canvas charts; the popular JS default
+- **D3.js** - Data-driven SVG, low-level and maximally flexible
+- **Apache ECharts** - Powerful interactive charts, vast catalog
+- **highcharts** - Industry-standard SVG charts (commercial license, free for non-commercial use); migrated Python → JavaScript in Phase 2
+- **MUI X Charts** - Charts for the MUI / Material UI **React** ecosystem (`framework: react`, authored as `.tsx`). Community `@mui/x-charts` (MIT) only; Pro/Premium out of scope. The first React entry — bundled via the harness's esbuild React branch.
+
 **Core Principle**: Community proposes plot ideas via GitHub Issues -> AI generates code -> AI quality review -> Deployed.
 
 ## Essential Commands
@@ -125,22 +131,23 @@ Everything for one plot type lives in a single directory:
 
 ```
 plots/{specification-id}/
-├── specification.md     # Description, Applications, Data, Notes
-├── specification.yaml   # Spec-level metadata (tags, created, issue, suggested, updates)
-├── metadata/            # Per-library metadata (one file per library)
-│   ├── matplotlib.yaml
-│   ├── seaborn.yaml
-│   └── ...
-└── implementations/     # Library implementations
-    ├── matplotlib.py
-    ├── seaborn.py
-    ├── plotly.py
-    ├── bokeh.py
-    ├── altair.py
-    ├── plotnine.py
-    ├── pygal.py
-    ├── highcharts.py
-    └── letsplot.py
+├── specification.md       # Description, Applications, Data, Notes
+├── specification.yaml     # Spec-level metadata (tags, created, issue, suggested, updates)
+├── metadata/              # Per-library metadata, grouped by language
+│   ├── python/{matplotlib,seaborn,…}.yaml
+│   ├── r/ggplot2.yaml
+│   ├── julia/makie.yaml
+│   └── javascript/{chartjs,d3,echarts,highcharts,muix}.yaml
+└── implementations/       # Library implementations, grouped by language
+    ├── python/{matplotlib,seaborn,plotly,bokeh,altair,plotnine,pygal,letsplot}.py
+    ├── r/ggplot2.R
+    ├── julia/makie.jl
+    └── javascript/
+        ├── chartjs.js      # framework-agnostic JS libs are .js
+        ├── d3.js
+        ├── echarts.js
+        ├── highcharts.js
+        └── muix.tsx        # MUI X — React, authored as .tsx
 ```
 
 Example: `plots/scatter-basic/` contains everything for the basic scatter plot.
@@ -329,14 +336,16 @@ gs://anyplot-images/
 2. `impl-review.yml` reads from staging for AI evaluation
 3. `impl-merge.yml` promotes staging -> production when PR merges to main
 
-**Interactive libraries** (generate `.html`): plotly, bokeh, altair, highcharts, pygal, letsplot
+**Interactive libraries** (generate `.html`): plotly, bokeh, altair, highcharts, pygal, letsplot, chartjs, d3, echarts, muix
 **PNG only**: matplotlib, seaborn, plotnine, ggplot2, makie
 
 ## Tech Stack
 
 - **Backend**: FastAPI, SQLAlchemy (async), PostgreSQL, Python 3.13+
 - **Frontend**: React 19, Vite 8, TypeScript 6, MUI 9
-- **Plotting**: matplotlib, seaborn, plotly, bokeh, altair, plotnine, pygal, highcharts, lets-plot, ggplot2, Makie.jl
+- **Plotting (Python)**: matplotlib, seaborn, plotly, bokeh, altair, plotnine, pygal, lets-plot
+- **Plotting (R)**: ggplot2 · **Plotting (Julia)**: Makie.jl
+- **Plotting (JavaScript)**: Chart.js, D3.js, ECharts, Highcharts, MUI X Charts (React)
 - **Package Manager**: uv (fast Python installer)
 - **Infrastructure**: Google Cloud Run, Cloud SQL, Cloud Storage
 - **Automation**: GitHub Actions

api/routers/debug.py

@@ -111,14 +111,22 @@ class SpecStatusItem(BaseModel):
     title: str
     updated: str | None
     avg_score: float | None = None
-    # Library scores - None means no implementation
+    # Library scores - None means no implementation. One field per library in
+    # SUPPORTED_LIBRARIES (the values are populated via a dict-spread below, so
+    # this list must stay in sync with the registry — every supported library,
+    # including the JavaScript ones and the React muix entry, needs a field here
+    # or its column would silently disappear from the debug matrix).
     altair: float | None = None
     bokeh: float | None = None
+    chartjs: float | None = None
+    d3: float | None = None
+    echarts: float | None = None
     ggplot2: float | None = None
     highcharts: float | None = None
     letsplot: float | None = None
     makie: float | None = None
     matplotlib: float | None = None
+    muix: float | None = None
     plotly: float | None = None
     plotnine: float | None = None
     pygal: float | None = None
@@ -311,17 +319,10 @@ async def get_debug_status(request: Request, db: AsyncSession = Depends(require_
                 title=spec.title,
                 updated=most_recent.isoformat() if most_recent else None,
                 avg_score=round(avg_score, 1) if avg_score else None,
-                altair=spec_scores.get("altair"),
-                bokeh=spec_scores.get("bokeh"),
-                ggplot2=spec_scores.get("ggplot2"),
-                highcharts=spec_scores.get("highcharts"),
-                letsplot=spec_scores.get("letsplot"),
-                makie=spec_scores.get("makie"),
-                matplotlib=spec_scores.get("matplotlib"),
-                plotly=spec_scores.get("plotly"),
-                plotnine=spec_scores.get("plotnine"),
-                pygal=spec_scores.get("pygal"),
-                seaborn=spec_scores.get("seaborn"),
+                # One score field per supported library — spread so the set can
+                # never drift out of sync with the registry (the old hand-listed
+                # kwargs silently dropped chartjs/d3/echarts).
+                **{lib: spec_scores.get(lib) for lib in SUPPORTED_LIBRARIES},
             )
         )
 

api/routers/insights.py

@@ -180,9 +180,15 @@ class RelatedSpecsResponse(BaseModel):
 LIBRARY_NAMES = {
     "altair": "Altair",
     "bokeh": "Bokeh",
+    "chartjs": "Chart.js",
+    "d3": "D3.js",
+    "echarts": "Apache ECharts",
+    "ggplot2": "ggplot2",
     "highcharts": "Highcharts",
     "letsplot": "lets-plot",
+    "makie": "Makie.jl",
     "matplotlib": "Matplotlib",
+    "muix": "MUI X Charts",
     "plotly": "Plotly",
     "plotnine": "plotnine",
     "pygal": "Pygal",