[Docs] Rename docs_new/ to docs/ (#32123)

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

docs/src/snippets/_kimi_k3_mamba_ratio_calculator.jsx

@@ -0,0 +1,331 @@
+// Kimi-K3-only calculator, live-coupled to the Deploy panel: every parameter
+// except the average request length is derived from the effective config the
+// Playground broadcasts (base cell + Deploy overlays + Playground overrides),
+// and the computed --mamba-full-memory-ratio is broadcast back for the Deploy
+// panel to pin into its command.
+
+export const KimiK3MambaRatioCalculator = () => {
+  const [isDark, setIsDark] = useState(false);
+  const [requestLength, setRequestLength] = useState("11264");
+  const [copied, setCopied] = useState(false);
+  // Effective serving config; empty until the Playground's first broadcast
+  // (the parse below then falls back to the stock defaults: tp8, bf16 KV,
+  // fp32 state, extra_buffer, NOSPEC, no DCP).
+  const [cfg, setCfg] = useState({ flags: [], env: [], baseFlags: [], baseEnv: [] });
+
+  useEffect(() => {
+    const checkTheme = () => {
+      const html = document.documentElement;
+      setIsDark(
+        html.classList.contains("dark") ||
+          html.getAttribute("data-theme") === "dark" ||
+          html.style.colorScheme === "dark"
+      );
+    };
+    checkTheme();
+    const observer = new MutationObserver(checkTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme", "style"],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const onCfg = (e) =>
+      setCfg({
+        flags: (e.detail && e.detail.flags) || [],
+        env: (e.detail && e.detail.env) || [],
+        baseFlags: (e.detail && e.detail.baseFlags) || [],
+        baseEnv: (e.detail && e.detail.baseEnv) || [],
+      });
+    window.addEventListener("sglang-k3-effective-config", onCfg);
+    return () => window.removeEventListener("sglang-k3-effective-config", onCfg);
+  }, []);
+
+  const length = Number.parseFloat(requestLength);
+
+  // Derive the serving parameters from a flag/env list and evaluate the balance
+  // formula (measured dual-pool balance), written as a per-request cost ratio:
+  //
+  //   r = (S + D) x state_bytes / (L x per_token_kv_bytes)
+  //
+  // The state side (S main slots plus D verify intermediates) is per-GPU and
+  // never DCP-sharded. The KV side is per-GPU per logical token: DCP shards the
+  // MLA latent KV across its ranks, while the DSPARK draft model's own KV is
+  // replicated on every rank, so it stays a flat term. Without DCP the draft
+  // term is ~10% noise; once DCP shards MLA it is the same order as the MLA
+  // share, which is why it cannot be folded into a plain x dcp factor.
+  const derive = (flags, env) => {
+    const flagArg = (name) => {
+      for (const f of flags) {
+        const parts = f.split(/\s+/);
+        if (parts[0] === name) return parts[1];
+      }
+      return null;
+    };
+    const hasFlag = (name) => flags.some((f) => f.split(/[\s=]/)[0] === name);
+
+    const tp = Number(flagArg("--tp-size")) || 8;
+    const dp = hasFlag("--enable-dp-attention") ? Number(flagArg("--dp-size")) || 1 : 1;
+    // KDA state and the replicated MLA KV both live per attention-TP group.
+    // PP needs no term: it splits the layers of both pools equally.
+    const attnTp = Math.max(1, Math.round(tp / dp));
+    const dcp = Number(flagArg("--dcp-size")) || 1;
+    const kvDtype = flagArg("--kv-cache-dtype") === "fp8_e4m3" ? "fp8_e4m3" : "bfloat16";
+    const specOn = hasFlag("--speculative-algorithm");
+    const replaySpec = hasFlag("--enable-linear-replayssm-spec");
+    // ReplaySSM removes the D intermediate states but does NOT pin the state
+    // dtype: an unset --mamba-ssm-dtype defaults to fp32 either way, and an
+    // explicit 16-bit state is accepted (warned for drift), so read the flag.
+    const ssmFlag = flagArg("--mamba-ssm-dtype");
+    const ssmDtype =
+      ssmFlag === "bfloat16" || ssmFlag === "float16" ? ssmFlag : "float32";
+    const radixOff = hasFlag("--disable-radix-cache");
+    // "auto" (and anything unrecognized) resolves to extra_buffer.
+    const strategyFlag = flagArg("--mamba-radix-cache-strategy");
+    const strategy =
+      strategyFlag === "no_buffer" || strategyFlag === "extra_buffer_lazy"
+        ? strategyFlag
+        : "extra_buffer";
+    const skipLock = env.some((e) => e.startsWith("SGLANG_OPT_MAMBA_SKIP_DECODE_LOCK=1"));
+    const pdRole = flagArg("--disaggregation-mode");
+    // Pipeline parallelism is incompatible with the overlap scheduler, so pp > 1
+    // turns it off for you — and the track buffer then costs one slot, not two.
+    const overlapOff =
+      hasFlag("--disable-overlap-schedule") || (Number(flagArg("--pp-size")) || 1) > 1;
+    // Mirrors kv_cache_configurator._calculate_mamba_ratio: base 3, minus 1 under
+    // the decode-lock skip, plus the ping-pong track buffer (2 under the overlap
+    // scheduler, 1 for lazy or without overlap). no_buffer has no track buffer and
+    // adds the skip's drop back, so it stays 3; a disabled radix cache is 1.
+    // A PD decode server runs a chunk cache: one live slot per request, and the
+    // radix-strategy knobs are inert there.
+    const slots = pdRole === "decode"
+      ? 1
+      : radixOff
+        ? 1
+        : strategy === "no_buffer"
+          ? 3
+          : 3 -
+            (skipLock ? 1 : 0) +
+            (overlapOff || strategy === "extra_buffer_lazy" ? 1 : 2);
+    const block = Number(flagArg("--speculative-dspark-block-size")) || 7;
+    const drafts = specOn && !replaySpec && pdRole !== "prefill" ? block + 1 : 0;
+
+    const ssmBytes = ssmDtype === "float32" ? 4 : 2;
+    const kvBytes = kvDtype === "fp8_e4m3" ? 1 : 2;
+    // Fixed K3 geometry:
+    // KDA: 69 layers, 96 heads, head_dim 128, conv kernel 4 (conv state always bf16).
+    // MLA: 24 layers, kv_lora_rank 512, qk_rope_head_dim 64.
+    const stateBytesPerSlot =
+      69 * ((96 / attnTp) * 128 * 128 * ssmBytes + 3 * 3 * (96 / attnTp) * 128 * 2);
+    const kvBytesPerToken = 24 * (512 + 64) * kvBytes;
+    // DCP shards the MLA latent KV across its ranks; the DSPARK draft model's KV
+    // is replicated on every rank (~1.4 KB/token on trtllm_mha), so it does not
+    // shard and is added flat.
+    const draftKvBytesPerToken = specOn ? 1400 : 0;
+    const kvBytesPerTokenPerRank = kvBytesPerToken / dcp + draftKvBytesPerToken;
+    const ratio =
+      ((slots + drafts) * stateBytesPerSlot) / (kvBytesPerTokenPerRank * length);
+    return { ratio, tp, dp, attnTp, dcp, kvDtype, ssmDtype, radixOff, strategy, skipLock, slots, specOn, replaySpec, block, pdRole };
+  };
+
+  // Two evaluations: `eff` matches the Playground's composed command, `bs`
+  // matches the Deploy command (cell + overlays only).
+  const eff = derive(cfg.flags, cfg.env);
+  const bs = derive(cfg.baseFlags.length ? cfg.baseFlags : cfg.flags,
+                    cfg.baseFlags.length ? cfg.baseEnv : cfg.env);
+  const { ratio, tp, dp, attnTp, dcp, kvDtype, ssmDtype, radixOff, strategy, skipLock, slots, specOn, replaySpec, block, pdRole } = eff;
+  const valid = Number.isFinite(ratio) && ratio > 0 && length > 0 && 96 % attnTp === 0;
+  const baseValid = Number.isFinite(bs.ratio) && bs.ratio > 0 && length > 0;
+
+  const formatRatio = (value) => {
+    if (!Number.isFinite(value)) return "—";
+    if (value >= 10) return value.toFixed(1).replace(/\.0$/, "");
+    if (value >= 1) return value.toFixed(2).replace(/\.?0+$/, "");
+    return Number(value.toPrecision(2)).toString();
+  };
+
+  const result = valid ? formatRatio(ratio) : "—";
+  const baseResult = baseValid ? formatRatio(bs.ratio) : "—";
+  const cliFlag = valid ? `--mamba-full-memory-ratio ${result}` : "";
+
+  // Broadcast both results: the Deploy command takes the base-config value,
+  // the Playground's composed command takes the effective one.
+  useEffect(() => {
+    window.dispatchEvent(
+      new CustomEvent("sglang-k3-mamba-ratio", {
+        detail: {
+          ratio: valid ? result : null,
+          baseRatio: baseValid ? baseResult : null,
+        },
+      })
+    );
+  }, [result, valid, baseResult, baseValid]);
+
+  const copyFlag = () => {
+    if (!cliFlag || typeof navigator === "undefined" || !navigator.clipboard) return;
+    navigator.clipboard.writeText(cliFlag);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1600);
+  };
+
+  const colors = {
+    border: isDark ? "#374151" : "#e5e7eb",
+    panel: isDark ? "#1f2937" : "#ffffff",
+    input: isDark ? "#111827" : "#f8fafc",
+    text: isDark ? "#e5e7eb" : "#1f2937",
+    muted: isDark ? "#9ca3af" : "#64748b",
+    accent: isDark ? "#E85D4D" : "#D45D44",
+    error: isDark ? "#fca5a5" : "#b91c1c",
+  };
+
+  const inputStyle = {
+    width: "100%",
+    boxSizing: "border-box",
+    padding: "8px 10px",
+    border: `1px solid ${colors.border}`,
+    borderRadius: "5px",
+    background: colors.input,
+    color: colors.text,
+    fontSize: "13px",
+  };
+  const labelStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "5px",
+    fontSize: "12px",
+    fontWeight: 600,
+  };
+  const chipStyle = {
+    padding: "3px 9px",
+    border: `1px solid ${colors.border}`,
+    borderRadius: "999px",
+    background: colors.input,
+    color: colors.text,
+    fontSize: "12px",
+    whiteSpace: "nowrap",
+  };
+
+  const specLabel = !specOn
+    ? "NOSPEC"
+    : replaySpec
+      ? "DSPARK + ReplaySSM (D folded)"
+      : `DSPARK (D = ${block + 1})`;
+  const derivedChips = [
+    // With DP attention on, show the whole topology so a large-scale preset is
+    // visibly understood: total GPUs = DP replicas x attention-TP group width.
+    dp > 1
+      ? `${tp} GPUs = DP ${dp} × Attention TP ${attnTp}`
+      : `Attention TP ${attnTp}`,
+    `DCP ${dcp}`,
+    `KV ${kvDtype === "fp8_e4m3" ? "FP8" : "BF16"}`,
+    `State ${ssmDtype === "float32" ? "FP32" : ssmDtype === "bfloat16" ? "BF16" : "FP16"}`,
+    pdRole === "decode"
+      ? "PD decode: chunk cache (S = 1)"
+      : radixOff
+        ? "Radix off (S = 1)"
+        : `${strategy}${skipLock ? " + slot saving" : ""} (S = ${slots})`,
+    pdRole === "prefill" ? "PD prefill (no verify states)" : null,
+    specLabel,
+  ].filter(Boolean);
+
+  return (
+    <div
+      className="not-prose"
+      style={{
+        display: "grid",
+        gap: "12px",
+        padding: "14px",
+        border: `1px solid ${colors.border}`,
+        borderRadius: "8px",
+        background: colors.panel,
+        color: colors.text,
+      }}
+    >
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "minmax(180px, 260px) 1fr",
+          gap: "14px",
+          alignItems: "start",
+        }}
+      >
+        <label htmlFor="k3-ratio-length" style={labelStyle}>
+          Average request length
+          <input
+            id="k3-ratio-length"
+            type="number"
+            min="1"
+            step="1"
+            value={requestLength}
+            onChange={(event) => setRequestLength(event.target.value)}
+            style={inputStyle}
+          />
+          <span style={{ color: colors.muted, fontSize: "11px", fontWeight: 400 }}>
+            Input + output tokens — the only free parameter
+          </span>
+        </label>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
+          <span style={{ fontSize: "12px", fontWeight: 600 }}>
+            Serving configuration (follows the Deploy panel and Playground)
+          </span>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "6px" }}>
+            {derivedChips.map((c) => (
+              <span key={c} style={chipStyle}>{c}</span>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {!valid ? (
+        <div style={{ color: colors.error, fontSize: "12px" }}>
+          Enter a valid request length.
+        </div>
+      ) : (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "12px",
+            paddingTop: "12px",
+            borderTop: `1px solid ${colors.border}`,
+            flexWrap: "wrap",
+          }}
+        >
+          <div>
+            <div style={{ color: colors.muted, fontSize: "11px" }}>
+              Balanced ratio — pinned into the commands above
+            </div>
+            <div style={{ fontSize: "26px", fontWeight: 700 }}>{result}</div>
+            {baseResult !== result ? (
+              <div style={{ color: colors.muted, fontSize: "11px" }}>
+                Deploy command (without Playground overrides): {baseResult}
+              </div>
+            ) : null}
+          </div>
+          <code style={{ flex: 1, minWidth: "240px", color: colors.text }}>
+            {cliFlag}
+          </code>
+          <button
+            type="button"
+            onClick={copyFlag}
+            style={{
+              padding: "7px 11px",
+              border: 0,
+              borderRadius: "5px",
+              background: colors.accent,
+              color: "#ffffff",
+              fontSize: "12px",
+              fontWeight: 600,
+              cursor: "pointer",
+            }}
+          >
+            {copied ? "Copied" : "Copy flag"}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};

docs/src/snippets/_popular_models.jsx

@@ -0,0 +1,458 @@
+// Auto-rotating carousel over the shared list in
+// /src/snippets/configs/popular-models.jsx:
+//
+//   <PopularModels models={popularModels} variant="hero" />   // docs home
+//   <PopularModels models={popularModels} />                  // cookbook home
+//
+//   variant="hero"   full-width banner per model — headline, blurb, tags, CTA,
+//                    brand tile, from the entry's `hero` block.
+//   variant="strip"  (default) one compact line per model — brand mark, name,
+//                    tags, "Open" button. No prose; the tags carry the pitch.
+//
+// Rotation pauses on hover/focus and is skipped under prefers-reduced-motion.
+//
+// One export for both shapes: Mintlify evaluates each exported component on its
+// own at hydration, so anything two components would share (rotation state, the
+// timer, the control cluster) has to sit inside one — module-level helpers are
+// out of scope by the time this runs.
+
+export const PopularModels = ({
+  models = [],
+  variant = "strip",
+  // A hero blurb takes longer to read than one line of tags.
+  interval = variant === "hero" ? 9000 : 6000,
+  label = "Popular models",
+}) => {
+  const [index, setIndex] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const [reduceMotion, setReduceMotion] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const sync = () => setReduceMotion(mq.matches);
+    sync();
+    mq.addEventListener("change", sync);
+    return () => mq.removeEventListener("change", sync);
+  }, []);
+
+  const count = models.length;
+  const isHero = variant === "hero";
+
+  // Functional update so the timer never closes over a stale index.
+  useEffect(() => {
+    if (count < 2 || paused || reduceMotion) return;
+    const id = window.setInterval(
+      () => setIndex((i) => (i + 1) % count),
+      Math.max(2000, interval)
+    );
+    return () => window.clearInterval(id);
+  }, [count, paused, reduceMotion, interval]);
+
+  // A shortened list must not leave the track parked past its last slide.
+  const active = count ? Math.min(index, count - 1) : 0;
+
+  if (!count) return null;
+
+  const navButtonStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "1.15rem",
+    height: "1.15rem",
+    padding: 0,
+    border: "1px solid rgba(255, 255, 255, 0.28)",
+    borderRadius: "999px",
+    background: "rgba(255, 255, 255, 0.1)",
+    color: "rgba(255, 255, 255, 0.92)",
+    fontSize: "0.8rem",
+    lineHeight: 1,
+    cursor: "pointer",
+  };
+
+  const controls =
+    count > 1 ? (
+      <span style={{ display: "inline-flex", alignItems: "center", gap: "0.45rem" }}>
+        <button
+          type="button"
+          onClick={() => setIndex((i) => (i - 1 + count) % count)}
+          aria-label="Previous model"
+          style={navButtonStyle}
+        >
+          ‹
+        </button>
+        <span style={{ display: "inline-flex", alignItems: "center", gap: "0.3rem" }}>
+          {models.map((m, i) => (
+            <button
+              key={m.href || m.name}
+              type="button"
+              onClick={() => setIndex(i)}
+              aria-label={`Show ${m.name}`}
+              aria-current={i === active ? "true" : undefined}
+              style={{
+                width: i === active ? "1.1rem" : "0.4rem",
+                height: "0.4rem",
+                padding: 0,
+                border: 0,
+                borderRadius: "999px",
+                background:
+                  i === active ? "rgba(255, 255, 255, 0.92)" : "rgba(255, 255, 255, 0.34)",
+                cursor: "pointer",
+                transition: reduceMotion
+                  ? "none"
+                  : "width 0.25s ease, background 0.25s ease",
+              }}
+            />
+          ))}
+        </span>
+        <button
+          type="button"
+          onClick={() => setIndex((i) => (i + 1) % count)}
+          aria-label="Next model"
+          style={navButtonStyle}
+        >
+          ›
+        </button>
+      </span>
+    ) : null;
+
+  // Only the active slide is opaque: mid-slide, a visible neighbour reads as two
+  // half-drawn cards rather than as motion.
+  const slideStyle = (i) => ({
+    flex: "0 0 100%",
+    minWidth: 0,
+    opacity: i === active ? 1 : 0,
+    pointerEvents: i === active ? "auto" : "none",
+    transition: reduceMotion ? "none" : "opacity 0.3s ease",
+  });
+
+  const tagChip = (t, big) => (
+    <span
+      key={t}
+      style={{
+        padding: big ? "0.35rem 0.65rem" : "0.15rem 0.45rem",
+        borderRadius: "999px",
+        background: big ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.12)",
+        color: "rgba(255, 255, 255, 0.9)",
+        fontSize: big ? "0.78rem" : "0.68rem",
+        fontWeight: 650,
+        whiteSpace: big ? "normal" : "nowrap",
+      }}
+    >
+      {t}
+    </span>
+  );
+
+  const heroSlide = (m, i) => {
+    const hero = m.hero || {};
+    const cta = hero.cta || `Open the ${m.name} cookbook`;
+    return (
+      <div key={m.href || m.name} aria-hidden={i === active ? undefined : "true"} style={slideStyle(i)}>
+        <div
+          style={{
+            display: "flex",
+            flexWrap: "wrap",
+            alignItems: "center",
+            gap: "clamp(1.25rem, 3vw, 2rem)",
+          }}
+        >
+          <div style={{ flex: "1 1 24rem", minWidth: 0 }}>
+            <a
+              href={m.href}
+              tabIndex={i === active ? undefined : -1}
+              style={{
+                display: "block",
+                margin: 0,
+                color: "#ffffff",
+                fontSize: "clamp(1.75rem, 4vw, 2.65rem)",
+                fontWeight: 750,
+                lineHeight: 1.08,
+                letterSpacing: "-0.035em",
+                textDecoration: "none",
+              }}
+            >
+              {hero.headline || m.name}
+            </a>
+            {hero.blurb ? (
+              // A div, not a p: MDX rewrites `p` to its own inline element, so a
+              // paragraph here would depend on how that element is styled.
+              <div
+                style={{
+                  maxWidth: "48rem",
+                  margin: "1rem 0 0",
+                  color: "rgba(255, 255, 255, 0.82)",
+                  fontSize: "1rem",
+                  lineHeight: 1.65,
+                }}
+              >
+                {hero.blurb}
+              </div>
+            ) : null}
+            <div
+              style={{
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "0.5rem",
+                marginTop: "1.15rem",
+              }}
+            >
+              {(hero.tags || m.tags || []).map((t) => tagChip(t, true))}
+            </div>
+            <a
+              href={m.href}
+              tabIndex={i === active ? undefined : -1}
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                marginTop: "1.35rem",
+                padding: "0.7rem 1rem",
+                borderRadius: "0.55rem",
+                background: "#ffffff",
+                color: "#7c2d12",
+                fontSize: "0.88rem",
+                fontWeight: 750,
+                textDecoration: "none",
+              }}
+            >
+              {cta}&nbsp;→
+            </a>
+          </div>
+          <a
+            href={m.href}
+            aria-label={cta}
+            tabIndex={i === active ? undefined : -1}
+            style={{
+              flex: "0 1 12rem",
+              minWidth: "10rem",
+              padding: "0.8rem",
+              border: "1px solid rgba(255, 255, 255, 0.22)",
+              borderRadius: "0.9rem",
+              background: "rgba(255, 255, 255, 0.96)",
+              boxShadow: "0 16px 35px rgba(0, 0, 0, 0.22)",
+              textDecoration: "none",
+            }}
+          >
+            <div
+              role="img"
+              aria-label={m.vendor || m.name}
+              style={{
+                width: "100%",
+                aspectRatio: "16 / 9",
+                borderRadius: "0.45rem",
+                backgroundColor: "#ffffff",
+                backgroundImage: `url('${m.logo}')`,
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+                backgroundSize: "cover",
+              }}
+            />
+            {hero.caption ? (
+              <div
+                style={{
+                  padding: "0.65rem 0.35rem 0.2rem",
+                  color: "#111827",
+                  textAlign: "center",
+                  fontSize: "0.78rem",
+                  fontWeight: 750,
+                  letterSpacing: "0.06em",
+                  textTransform: "uppercase",
+                }}
+              >
+                {hero.caption}
+              </div>
+            ) : null}
+          </a>
+        </div>
+      </div>
+    );
+  };
+
+  const stripSlide = (m, i) => (
+    <a
+      key={m.href || m.name}
+      href={m.href}
+      aria-hidden={i === active ? undefined : "true"}
+      tabIndex={i === active ? undefined : -1}
+      style={{
+        ...slideStyle(i),
+        display: "flex",
+        alignItems: "center",
+        gap: "0.75rem",
+        color: "#ffffff",
+        textDecoration: "none",
+      }}
+    >
+      <span
+        role="img"
+        aria-label={m.vendor || m.name}
+        style={{
+          flex: "0 0 auto",
+          width: "3.4rem",
+          aspectRatio: "16 / 9",
+          borderRadius: "0.35rem",
+          border: "1px solid rgba(255, 255, 255, 0.22)",
+          backgroundColor: "#ffffff",
+          backgroundImage: `url('${m.logo}')`,
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat",
+          backgroundSize: "cover",
+        }}
+      />
+
+      <span style={{ flex: "1 1 auto", minWidth: 0 }}>
+        <span style={{ display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.4rem" }}>
+          <span
+            style={{
+              fontSize: "1.02rem",
+              fontWeight: 750,
+              letterSpacing: "-0.02em",
+              lineHeight: 1.2,
+            }}
+          >
+            {m.name}
+          </span>
+          {m.badge ? (
+            <span
+              style={{
+                padding: "0.1rem 0.4rem",
+                borderRadius: "999px",
+                background: "rgba(255, 255, 255, 0.92)",
+                color: "#7c2d12",
+                fontSize: "0.6rem",
+                fontWeight: 800,
+                letterSpacing: "0.06em",
+                textTransform: "uppercase",
+              }}
+            >
+              {m.badge}
+            </span>
+          ) : null}
+        </span>
+
+        <span style={{ display: "flex", flexWrap: "wrap", gap: "0.3rem", marginTop: "0.35rem" }}>
+          {(m.tags || []).map((t) => tagChip(t, false))}
+        </span>
+      </span>
+
+      <span
+        style={{
+          flex: "0 0 auto",
+          padding: "0.25rem 0.55rem",
+          borderRadius: "0.4rem",
+          background: "rgba(255, 255, 255, 0.92)",
+          color: "#7c2d12",
+          fontSize: "0.7rem",
+          fontWeight: 750,
+          whiteSpace: "nowrap",
+        }}
+      >
+        Open&nbsp;→
+      </span>
+    </a>
+  );
+
+  return (
+    <div className="not-prose">
+      <div
+        onMouseEnter={() => setPaused(true)}
+        onMouseLeave={() => setPaused(false)}
+        onFocus={() => setPaused(true)}
+        onBlur={() => setPaused(false)}
+        aria-roledescription="carousel"
+        aria-label={label}
+        style={{
+          position: "relative",
+          overflow: "hidden",
+          margin: isHero ? "0 0 1.5rem" : "1.5rem 0",
+          padding: isHero ? "clamp(1.5rem, 4vw, 2.5rem)" : "0.8rem 1rem 0.9rem",
+          border: "1px solid rgba(251, 146, 60, 0.35)",
+          borderRadius: isHero ? "1rem" : "0.9rem",
+          background: "linear-gradient(135deg, #111827 0%, #31202f 58%, #9a3412 100%)",
+          boxShadow: isHero
+            ? "0 20px 45px rgba(17, 24, 39, 0.18)"
+            : "0 14px 32px rgba(17, 24, 39, 0.16)",
+          color: "#ffffff",
+        }}
+      >
+        <div
+          aria-hidden="true"
+          style={{
+            position: "absolute",
+            top: isHero ? "-7rem" : "-6rem",
+            right: isHero ? "-5rem" : "-4rem",
+            width: isHero ? "18rem" : "14rem",
+            height: isHero ? "18rem" : "14rem",
+            borderRadius: "999px",
+            background: "rgba(251, 146, 60, 0.18)",
+            filter: "blur(2px)",
+          }}
+        />
+
+        {/* Header line: label on the left, controls on the right. The hero's
+            label is the active entry's eyebrow, so it lives here rather than in
+            the slide — a floating control cluster would collide with a wide
+            eyebrow badge once the card narrows. */}
+        <div
+          style={{
+            position: "relative",
+            zIndex: 1,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "0.75rem",
+            flexWrap: "wrap",
+            marginBottom: isHero ? "0.9rem" : "0.6rem",
+          }}
+        >
+          <span
+            style={
+              isHero
+                ? {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: "0.45rem",
+                    padding: "0.35rem 0.7rem",
+                    border: "1px solid rgba(255, 255, 255, 0.28)",
+                    borderRadius: "999px",
+                    background: "rgba(255, 255, 255, 0.1)",
+                    fontSize: "0.72rem",
+                    fontWeight: 750,
+                    letterSpacing: "0.08em",
+                    textTransform: "uppercase",
+                  }
+                : {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: "0.35rem",
+                    color: "rgba(255, 255, 255, 0.78)",
+                    fontSize: "0.66rem",
+                    fontWeight: 750,
+                    letterSpacing: "0.1em",
+                    textTransform: "uppercase",
+                  }
+            }
+          >
+            <span aria-hidden="true">✦</span>
+            {isHero
+              ? ((models[active] || {}).hero || {}).eyebrow || label
+              : label}
+          </span>
+          {controls}
+        </div>
+
+        <div style={{ position: "relative", zIndex: 1, overflow: "hidden" }}>
+          <div
+            style={{
+              display: "flex",
+              alignItems: isHero ? "stretch" : "center",
+              transform: `translateX(-${active * 100}%)`,
+              transition: reduceMotion ? "none" : "transform 0.45s ease",
+            }}
+          >
+            {models.map((m, i) => (isHero ? heroSlide(m, i) : stripSlide(m, i)))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/deepseek-math-v2-deployment.jsx

@@ -0,0 +1,366 @@
+export const DeepSeekMathV2Deployment = () => {
+  const modelFamily = 'deepseek-ai';
+
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'b200', label: 'B200', subtitle: '183GB', default: true },
+        { id: 'b300', label: 'B300', subtitle: '275GB', default: false }
+      ]
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled', label: 'Enabled', default: true }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--reasoning-parser deepseek-r1' : null
+    },
+    dpattention: {
+      name: 'dpattention',
+      title: 'DP Attention',
+      items: [
+        { id: 'disabled', label: 'Disabled', subtitle: 'Low Latency', default: true },
+        { id: 'enabled', label: 'Enabled', subtitle: 'High Throughput', default: false }
+      ],
+      commandRule: null
+    }
+  };
+
+  // BF16 only, B200/B300 tp=8
+  const modelConfigs = {
+    b200: { bf16: { tp: 8, mem: null } },
+    b300: { bf16: { tp: 8, mem: null } }
+  };
+
+  const generateCommand = (values) => {
+    const { hardware } = values;
+
+    const modelName = `${modelFamily}/DeepSeek-Math-V2`;
+
+    const hwConfig = modelConfigs[hardware].bf16;
+    const tpValue = hwConfig.tp;
+    const memFraction = hwConfig.mem;
+
+    let cmd = 'sglang serve --model-path';
+    cmd += ` ${modelName}`;
+
+    // TP setting
+    cmd += ` \\\n  --tp ${tpValue}`;
+
+    // DP Attention: --dp matches --tp
+    if (values.dpattention === 'enabled') {
+      cmd += ` \\\n  --dp ${tpValue} \\\n  --enable-dp-attention`;
+    }
+
+    // EP setting (commonly matches tp for MoE models)
+    cmd += ` \\\n  --ep ${tpValue}`;
+
+    // Apply commandRule from all options
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.commandRule) {
+        const rule = option.commandRule(values[key]);
+        if (rule) {
+          cmd += ` \\\n  ${rule}`;
+        }
+      }
+    });
+
+    // Memory fraction based on hardware and quantization (skip for 8-card configs)
+    if (memFraction) {
+      cmd += ` \\\n  --mem-fraction-static ${memFraction}`;
+    }
+    if (hardware === 'b300') {
+      cmd += ' \\\n  --attention-backend flashinfer';
+      if (values.dpattention !== 'enabled') {
+        cmd += ' \\\n  --enforce-disable-flashinfer-allreduce-fusion';
+        cmd += ' \\\n  --cuda-graph-backend-prefill disabled';
+      }
+    }
+
+    cmd += ' \\\n  --host 0.0.0.0 \\\n  --port 30000';
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/deepseek-ocr-deployment.jsx

@@ -0,0 +1,188 @@
+export const DeepSeekOCRDeployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'mi300x', label: 'MI300X', default: true },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false },
+        { id: 'xeon', label: 'XEON', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'fp16', label: 'FP16', default: true }
+      ]
+    },
+    strategy: {
+      name: 'strategy',
+      title: 'Deployment Strategy',
+      type: 'checkbox',
+      items: [
+        { id: 'tp', label: 'TP', subtitle: 'Tensor Parallel', default: true, required: true },
+        { id: 'dp', label: 'DP', subtitle: 'Data Parallel', default: false, disabledWhen: (v) => v.hardware === 'xeon', disabledReason: 'Intel Xeon CPUs only support Tensor Parallel (TP)' },
+        { id: 'ep', label: 'EP', subtitle: 'Expert Parallel', default: false, disabledWhen: (v) => v.hardware === 'xeon', disabledReason: 'Intel Xeon CPUs only support Tensor Parallel (TP)' }
+      ]
+    }
+  };
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = option.items.filter(item => item.default).map(item => item.id);
+      } else {
+        const defaultItem = option.items.find(item => item.default);
+        initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+      }
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode - prioritize page theme over system preference
+  useEffect(() => {
+    const checkDarkMode = () => {
+      // Check Mintlify's theme class on html element
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => {
+      const next = { ...prev, [optionName]: value };
+      if (optionName === 'hardware') {
+        const strategyItems = options.strategy.items || [];
+        const current = Array.isArray(next.strategy) ? next.strategy : [];
+        next.strategy = current.filter(id => {
+          const item = strategyItems.find(s => s.id === id);
+          if (!item) return false;
+          if (typeof item.disabledWhen === 'function' && item.disabledWhen(next)) return false;
+          return true;
+        });
+      }
+      return next;
+    });
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues(prev => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      } else {
+        return { ...prev, [optionName]: currentValues.filter(id => id !== itemId) };
+      }
+    });
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, quantization, strategy } = values;
+    const strategyArray = Array.isArray(strategy) ? strategy : [];
+
+    // Validation checks
+    // Check MI300X compatibility - MI300X + DeepSeek-OCR only supports FP16 quantization
+    if ((hardware === 'mi300x') && quantization !== 'fp16') {
+      return '# Error: MI300X + DeepSeek-OCR only supports FP16 quantization\n# Please select FP16 quantization';
+    }
+
+    // Model path
+    let modelPath = 'deepseek-ai/DeepSeek-OCR';
+
+    let cmd = 'python3 -m sglang.launch_server \\\n';
+    cmd += `  --model-path ${modelPath}`;
+    if (hardware === 'xeon') {
+      cmd += ` \\\n  --device cpu \\\n  --disable-overlap-schedule`;
+    }
+    cmd += ` \\\n  --dtype float16`;
+
+    // TP strategy
+    if (strategyArray.includes('tp')) {
+      cmd += ` \\\n  --tp 1`;
+    }
+
+    // DP strategy
+    if (strategyArray.includes('dp')) {
+      cmd += ` \\\n  --dp 1 \\\n  --enable-dp-attention`;
+    }
+
+    // EP strategy
+    if (strategyArray.includes('ep')) {
+      cmd += ` \\\n  --ep 1`;
+    }
+
+    if (hardware !== 'xeon') {
+      cmd += ` \\\n  --enable-symm-mem # Optional: improves performance, but may be unstable`;
+    }
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const dynDisabled = typeof item.disabledWhen === 'function' && item.disabledWhen(values);
+                const isDisabled = item.required || dynDisabled;
+		return (
+                  <label key={item.id} title={item.disabledReason || (dynDisabled ? 'Not supported on the selected hardware' : '')} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isDisabled} onChange={(e) => !dynDisabled && handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+              option.items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}) }}>
+                    <input type="radio" name={option.name} value={item.id} checked={isChecked} onChange={() => handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/deepseek-ocr-v2-deployment.jsx

@@ -0,0 +1,359 @@
+export const DeepSeekOCR2Deployment = () => {
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200', label: 'H200', default: true },
+        { id: 'b200', label: 'B200', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false },
+        { id: 'xeon', label: 'XEON', default: false },
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'fp16', label: 'FP16', default: true },
+      ]
+    },
+    strategy: {
+      name: 'strategy',
+      title: 'Deployment Strategy',
+      type: 'checkbox',
+      items: [
+        { id: 'tp', label: 'TP', subtitle: 'Tensor Parallel', default: true, required: true },
+        { id: 'dp', label: 'DP', subtitle: 'Data Parallel', default: false, disabledWhen: (v) => v.hardware === 'xeon', disabledReason: 'Intel Xeon CPUs only support Tensor Parallel (TP)' },
+        { id: 'ep', label: 'EP', subtitle: 'Expert Parallel', default: false, disabledWhen: (v) => v.hardware === 'xeon', disabledReason: 'Intel Xeon CPUs only support Tensor Parallel (TP)' }
+      ]
+    },
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, strategy } = values;
+
+    const strategyArray = Array.isArray(strategy) ? strategy : [];
+
+    let modelPath = 'deepseek-ai/DeepSeek-OCR-2';
+
+    let cmd = 'sglang serve \\\n';
+    cmd += `  --model-path ${modelPath}`;
+    if (hardware === 'xeon') {
+      cmd += ` \\\n  --device cpu \\\n  --disable-overlap-schedule \\\n  --trust-remote-code`;
+    }
+    cmd += ` \\\n  --enable-multimodal`;
+
+    if (strategyArray.includes('tp')) {
+      cmd += ` \\\n  --tp 1`;
+    }
+
+    if (strategyArray.includes('dp')) {
+      cmd += ` \\\n  --dp 1 \\\n  --enable-dp-attention`;
+    }
+
+    if (strategyArray.includes('ep')) {
+      cmd += ` \\\n  --ep 1`;
+    }
+
+    if (hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi355x') {
+      cmd += ` \\\n  --attention-backend triton` + ` \\\n  --trust-remote-code`;
+    }
+
+    cmd += ` \\\n  --host 0.0.0.0 \\\n  --port 30000`;
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => {
+      const next = { ...prev, [optionName]: value };
+      if (optionName === 'hardware') {
+        const strategyItems = options.strategy.items || [];
+        const current = Array.isArray(next.strategy) ? next.strategy : [];
+        next.strategy = current.filter((id) => {
+          const item = strategyItems.find((s) => s.id === id);
+          if (!item) return false;
+          if (typeof item.disabledWhen === 'function' && item.disabledWhen(next)) return false;
+          return true;
+        });
+      }
+      return next;
+    });
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/deepseek-r1-advanced-deployment.jsx

@@ -0,0 +1,922 @@
+export const DeepSeekR1AdvancedDeployment = () => {
+const lookupData = {
+  "model": "deepseek-r1",
+  "version": "v0.5.6",
+  "ui_options": {
+    "hardware": [
+      {
+        "id": "b200",
+        "label": "B200",
+        "default": true
+      },
+      {
+        "id": "b300",
+        "label": "B300",
+        "default": false
+      },
+      {
+        "id": "h200",
+        "label": "H200",
+        "default": false
+      },
+      {
+        "id": "mi300x",
+        "label": "MI300X",
+        "default": false
+      },
+      {
+        "id": "mi325x",
+        "label": "MI325X",
+        "default": false
+      },
+      {
+        "id": "mi355x",
+        "label": "MI355X",
+        "default": false
+      }
+    ],
+    "quantization": [
+      {
+        "id": "fp8",
+        "label": "FP8",
+        "default": true
+      },
+      {
+        "id": "fp4",
+        "label": "FP4",
+        "default": false
+      }
+    ],
+    "scenario": [
+      {
+        "id": "low-latency",
+        "label": "Low Latency",
+        "subtitle": "Concurrency 4-8",
+        "default": true
+      },
+      {
+        "id": "high-throughput",
+        "label": "High Throughput",
+        "subtitle": "Concurrency 16-128",
+        "default": false
+      }
+    ],
+    "gpu_count": [
+      {
+        "id": 4,
+        "label": "4 GPUs",
+        "default": false
+      },
+      {
+        "id": 8,
+        "label": "8 GPUs",
+        "default": true
+      }
+    ]
+  },
+  "configs": [
+    {
+      "hardware": "b200",
+      "quantization": "fp4",
+      "gpu_count": 4,
+      "scenario": "low-latency",
+      "parameters": {
+        "model_path": "nvidia/DeepSeek-R1-0528-FP4-v2",
+        "tensor_parallel_size": 4,
+        "cuda_graph_max_bs_decode": 256,
+        "max_running_requests": 256,
+        "mem_fraction_static": 0.85,
+        "ep_size": 4,
+        "scheduler_recv_interval": 10,
+        "enable_symm_mem": true,
+        "stream_interval": 10
+      }
+    },
+    {
+      "hardware": "b200",
+      "quantization": "fp4",
+      "gpu_count": 4,
+      "scenario": "high-throughput",
+      "parameters": {
+        "model_path": "nvidia/DeepSeek-R1-0528-FP4-v2",
+        "tensor_parallel_size": 4,
+        "cuda_graph_max_bs_decode": 256,
+        "max_running_requests": 256,
+        "mem_fraction_static": 0.85,
+        "ep_size": 4,
+        "scheduler_recv_interval": 30,
+        "enable_symm_mem": true,
+        "stream_interval": 10
+      }
+    },
+    {
+      "hardware": "b200",
+      "quantization": "fp4",
+      "gpu_count": 8,
+      "scenario": "low-latency",
+      "parameters": {
+        "model_path": "nvidia/DeepSeek-R1-0528-FP4-v2",
+        "tensor_parallel_size": 8,
+        "cuda_graph_max_bs_decode": 256,
+        "max_running_requests": 256,
+        "mem_fraction_static": 0.85,
+        "kv_cache_dtype": "fp8_e4m3",
+        "chunked_prefill_size": 16384,
+        "ep_size": 8,
+        "scheduler_recv_interval": 10,
+        "enable_symm_mem": true,
+        "stream_interval": 10
+      }
+    },
+    {
+      "hardware": "b200",
+      "quantization": "fp4",
+      "gpu_count": 8,
+      "scenario": "high-throughput",
+      "parameters": {
+        "model_path": "nvidia/DeepSeek-R1-0528-FP4-v2",
+        "tensor_parallel_size": 8,
+        "cuda_graph_max_bs_decode": 256,
+        "max_running_requests": 256,
+        "mem_fraction_static": 0.85,
+        "kv_cache_dtype": "fp8_e4m3",
+        "chunked_prefill_size": 16384,
+        "ep_size": 8,
+        "scheduler_recv_interval": 30,
+        "enable_symm_mem": true,
+        "stream_interval": 10
+      }
+    },
+    {
+      "hardware": "b200",
+      "quantization": "fp8",
+      "gpu_count": 8,
+      "scenario": "low-latency",
+      "parameters": {
+        "env_vars": "SGLANG_ENABLE_JIT_DEEPGEMM=false",
+        "model_path": "deepseek-ai/DeepSeek-R1-0528",
+        "tensor_parallel_size": 8,
+        "cuda_graph_max_bs_decode": 128,
+        "max_running_requests": 128,
+        "mem_fraction_static": 0.82,
+        "kv_cache_dtype": "fp8_e4m3",
+        "chunked_prefill_size": 32768,
+        "max_prefill_tokens": 32768,
+        "scheduler_recv_interval": 10,
+        "stream_interval": 30,
+        "fp8_gemm_backend": "flashinfer_trtllm"
+      }
+    },
+    {
+      "hardware": "b200",
+      "quantization": "fp8",
+      "gpu_count": 8,
+      "scenario": "high-throughput",
+      "parameters": {
+        "env_vars": "SGLANG_ENABLE_JIT_DEEPGEMM=false",
+        "model_path": "deepseek-ai/DeepSeek-R1-0528",
+        "tensor_parallel_size": 8,
+        "cuda_graph_max_bs_decode": 128,
+        "max_running_requests": 128,
+        "mem_fraction_static": 0.82,
+        "kv_cache_dtype": "fp8_e4m3",
+        "chunked_prefill_size": 32768,
+        "max_prefill_tokens": 32768,
+        "scheduler_recv_interval": 30,
+        "stream_interval": 30,
+        "fp8_gemm_backend": "flashinfer_trtllm"
+      }
+    },
+    {
+      "hardware": "b300",
+      "quantization": "fp8",
+      "gpu_count": 8,
+      "scenario": "low-latency",
+      "parameters": {
+        "model_path": "deepseek-ai/DeepSeek-R1-0528",
+        "tensor_parallel_size": 8,
+        "kv_cache_dtype": "fp8_e4m3",
+        "attention_backend": "flashinfer",
+        "enforce_disable_flashinfer_allreduce_fusion": true,
+        "enable_symm_mem": true
+      }
+    },
+    {
+      "hardware": "b300",
+      "quantization": "fp8",
+      "gpu_count": 8,
+      "scenario": "high-throughput",
+      "parameters": {
+        "model_path": "deepseek-ai/DeepSeek-R1-0528",
+        "tensor_parallel_size": 8,
+        "kv_cache_dtype": "fp8_e4m3",
+        "attention_backend": "flashinfer",
+        "enforce_disable_flashinfer_allreduce_fusion": true,
+        "enable_symm_mem": true
+      }
+    },
+    {
+      "hardware": "b300",
+      "quantization": "fp4",
+      "gpu_count": 8,
+      "scenario": "low-latency",
+      "parameters": {
+        "model_path": "nvidia/DeepSeek-R1-0528-FP4-v2",
+        "tensor_parallel_size": 8,
+        "kv_cache_dtype": "fp8_e4m3",
+        "attention_backend": "flashinfer",
+        "enforce_disable_flashinfer_allreduce_fusion": true,
+        "moe_runner_backend": "flashinfer_cutlass",
+        "mem_fraction_static": 0.85,
+        "enable_symm_mem": true
+      }
+    },
+    {
+      "hardware": "b300",
+      "quantization": "fp4",
+      "gpu_count": 8,
+      "scenario": "high-throughput",
+      "parameters": {
+        "model_path": "nvidia/DeepSeek-R1-0528-FP4-v2",
+        "tensor_parallel_size": 8,
+        "kv_cache_dtype": "fp8_e4m3",
+        "attention_backend": "flashinfer",
+        "enforce_disable_flashinfer_allreduce_fusion": true,
+        "moe_runner_backend": "flashinfer_cutlass",
+        "mem_fraction_static": 0.85,
+        "enable_symm_mem": true
+      }
+    },
+    {
+      "hardware": "h200",
+      "quantization": "fp8",
+      "gpu_count": 8,
+      "scenario": "low-latency",
+      "parameters": {
+        "model_path": "deepseek-ai/DeepSeek-R1-0528",
+        "trust_remote_code": true,
+        "tensor_parallel_size": 8,
+        "disable_radix_cache": true,
+        "max_running_requests": 256,
+        "cuda_graph_max_bs_decode": 256,
+        "chunked_prefill_size": 32768,
+        "max_prefill_tokens": 32768,
+        "mem_fraction_static": 0.82,
+        "attention_backend": "flashinfer",
+        "stream_interval": 10,
+        "decode_log_interval": 1
+      }
+    },
+    {
+      "hardware": "h200",
+      "quantization": "fp8",
+      "gpu_count": 8,
+      "scenario": "high-throughput",
+      "parameters": {
+        "model_path": "deepseek-ai/DeepSeek-R1-0528",
+        "trust_remote_code": true,
+        "tensor_parallel_size": 8,
+        "disable_radix_cache": true,
+        "max_running_requests": 512,
+        "cuda_graph_max_bs_decode": 512,
+        "chunked_prefill_size": 32768,
+        "max_prefill_tokens": 32768,
+        "mem_fraction_static": 0.82,
+        "attention_backend": "flashinfer",
+        "stream_interval": 10,
+        "decode_log_interval": 1
+      }
+    },
+    {
+      "hardware": "mi300x",
+      "quantization": "fp8",
+      "gpu_count": 8,
+      "scenario": "low-latency",
+      "parameters": {
+        "env_vars": "SGLANG_USE_AITER=1 SGLANG_AITER_MLA_PERSIST=1",
+        "model_path": "deepseek-ai/DeepSeek-R1-0528",
+        "trust_remote_code": true,
+        "tensor_parallel_size": 8,
+        "mem_fraction_static": 0.8,
+        "cuda_graph_max_bs_decode": 128,
+        "chunked_prefill_size": 131072,
+        "num_continuous_decode_steps": 4,
+        "max_prefill_tokens": 131072,
+        "kv_cache_dtype": "fp8_e4m3",
+        "attention_backend": "aiter",
+        "disable_radix_cache": true
+      }
+    },
+    {
+      "hardware": "mi300x",
+      "quantization": "fp8",
+      "gpu_count": 8,
+      "scenario": "high-throughput",
+      "parameters": {
+        "env_vars": "SGLANG_USE_AITER=1 SGLANG_AITER_MLA_PERSIST=1",
+        "model_path": "deepseek-ai/DeepSeek-R1-0528",
+        "trust_remote_code": true,
+        "tensor_parallel_size": 8,
+        "mem_fraction_static": 0.8,
+        "cuda_graph_max_bs_decode": 512,
+        "chunked_prefill_size": 131072,
+        "num_continuous_decode_steps": 4,
+        "max_prefill_tokens": 131072,
+        "kv_cache_dtype": "fp8_e4m3",
+        "attention_backend": "aiter",
+        "disable_radix_cache": true
+      }
+    },
+    {
+      "hardware": "mi325x",
+      "quantization": "fp8",
+      "gpu_count": 8,
+      "scenario": "low-latency",
+      "parameters": {
+        "env_vars": "SGLANG_USE_AITER=1 SGLANG_AITER_MLA_PERSIST=1",
+        "model_path": "deepseek-ai/DeepSeek-R1-0528",
+        "trust_remote_code": true,
+        "tensor_parallel_size": 8,
+        "mem_fraction_static": 0.8,
+        "cuda_graph_max_bs_decode": 128,
+        "chunked_prefill_size": 131072,
+        "num_continuous_decode_steps": 4,
+        "max_prefill_tokens": 131072,
+        "kv_cache_dtype": "fp8_e4m3",
+        "attention_backend": "aiter",
+        "disable_radix_cache": true
+      }
+    },
+    {
+      "hardware": "mi325x",
+      "quantization": "fp8",
+      "gpu_count": 8,
+      "scenario": "high-throughput",
+      "parameters": {
+        "env_vars": "SGLANG_USE_AITER=1 SGLANG_AITER_MLA_PERSIST=1",
+        "model_path": "deepseek-ai/DeepSeek-R1-0528",
+        "trust_remote_code": true,
+        "tensor_parallel_size": 8,
+        "mem_fraction_static": 0.8,
+        "cuda_graph_max_bs_decode": 512,
+        "chunked_prefill_size": 131072,
+        "num_continuous_decode_steps": 4,
+        "max_prefill_tokens": 131072,
+        "kv_cache_dtype": "fp8_e4m3",
+        "attention_backend": "aiter",
+        "disable_radix_cache": true
+      }
+    },
+    {
+      "hardware": "mi355x",
+      "quantization": "fp8",
+      "gpu_count": 8,
+      "scenario": "low-latency",
+      "parameters": {
+        "env_vars": "SGLANG_USE_AITER=1 RCCL_MSCCL_ENABLE=0 ROCM_QUICK_REDUCE_QUANTIZATION=INT4",
+        "model_path": "deepseek-ai/DeepSeek-R1-0528",
+        "trust_remote_code": true,
+        "tensor_parallel_size": 8,
+        "mem_fraction_static": 0.8,
+        "disable_radix_cache": true,
+        "chunked_prefill_size": 196608,
+        "num_continuous_decode_steps": 4,
+        "max_prefill_tokens": 196608,
+        "cuda_graph_max_bs_decode": 128,
+        "attention_backend": "aiter",
+        "kv_cache_dtype": "fp8_e4m3"
+      }
+    },
+    {
+      "hardware": "mi355x",
+      "quantization": "fp8",
+      "gpu_count": 8,
+      "scenario": "high-throughput",
+      "parameters": {
+        "env_vars": "SGLANG_USE_AITER=1 RCCL_MSCCL_ENABLE=0 ROCM_QUICK_REDUCE_QUANTIZATION=INT4",
+        "model_path": "deepseek-ai/DeepSeek-R1-0528",
+        "trust_remote_code": true,
+        "tensor_parallel_size": 8,
+        "mem_fraction_static": 0.8,
+        "disable_radix_cache": true,
+        "chunked_prefill_size": 196608,
+        "num_continuous_decode_steps": 4,
+        "max_prefill_tokens": 196608,
+        "cuda_graph_max_bs_decode": 512,
+        "attention_backend": "aiter",
+        "kv_cache_dtype": "fp8_e4m3"
+      }
+    },
+    {
+      "hardware": "mi355x",
+      "quantization": "fp4",
+      "gpu_count": 8,
+      "scenario": "low-latency",
+      "parameters": {
+        "env_vars": "SGLANG_USE_AITER=1 ROCM_QUICK_REDUCE_QUANTIZATION=INT4",
+        "model_path": "deepseek-ai/DeepSeek-R1-0528",
+        "trust_remote_code": true,
+        "tensor_parallel_size": 8,
+        "mem_fraction_static": 0.8,
+        "disable_radix_cache": true,
+        "chunked_prefill_size": 196608,
+        "num_continuous_decode_steps": 4,
+        "max_prefill_tokens": 196608,
+        "cuda_graph_max_bs_decode": 128,
+        "attention_backend": "aiter",
+        "kv_cache_dtype": "fp8_e4m3"
+      }
+    },
+    {
+      "hardware": "mi355x",
+      "quantization": "fp4",
+      "gpu_count": 8,
+      "scenario": "high-throughput",
+      "parameters": {
+        "env_vars": "SGLANG_USE_AITER=1 ROCM_QUICK_REDUCE_QUANTIZATION=INT4",
+        "model_path": "deepseek-ai/DeepSeek-R1-0528",
+        "trust_remote_code": true,
+        "tensor_parallel_size": 8,
+        "mem_fraction_static": 0.8,
+        "disable_radix_cache": true,
+        "chunked_prefill_size": 196608,
+        "num_continuous_decode_steps": 4,
+        "max_prefill_tokens": 196608,
+        "cuda_graph_max_bs_decode": 512,
+        "attention_backend": "aiter",
+        "kv_cache_dtype": "fp8_e4m3"
+      }
+    }
+  ],
+  "validation": [
+    {
+      "hardware": "h200",
+      "quantization": "fp4",
+      "error": "FP4 is only available for B200/B300 hardware. Please select FP8 quantization."
+    }
+  ]
+};
+
+const fieldToFlag = {
+  model_path: 'model-path',
+  trust_remote_code: 'trust-remote-code',
+  tensor_parallel_size: 'tp',
+  data_parallel_size: 'dp',
+  ep_size: 'ep-size',
+  cuda_graph_max_bs_decode: 'cuda-graph-max-bs-decode',
+  max_running_requests: 'max-running-requests',
+  mem_fraction_static: 'mem-fraction-static',
+  kv_cache_dtype: 'kv-cache-dtype',
+  chunked_prefill_size: 'chunked-prefill-size',
+  max_prefill_tokens: 'max-prefill-tokens',
+  enable_flashinfer_allreduce_fusion: 'enable-flashinfer-allreduce-fusion',
+  scheduler_recv_interval: 'scheduler-recv-interval',
+  enable_symm_mem: 'enable-symm-mem',
+  enforce_disable_flashinfer_allreduce_fusion: 'enforce-disable-flashinfer-allreduce-fusion',
+  disable_radix_cache: 'disable-radix-cache',
+  attention_backend: 'attention-backend',
+  moe_runner_backend: 'moe-runner-backend',
+  stream_interval: 'stream-interval',
+  quantization: 'quantization',
+  decode_log_interval: 'decode-log-interval',
+  fp8_gemm_backend: 'fp8-gemm-backend',
+  num_continuous_decode_steps: 'num-continuous-decode-steps',
+};
+
+const findConfig = (hardware, quantization, gpuCount, scenario) => {
+  const match = lookupData.configs.find((entry) => {
+    const hardwareMatch = entry.hardware === hardware;
+    const quantizationMatch = entry.quantization === quantization;
+    const gpuCountMatch = !entry.gpu_count || entry.gpu_count === Number.parseInt(gpuCount, 10);
+    const scenarioMatch = entry.scenario === scenario;
+    return hardwareMatch && quantizationMatch && gpuCountMatch && scenarioMatch;
+  });
+  return match ? match.parameters : null;
+};
+
+const getAvailableGpuCounts = (hardware, quantization) => {
+  const entries = lookupData.configs.filter(
+    (entry) => entry.hardware === hardware && entry.quantization === quantization
+  );
+  const gpuCounts = [...new Set(entries.map((entry) => entry.gpu_count))].filter(Boolean);
+  return gpuCounts.length > 0 ? gpuCounts.sort((a, b) => a - b) : [8];
+};
+
+const generateCommandFromConfig = (config) => {
+  if (!config) {
+    return '# Error: Configuration not found';
+  }
+
+  let command = '';
+  if (config.env_vars) {
+    command = `${config.env_vars} `;
+  }
+
+  command += 'python3 -m sglang.launch_server \\\n';
+  command += `  --model-path ${config.model_path}`;
+
+  for (const [key, value] of Object.entries(config)) {
+    if (key === 'model_path' || key === 'env_vars') {
+      continue;
+    }
+
+    const flagName = fieldToFlag[key];
+    if (!flagName) {
+      continue;
+    }
+
+    if (typeof value === 'boolean') {
+      if (value) {
+        command += ` \\\n  --${flagName}`;
+      }
+      continue;
+    }
+
+    command += ` \\\n  --${flagName} ${value}`;
+  }
+
+  return command;
+};
+
+const validateSelection = (hardware, quantization) => {
+  for (const rule of lookupData.validation || []) {
+    const hardwareMatch = Array.isArray(rule.hardware)
+      ? rule.hardware.includes(hardware)
+      : rule.hardware === hardware;
+    const quantizationMatch = Array.isArray(rule.quantization)
+      ? rule.quantization.includes(quantization)
+      : rule.quantization === quantization;
+    if (hardwareMatch && quantizationMatch) {
+      return rule.error;
+    }
+  }
+  return null;
+};
+
+const resolveItems = (option, values) =>
+  typeof option.getDynamicItems === 'function' ? option.getDynamicItems(values) : option.items;
+
+  const uiOptions = lookupData.ui_options;
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: uiOptions.hardware
+        .filter((option) =>
+          ['b200', 'b300', 'h200', 'mi300x', 'mi325x', 'mi355x'].includes(option.id)
+        )
+        .map((option) => ({
+          id: option.id,
+          label: option.label,
+          default: option.id === 'b200',
+        })),
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      getDynamicItems: (values) =>
+        uiOptions.quantization.map((option) => {
+          const fp4Disabled = ['h200', 'mi300x', 'mi325x'].includes(values.hardware) && option.id === 'fp4';
+          return {
+            id: option.id,
+            label: option.label,
+            default:
+              ['h200', 'mi300x', 'mi325x'].includes(values.hardware)
+                ? option.id === 'fp8'
+                : option.default,
+            disabled: fp4Disabled,
+            disabledReason: fp4Disabled ? 'FP4 not supported on H200, MI300X, MI325X' : '',
+          };
+        }),
+    },
+    gpuCount: {
+      name: 'gpuCount',
+      title: 'GPU Count',
+      getDynamicItems: (values) => {
+        const availableGpuCounts = getAvailableGpuCounts(values.hardware, values.quantization);
+        const allGpuCounts = uiOptions.gpu_count.map((option) =>
+          typeof option.id === 'number' ? option.id : Number.parseInt(option.id, 10)
+        );
+        const defaultGpuCount = Math.max(...availableGpuCounts);
+
+        return allGpuCounts.map((count) => ({
+          id: String(count),
+          label: `${count} GPUs`,
+          default: count === defaultGpuCount,
+          disabled: !availableGpuCounts.includes(count),
+          disabledReason: availableGpuCounts.includes(count)
+            ? ''
+            : `${count} GPUs not available for ${values.hardware.toUpperCase()} ${values.quantization.toUpperCase()}`,
+        }));
+      },
+    },
+    scenario: {
+      name: 'scenario',
+      title: 'Scenario',
+      items: uiOptions.scenario.map((option) => ({
+        id: option.id,
+        label: option.label,
+        subtitle: option.subtitle,
+        default: option.default,
+      })),
+    },
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    for (const [key, option] of Object.entries(options)) {
+      const items = resolveItems(option, initialState) || [];
+      const fallback =
+        items.find((item) => item.default && !item.disabled) ||
+        items.find((item) => !item.disabled) ||
+        items[0];
+      initialState[key] = fallback ? fallback.id : '';
+    }
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => {
+      const next = { ...prev, [optionName]: value };
+      for (const [key, option] of Object.entries(options)) {
+        if (typeof option.getDynamicItems !== 'function') {
+          continue;
+        }
+        const items = option.getDynamicItems(next);
+        const current = items.find((item) => item.id === next[key]);
+        if (!current || current.disabled) {
+          const fallback =
+            items.find((item) => item.default && !item.disabled) ||
+            items.find((item) => !item.disabled);
+          if (fallback) {
+            next[key] = fallback.id;
+          }
+        }
+      }
+      return next;
+    });
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const generateCommand = (vals) => {
+    const validationError = validateSelection(vals.hardware, vals.quantization);
+    if (validationError) {
+      return `# Error: ${validationError}`;
+    }
+
+    const config = findConfig(
+      vals.hardware,
+      vals.quantization,
+      vals.gpuCount || '8',
+      vals.scenario
+    );
+    if (!config) {
+      return `# Error: No configuration found for:
+# Hardware: ${vals.hardware}
+# Quantization: ${vals.quantization}
+# GPU Count: ${vals.gpuCount}
+# Scenario: ${vals.scenario}
+# This combination is not yet supported.`;
+    }
+
+    return generateCommandFromConfig(config);
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/deepseek-r1-basic-deployment.jsx

@@ -0,0 +1,448 @@
+export const DeepSeekR1BasicDeployment = () => {
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h100', label: 'H100', default: false },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'b200', label: 'B200', default: true },
+        { id: 'b300', label: 'B300', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false },
+        { id: 'xeon', label: 'XEON', default: false },
+      ],
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      getDynamicItems: (values) => {
+        const isXeon = values.hardware === 'xeon';
+        const fp4Disabled = values.hardware === 'h100' || values.hardware === 'mi300x' || isXeon;
+        return [
+          { id: 'fp8', label: 'FP8', default: true },
+          {
+            id: 'fp4',
+            label: 'FP4',
+            default: false,
+            disabled: fp4Disabled,
+            disabledReason: isXeon
+              ? 'Intel Xeon CPUs do not support FP4 quantization'
+              : 'H100 and MI300X only support FP8 quantization',
+          },
+          {
+            id: 'int8',
+            label: 'INT8',
+            default: false,
+            disabled: !isXeon,
+            disabledReason: 'INT8 is only available when XEON hardware is selected',
+          },
+        ];
+      },
+    },
+    strategy: {
+      name: 'strategy',
+      title: 'Deployment Strategy',
+      type: 'checkbox',
+      items: [
+        { id: 'tp', label: 'TP', subtitle: 'Tensor Parallel', default: true, required: true },
+        { id: 'dp', label: 'DP', subtitle: 'Data Parallel', default: false, disabledWhen: (v) => v.hardware === 'xeon', disabledReason: 'Intel Xeon CPUs only support Tensor Parallel (TP)' },
+        { id: 'ep', label: 'EP', subtitle: 'Expert Parallel', default: false, disabledWhen: (v) => v.hardware === 'xeon', disabledReason: 'Intel Xeon CPUs only support Tensor Parallel (TP)' },
+        { id: 'mtp', label: 'MTP', subtitle: 'Multi-token Prediction', default: false, disabledWhen: (v) => v.hardware === 'xeon', disabledReason: 'Intel Xeon CPUs do not support Multi-token Prediction' },
+      ],
+    },
+    thinking: {
+      name: 'thinking',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false },
+      ],
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false },
+      ],
+    },
+  };
+
+  const resolveItems = (option, values) =>
+    typeof option.getDynamicItems === 'function' ? option.getDynamicItems(values) : option.items;
+
+  const getInitialState = () => {
+    const initialState = {};
+    for (const [key, option] of Object.entries(options)) {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        continue;
+      }
+
+      const items = resolveItems(option, initialState) || [];
+      const fallback =
+        items.find((item) => item.default && !item.disabled) ||
+        items.find((item) => !item.disabled) ||
+        items[0];
+      initialState[key] = fallback ? fallback.id : '';
+    }
+    return initialState;
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, quantization, strategy, thinking, toolcall } = values;
+    const strategyValues = Array.isArray(strategy) ? strategy : [];
+
+    if ((hardware === 'h100' || hardware === 'mi300x') && quantization === 'fp4') {
+      return '# Error: H100 and MI300X only support FP8 quantization';
+    }
+
+    const isXeon = hardware === 'xeon';
+    const modelPath =
+      quantization === 'fp4'
+        ? 'nvidia/DeepSeek-R1-0528-FP4-v2'
+        : quantization === 'int8'
+        ? 'Conexis/DeepSeek-R1-0528-Channel-INT8'
+        : 'deepseek-ai/DeepSeek-R1-0528';
+
+    let command = 'python3 -m sglang.launch_server \\\n';
+    command += `  --model-path ${modelPath}`;
+
+    if (strategyValues.includes('tp')) {
+      command += isXeon ? ' \\\n  --tp 6' : ' \\\n  --tp 8';
+    }
+    if (strategyValues.includes('dp')) {
+      command += ' \\\n  --dp 8 \\\n  --enable-dp-attention';
+    }
+    if (strategyValues.includes('ep')) {
+      command += ' \\\n  --ep 8';
+    }
+    if (strategyValues.includes('mtp')) {
+      command +=
+        ' \\\n  --speculative-algorithm EAGLE' +
+        ' \\\n  --speculative-num-steps 3' +
+        ' \\\n  --speculative-eagle-topk 1' +
+        ' \\\n  --speculative-num-draft-tokens 4';
+    }
+
+    if (!isXeon) {
+      command += ' \\\n  --enable-symm-mem # Optional: improves performance, but may be unstable';
+    }
+
+    if (hardware === 'b200' || (hardware === 'mi355x' && quantization === 'fp8')) {
+      command +=
+        ' \\\n  --kv-cache-dtype fp8_e4m3 # Optional: enables fp8 kv cache and fp8 attention kernels to improve performance';
+    }
+
+    if (hardware === 'b300') {
+      command += ' \\\n  --kv-cache-dtype fp8_e4m3';
+      command += ' \\\n  --attention-backend flashinfer';
+      command += ' \\\n  --enforce-disable-flashinfer-allreduce-fusion';
+      if (quantization === 'fp4') {
+        command += ' \\\n  --moe-runner-backend flashinfer_cutlass';
+      }
+      if (quantization === 'fp4' || strategyValues.includes('mtp')) {
+        command += ' \\\n  --mem-fraction-static 0.85';
+      }
+    }
+
+    if (isXeon) {
+      command += ' \\\n  --device cpu \\\n  --disable-overlap-schedule';
+      if (quantization === 'int8') {
+        command += ' \\\n  --quantization w8a8_int8';
+      }
+    }
+
+    if (thinking === 'enabled') {
+      command += ' \\\n  --reasoning-parser deepseek-r1';
+    }
+    if (toolcall === 'enabled') {
+      command +=
+        ' \\\n  --tool-call-parser deepseekv3' +
+        ' \\\n  --chat-template examples/chat_template/tool_chat_template_deepseekr1.jinja';
+    }
+
+    return command;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => {
+      const next = { ...prev, [optionName]: value };
+      if (optionName === 'hardware') {
+        const quantizationItems = resolveItems(options.quantization, next);
+        const current = quantizationItems.find((item) => item.id === next.quantization);
+        if (!current || current.disabled) {
+          const fallback =
+            quantizationItems.find((item) => item.default && !item.disabled) ||
+            quantizationItems.find((item) => !item.disabled);
+          if (fallback) {
+            next.quantization = fallback.id;
+          }
+        }
+      }
+      if (optionName === 'hardware') {
+        if (next.hardware === 'xeon') {
+          next.quantization = 'int8';
+        } else if (next.quantization === 'int8') {
+          next.quantization = 'fp8';
+        }
+      }
+      const strategyItems = options.strategy.items || [];
+      const currentStrategy = Array.isArray(next.strategy) ? next.strategy : [];
+      next.strategy = currentStrategy.filter((id) => {
+        const item = strategyItems.find((s) => s.id === id);
+        if (!item) {
+          return false;
+        }
+        if (typeof item.disabledWhen === 'function' && item.disabledWhen(next)) {
+          return false;
+        }
+        return true;
+      });
+      return next;
+    });
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/deepseek-v3-deployment.jsx

@@ -0,0 +1,230 @@
+export const DeepSeekV3Deployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h100', label: 'H100', default: false },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'b200', label: 'B200', default: true },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false },
+        { id: 'xeon', label: 'XEON', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      getDynamicItems: (values) => {
+        const isXeon = values.hardware === 'xeon';
+        return [
+          { id: 'fp8', label: 'FP8', default: true },
+          {
+            id: 'fp4',
+            label: 'FP4',
+            default: false,
+            disabled: isXeon,
+            disabledReason: 'Intel Xeon CPUs do not support FP4 quantization'
+          }
+        ];
+      }
+    },
+    strategy: {
+      name: 'strategy',
+      title: 'Deployment Strategy',
+      type: 'checkbox',
+      items: [
+        { id: 'tp', label: 'TP', subtitle: 'Tensor Parallel', default: true, required: true },
+        { id: 'dp', label: 'DP', subtitle: 'Data Parallel', default: false, disabledWhen: (v) => v.hardware === 'xeon' },
+        { id: 'ep', label: 'EP', subtitle: 'Expert Parallel', default: false, disabledWhen: (v) => v.hardware === 'xeon' },
+        { id: 'mtp', label: 'MTP', subtitle: 'Multi-token Prediction', default: false, disabledWhen: (v) => v.hardware === 'xeon' },
+      ]
+    },
+    thinking: {
+      name: 'thinking',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    }
+  };
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = option.items.filter(item => item.default).map(item => item.id);
+      } else {
+        const items = typeof option.getDynamicItems === 'function'
+          ? option.getDynamicItems(initialState)
+          : option.items;
+        const defaultItem = items.find(item => item.default && !item.disabled) || items.find(item => !item.disabled);
+        initialState[key] = defaultItem ? defaultItem.id : items[0].id;
+      }
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode - prioritize page theme over system preference
+  useEffect(() => {
+    const checkDarkMode = () => {
+      // Check Mintlify's theme class on html element
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => {
+      const next = { ...prev, [optionName]: value };
+      if (optionName === 'hardware') {
+        const quantizationItems = typeof options.quantization.getDynamicItems === 'function'
+          ? options.quantization.getDynamicItems(next)
+          : options.quantization.items || [];
+        const currentQuantization = quantizationItems.find(item => item.id === next.quantization);
+        if (!currentQuantization || currentQuantization.disabled) {
+          const fallback = quantizationItems.find(item => item.default && !item.disabled) || quantizationItems.find(item => !item.disabled);
+          if (fallback) {
+            next.quantization = fallback.id;
+          }
+        }
+        const strategyItems = options.strategy.items || [];
+        const current = Array.isArray(next.strategy) ? next.strategy : [];
+        next.strategy = current.filter(id => {
+          const item = strategyItems.find(s => s.id === id);
+          if (!item) return false;
+          if (typeof item.disabledWhen === 'function' && item.disabledWhen(next)) return false;
+          return true;
+        });
+      }
+      return next;
+    });
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues(prev => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      } else {
+        return { ...prev, [optionName]: currentValues.filter(id => id !== itemId) };
+      }
+    });
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, quantization, strategy, thinking, toolcall } = values;
+    const strategyArray = Array.isArray(strategy) ? strategy : [];
+
+    // Validation - H100/H200/MI300X/MI325X/XEON only supports FP8
+    if (['h100', 'h200', 'mi300x', 'mi325x'].includes(hardware) && quantization === 'fp4') {
+      return '# Error: This hardware only supports FP8 quantization\n# Please select FP8 quantization or use B200/MI355X hardware';
+    }
+
+    const modelPath = quantization === 'fp4' ? 'nvidia/DeepSeek-V3-0324-NVFP4' : 'deepseek-ai/DeepSeek-V3';
+    const isXeon = hardware === 'xeon';
+
+    let cmd = 'python3 -m sglang.launch_server \\\n';
+    cmd += `  --model-path ${modelPath}`;
+
+    if (strategyArray.includes('tp')) cmd += isXeon ? ' \\\n  --tp 6' : ' \\\n  --tp 8';
+    if (strategyArray.includes('dp')) cmd += ' \\\n  --dp 8 \\\n  --enable-dp-attention';
+    if (strategyArray.includes('ep')) cmd += ' \\\n  --ep 8';
+    if (strategyArray.includes('mtp')) {
+      cmd += ' \\\n  --speculative-algorithm EAGLE \\\n  --speculative-num-steps 3 \\\n  --speculative-eagle-topk 1 \\\n  --speculative-num-draft-tokens 4';
+    }
+
+    if (!isXeon) {
+      cmd += ' \\\n  --enable-symm-mem # Optional: improves performance, but may be unstable';
+    }
+
+    if (hardware === 'b200') {
+      cmd += ' \\\n  --kv-cache-dtype fp8_e4m3 # Optional: enables fp8 kv cache and fp8 attention kernels';
+    }
+
+    if (isXeon) {
+      cmd += ' \\\n  --device cpu \\\n  --disable-overlap-schedule';
+    }
+
+    if (thinking === 'enabled') cmd += ' \\\n  --reasoning-parser deepseek-v3';
+    if (toolcall === 'enabled') cmd += ' \\\n  --tool-call-parser deepseekv3 \\\n  --chat-template examples/chat_template/tool_chat_template_deepseekv3.jinja';
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const dynDisabled = typeof item.disabledWhen === 'function' && item.disabledWhen(values);
+                const isDisabled = item.required || dynDisabled;
+                return (
+                  <label key={item.id} title={dynDisabled ? 'Not supported on the selected hardware' : ''} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isDisabled} onChange={(e) => !dynDisabled && handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+                (option.getDynamicItems ? option.getDynamicItems(values) : option.items).map(item => {
+                const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                return (
+                    <label key={item.id} title={item.disabledReason || ''} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                      <input type="radio" name={option.name} value={item.id} checked={isChecked} disabled={isDisabled} onChange={() => !isDisabled && handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/deepseek-v31-deployment.jsx

@@ -0,0 +1,232 @@
+export const DeepSeekV31Deployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200', label: 'H200', default: true },
+        { id: 'b200', label: 'B200', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false },
+        { id: 'xeon', label: 'XEON', default: false }
+      ]
+    },
+    modelname: {
+      name: 'modelname',
+      title: 'Model Name',
+      items: [
+        { id: 'v31', label: 'DeepSeek-V3.1', default: true },
+        { id: 'v31terminus', label: 'DeepSeek-V3.1-Terminus', default: false },
+        { id: 'v31terminusint8', label: 'DeepSeek-V3.1-Terminus-Channel-int8', default: false, xeonOnly: true }
+      ]
+    },
+    strategy: {
+      name: 'strategy',
+      title: 'Deployment Strategy',
+      type: 'checkbox',
+      items: [
+        { id: 'tp', label: 'TP', default: true, required: true },
+        { id: 'dp', label: 'DP attention', default: false, disabledWhen: (v) => v.hardware === 'xeon' },
+        { id: 'ep', label: 'EP', default: false, disabledWhen: (v) => v.hardware === 'xeon' },
+        { id: 'mtp', label: 'Multi-token Prediction', default: false, disabledWhen: (v) => v.hardware === 'xeon' }
+      ]
+    },
+    reasoningParser: {
+      name: 'reasoningParser',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    }
+  };
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = option.items.filter(item => item.default).map(item => item.id);
+      } else {
+        const defaultItem = option.items.find(item => item.default);
+        initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+      }
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode - prioritize page theme over system preference
+  useEffect(() => {
+    const checkDarkMode = () => {
+      // Check Mintlify's theme class on html element
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => {
+      const next = { ...prev, [optionName]: value };
+      if (optionName === 'hardware') {
+        if (next.hardware === 'xeon') {
+          next.modelname = 'v31terminusint8';
+        } else {
+          const m = options.modelname.items.find(i => i.id === next.modelname);
+          if (m && m.xeonOnly) {
+            next.modelname = options.modelname.items.find(i => !i.xeonOnly && i.default)?.id || 'v31';
+          }
+        }
+        const strategyItems = options.strategy.items || [];
+        const current = Array.isArray(next.strategy) ? next.strategy : [];
+        next.strategy = current.filter(id => {
+          const item = strategyItems.find(s => s.id === id);
+          if (!item) return false;
+          if (typeof item.disabledWhen === 'function' && item.disabledWhen(next)) return false;
+          return true;
+        });
+      }
+      return next;
+    });
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues(prev => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      } else {
+        return { ...prev, [optionName]: currentValues.filter(id => id !== itemId) };
+      }
+    });
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, modelname, strategy, reasoningParser, toolcall } = values;
+    const strategyArray = Array.isArray(strategy) ? strategy : [];
+
+    // Model name mapping
+    const modelMap = {
+      'v31': 'deepseek-ai/DeepSeek-V3.1',
+      'v31terminus': 'deepseek-ai/DeepSeek-V3.1-Terminus',
+      'v31terminusint8': 'IntervitensInc/DeepSeek-V3.1-Terminus-Channel-int8'
+    };
+
+    const modelName = modelMap[modelname];
+    const isXeon = hardware === 'xeon';
+
+    let cmd = 'python3 -m sglang.launch_server \\\n';
+    cmd += `  --model-path ${modelName}`;
+
+    if (isXeon) {
+      cmd += ` \\\n  --device cpu \\\n  --disable-overlap-schedule`;
+      if (modelname === 'v31terminusint8') {
+        cmd += ` \\\n  --quantization w8a8_int8`;
+      }
+    }
+
+    // TP is mandatory
+    cmd += isXeon ? ` \\\n  --tp 6` : ` \\\n  --tp 8`;
+    if (strategyArray.includes('dp')) {
+      cmd += ` \\\n  --dp 8 \\\n  --enable-dp-attention`;
+    }
+    if (strategyArray.includes('ep')) {
+      cmd += ` \\\n  --ep 8`;
+    }
+    // Multi-token prediction (MTP) configuration
+    if (strategyArray.includes('mtp')) {
+      cmd += ` \\\n  --speculative-algorithm EAGLE \\\n  --speculative-num-steps 3 \\\n  --speculative-eagle-topk 1 \\\n  --speculative-num-draft-tokens 4`;
+    }
+
+    // Add tool-call-parser if enabled
+    if (toolcall === 'enabled') {
+      cmd += ` \\\n  --tool-call-parser deepseekv31`;
+    }
+
+    // Add reasoning-parser when enabled
+    if (reasoningParser === 'enabled') {
+      cmd += ` \\\n  --reasoning-parser deepseek-v3`;
+    }
+
+    // Add chat-template if tool calling is enabled
+    if (toolcall === 'enabled') {
+      cmd += ` \\\n  --chat-template ./examples/chat_template/tool_chat_template_deepseekv31.jinja`;
+    }
+
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const dynDisabled = typeof item.disabledWhen === 'function' && item.disabledWhen(values);
+                const isDisabled = item.required || dynDisabled;
+                return (
+                  <label key={item.id} title={dynDisabled ? 'Not supported on the selected hardware' : ''} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isDisabled} onChange={(e) => !dynDisabled && handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+              option.items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                const isDisabled = item.xeonOnly && values.hardware !== 'xeon';
+                return (
+                  <label key={item.id} title={isDisabled ? 'Only available when XEON hardware is selected' : undefined} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="radio" name={option.name} value={item.id} checked={isChecked} disabled={isDisabled} onChange={() => !isDisabled && handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/deepseek-v32-deployment.jsx

@@ -0,0 +1,337 @@
+export const DeepSeekV32Deployment = () => {
+  // Config mirrors sgl-cookbook src/components/autoregressive/DeepSeekConfigGenerator/index.js.
+  //
+  // Model variants:
+  //   DeepSeek-V3.2, V3.2-Exp, V3.2-Speciale    → deepseek-ai/ family, TP=8
+  //   DeepSeek-V3.2-NVFP4                         → nvidia/ family, B200/B300 only, TP=4
+  //   DeepSeek-V3.2-MXFP4                         → amd/ family, MI300X/MI355X only, TP=8
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200',   label: 'H200',          default: true  },
+        { id: 'b200',   label: 'B200',          default: false },
+        { id: 'b300',   label: 'B300',          default: false },
+        { id: 'mi300x', label: 'MI300X',        default: false },
+        { id: 'mi355x', label: 'MI355X',        default: false }
+      ]
+    },
+    modelname: {
+      name: 'modelname',
+      title: 'Model Name',
+      getDynamicItems: (values) => {
+        const hw = values.hardware;
+        const isBlackwell = hw === 'b200' || hw === 'b300';
+        const isAMD = hw === 'mi300x' || hw === 'mi355x';
+        return [
+          { id: 'v32',         label: 'DeepSeek-V3.2',           default: !isBlackwell && !isAMD },
+          { id: 'v32speciale', label: 'DeepSeek-V3.2-Speciale',  default: false },
+          { id: 'v32exp',      label: 'DeepSeek-V3.2-Exp',       default: false },
+          { id: 'v32nvfp4',    label: 'DeepSeek-V3.2-NVFP4',     default: isBlackwell, disabled: !isBlackwell, disabledReason: 'NVFP4 requires B200/B300 (Blackwell)' },
+          { id: 'v32mxfp4',    label: 'DeepSeek-V3.2-MXFP4',     default: isAMD,   disabled: !isAMD,  disabledReason: 'MXFP4 requires AMD MI300X/MI355X' }
+        ];
+      }
+    },
+    strategy: {
+      name: 'strategy',
+      title: 'Deployment Strategy',
+      type: 'checkbox',
+      condition: (values) => values.modelname !== 'v32nvfp4' && values.modelname !== 'v32mxfp4',
+      items: [
+        { id: 'tp',  label: 'TP',                       default: true,  required: true },
+        { id: 'dp',  label: 'DP attention',              default: false },
+        { id: 'ep',  label: 'EP',                        default: false },
+        { id: 'mtp', label: 'Multi-token Prediction',    default: false }
+      ]
+    },
+    reasoningParser: {
+      name: 'reasoningParser',
+      title: 'Reasoning Parser',
+      condition: (values) => values.modelname !== 'v32nvfp4' && values.modelname !== 'v32mxfp4',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true  },
+        { id: 'enabled',  label: 'Enabled',  default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      condition: (values) => values.modelname !== 'v32nvfp4' && values.modelname !== 'v32mxfp4' && values.modelname !== 'v32speciale',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true  },
+        { id: 'enabled',  label: 'Enabled',  default: false }
+      ]
+    }
+  };
+
+  const resolveItems = (option, vals) => {
+    if (typeof option.getDynamicItems === 'function') return option.getDynamicItems(vals);
+    return option.items;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    for (const [key, option] of Object.entries(options)) {
+      if (option.type === 'checkbox') {
+        const items = resolveItems(option, initialState);
+        initialState[key] = items.filter(i => i.default).map(i => i.id);
+      } else {
+        const items = resolveItems(option, initialState);
+        const def = items.find(i => i.default && !i.disabled) || items.find(i => !i.disabled) || items[0];
+        initialState[key] = def.id;
+      }
+    }
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  // When hardware changes, re-resolve model name defaults (NVFP4→Blackwell, MXFP4→AMD).
+  useEffect(() => {
+    setValues(prev => {
+      const next = { ...prev };
+      for (const [key, option] of Object.entries(options)) {
+        if (typeof option.getDynamicItems !== 'function') continue;
+        const items = option.getDynamicItems(next);
+        const current = items.find(i => i.id === next[key]);
+        if (!current || current.disabled) {
+          const fallback = items.find(i => i.default && !i.disabled) || items.find(i => !i.disabled);
+          if (fallback) next[key] = fallback.id;
+        }
+      }
+      return next;
+    });
+  }, [values.hardware]);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues(prev => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      } else {
+        return { ...prev, [optionName]: currentValues.filter(id => id !== itemId) };
+      }
+    });
+  };
+
+  const generateCommand = () => {
+    const { hardware, modelname, strategy, reasoningParser, toolcall } = values;
+
+    const isNvfp4 = modelname === 'v32nvfp4';
+    const isMxfp4 = modelname === 'v32mxfp4';
+    const isAMD = hardware === 'mi300x' || hardware === 'mi355x';
+    const isB300 = hardware === 'b300';
+    const isBlackwell = hardware === 'b200' || isB300;
+
+    // Validation: NVFP4 requires Blackwell
+    if (isNvfp4 && !isBlackwell) {
+      return `# Error: DeepSeek-V3.2-NVFP4 requires NVIDIA B200/B300 (Blackwell) hardware\n# Please select "B200" or "B300" for Hardware Platform or choose a different model`;
+    }
+
+    // Validation: MXFP4 requires AMD MI300X/MI355X
+    if (isMxfp4 && !isAMD) {
+      return `# Error: DeepSeek-V3.2-MXFP4 requires AMD MI300X/MI355X hardware\n# Please select "MI300X" or "MI355X" for Hardware Platform or choose a different model`;
+    }
+
+    // Validation: Speciale doesn't support tool calling
+    if (modelname === 'v32speciale' && toolcall === 'enabled') {
+      return `# Error: DeepSeek-V3.2-Speciale doesn't support tool calling\n# Please select "Disabled" for Tool Call Parser or choose a different model`;
+    }
+
+    // Model name mapping
+    const modelMap = {
+      'v32':         'DeepSeek-V3.2',
+      'v32exp':      'DeepSeek-V3.2-Exp',
+      'v32speciale': 'DeepSeek-V3.2-Speciale',
+      'v32nvfp4':    'DeepSeek-V3.2-NVFP4',
+      'v32mxfp4':    'DeepSeek-V3.2-mxfp4'
+    };
+
+    let modelFamily;
+    if (isNvfp4) modelFamily = 'nvidia';
+    else if (isMxfp4) modelFamily = 'amd';
+    else modelFamily = 'deepseek-ai';
+
+    const modelName = `${modelFamily}/${modelMap[modelname]}`;
+
+    // NVFP4: fixed config
+    if (isNvfp4) {
+      let cmd = 'sglang serve \\\n';
+      cmd += `  --model-path ${modelName}`;
+      cmd += ' \\\n  --tp 4';
+      if (isB300) {
+        cmd += ' \\\n  --attention-backend flashinfer';
+        cmd += ' \\\n  --enforce-disable-flashinfer-allreduce-fusion';
+        cmd += ' \\\n  --cuda-graph-backend-prefill disabled';
+        cmd += ' \\\n  --moe-runner-backend flashinfer_cutlass';
+        cmd += ' \\\n  --disable-flashinfer-autotune';
+      } else {
+        cmd += ' \\\n  --quantization modelopt_fp4';
+        cmd += ' \\\n  --moe-runner-backend flashinfer_trtllm';
+      }
+      return cmd;
+    }
+
+    // MXFP4: fixed config for AMD
+    if (isMxfp4) {
+      let cmd = 'sglang serve \\\n';
+      cmd += `  --model-path ${modelName}`;
+      cmd += ' \\\n  --tp 8';
+      cmd += ' \\\n  --trust-remote-code';
+      return cmd;
+    }
+
+    let cmd = 'sglang serve \\\n';
+    cmd += `  --model-path ${modelName}`;
+
+    // Hardware platform specific parameters
+    if (isAMD) {
+      cmd += ' \\\n  --trust-remote-code';
+      cmd += ' \\\n  --dsa-prefill-backend tilelang';
+      cmd += ' \\\n  --dsa-decode-backend tilelang';
+      cmd += ' \\\n  --cuda-graph-max-bs-decode 64';
+    }
+
+    // Strategy configurations
+    const strategyArray = Array.isArray(strategy) ? strategy : [];
+    const tpSize = 8;
+    const dpSize = 8;
+    const epSize = 8;
+    cmd += ` \\\n  --tp ${tpSize}`;
+    if (strategyArray.includes('dp')) {
+      cmd += ` \\\n  --dp ${dpSize} \\\n  --enable-dp-attention`;
+    }
+    if (strategyArray.includes('ep')) {
+      cmd += ` \\\n  --ep ${epSize}`;
+    }
+
+    // Multi-token prediction (MTP) configuration
+    if (strategyArray.includes('mtp')) {
+      cmd += ' \\\n  --speculative-algorithm EAGLE';
+      cmd += ' \\\n  --speculative-num-steps 3';
+      cmd += ' \\\n  --speculative-eagle-topk 1';
+      cmd += ' \\\n  --speculative-num-draft-tokens 4';
+    }
+
+    if (isB300) {
+      cmd += ' \\\n  --attention-backend flashinfer';
+      if (!strategyArray.includes('dp') || strategyArray.includes('ep') || strategyArray.includes('mtp')) {
+        cmd += ' \\\n  --enforce-disable-flashinfer-allreduce-fusion';
+        cmd += ' \\\n  --cuda-graph-backend-prefill disabled';
+      }
+    }
+
+    // Add tool-call-parser if enabled (not supported for Speciale)
+    if (toolcall === 'enabled' && modelname !== 'v32speciale') {
+      if (modelname === 'v32exp') {
+        cmd += ' \\\n  --tool-call-parser deepseekv31';
+      } else if (modelname === 'v32') {
+        cmd += ' \\\n  --tool-call-parser deepseekv32';
+      }
+    }
+
+    // Add reasoning-parser when enabled
+    if (reasoningParser === 'enabled') {
+      cmd += ' \\\n  --reasoning-parser deepseek-v3';
+    }
+
+    // Add chat-template if tool calling is enabled (only for v32exp)
+    if (toolcall === 'enabled' && modelname === 'v32exp') {
+      cmd += ' \\\n  --chat-template ./examples/chat_template/tool_chat_template_deepseekv32.jinja';
+    }
+
+    return cmd;
+  };
+
+  // Styles
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.4 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (typeof option.condition === 'function' && !option.condition(values)) return null;
+        const items = resolveItems(option, values);
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'checkbox' ? (
+                items.map(item => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled = item.required || !!item.disabled;
+                  return (
+                    <label
+                      key={item.id}
+                      style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? { ...disabledStyle, ...(item.required ? {} : {}) } : {}) }}
+                      title={item.disabledReason || ''}
+                    >
+                      <input type="checkbox" checked={isChecked} disabled={isDisabled} onChange={(e) => handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                      {item.label}
+                      {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map(item => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = !!item.disabled;
+                  return (
+                    <label
+                      key={item.id}
+                      style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}
+                      title={item.disabledReason || ''}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/devstral-2-deployment.jsx

@@ -0,0 +1,182 @@
+export const Devstral2Deployment = () => {
+  // Config options based on Devstral2ConfigGenerator
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'b200', label: 'B200', default: true },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'h100', label: 'H100', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false }
+      ]
+    },
+    model: {
+      name: 'model',
+      title: 'Model',
+      items: [
+        { id: 'small', label: 'Devstral Small 2 (24B)', default: true },
+        { id: 'large', label: 'Devstral 2 (123B)', default: false }
+      ]
+    },
+    weights: {
+      name: 'weights',
+      title: 'Weights / Precision',
+      items: [
+        { id: 'fp8', label: 'FP8', default: true }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    }
+  };
+
+  // Model configurations
+  const modelConfigs = {
+    small: {
+      modelId: 'mistralai/Devstral-Small-2-24B-Instruct-2512',
+      tpByHardware: { h100: 1, h200: 1, b200: 1, mi300x: 1, mi325x: 1, mi355x: 1 },
+      allowedWeights: ['fp8']
+    },
+    large: {
+      modelId: 'mistralai/Devstral-2-123B-Instruct-2512',
+      tpByHardware: { h100: 4, h200: 2, b200: 2, mi300x: 2, mi325x: 2, mi355x: 2 },
+      allowedWeights: ['fp8']
+    }
+  };
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = option.items.filter(item => item.default).map(item => item.id);
+      } else {
+        const defaultItem = option.items.find(item => item.default);
+        initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+      }
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues(prev => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      } else {
+        return { ...prev, [optionName]: currentValues.filter(id => id !== itemId) };
+      }
+    });
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, model, weights, toolcall } = values;
+
+    const modelCfg = modelConfigs[model];
+    if (!modelCfg) return `# Error: Unknown model selection: ${model}`;
+
+    if (!modelCfg.allowedWeights.includes(weights)) {
+      const allowed = modelCfg.allowedWeights.map(w => w.toUpperCase()).join(', ');
+      return `# Error: ${modelCfg.modelId} only supports: ${allowed}\n# Please change "Weights / Precision" to a supported value.`;
+    }
+
+    const tp = modelCfg.tpByHardware[hardware];
+    if (!tp) return `# Error: Unknown hardware platform: ${hardware}`;
+
+    let cmd = 'python -m sglang.launch_server \\\n';
+    cmd += `  --model ${modelCfg.modelId}`;
+
+    if (tp > 1) {
+      cmd += ` \\\n  --tp ${tp}`;
+    }
+
+    // Add tool-call-parser if enabled
+    if (toolcall === 'enabled') {
+      cmd += ` \\\n  --tool-call-parser mistral`;
+    }
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const isDisabled = item.required;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isDisabled} onChange={(e) => handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+              option.items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}) }}>
+                    <input type="radio" name={option.name} value={item.id} checked={isChecked} onChange={() => handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/ernie-45-deployment.jsx

@@ -0,0 +1,345 @@
+export const Ernie45Deployment = () => {
+  const options = {
+    modelsize: {
+      name: 'modelsize',
+      title: 'Model Size',
+      items: [
+        { id: '21b', label: '21B', subtitle: 'A3B', default: true },
+        { id: '300b', label: '300B', subtitle: 'A47B', default: false }
+      ]
+    },
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'mi300x', label: 'MI300X', default: true },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false }
+      ]
+    },
+    strategy: {
+      name: 'strategy',
+      title: 'Deployment Strategy',
+      type: 'checkbox',
+      items: [
+        { id: 'tp', label: 'TP', subtitle: 'Tensor Parallel', default: true, required: true },
+        { id: 'dp', label: 'DP', subtitle: 'Data Parallel', default: false, disabledWhen: (values) => values.modelsize === '21b' },
+        { id: 'ep', label: 'EP', subtitle: 'Expert Parallel', default: false, disabledWhen: (values) => values.modelsize === '21b' }
+      ]
+    }
+  };
+
+  const generateCommand = (values) => {
+    const { modelsize, hardware, strategy } = values;
+
+    const strategyArray = Array.isArray(strategy) ? strategy : [];
+
+    let modelPath;
+    if (modelsize === '21b') {
+      modelPath = 'baidu/ERNIE-4.5-21B-A3B-PT';
+    } else if (modelsize === '300b') {
+      modelPath = 'baidu/ERNIE-4.5-300B-A47B-PT';
+    } else {
+      modelPath = 'baidu/ERNIE-4.5-21B-A3B-PT';
+    }
+
+    let cmd = 'python3 -m sglang.launch_server \\\n';
+    cmd += `  --model-path ${modelPath}`;
+
+    const tpValue = modelsize === '300b' ? 8 : 1;
+    const dpValue = modelsize === '300b' ? 8 : null;
+    const epValue = modelsize === '300b' ? 8 : null;
+
+    if (strategyArray.includes('tp')) {
+      cmd += ` \\\n  --tp ${tpValue}`;
+    }
+
+    if (strategyArray.includes('dp') && modelsize === '300b') {
+      cmd += ` \\\n  --dp ${dpValue} \\\n  --enable-dp-attention`;
+    }
+
+    if (strategyArray.includes('ep') && modelsize === '300b') {
+      cmd += ` \\\n  --ep ${epValue}`;
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/gemma4-deployment.jsx

@@ -0,0 +1,427 @@
+export const Gemma4Deployment = () => {
+  const options = {
+    modelSize: {
+      name: 'modelSize',
+      title: 'Model Variant',
+      items: [
+        { id: 'e2b', label: 'E2B (~2B)', default: false },
+        { id: 'e4b', label: 'E4B (~4B)', default: true },
+        { id: '12b', label: '12B (Dense)', default: false },
+        { id: '31b', label: '31B (Dense)', default: false },
+        { id: '26b-a4b', label: '26B-A4B (MoE)', default: false },
+      ]
+    },
+    checkpoint: {
+      name: 'checkpoint',
+      title: 'Checkpoint',
+      items: [
+        { id: 'standard', label: 'Standard', subtitle: 'BF16', default: true },
+        { id: 'qat', label: 'QAT', subtitle: 'q4_0-unquantized', default: false },
+      ]
+    },
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      getDynamicItems: (values) => {
+        const size = values.modelSize;
+        const showMI300X = size === '31b' || size === '26b-a4b';
+        return [
+          { id: 'h200', label: 'H200', default: true },
+          { id: 'b200', label: 'B200', default: false },
+          { id: 'b300', label: 'B300', default: false },
+          { id: 'mi300x', label: 'MI300X', default: false, disabled: !showMI300X },
+        ];
+      }
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled', label: 'Enabled', default: true }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--reasoning-parser gemma4' : null
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled', label: 'Enabled', default: true }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--tool-call-parser gemma4' : null
+    },
+    speculative: {
+      name: 'speculative',
+      title: 'Speculative Decoding (MTP)',
+      condition: (values) => !['mi300x'].includes(values.hardware),
+      items: [
+        { id: 'disabled', label: 'Disabled', subtitle: 'Baseline', default: true },
+        { id: 'enabled', label: 'Enabled', subtitle: 'Lower Latency', default: false }
+      ]
+    },
+  };
+
+  const modelConfigs = {
+    h200: {
+      e2b: { tp: 1, mem: 0.85 },
+      e4b: { tp: 1, mem: 0.85 },
+      '12b': { tp: 1, mem: 0.85 },
+      '31b': { tp: 2, mem: 0.85 },
+      '26b-a4b': { tp: 1, mem: 0.85 },
+    },
+    b200: {
+      e2b: { tp: 1, mem: 0.9 },
+      e4b: { tp: 1, mem: 0.9 },
+      '12b': { tp: 1, mem: 0.9 },
+      '31b': { tp: 1, mem: 0.9 },
+      '26b-a4b': { tp: 1, mem: 0.75 },
+    },
+    b300: {
+      e2b: { tp: 1, mem: 0.9 },
+      e4b: { tp: 1, mem: 0.9 },
+      '12b': { tp: 1, mem: 0.9 },
+      '31b': { tp: 1, mem: 0.9 },
+      '26b-a4b': { tp: 1, mem: 0.9 },
+    },
+    mi300x: {
+      '31b': { tp: 1, mem: 0.80 },
+      '26b-a4b': { tp: 1, mem: 0.80 },
+    },
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, modelSize } = values;
+
+    const hwConfig = modelConfigs[hardware]?.[modelSize];
+    if (!hwConfig) return `# Error: Unknown hardware/model combination`;
+
+    let { tp, mem } = hwConfig;
+
+    const modelNames = {
+      'e2b': 'google/gemma-4-E2B-it',
+      'e4b': 'google/gemma-4-E4B-it',
+      '12b': 'google/gemma-4-12B-it',
+      '31b': 'google/gemma-4-31B-it',
+      '26b-a4b': 'google/gemma-4-26B-A4B-it',
+    };
+
+    // QAT releases keep bf16 weights (q4_0-unquantized), so the only change is
+    // the model-path suffix; TP/memory requirements match the standard checkpoints.
+    const qatSuffix = values.checkpoint === 'qat' ? '-qat-q4_0-unquantized' : '';
+    const modelPath = `${modelNames[modelSize]}${qatSuffix}`;
+
+    const mtpEnabled = values.speculative === 'enabled';
+    if (mtpEnabled && modelSize === '26b-a4b' && hardware !== 'mi300x') {
+      tp = 2;
+    }
+
+    let cmd = `sglang serve --model-path ${modelPath}`;
+    if (tp > 1) {
+      cmd += ` \\\n  --tp ${tp}`;
+    }
+
+    Object.entries(options).forEach(([key, option]) => {
+      if (key === 'modelSize' || key === 'hardware') return;
+      if (option.commandRule) {
+        const rule = option.commandRule(values[key]);
+        if (rule) cmd += ` \\\n  ${rule}`;
+      }
+    });
+
+    if (mtpEnabled) {
+      cmd += ` \\\n  --speculative-algorithm NEXTN`;
+      cmd += ` \\\n  --speculative-draft-model-path ${modelPath}-assistant`;
+      cmd += ` \\\n  --speculative-num-steps 5`;
+      cmd += ` \\\n  --speculative-num-draft-tokens 6`;
+      cmd += ` \\\n  --speculative-eagle-topk 1`;
+    }
+
+    if (hardware === 'b300') {
+      cmd += ` \\\n  --attention-backend triton`;
+    }
+
+    cmd += ` \\\n  --mem-fraction-static ${mem}`;
+    cmd += ` \\\n  --host 0.0.0.0 --port 30000`;
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/glm-45-deployment.jsx

@@ -0,0 +1,196 @@
+export const GLM45Deployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'mi300x', label: 'MI300X', default: true },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false }
+      ]
+    },
+    strategy: {
+      name: 'strategy',
+      title: 'Deployment Strategy',
+      type: 'checkbox',
+      items: [
+        { id: 'tp', label: 'TP', subtitle: 'Tensor Parallel', default: true, required: true },
+        { id: 'dp', label: 'DP', subtitle: 'Data Parallel', default: false },
+        { id: 'ep', label: 'EP', subtitle: 'Expert Parallel', default: false },
+        { id: 'mtp', label: 'MTP', subtitle: 'Multi-token Prediction', default: false }
+      ]
+    },
+    thinking: {
+      name: 'thinking',
+      title: 'Thinking Capabilities',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    }
+  };
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = option.items.filter(item => item.default).map(item => item.id);
+      } else {
+        const defaultItem = option.items.find(item => item.default);
+        initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+      }
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues(prev => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      } else {
+        return { ...prev, [optionName]: currentValues.filter(id => id !== itemId) };
+      }
+    });
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, quantization, strategy, thinking, toolcall } = values;
+    const strategyArray = Array.isArray(strategy) ? strategy : [];
+
+    const modelSuffix = quantization === 'fp8' ? '-FP8' : '';
+    const modelName = `zai-org/GLM-4.5${modelSuffix}`;
+
+    // Determine TP value based on hardware and quantization
+    let tpValue = 4; // Default for MI300X/MI325X
+    if (hardware === 'mi355x') {
+      tpValue = quantization === 'fp8' ? 2 : 4; // MI355X: TP=2 for FP8, TP=4 for BF16
+    }
+
+    let cmd = 'python -m sglang.launch_server \\\n';
+    cmd += `  --model ${modelName}`;
+
+    // TP is mandatory
+    cmd += ` \\\n  --tp ${tpValue}`;
+
+    // MI300X/MI325X BF16 requires extra flags
+    if ((hardware === 'mi300x' || hardware === 'mi325x') && quantization === 'bf16') {
+      cmd += ` \\\n  --max-context-length 8192 \\\n  --mem-fraction-static 0.9`;
+    }
+
+    // Strategy-specific parameters
+    if (strategyArray.includes('dp')) {
+      cmd += ` \\\n  --dp 8 \\\n  --enable-dp-attention`;
+    }
+    if (strategyArray.includes('ep')) {
+      cmd += ` \\\n  --ep 8`;
+    }
+    if (strategyArray.includes('mtp')) {
+      cmd += ` \\\n  --speculative-algorithm EAGLE \\\n  --speculative-num-steps 3 \\\n  --speculative-eagle-topk 1 \\\n  --speculative-num-draft-tokens 4`;
+    }
+
+    // Add tool call parser if enabled
+    if (toolcall === 'enabled') {
+      cmd += ` \\\n  --tool-call-parser glm45`;
+    }
+
+    // Add thinking parser if enabled
+    if (thinking === 'enabled') {
+      cmd += ` \\\n  --reasoning-parser glm45`;
+    }
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const isDisabled = item.required;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isDisabled} onChange={(e) => handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+              option.items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}) }}>
+                    <input type="radio" name={option.name} value={item.id} checked={isChecked} onChange={() => handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/glm-45v-deployment.jsx

@@ -0,0 +1,176 @@
+export const GLM45VDeployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'b200', label: 'B200', default: true },
+        { id: 'h100', label: 'H100', default: false },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false }
+      ]
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'enabled', label: 'Enabled', default: true },
+        { id: 'disabled', label: 'Disabled', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'enabled', label: 'Enabled', default: true },
+        { id: 'disabled', label: 'Disabled', default: false }
+      ]
+    }
+  };
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      const defaultItem = option.items.find(item => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, quantization, reasoning, toolcall } = values;
+
+    // Model configuration
+    const config = {
+      baseName: 'GLM-4.5V',
+      b200: { tp: 4 },
+      h100: { tp: 4 },
+      h200: { tp: 4 },
+      mi300x: { tp: 4 },
+      mi325x: { tp: 4 },
+      mi355x: { tp: 4 }
+    };
+
+    const hwConfig = config[hardware];
+    if (!hwConfig) {
+      return `# Error: Unknown hardware platform: ${hardware}`;
+    }
+
+    const quantSuffix = quantization === 'fp8' ? '-FP8' : '';
+    const modelName = `zai-org/${config.baseName}${quantSuffix}`;
+
+    // Check if AMD hardware
+    const isAMD = ['mi300x', 'mi325x', 'mi355x'].includes(hardware);
+
+    let cmd = '';
+    if (isAMD) {
+      cmd = 'SGLANG_USE_AITER=0 python3 -m sglang.launch_server \\\n';
+      cmd += `  --model-path ${modelName}`;
+      cmd += ` \\\n  --tp-size ${hwConfig.tp}`;
+    } else {
+      cmd = 'python -m sglang.launch_server \\\n';
+      cmd += `  --model ${modelName}`;
+      if (hwConfig.tp > 1) {
+        cmd += ` \\\n  --tp ${hwConfig.tp}`;
+      }
+    }
+
+    // Add reasoning parser
+    if (reasoning === 'enabled') {
+      cmd += ' \\\n  --reasoning-parser glm45';
+    }
+
+    // Add tool call parser
+    if (toolcall === 'enabled') {
+      cmd += ' \\\n  --tool-call-parser glm45';
+    }
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const isDisabled = item.required;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isDisabled} onChange={(e) => handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+              option.items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}) }}>
+                    <input type="radio" name={option.name} value={item.id} checked={isChecked} onChange={() => handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/glm-46-deployment.jsx

@@ -0,0 +1,215 @@
+export const GLM46Deployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h100', label: 'H100', default: true },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'b200', label: 'B200', default: false },
+        { id: 'b300', label: 'B300', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false }
+      ]
+    },
+    strategy: {
+      name: 'strategy',
+      title: 'Deployment Strategy',
+      type: 'checkbox',
+      items: [
+        { id: 'tp', label: 'TP', subtitle: 'Tensor Parallel', default: true, required: true },
+        { id: 'dp', label: 'DP', subtitle: 'Data Parallel', default: false },
+        { id: 'ep', label: 'EP', subtitle: 'Expert Parallel', default: false },
+        { id: 'mtp', label: 'MTP', subtitle: 'Multi-token Prediction', default: false }
+      ]
+    },
+    thinking: {
+      name: 'thinking',
+      title: 'Thinking Capabilities',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    }
+  };
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = option.items.filter(item => item.default).map(item => item.id);
+      } else {
+        const defaultItem = option.items.find(item => item.default);
+        initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+      }
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues(prev => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      } else {
+        return { ...prev, [optionName]: currentValues.filter(id => id !== itemId) };
+      }
+    });
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, quantization, strategy, thinking, toolcall } = values;
+    const strategyArray = Array.isArray(strategy) ? strategy : [];
+
+    // Check for H100 + BF16 error
+    if (hardware === 'h100' && quantization === 'bf16') {
+      return '# Error: GLM-4.6 in BF16 precision requires more VRAM than 8*H100\n# Please use H200/B200 or select FP8 quantization';
+    }
+
+    const modelSuffix = quantization === 'fp8' ? '-FP8' : '';
+    const modelName = `zai-org/GLM-4.6${modelSuffix}`;
+
+    // Determine TP value based on hardware and quantization
+    let tpValue = 8; // Default for NVIDIA GPUs
+    if (hardware === 'mi300x' || hardware === 'mi325x') {
+      tpValue = 4; // MI300X/MI325X: TP=4 for both BF16 and FP8
+    } else if (hardware === 'mi355x') {
+      tpValue = quantization === 'fp8' ? 2 : 4; // MI355X: TP=2 for FP8, TP=4 for BF16
+    }
+
+    let cmd = 'python -m sglang.launch_server \\\n';
+    cmd += `  --model ${modelName}`;
+
+    // TP is mandatory
+    cmd += ` \\\n  --tp ${tpValue}`;
+
+    // MI300X/MI325X BF16 requires extra flags
+    if ((hardware === 'mi300x' || hardware === 'mi325x') && quantization === 'bf16') {
+      cmd += ` \\\n  --max-context-length 8192 \\\n  --mem-fraction-static 0.9`;
+    }
+
+    // Strategy-specific parameters
+    if (strategyArray.includes('dp')) {
+      cmd += ` \\\n  --dp 8 \\\n  --enable-dp-attention`;
+      if (hardware === 'b300') {
+        cmd += ` \\\n  --cuda-graph-max-bs-decode 256`;
+      }
+    }
+    if (strategyArray.includes('ep')) {
+      cmd += ` \\\n  --ep 8`;
+    }
+    if (strategyArray.includes('mtp')) {
+      cmd += ` \\\n  --speculative-algorithm EAGLE \\\n  --speculative-num-steps 3 \\\n  --speculative-eagle-topk 1 \\\n  --speculative-num-draft-tokens 4`;
+    }
+
+    // Add tool call parser if enabled
+    if (toolcall === 'enabled') {
+      cmd += ` \\\n  --tool-call-parser glm45`;
+    }
+
+    // Add thinking parser if enabled
+    if (thinking === 'enabled') {
+      cmd += ` \\\n  --reasoning-parser glm45`;
+    }
+
+    if (hardware === 'b300') {
+      cmd += ` \\\n  --attention-backend flashinfer`;
+      cmd += ` \\\n  --enforce-disable-flashinfer-allreduce-fusion`;
+    }
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const isDisabled = item.required;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isDisabled} onChange={(e) => handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+              option.items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}) }}>
+                    <input type="radio" name={option.name} value={item.id} checked={isChecked} onChange={() => handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/glm-46v-deployment.jsx

@@ -0,0 +1,211 @@
+export const GLM46VDeployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'b200', label: 'B200', default: true },
+        { id: 'b300', label: 'B300', default: false },
+        { id: 'h100', label: 'H100', default: false },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false }
+      ]
+    },
+    modelsize: {
+      name: 'modelsize',
+      title: 'Model Size',
+      items: [
+        { id: '106b', label: '106B', subtitle: 'GLM-4.6V', default: true },
+        { id: '9b', label: '9B', subtitle: 'GLM-4.6V-Flash', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false }
+      ]
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'enabled', label: 'Enabled', default: true },
+        { id: 'disabled', label: 'Disabled', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'enabled', label: 'Enabled', default: true },
+        { id: 'disabled', label: 'Disabled', default: false }
+      ]
+    }
+  };
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = option.items.filter(item => item.default).map(item => item.id);
+      } else {
+        const defaultItem = option.items.find(item => item.default);
+        initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+      }
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, modelsize, quantization, reasoning, toolcall } = values;
+
+    // Model configurations
+    const modelConfigs = {
+      '106b': {
+        baseName: 'GLM-4.6V',
+        h100: { tp: 8 },
+        h200: { tp: 8 },
+        b200: { tp: 8 },
+        b300: { tp: 8 },
+        mi300x: { tp: 8 },
+        mi325x: { tp: 8 },
+        mi355x: { tp: 8 }
+      },
+      '9b': {
+        baseName: 'GLM-4.6V-Flash',
+        h100: { tp: 1 },
+        h200: { tp: 1 },
+        b200: { tp: 1 },
+        b300: { tp: 1 },
+        mi300x: { tp: 1 },
+        mi325x: { tp: 1 },
+        mi355x: { tp: 1 }
+      }
+    };
+
+    const config = modelConfigs[modelsize];
+    if (!config) {
+      return `# Error: Unknown model size: ${modelsize}`;
+    }
+
+    const hwConfig = config[hardware];
+    if (!hwConfig) {
+      return `# Error: Unknown hardware platform: ${hardware}`;
+    }
+
+    const quantSuffix = quantization === 'fp8' ? '-FP8' : '';
+    const modelName = `zai-org/${config.baseName}${quantSuffix}`;
+
+    if (hardware === 'b300' && modelsize === '9b' && quantization === 'fp8') {
+      return '# Error: GLM-4.6V-Flash-FP8 is not available on B300 in this cookbook configuration\n# Please use BF16 for GLM-4.6V-Flash or select the 106B model';
+    }
+
+    let cmd = 'python -m sglang.launch_server \\\n';
+    cmd += `  --model ${modelName}`;
+
+    if (hwConfig.tp > 1) {
+      cmd += ` \\\n  --tp ${hwConfig.tp}`;
+      if (hwConfig.tp === 8) {
+        cmd += ` \\\n  --mm-enable-dp-encoder`;
+      }
+    }
+
+    // Add reasoning parser if enabled
+    if (reasoning === 'enabled') {
+      cmd += ` \\\n  --reasoning-parser glm45`;
+    }
+
+    // Add tool call parser if enabled
+    if (toolcall === 'enabled') {
+      cmd += ` \\\n  --tool-call-parser glm45`;
+    }
+
+    if (hardware === 'b300') {
+      cmd += ` \\\n  --attention-backend flashinfer`;
+      cmd += ` \\\n  --enforce-disable-flashinfer-allreduce-fusion`;
+      cmd += ` \\\n  --cuda-graph-backend-decode disabled`;
+    }
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const isDisabled = item.required;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isDisabled} onChange={(e) => handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+              option.items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}) }}>
+                    <input type="radio" name={option.name} value={item.id} checked={isChecked} onChange={() => handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/glm-47-deployment.jsx

@@ -0,0 +1,290 @@
+export const GLM47Deployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'b200', label: 'B200', default: true },
+        { id: 'gb200', label: 'GB200', default: false },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'nvfp4', label: 'NVFP4', default: true },
+        { id: 'fp8', label: 'FP8', default: false },
+        { id: 'bf16', label: 'BF16', default: false }
+      ]
+    },
+    gpus: {
+      name: 'gpus',
+      title: 'Number of GPUs',
+      items: [
+        { id: '2', label: '2', default: false },
+        { id: '4', label: '4', default: true },
+        { id: '8', label: '8', default: false }
+      ]
+    },
+    strategy: {
+      name: 'strategy',
+      title: 'Deployment Strategy',
+      type: 'checkbox',
+      items: [
+        { id: 'tp', label: 'TP', subtitle: 'Tensor Parallel', default: true, required: true },
+        { id: 'dp', label: 'DP', subtitle: 'Data Parallel', default: false },
+        { id: 'ep', label: 'EP', subtitle: 'Expert Parallel', default: false },
+        { id: 'mtp', label: 'MTP', subtitle: 'Multi-token Prediction', default: false }
+      ]
+    },
+    thinking: {
+      name: 'thinking',
+      title: 'Thinking Capabilities',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    }
+  };
+
+  // §3.2 support matrix — single source of truth for the greyed-out controls and
+  // generateCommand. hardware -> weight type -> allowed TP sizes (missing key = unsupported).
+  const SUPPORT = {
+    b200: { nvfp4: [2, 4, 8], fp8: [4, 8], bf16: [8] },
+    gb200: { nvfp4: [2, 4], fp8: [4] },
+    h200: { fp8: [8], bf16: [8] },
+    mi300x: { fp8: [2, 4, 8], bf16: [4, 8] },
+    mi325x: { fp8: [2, 4, 8], bf16: [4, 8] },
+    mi355x: { fp8: [2, 4, 8], bf16: [4, 8] },
+  };
+  const quantSupported = (hw, q) => Boolean(SUPPORT[hw] && SUPPORT[hw][q]);
+  const allowedTps = (hw, q) => (SUPPORT[hw] && SUPPORT[hw][q]) || [];
+  const firstSupportedQuant = (hw) => Object.keys(SUPPORT[hw] || {})[0] || 'fp8';
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = option.items.filter(item => item.default).map(item => item.id);
+      } else {
+        const defaultItem = option.items.find(item => item.default);
+        initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+      }
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => {
+      const next = { ...prev, [optionName]: value };
+      // Keep weight type + GPU count within the §3.2 matrix as hardware/quant change,
+      // so the displayed command is always a supported configuration.
+      if (optionName === 'hardware' || optionName === 'quantization') {
+        if (!quantSupported(next.hardware, next.quantization)) {
+          next.quantization = firstSupportedQuant(next.hardware);
+        }
+        const tps = allowedTps(next.hardware, next.quantization);
+        if (tps.length && !tps.includes(parseInt(next.gpus, 10))) {
+          next.gpus = String(tps.includes(4) ? 4 : tps[0]);
+        }
+      }
+      return next;
+    });
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues(prev => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      } else {
+        return { ...prev, [optionName]: currentValues.filter(id => id !== itemId) };
+      }
+    });
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, quantization, gpus, strategy, thinking, toolcall } = values;
+    const strategyArray = Array.isArray(strategy) ? strategy : [];
+
+    const isNvidiaBlackwell = hardware === 'b200' || hardware === 'gb200';
+    const isAMD = hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi355x';
+
+    // Only emit §3.2-supported commands; guards any stale (greyed-out) selection.
+    if (!quantSupported(hardware, quantization)) {
+      return (
+        `# ${quantization.toUpperCase()} is not supported on ${hardware.toUpperCase()} per the §3.2 matrix.\n` +
+        `# Pick a highlighted weight type above.`
+      );
+    }
+
+    // Pick model checkpoint by weight type
+    let modelName = 'zai-org/GLM-4.7';
+    if (quantization === 'nvfp4') {
+      modelName = 'nvidia/GLM-4.7-NVFP4';
+    } else if (quantization === 'fp8') {
+      modelName = 'zai-org/GLM-4.7-FP8';
+    }
+
+    let cmd = 'python -m sglang.launch_server \\\n';
+    cmd += `  --model ${modelName}`;
+
+    if (isAMD) {
+      // AMD (MI300X / MI325X / MI355X): validated pre-Blackwell command shape.
+      // TP is fixed per chip + weight type, so the GPU-count selector is unused here.
+      let tpValue = 4; // MI300X / MI325X default
+      if (hardware === 'mi355x') {
+        tpValue = quantization === 'fp8' ? 2 : 4; // MI355X: TP=2 FP8, TP=4 BF16
+      }
+      cmd += ` \\\n  --tp ${tpValue}`;
+
+      // MI300X/MI325X BF16 requires extra flags
+      if ((hardware === 'mi300x' || hardware === 'mi325x') && quantization === 'bf16') {
+        cmd += ` \\\n  --max-context-length 8192 \\\n  --mem-fraction-static 0.9`;
+      }
+      if (strategyArray.includes('dp')) {
+        cmd += ` \\\n  --dp 8 \\\n  --enable-dp-attention`;
+      }
+      if (strategyArray.includes('ep')) {
+        cmd += ` \\\n  --ep 8`;
+      }
+    } else {
+      // NVIDIA (B200 / GB200 / H200): TP follows the "Number of GPUs" selector,
+      // clamped to a §3.2-supported value for the chosen hardware + weight type.
+      const tps = allowedTps(hardware, quantization);
+      let tpValue = parseInt(gpus, 10) || tps[0];
+      if (!tps.includes(tpValue)) {
+        tpValue = tps.includes(4) ? 4 : tps[0];
+      }
+      cmd += ` \\\n  --tp-size ${tpValue}`;
+
+      // Blackwell + NVFP4: enable EP when the user selected it
+      if (isNvidiaBlackwell && quantization === 'nvfp4' && strategyArray.includes('ep')) {
+        cmd += ` \\\n  --ep ${tpValue}`;
+      }
+      // Blackwell + NVFP4: leave headroom for cuda-graph capture
+      if (isNvidiaBlackwell && quantization === 'nvfp4') {
+        cmd += ` \\\n  --mem-fraction-static 0.85`;
+      }
+    }
+
+    // MTP / EAGLE speculative decoding (all platforms)
+    if (strategyArray.includes('mtp')) {
+      cmd += ` \\\n  --speculative-algorithm EAGLE \\\n  --speculative-num-steps 3 \\\n  --speculative-eagle-topk 1 \\\n  --speculative-num-draft-tokens 4`;
+    }
+
+    if (toolcall === 'enabled') {
+      cmd += ` \\\n  --tool-call-parser glm47`;
+    }
+
+    // glm45 is the registered reasoning detector; glm47 is only valid for tool-call.
+    if (thinking === 'enabled') {
+      cmd += ` \\\n  --reasoning-parser glm45`;
+    }
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  // Which Deployment Strategy toggles apply (mirrors generateCommand): DP only on
+  // AMD; EP only on AMD or Blackwell + NVFP4 — greyed otherwise.
+  const hwSel = values.hardware;
+  const isAMDSel = hwSel === 'mi300x' || hwSel === 'mi325x' || hwSel === 'mi355x';
+  const isBlackwellSel = hwSel === 'b200' || hwSel === 'gb200';
+  const strategyApplies = (id) => {
+    if (id === 'dp') return isAMDSel;
+    if (id === 'ep') return isAMDSel || (isBlackwellSel && values.quantization === 'nvfp4');
+    return true; // tp (required) and mtp (all platforms)
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        // GPU count is fixed (greyed) on AMD; on NVIDIA individual counts are greyed
+        // per the §3.2 matrix. Weight types unsupported on the hardware are greyed too.
+        const gpusGroupAMD = key === 'gpus' && isAMDSel;
+        return (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}{gpusGroupAMD ? ' (N/A for AMD)' : ''}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const isDisabled = item.required || (key === 'strategy' && !strategyApplies(item.id));
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isDisabled} onChange={(e) => handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+              option.items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                const isDisabled =
+                  (key === 'gpus' && (gpusGroupAMD || !allowedTps(values.hardware, values.quantization).includes(parseInt(item.id, 10)))) ||
+                  (key === 'quantization' && !quantSupported(values.hardware, item.id));
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="radio" name={option.name} value={item.id} checked={isChecked} disabled={isDisabled} onChange={() => !isDisabled && handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/glm-47-flash-deployment.jsx

@@ -0,0 +1,190 @@
+export const GLM47FlashDeployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h100', label: 'H100', default: true },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'b200', label: 'B200', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true }
+      ]
+    },
+    strategy: {
+      name: 'strategy',
+      title: 'Deployment Strategy',
+      type: 'checkbox',
+      items: [
+        { id: 'tp', label: 'TP', subtitle: 'Tensor Parallel', default: true, required: true },
+        { id: 'dp', label: 'DP', subtitle: 'Data Parallel', default: false },
+        { id: 'mtp', label: 'MTP', subtitle: 'Multi-token Prediction', default: false }
+      ]
+    },
+    thinking: {
+      name: 'thinking',
+      title: 'Thinking Capabilities',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    }
+  };
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = option.items.filter(item => item.default).map(item => item.id);
+      } else {
+        const defaultItem = option.items.find(item => item.default);
+        initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+      }
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues(prev => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      } else {
+        return { ...prev, [optionName]: currentValues.filter(id => id !== itemId) };
+      }
+    });
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, quantization, strategy, thinking, toolcall } = values;
+    const strategyArray = Array.isArray(strategy) ? strategy : [];
+
+    const modelName = `zai-org/GLM-4.7-Flash`;
+
+    // GLM-4.7-Flash is a 30B-A3B MoE model, lighter than GLM-4.7
+    const tpValue = 1; // Default for single GPU
+
+    let cmd = 'python -m sglang.launch_server \\\n ';
+    cmd += `  --model ${modelName}`;
+
+    // TP is mandatory
+    cmd += ` \\\n   --tp ${tpValue}`;
+
+    if (hardware === 'b200') {
+      cmd += ` \\\n   --attention-backend triton`;
+    }
+
+    // Strategy-specific parameters
+    if (strategyArray.includes('dp')) {
+      cmd += ` \\\n   --dp 1 \\\n   --enable-dp-attention`;
+    }
+    if (strategyArray.includes('mtp')) {
+
+      if (hardware === 'b200') {
+        cmd += ` \\\n   --speculative-draft-attention-backend triton`;
+      }
+      cmd += ` \\\n   --speculative-algorithm EAGLE \\\n   --speculative-num-steps 3 \\\n   --speculative-eagle-topk 1 \\\n   --speculative-num-draft-tokens 4`;
+    }
+
+    // Add tool call parser if enabled
+    if (toolcall === 'enabled') {
+      cmd += ` \\\n   --tool-call-parser glm47`;
+    }
+
+    // Add thinking parser if enabled
+    if (thinking === 'enabled') {
+      cmd += ` \\\n  --reasoning-parser glm45`;
+    }
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const isDisabled = item.required;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isDisabled} onChange={(e) => handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+              option.items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}) }}>
+                    <input type="radio" name={option.name} value={item.id} checked={isChecked} onChange={() => handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/glm-5-deployment.jsx

@@ -0,0 +1,295 @@
+export const GLM5Deployment = () => {
+  // Config mirrors sgl-cookbook src/components/autoregressive/GLM5ConfigGenerator/index.js.
+  //
+  // Supported quantization per hardware:
+  //   H100 / H200 / MI300X / MI325X / MI355X → BF16 (AMD only) + FP8 (NV only)
+  //   B200 → NVFP4 (default), FP8, BF16
+  //   B300 → NVFP4 (default), FP8
+  //
+  // BF16 always needs 2x GPUs compared to FP8. AMD only supports BF16.
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200',   label: 'H200',            default: true  },
+        { id: 'b200',   label: 'B200',            default: false },
+        { id: 'b300',   label: 'B300',            default: false },
+        { id: 'h100',   label: 'H100',            default: false },
+        { id: 'mi300x', label: 'MI300X/MI325X',   default: false },
+        { id: 'mi355x', label: 'MI355X',          default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      getDynamicItems: (values) => {
+        const hw = values.hardware;
+        const isAMD = hw === 'mi300x' || hw === 'mi355x';
+        const isB300 = hw === 'b300';
+        const isBlackwell = hw === 'b200' || isB300;
+        return [
+          { id: 'bf16',  label: 'BF16',  subtitle: 'Full Weights',        default: isAMD, disabled: isB300, disabledReason: isB300 ? 'BF16 requires more than the validated 8-GPU B300 node' : '' },
+          { id: 'fp8',   label: 'FP8',   subtitle: 'High Throughput',     default: !isAMD && !isBlackwell, disabled: isAMD,  disabledReason: 'FP8 not verified on AMD' },
+          { id: 'nvfp4', label: 'NVFP4', subtitle: 'Highest Throughput',  default: isBlackwell,            disabled: !isBlackwell, disabledReason: 'NVFP4 only on B200/B300' }
+        ];
+      }
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      condition: (values) => values.quantization !== 'nvfp4',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled',  label: 'Enabled',  default: true  }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      condition: (values) => values.quantization !== 'nvfp4',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled',  label: 'Enabled',  default: true  }
+      ]
+    },
+    dpattention: {
+      name: 'dpattention',
+      title: 'DP Attention',
+      condition: (values) => values.quantization !== 'nvfp4',
+      items: [
+        { id: 'disabled', label: 'Disabled', subtitle: 'Low Latency',      default: true },
+        { id: 'enabled',  label: 'Enabled',  subtitle: 'High Throughput',  default: false }
+      ]
+    },
+    speculative: {
+      name: 'speculative',
+      title: 'Speculative Decoding',
+      condition: (values) => values.hardware !== 'mi300x' && values.hardware !== 'mi355x' && values.quantization !== 'nvfp4',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled',  label: 'Enabled',  default: true  }
+      ]
+    }
+  };
+
+  // BF16 always 2× the GPUs of FP8.
+  const modelConfigs = {
+    h100:   { fp8: { tp: 16, mem: 0.85 }, bf16: { tp: 32, mem: 0.85 } },
+    h200:   { fp8: { tp: 8,  mem: 0.85 }, bf16: { tp: 16, mem: 0.85 } },
+    b200:   { nvfp4: { tp: 4, mem: 0.9 }, fp8: { tp: 8, mem: 0.9 }, bf16: { tp: 16, mem: 0.9 } },
+    b300:   { nvfp4: { tp: 4, mem: 0.9 }, fp8: { tp: 8, mem: 0.9 } },
+    mi300x: { bf16: { tp: 8, mem: 0.80 } },
+    mi355x: { bf16: { tp: 8, mem: 0.80 } }
+  };
+
+  const resolveItems = (option, values) => {
+    if (typeof option.getDynamicItems === 'function') return option.getDynamicItems(values);
+    return option.items;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    for (const [key, option] of Object.entries(options)) {
+      const items = resolveItems(option, initialState);
+      const def = items.find(i => i.default && !i.disabled) || items.find(i => !i.disabled) || items[0];
+      initialState[key] = def.id;
+    }
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  // When hardware changes, re-resolve quantization (and downstream) defaults to
+  // stay consistent (AMD→BF16, B200→NVFP4, etc.).
+  useEffect(() => {
+    setValues(prev => {
+      const next = { ...prev };
+      for (const [key, option] of Object.entries(options)) {
+        if (typeof option.getDynamicItems !== 'function') continue;
+        const items = option.getDynamicItems(next);
+        const current = items.find(i => i.id === next[key]);
+        if (!current || current.disabled) {
+          const fallback = items.find(i => i.default && !i.disabled) || items.find(i => !i.disabled);
+          if (fallback) next[key] = fallback.id;
+        }
+      }
+      return next;
+    });
+  }, [values.hardware]);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  const generateCommand = () => {
+    const { hardware, quantization } = values;
+    const isAMD = hardware === 'mi300x' || hardware === 'mi355x';
+    const isNVFP4 = quantization === 'nvfp4';
+    const effectiveQuant = isAMD ? 'bf16' : quantization;
+
+    let modelName;
+    if (isNVFP4) {
+      modelName = 'nvidia/GLM-5-NVFP4';
+    } else {
+      const suffix = effectiveQuant === 'fp8' ? '-FP8' : '';
+      modelName = `zai-org/GLM-5${suffix}`;
+    }
+
+    const hwConfig = modelConfigs[hardware]?.[effectiveQuant];
+    if (!hwConfig) {
+      return '# Please select a valid hardware and quantization combination';
+    }
+    const tpValue = hwConfig.tp;
+    const memFraction = hwConfig.mem;
+
+    let cmd = 'sglang serve \\\n';
+    cmd += `  --model-path ${modelName}`;
+    cmd += ` \\\n  --tp ${tpValue}`;
+
+    if (isNVFP4) {
+      cmd += ' \\\n  --trust-remote-code';
+      if (hardware === 'b300') {
+        cmd += ' \\\n  --attention-backend flashinfer';
+        cmd += ' \\\n  --enforce-disable-flashinfer-allreduce-fusion';
+        cmd += ' \\\n  --cuda-graph-backend-prefill disabled';
+        cmd += ' \\\n  --moe-runner-backend flashinfer_cutlass';
+        cmd += ' \\\n  --cuda-graph-backend-decode disabled';
+        cmd += ' \\\n  --disable-flashinfer-autotune';
+      } else {
+        cmd += ' \\\n  --quantization modelopt_fp4';
+        cmd += ' \\\n  --kv-cache-dtype fp8_e4m3';
+        cmd += ' \\\n  --dsa-decode-backend trtllm';
+        cmd += ' \\\n  --dsa-prefill-backend trtllm';
+        cmd += ' \\\n  --moe-runner-backend flashinfer_trtllm';
+        cmd += ' \\\n  --enable-flashinfer-allreduce-fusion';
+        cmd += ' \\\n  --enable-dp-lm-head';
+        cmd += ' \\\n  --disable-radix-cache';
+        cmd += ' \\\n  --max-prefill-tokens 32768';
+        cmd += ' \\\n  --chunked-prefill-size 32768';
+      }
+      cmd += ` \\\n  --mem-fraction-static ${memFraction}`;
+      cmd += ' \\\n  --scheduler-recv-interval 10';
+      cmd += ' \\\n  --tokenizer-worker-num 6';
+      return cmd;
+    }
+
+    // AMD-specific: DSA tilelang backend.
+    if (isAMD) {
+      cmd += ' \\\n  --trust-remote-code';
+      cmd += ' \\\n  --dsa-prefill-backend tilelang';
+      cmd += ' \\\n  --dsa-decode-backend tilelang';
+      cmd += ' \\\n  --chunked-prefill-size 131072';
+      cmd += ' \\\n  --watchdog-timeout 1200';
+    }
+
+    if (values.dpattention === 'enabled') {
+      cmd += ` \\\n  --dp ${tpValue} \\\n  --enable-dp-attention`;
+      if (hardware === 'b300') {
+        cmd += ' \\\n  --cuda-graph-max-bs-decode 256';
+      }
+    }
+    if (values.reasoning === 'enabled') cmd += ' \\\n  --reasoning-parser glm45';
+    if (values.toolcall  === 'enabled') cmd += ' \\\n  --tool-call-parser glm47';
+    if (values.speculative === 'enabled') {
+      cmd += ' \\\n  --speculative-algorithm EAGLE';
+      cmd += ' \\\n  --speculative-num-steps 3';
+      cmd += ' \\\n  --speculative-eagle-topk 1';
+      cmd += ' \\\n  --speculative-num-draft-tokens 4';
+    }
+
+    // B200 FP8: consolidated optimized flags.
+    if (hardware === 'b200' && effectiveQuant === 'fp8') {
+      cmd += ' \\\n  --ep 1';
+      cmd += ' \\\n  --quantization fp8';
+      cmd += ' \\\n  --attention-backend dsa';
+      cmd += ' \\\n  --dsa-decode-backend trtllm';
+      cmd += ' \\\n  --dsa-prefill-backend trtllm';
+      cmd += ' \\\n  --moe-runner-backend flashinfer_trtllm';
+      cmd += ' \\\n  --enable-flashinfer-allreduce-fusion';
+    }
+
+    if (hardware === 'b300' && effectiveQuant === 'fp8') {
+      cmd += ' \\\n  --attention-backend flashinfer';
+      cmd += ' \\\n  --enforce-disable-flashinfer-allreduce-fusion';
+      cmd += ' \\\n  --cuda-graph-backend-prefill disabled';
+    }
+
+    // H200 FP8: flashinfer allreduce fusion.
+    if (hardware === 'h200' && effectiveQuant === 'fp8') {
+      cmd += ' \\\n  --enable-flashinfer-allreduce-fusion';
+    }
+
+    cmd += ` \\\n  --mem-fraction-static ${memFraction}`;
+    return cmd;
+  };
+
+  // Styles
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.4 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (typeof option.condition === 'function' && !option.condition(values)) return null;
+        const items = resolveItems(option, values);
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                const isDisabled = !!item.disabled;
+                return (
+                  <label
+                    key={item.id}
+                    style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}
+                    title={item.disabledReason || ''}
+                  >
+                    <input
+                      type="radio"
+                      name={option.name}
+                      value={item.id}
+                      checked={isChecked}
+                      disabled={isDisabled}
+                      onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                      style={{ display: 'none' }}
+                    />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/glm-51-deployment.jsx

@@ -0,0 +1,241 @@
+export const GLM51Deployment = () => {
+  // Config mirrors sgl-cookbook src/components/autoregressive/GLM51ConfigGenerator/index.js.
+  //
+  // Recommended quantization per hardware:
+  //   H100 / H200 → FP8
+  //   B300 / GB300 → NVFP4
+  //   MI300X / MI325X → BF16 (FP8 not verified on AMD)
+  //   MI355X (gfx950) → MXFP4 (amd/GLM-5.1-MXFP4); BF16 also supported.
+  //     MI350X is identical to MI355X (cooling only) and is omitted here.
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h100',   label: 'H100',          default: false },
+        { id: 'h200',   label: 'H200',          default: true  },
+        { id: 'b300',   label: 'B300',          default: false },
+        { id: 'gb300',  label: 'GB300',         default: false },
+        { id: 'mi300x', label: 'MI300X',        default: false },
+        { id: 'mi325x', label: 'MI325X',        default: false },
+        { id: 'mi355x', label: 'MI355X',        default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      getDynamicItems: (values) => {
+        const hw = values.hardware;
+        const isAMD = ['mi300x', 'mi325x', 'mi355x'].includes(hw);
+        const isGfx950 = hw === 'mi355x'; // MI350X identical (cooling only)
+        const supportsNVFP4 = ['b300', 'gb300'].includes(hw);
+        const isB300 = hw === 'b300';
+        const isGB300 = hw === 'gb300';
+        return [
+          { id: 'mxfp4', label: 'MXFP4', subtitle: 'gfx950',             default: isGfx950,                 disabled: !isGfx950, disabledReason: !isGfx950 ? 'MXFP4 verified on MI355X (gfx950)' : '' },
+          { id: 'bf16',  label: 'BF16',  subtitle: 'Full Weights',       default: isAMD && !isGfx950,       disabled: !isAMD, disabledReason: supportsNVFP4 ? 'NVFP4 is recommended for this hardware' : 'FP8 is recommended for this hardware' },
+          { id: 'fp8',   label: 'FP8',   subtitle: 'High Throughput',    default: !isAMD && !supportsNVFP4, disabled: isAMD || supportsNVFP4, disabledReason: isAMD ? 'FP8 not verified on AMD' : (supportsNVFP4 ? 'NVFP4 is recommended for this hardware' : '') },
+          { id: 'nvfp4', label: 'NVFP4', subtitle: 'Blackwell FP4',      default: isB300 || isGB300,        disabled: !supportsNVFP4, disabledReason: !supportsNVFP4 ? 'NVFP4 only on B300/GB300' : '' }
+        ];
+      }
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled',  label: 'Enabled',  default: true  }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled',  label: 'Enabled',  default: true  }
+      ]
+    },
+    dpattention: {
+      name: 'dpattention',
+      title: 'DP Attention',
+      items: [
+        { id: 'disabled', label: 'Disabled', subtitle: 'Low Latency',     default: true  },
+        { id: 'enabled',  label: 'Enabled',  subtitle: 'High Throughput', default: false }
+      ]
+    }
+  };
+
+  const modelConfigs = {
+    h100:   { fp8: { tp: 16, mem: 0.85 } },
+    h200:   { fp8: { tp: 8,  mem: 0.85 } },
+    b300:   { nvfp4: { tp: 8, mem: 0.80 }, fp8: { tp: 8,  mem: 0.9  }, bf16: { tp: 16, mem: 0.9  } },
+    gb300:  { nvfp4: { tp: 4, mem: 0.80 }, fp8: { tp: 4,  mem: 0.9  } },
+    mi300x: { bf16: { tp: 8, mem: 0.80 } },
+    mi325x: { bf16: { tp: 8, mem: 0.80 } },
+    mi355x: { bf16: { tp: 8, mem: 0.80 }, mxfp4: { tp: 4, mem: 0.85 } }
+  };
+
+  const resolveItems = (option, values) => {
+    if (typeof option.getDynamicItems === 'function') return option.getDynamicItems(values);
+    return option.items;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    for (const [key, option] of Object.entries(options)) {
+      const items = resolveItems(option, initialState);
+      const def = items.find(i => i.default && !i.disabled) || items.find(i => !i.disabled) || items[0];
+      initialState[key] = def.id;
+    }
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    setValues(prev => {
+      const next = { ...prev };
+      for (const [key, option] of Object.entries(options)) {
+        if (typeof option.getDynamicItems !== 'function') continue;
+        const items = option.getDynamicItems(next);
+        const current = items.find(i => i.id === next[key]);
+        if (!current || current.disabled) {
+          const fallback = items.find(i => i.default && !i.disabled) || items.find(i => !i.disabled);
+          if (fallback) next[key] = fallback.id;
+        }
+      }
+      return next;
+    });
+  }, [values.hardware]);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  const generateCommand = () => {
+    const { hardware, quantization } = values;
+    const isAMD = ['mi300x', 'mi325x', 'mi355x'].includes(hardware);
+    const isGfx950 = hardware === 'mi355x'; // MI350X identical (cooling only)
+    const recommendsNVFP4 = ['b300', 'gb300'].includes(hardware);
+    const effectiveQuant = isAMD
+      ? (isGfx950 && quantization === 'mxfp4' ? 'mxfp4' : 'bf16')
+      : (recommendsNVFP4 ? 'nvfp4' : 'fp8');
+    const suffix = effectiveQuant === 'fp8' ? '-FP8' : '';
+    const modelName =
+      effectiveQuant === 'nvfp4' ? 'nvidia/GLM-5.1-NVFP4'
+        : effectiveQuant === 'mxfp4' ? 'amd/GLM-5.1-MXFP4'
+          : `zai-org/GLM-5.1${suffix}`;
+
+    const hwConfig = modelConfigs[hardware][effectiveQuant];
+    if (!hwConfig) return '# Configuration not available for the selected hardware and quantization.';
+
+    const tpValue = hwConfig.tp;
+    const memFraction = hwConfig.mem;
+
+    let cmd = 'sglang serve \\\n';
+    cmd += `  --model-path ${modelName}`;
+    cmd += ` \\\n  --tp ${tpValue}`;
+
+    if (effectiveQuant === 'nvfp4') {
+      cmd += ' \\\n  --quantization modelopt_fp4';
+      cmd += ' \\\n  --trust-remote-code';
+    }
+
+    if (isAMD) {
+      cmd += ' \\\n  --trust-remote-code';
+      if (effectiveQuant === 'mxfp4') cmd += ' \\\n  --kv-cache-dtype fp8_e4m3';
+      cmd += ' \\\n  --dsa-prefill-backend tilelang';
+      cmd += ' \\\n  --dsa-decode-backend tilelang';
+      cmd += ' \\\n  --chunked-prefill-size 131072';
+      cmd += ' \\\n  --watchdog-timeout 1200';
+    }
+
+    if (values.dpattention === 'enabled') {
+      cmd += ` \\\n  --dp ${tpValue} \\\n  --enable-dp-attention`;
+    }
+    if (values.reasoning === 'enabled') cmd += ' \\\n  --reasoning-parser glm45';
+    if (values.toolcall  === 'enabled') cmd += ' \\\n  --tool-call-parser glm47';
+    // EAGLE MTP speculative decoding: emitted by default (recommended) on all
+    // hardware. Verified on NVIDIA and on AMD MI300X/MI325X (gfx942) and
+    // MI355X (gfx950).
+    cmd += ' \\\n  --speculative-algorithm EAGLE';
+    cmd += ' \\\n  --speculative-num-steps 3';
+    cmd += ' \\\n  --speculative-eagle-topk 1';
+    cmd += ' \\\n  --speculative-num-draft-tokens 4';
+    // On AMD GPUs the aiter custom all-reduce kernel deadlocks during EAGLE
+    // verify at high concurrency, so disable it to avoid server hangs.
+    if (isAMD) cmd += ' \\\n  --disable-custom-all-reduce';
+
+    cmd += ` \\\n  --mem-fraction-static ${memFraction}`;
+    return cmd;
+  };
+
+  // Styles
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.4 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (typeof option.condition === 'function' && !option.condition(values)) return null;
+        const items = resolveItems(option, values);
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                const isDisabled = !!item.disabled;
+                return (
+                  <label
+                    key={item.id}
+                    style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}
+                    title={item.disabledReason || ''}
+                  >
+                    <input
+                      type="radio"
+                      name={option.name}
+                      value={item.id}
+                      checked={isChecked}
+                      disabled={isDisabled}
+                      onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                      style={{ display: 'none' }}
+                    />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/glm-glyph-deployment.jsx

@@ -0,0 +1,372 @@
+export const GLMGlyphDeployment = () => {
+  const modelFamily = 'zai-org';
+
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'b200', label: 'B200', default: true },
+        { id: 'h100', label: 'H100', default: false },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false }
+      ]
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'enabled', label: 'Enabled', default: true },
+        { id: 'disabled', label: 'Disabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--reasoning-parser glm45' : null
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'enabled', label: 'Enabled', default: true },
+        { id: 'disabled', label: 'Disabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--tool-call-parser glm45' : null
+    }
+  };
+
+  const modelConfig = {
+    baseName: 'Glyph',
+    b200: { tp: 4, bf16: true, fp8: true },
+    h100: { tp: 4, bf16: true, fp8: true },
+    h200: { tp: 4, bf16: true, fp8: true },
+    mi300x: { tp: 4, bf16: true, fp8: true },
+    mi325x: { tp: 4, bf16: true, fp8: true },
+    mi355x: { tp: 2, bf16: true, fp8: true }
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, quantization } = values;
+
+    const hwConfig = modelConfig[hardware];
+    if (!hwConfig) {
+      return `# Error: Unknown hardware platform: ${hardware}`;
+    }
+
+    const quantSuffix = quantization === 'fp8' ? '-FP8' : '';
+    const modelName = `${modelFamily}/${modelConfig.baseName}${quantSuffix}`;
+
+    const isAMD = ['mi300x', 'mi325x', 'mi355x'].includes(hardware);
+
+    let cmd = '';
+    if (isAMD) {
+      cmd = 'python3 -m sglang.launch_server \\\n';
+      cmd += `  --model-path ${modelName}`;
+      cmd += ` \\\n  --tp ${hwConfig.tp}`;
+    } else {
+      cmd = 'python -m sglang.launch_server \\\n';
+      cmd += `  --model ${modelName}`;
+      if (hwConfig.tp > 1) {
+        cmd += ` \\\n  --tp ${hwConfig.tp}`;
+      }
+    }
+
+    for (const [key, option] of Object.entries(options)) {
+      if (key === 'hardware' || key === 'quantization') continue;
+
+      if (option.commandRule) {
+        const rule = option.commandRule(values[key]);
+        if (rule) {
+          cmd += ` \\\n  ${rule}`;
+        }
+      }
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/glm-ocr-deployment.jsx

@@ -0,0 +1,140 @@
+export const GLMOCRDeployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h100', label: 'H100', default: true },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'b200', label: 'B200', default: false }
+      ]
+    },
+    strategy: {
+      name: 'strategy',
+      title: 'Deployment Strategy',
+      type: 'checkbox',
+      items: [
+        { id: 'mtp', label: 'MTP', subtitle: 'Multi-token Prediction', default: true }
+      ]
+    }
+  };
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = option.items.filter(item => item.default).map(item => item.id);
+      } else {
+        const defaultItem = option.items.find(item => item.default);
+        initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+      }
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode - prioritize page theme over system preference
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues(prev => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      } else {
+        return { ...prev, [optionName]: currentValues.filter(id => id !== itemId) };
+      }
+    });
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { strategy } = values;
+    const strategyArray = Array.isArray(strategy) ? strategy : [];
+
+    const modelName = 'zai-org/GLM-OCR';
+
+    let cmd = 'SGLANG_USE_CUDA_IPC_TRANSPORT=1 python -m sglang.launch_server \\\n';
+    cmd += `  --model ${modelName}`;
+
+    if (strategyArray.includes('mtp')) {
+      cmd += ` \\\n  --speculative-algorithm EAGLE`;
+      cmd += ` \\\n  --speculative-num-steps 3`;
+      cmd += ` \\\n  --speculative-eagle-topk 1`;
+      cmd += ` \\\n  --speculative-num-draft-tokens 4`;
+    }
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const isDisabled = item.required;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isDisabled} onChange={(e) => handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+              option.items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}) }}>
+                    <input type="radio" name={option.name} value={item.id} checked={isChecked} onChange={() => handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/gpt-oss-deployment.jsx

@@ -0,0 +1,275 @@
+export const GPTOSSDeployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'b200', label: 'B200', default: true },
+        { id: 'b300', label: 'B300', default: false },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'h100', label: 'H100', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false },
+        { id: 'xeon', label: 'XEON', default: false }
+      ]
+    },
+    modelsize: {
+      name: 'modelsize',
+      title: 'Model Size',
+      items: [
+        { id: '120b', label: '120B', subtitle: 'MOE', default: true },
+        { id: '20b', label: '20B', subtitle: 'MOE', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'mxfp4', label: 'MXFP4', default: true },
+        { id: 'bf16', label: 'BF16', default: false }
+      ]
+    },
+    reasoningParser: {
+      name: 'reasoningParser',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    },
+    speculative: {
+      name: 'speculative',
+      title: 'Speculative Decoding',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    }
+  };
+
+  const getDisplayOptions = (values) => ({
+    ...options,
+    quantization: options.quantization,
+    speculative: {
+      ...options.speculative,
+      items: options.speculative.items.map(item => ({
+        ...item,
+        disabled: values.hardware === 'xeon' && item.id === 'enabled'
+      }))
+    }
+  });
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = option.items.filter(item => item.default).map(item => item.id);
+      } else {
+        const defaultItem = option.items.find(item => item.default);
+        initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+      }
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => {
+      const next = { ...prev, [optionName]: value };
+      if (optionName === 'hardware' && value === 'xeon') {
+        next.speculative = 'disabled';
+      }
+      return next;
+    });
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, modelsize, quantization, reasoningParser, toolcall, speculative } = values;
+
+    // Model configurations
+    const modelConfigs = {
+      '120b': {
+        baseName: '120b',
+        h100: { tp: 8 },
+        h200: { tp: 8 },
+        b200: { tp: 8 },
+        b300: { tp: 8 },
+        mi300x: { tp: 8 },
+        mi325x: { tp: 8 },
+        mi355x: { tp: 8 },
+        xeon: { tp: 3 }
+      },
+      '20b': {
+        baseName: '20b',
+        h100: { tp: 1 },
+        h200: { tp: 1 },
+        b200: { tp: 1 },
+        b300: { tp: 1 },
+        mi300x: { tp: 1 },
+        mi325x: { tp: 1 },
+        mi355x: { tp: 1 },
+        xeon: { tp: 3 }
+      }
+    };
+
+    const config = modelConfigs[modelsize];
+    if (!config) {
+      return `# Error: Unknown model size: ${modelsize}`;
+    }
+
+    const hwConfig = config[hardware];
+    if (!hwConfig) {
+      return `# Error: Unknown hardware platform: ${hardware}`;
+    }
+
+    const quantSuffix = quantization === 'bf16' ? '-bf16' : '';
+    const orgPrefix = quantization === 'bf16' ? 'lmsys' : 'openai';
+    const modelName = `${orgPrefix}/gpt-oss-${config.baseName}${quantSuffix}`;
+
+    let cmd = '';
+
+    // MI30x GPUs with speculative decoding: Work In Progress
+    if ((hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi355x') && speculative === 'enabled') {
+      return '# MI30x GPUs Speculative Decoding: Work In Progress';
+    }
+
+    // MI300X/MI325X MXFP4: Work In Progress (only MI355X with gfx950 supports MXFP4)
+    if ((hardware === 'mi300x' || hardware === 'mi325x') && quantization === 'mxfp4') {
+      return '# MI300X/MI325X GPUs with MXFP4 quantization: Work In Progress';
+    }
+
+
+    // AMD MI30x requires SGLANG_USE_AITER=0 due to YaRN RoPE precision issues
+    if (hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi355x') {
+      cmd += 'SGLANG_USE_AITER=0 ';
+    }
+
+    if (speculative === 'enabled') {
+      cmd += 'SGLANG_ALLOW_OVERWRITE_LONGER_CONTEXT_LEN=1 ';
+    }
+
+    cmd += 'python -m sglang.launch_server \\\n';
+
+    cmd += `  --model ${modelName}`;
+
+    if (hardware === 'xeon') {
+      cmd += ` \\
+  --device cpu \\
+  --disable-overlap-schedule`;
+    }
+
+    if (hwConfig.tp > 1) {
+      cmd += ` \\\n  --tp ${hwConfig.tp}`;
+    }
+
+    // Add reasoning parser if enabled
+    if (reasoningParser === 'enabled') {
+      cmd += ` \\\n  --reasoning-parser gpt-oss`;
+    }
+
+    // Add tool call parser if enabled
+    if (toolcall === 'enabled') {
+      cmd += ` \\\n  --tool-call-parser gpt-oss`;
+    }
+
+    if (hardware === 'b300') {
+      cmd += ` \\\n  --attention-backend triton`;
+      cmd += ` \\\n  --moe-runner-backend triton`;
+      cmd += ` \\\n  --enforce-disable-flashinfer-allreduce-fusion`;
+    }
+
+    // Add speculative decoding if enabled (MI30x handled above)
+    if (speculative === 'enabled') {
+      cmd += ` \\\n  --speculative-algorithm EAGLE3 \\\n  --speculative-num-steps 3 \\\n  --speculative-eagle-topk 1 \\\n  --speculative-num-draft-tokens 4`;
+
+      if (modelsize === '120b') {
+        cmd += ` \\\n  --speculative-draft-model-path nvidia/gpt-oss-120b-Eagle3`;
+      } else if (modelsize === '20b') {
+        cmd += ` \\\n  --speculative-draft-model-path zhuyksir/EAGLE3-gpt-oss-20b-bf16`;
+      }
+    }
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(getDisplayOptions(values)).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const isDisabled = item.required;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isDisabled} onChange={(e) => handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+              option.items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                const isDisabled = Boolean(item.disabled);
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="radio" name={option.name} value={item.id} checked={isChecked} disabled={isDisabled} onChange={() => !isDisabled && handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/hunyuan3-preview-deployment.jsx

@@ -0,0 +1,194 @@
+export const Hunyuan3PreviewDeployment = () => {
+  // Hunyuan 3 Preview (~276B total / ~20B active MoE) — BF16 only.
+  // ~552GB weights; 80GB-class GPUs (A100/H100) cannot fit single-node.
+  //   H200 (141GB): tp=8
+  //   B200 (180GB): tp=8
+  //   B300 (275GB): tp=4
+  //   GB300 (275GB, 4-GPU node): tp=4
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200',  label: 'H200',  default: true  },
+        { id: 'b200',  label: 'B200',  default: false },
+        { id: 'b300',  label: 'B300',  default: false },
+        { id: 'gb300', label: 'GB300', default: false },
+        { id: 'xeon',  label: 'XEON',  default: false }
+      ]
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled',  label: 'Enabled',  default: true  }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled',  label: 'Enabled',  default: true  }
+      ]
+    },
+    speculative: {
+      name: 'speculative',
+      title: 'Speculative Decoding (MTP)',
+      getDynamicItems: (values) => {
+        const isXeon = values && values.hardware === 'xeon';
+        return [
+          { id: 'disabled', label: 'Disabled', default: true  },
+          { id: 'enabled',  label: 'Enabled',  subtitle: 'Low Latency', default: false, disabled: isXeon, disabledReason: isXeon ? 'Speculative decoding (MTP) is not supported on Intel Xeon CPUs' : '' }
+        ];
+      }
+    }
+  };
+
+  const modelConfigs = {
+    h200:  { tp: 8, mem: 0.9 },
+    b200:  { tp: 8, mem: 0.9 },
+    b300:  { tp: 4, mem: 0.9 },
+    gb300: { tp: 4, mem: 0.9 },
+    xeon:  { tp: 6 }
+  };
+
+  const resolveItems = (option, values) => {
+    if (typeof option.getDynamicItems === 'function') return option.getDynamicItems(values);
+    return option.items;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    for (const [key, option] of Object.entries(options)) {
+      const items = resolveItems(option, initialState);
+      const def = items.find(i => i.default && !i.disabled) || items.find(i => !i.disabled) || items[0];
+      initialState[key] = def.id;
+    }
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => {
+      const next = { ...prev, [optionName]: value };
+      if (optionName === 'hardware') {
+        for (const [key, option] of Object.entries(options)) {
+          if (key === 'hardware') continue;
+          const items = resolveItems(option, next);
+          const current = items.find(i => i.id === next[key]);
+          if (!current || current.disabled) {
+            const fallback = items.find(i => i.default && !i.disabled) || items.find(i => !i.disabled);
+            if (fallback) next[key] = fallback.id;
+          }
+        }
+      }
+      return next;
+    });
+  };
+
+  const generateCommand = () => {
+    const { hardware } = values;
+    const isBlackwell = hardware === 'b200' || hardware === 'b300' || hardware === 'gb300';
+    const isXeon = hardware === 'xeon';
+    const hwConfig = modelConfigs[hardware];
+    if (!hwConfig) return '# Configuration not available for the selected hardware.';
+
+    const modelName = 'tencent/Hy3-preview';
+    const tpValue = hwConfig.tp;
+    const memFraction = hwConfig.mem;
+    const enableSpec = values.speculative === 'enabled' && !isXeon;
+
+    let cmd = '';
+    cmd += 'sglang serve \\\n';
+    cmd += `  --model-path ${modelName}`;
+    cmd += ` \\\n  --tp ${tpValue}`;
+
+    if (values.reasoning === 'enabled') cmd += ' \\\n  --reasoning-parser hunyuan';
+    if (values.toolcall  === 'enabled') cmd += ' \\\n  --tool-call-parser hunyuan';
+    if (enableSpec) {
+      cmd += ' \\\n  --speculative-algorithm EAGLE';
+      cmd += ' \\\n  --speculative-num-steps 3';
+      cmd += ' \\\n  --speculative-eagle-topk 1';
+      cmd += ' \\\n  --speculative-num-draft-tokens 4';
+    }
+
+    cmd += ' \\\n  --trust-remote-code';
+    if (memFraction !== undefined) cmd += ` \\\n  --mem-fraction-static ${memFraction}`;
+
+    if (isBlackwell && !isXeon) cmd += ' \\\n  --attention-backend trtllm_mha';
+    if (isXeon) cmd += ' \\\n  --device cpu \\\n  --disable-overlap-schedule';
+
+    return cmd;
+  };
+
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.4 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (typeof option.condition === 'function' && !option.condition(values)) return null;
+        const items = resolveItems(option, values);
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                const isDisabled = !!item.disabled;
+                return (
+                  <label
+                    key={item.id}
+                    style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}
+                    title={item.disabledReason || ''}
+                  >
+                    <input
+                      type="radio"
+                      name={option.name}
+                      value={item.id}
+                      checked={isChecked}
+                      disabled={isDisabled}
+                      onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                      style={{ display: 'none' }}
+                    />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/intern-s1-deployment.jsx

@@ -0,0 +1,167 @@
+export const InternS1Deployment = () => {
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'b200', label: 'B200', default: true },
+        { id: 'b300', label: 'B300', default: false },
+        { id: 'h100', label: 'H100', default: false },
+        { id: 'h200', label: 'H200', default: false },
+      ],
+    },
+    modelsize: {
+      name: 'modelsize',
+      title: 'Model Size',
+      items: [
+        { id: 'S1', label: '235B', subtitle: 'MoE', default: true },
+        { id: 'S1-mini', label: '8B', subtitle: 'Dense', default: false },
+      ],
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false },
+      ],
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false },
+      ],
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false },
+      ],
+    },
+  };
+
+  const modelConfigs = {
+    S1: {
+      baseName: 'S1',
+      h100: { bf16: { tp: 8 }, fp8: { tp: 8, ep: 2 } },
+      h200: { bf16: { tp: 8 }, fp8: { tp: 8, ep: 2 } },
+      b200: { bf16: { tp: 8 }, fp8: { tp: 8, ep: 2 } },
+      b300: { bf16: { tp: 8 }, fp8: { tp: 8, ep: 2 } },
+    },
+    'S1-mini': {
+      baseName: 'S1-mini',
+      h100: { bf16: { tp: 1 }, fp8: { tp: 1 } },
+      h200: { bf16: { tp: 1 }, fp8: { tp: 1 } },
+      b200: { bf16: { tp: 1 }, fp8: { tp: 1 } },
+      b300: { bf16: { tp: 1 }, fp8: { tp: 1 } },
+    },
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      const defaultItem = option.items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const generateCommand = () => {
+    const { hardware, modelsize, quantization, reasoning, toolcall } = values;
+    const modelConfig = modelConfigs[modelsize];
+    const hwConfig = modelConfig?.[hardware]?.[quantization];
+    if (!hwConfig) {
+      return '# Please select a valid hardware and quantization combination';
+    }
+
+    const quantSuffix = quantization === 'fp8' ? '-FP8' : '';
+    const modelName = `internlm/Intern-${modelConfig.baseName}${quantSuffix}`;
+
+    const flags = [];
+    flags.push(`  --model ${modelName}`);
+    if (hwConfig.tp > 1) flags.push(`  --tp ${hwConfig.tp}`);
+    if (hwConfig.ep) flags.push(`  --ep ${hwConfig.ep}`);
+    if (quantization === 'fp8') flags.push(`  --tokenizer-path internlm/Intern-${modelConfig.baseName}`);
+    if (reasoning === 'enabled') flags.push('  --reasoning-parser interns1');
+    if (toolcall === 'enabled') flags.push('  --tool-call-parser interns1');
+    flags.push('  --trust-remote-code');
+    if (hardware === 'b300') flags.push('  --attention-backend flashinfer');
+
+    return `python -m sglang.launch_server \\\n${flags.join(' \\\n')}`;
+  };
+
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.items.map((item) => {
+              const isChecked = values[option.name] === item.id;
+              return (
+                <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}) }}>
+                  <input
+                    type="radio"
+                    name={option.name}
+                    value={item.id}
+                    checked={isChecked}
+                    onChange={() => handleRadioChange(option.name, item.id)}
+                    style={{ display: 'none' }}
+                  />
+                  {item.label}
+                  {item.subtitle && (
+                    <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>
+                      {item.subtitle}
+                    </small>
+                  )}
+                </label>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/intern-s2-preview-deployment.jsx

@@ -0,0 +1,178 @@
+export const InternS2PreviewDeployment = () => {
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200', label: 'H200', default: true },
+      ],
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled', label: 'Enabled', default: true },
+      ],
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled', label: 'Enabled', default: true },
+      ],
+    },
+    mtp: {
+      name: 'mtp',
+      title: 'Multi-Token Prediction',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false },
+      ],
+    },
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      const defaultItem = option.items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const generateCommand = () => {
+    const { reasoning, toolcall, mtp } = values;
+    const tpValue = 8;
+
+    const flags = [];
+    flags.push('  --model-path internLM/Intern-S2-Preview');
+    flags.push(`  --tp ${tpValue}`);
+    if (reasoning === 'enabled') flags.push('  --reasoning-parser qwen3');
+    if (toolcall === 'enabled') flags.push('  --tool-call-parser qwen3_coder');
+    if (mtp === 'enabled') {
+      flags.push('  --mamba-radix-cache-strategy extra_buffer');
+      flags.push("  --speculative-algo 'NEXTN'");
+      flags.push('  --speculative-eagle-topk 1');
+      flags.push('  --speculative-num-steps 3');
+      flags.push('  --speculative-num-draft-tokens 4');
+    }
+    flags.push('  --mem-fraction-static 0.8');
+    flags.push('  --host 0.0.0.0');
+    flags.push('  --port 30000');
+
+    return `sglang serve \\\n${flags.join(' \\\n')}`;
+  };
+
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.items.map((item) => {
+              const isChecked = values[option.name] === item.id;
+              return (
+                <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}) }}>
+                  <input
+                    type="radio"
+                    name={option.name}
+                    value={item.id}
+                    checked={isChecked}
+                    onChange={() => handleRadioChange(option.name, item.id)}
+                    style={{ display: 'none' }}
+                  />
+                  {item.label}
+                  {item.subtitle && (
+                    <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>
+                      {item.subtitle}
+                    </small>
+                  )}
+                </label>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/kimi-k2-deployment.jsx

@@ -0,0 +1,383 @@
+export const KimiK2Deployment = () => {
+  const modelFamily = 'moonshotai';
+
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200', label: 'H200', default: true },
+        { id: 'b200', label: 'B200', default: false },
+        { id: 'b300', label: 'B300', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false }
+      ]
+    },
+    modelname: {
+      name: 'modelname',
+      title: 'Model Name',
+      items: [
+        { id: 'instruct', label: 'Kimi-K2-Instruct', default: true },
+        { id: 'thinking', label: 'Kimi-K2-Thinking', default: false }
+      ]
+    },
+    strategy: {
+      name: 'strategy',
+      title: 'Deployment Strategy',
+      type: 'checkbox',
+      items: [
+        { id: 'tp', label: 'TP', default: true, required: true },
+        { id: 'dp', label: 'DP attention', default: false },
+        { id: 'ep', label: 'EP', default: false }
+      ]
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    }
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, modelname, strategy, reasoning, toolcall } = values;
+
+    if (modelname === 'instruct' && reasoning === 'enabled') {
+      return `# Error: Kimi-K2-Instruct doesn't support reasoning parser\n# Please select "Disabled" for Reasoning Parser or choose Kimi-K2-Thinking model`;
+    }
+
+    const modelMap = {
+      'instruct': 'Kimi-K2-Instruct',
+      'thinking': 'Kimi-K2-Thinking'
+    };
+
+    const modelName = `${modelFamily}/${modelMap[modelname]}`;
+
+    let cmd = 'python3 -m sglang.launch_server \\\n';
+
+    if (hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi355x') {
+      cmd = 'SGLANG_ROCM_FUSED_DECODE_MLA=0 ' + cmd;
+    }
+
+    cmd += `  --model-path ${modelName}`;
+
+    const strategyArray = Array.isArray(strategy) ? strategy : [];
+    cmd += ` \\\n  --tp 8`;
+    if (strategyArray.includes('dp')) {
+      cmd += ` \\\n  --dp 4 \\\n  --enable-dp-attention`;
+    }
+    if (strategyArray.includes('ep')) {
+      cmd += ` \\\n  --ep 4`;
+    }
+
+    cmd += ` \\\n  --trust-remote-code`;
+
+    if (hardware === 'b300') {
+      cmd += ` \\\n  --attention-backend flashinfer`;
+      if (strategyArray.includes('dp')) {
+        cmd += ` \\\n  --prefill-attention-backend triton`;
+      }
+      cmd += ` \\\n  --enforce-disable-flashinfer-allreduce-fusion`;
+      cmd += ` \\\n  --mem-fraction-static 0.85`;
+    }
+
+    if (toolcall === 'enabled') {
+      cmd += ` \\\n  --tool-call-parser kimi_k2`;
+    }
+
+    if (reasoning === 'enabled') {
+      cmd += ` \\\n  --reasoning-parser kimi_k2`;
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/kimi-k25-deployment.jsx

@@ -0,0 +1,269 @@
+export const KimiK25Deployment = () => {
+  // Config mirrors sgl-cookbook src/components/autoregressive/KimiK25ConfigGenerator/index.js.
+  //
+  // GPU requirements:
+  //   H200: tp=8
+  //   B300: tp=8
+  //   GB300: tp=4
+  //   MI300X: tp=4 (64 heads / 4 = 16 heads per GPU, AITER MLA requires heads_per_gpu % 16 == 0)
+  //   MI325X: tp=4 (same constraint as MI300X)
+  //   MI350X: tp=4 (same constraint as MI300X)
+  //   MI355X: tp=4 (same constraint as MI300X)
+  //
+  // NVFP4 quantization is only supported on NVIDIA Blackwell (B300/GB300).
+  // Speculative decoding is only supported on H200, B300, and GB300.
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200',   label: 'H200',   default: true  },
+        { id: 'b300',   label: 'B300',   default: false },
+        { id: 'gb300',  label: 'GB300',  default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi350x', label: 'MI350X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      getDynamicItems: (values) => {
+        const hw = values.hardware;
+        const isBlackwell = hw === 'b300' || hw === 'gb300';
+        return [
+          { id: 'int4',  label: 'INT4',  subtitle: 'initial model',   default: true },
+          { id: 'nvfp4', label: 'NVFP4', subtitle: 'Blackwell only',  default: false, disabled: !isBlackwell, disabledReason: 'NVFP4 only on B300/GB300' }
+        ];
+      }
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled',  label: 'Enabled',  default: true  }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled',  label: 'Enabled',  default: true  }
+      ]
+    },
+    dpattention: {
+      name: 'dpattention',
+      title: 'DP Attention',
+      items: [
+        { id: 'disabled', label: 'Disabled', subtitle: 'Low Latency',     default: true  },
+        { id: 'enabled',  label: 'Enabled',  subtitle: 'High Throughput', default: false }
+      ]
+    },
+    speculative: {
+      name: 'speculative',
+      title: 'Speculative Decoding',
+      condition: (values) => values.hardware === 'h200' || values.hardware === 'b300' || values.hardware === 'gb300',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true  },
+        { id: 'enabled',  label: 'Enabled',  default: false }
+      ]
+    }
+  };
+
+  const modelConfigs = {
+    h200:   { tp: 8 },
+    b300:   { tp: 8 },
+    gb300:  { tp: 4 },
+    mi300x: { tp: 4 },
+    mi325x: { tp: 4 },
+    mi350x: { tp: 4 },
+    mi355x: { tp: 4 }
+  };
+
+  const resolveItems = (option, values) => {
+    if (typeof option.getDynamicItems === 'function') return option.getDynamicItems(values);
+    return option.items;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    for (const [key, option] of Object.entries(options)) {
+      const items = resolveItems(option, initialState);
+      const def = items.find(i => i.default && !i.disabled) || items.find(i => !i.disabled) || items[0];
+      initialState[key] = def.id;
+    }
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  // When hardware changes, re-resolve quantization defaults (NVFP4 only on B300/GB300).
+  useEffect(() => {
+    setValues(prev => {
+      const next = { ...prev };
+      for (const [key, option] of Object.entries(options)) {
+        if (typeof option.getDynamicItems !== 'function') continue;
+        const items = option.getDynamicItems(next);
+        const current = items.find(i => i.id === next[key]);
+        if (!current || current.disabled) {
+          const fallback = items.find(i => i.default && !i.disabled) || items.find(i => !i.disabled);
+          if (fallback) next[key] = fallback.id;
+        }
+      }
+      return next;
+    });
+  }, [values.hardware]);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  // Generate command - mirrors sgl-cookbook's config.generateCommand(values) exactly.
+  const generateCommand = () => {
+    const { hardware, quantization, speculative } = values;
+    const isAMD = hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi350x' || hardware === 'mi355x';
+
+    // NVFP4 is only supported on NVIDIA Blackwell (B300/GB300)
+    if (quantization === 'nvfp4' && hardware !== 'b300' && hardware !== 'gb300') {
+      return '# NVFP4 quantization is only supported on NVIDIA Blackwell GPUs (B300/GB300)';
+    }
+
+    // Speculative decoding only supported on H200, B300, and GB300
+    if (speculative === 'enabled' && hardware !== 'h200' && hardware !== 'b300' && hardware !== 'gb300') {
+      return '# Speculative Decoding for Kimi-K2.5 is only supported on H200, B300, and GB300';
+    }
+
+    // Model path depends on quantization
+    const modelName = quantization === 'nvfp4'
+      ? 'nvidia/Kimi-K2.5-NVFP4'
+      : 'moonshotai/Kimi-K2.5';
+
+    const hwConfig = modelConfigs[hardware];
+    const tpValue = hwConfig.tp;
+
+    let cmd = '';
+
+    // AMD ROCm environment variables
+    if (isAMD) {
+      cmd += 'SGLANG_USE_AITER=1 SGLANG_ROCM_FUSED_DECODE_MLA=0 ';
+    }
+
+    // If we added any env vars above, break to a new line for readability
+    if (isAMD) {
+      cmd += '\\\n';
+    }
+
+    cmd += 'sglang serve \\\n';
+    cmd += `  --model-path ${modelName}`;
+    cmd += ` \\\n  --tp ${tpValue}`;
+    cmd += ' \\\n  --trust-remote-code';
+
+    // DP Attention: --dp matches --tp
+    if (values.dpattention === 'enabled') {
+      cmd += ` \\\n  --dp ${tpValue} \\\n  --enable-dp-attention`;
+    }
+
+    // Reasoning parser
+    if (values.reasoning === 'enabled') {
+      cmd += ' \\\n  --reasoning-parser kimi_k2';
+    }
+
+    // Tool call parser
+    if (values.toolcall === 'enabled') {
+      cmd += ' \\\n  --tool-call-parser kimi_k2';
+    }
+
+    // Speculative decoding (EAGLE3)
+    if (speculative === 'enabled') {
+      cmd += ' \\\n  --speculative-algorithm EAGLE3 \\\n  --speculative-num-steps 3 \\\n  --speculative-eagle-topk 1 \\\n  --speculative-num-draft-tokens 4 \\\n  --speculative-draft-model-path lightseekorg/kimi-k2.5-eagle3-mla';
+    }
+
+    const usesTokenspeedMla = hardware === 'b300' || hardware === 'gb300';
+
+    // Blackwell (B300/GB300): tokenspeed MLA attention backend
+    if (usesTokenspeedMla) {
+      cmd += ' \\\n  --attention-backend tokenspeed_mla';
+    }
+
+    // FP8 KV cache for AMD memory efficiency and tokenspeed MLA compatibility
+    if (isAMD || usesTokenspeedMla) {
+      cmd += ' \\\n  --kv-cache-dtype fp8_e4m3';
+    }
+
+    cmd += ' \\\n  --host 0.0.0.0 \\\n  --port 30000';
+
+    return cmd;
+  };
+
+  // Styles
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.4 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (typeof option.condition === 'function' && !option.condition(values)) return null;
+        const items = resolveItems(option, values);
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                const isDisabled = !!item.disabled;
+                return (
+                  <label
+                    key={item.id}
+                    style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}
+                    title={item.disabledReason || ''}
+                  >
+                    <input
+                      type="radio"
+                      name={option.name}
+                      value={item.id}
+                      checked={isChecked}
+                      disabled={isDisabled}
+                      onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                      style={{ display: 'none' }}
+                    />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/kimi-k26-deployment.jsx

@@ -0,0 +1,263 @@
+export const KimiK26Deployment = () => {
+  // Config mirrors sgl-cookbook src/components/autoregressive/KimiK26ConfigGenerator/index.js.
+  //
+  // INT4:
+  //   H200/B300: tp=8
+  //   GB300/AMD: tp=4
+  //
+  // NVFP4:
+  //   B300: tp=8
+  //   GB300: tp=4
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200', label: 'H200', default: true },
+        { id: 'b300', label: 'B300', default: false },
+        { id: 'gb300', label: 'GB300', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi350x', label: 'MI350X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false },
+      ],
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      getDynamicItems: (values) => {
+        const hw = values.hardware;
+        const isBlackwell = ['b300', 'gb300'].includes(hw);
+        return [
+          { id: 'int4', label: 'INT4', subtitle: 'Base checkpoint', default: !isBlackwell },
+          { id: 'nvfp4', label: 'NVFP4', subtitle: 'Blackwell FP4', default: isBlackwell, disabled: !isBlackwell, disabledReason: !isBlackwell ? 'NVFP4 only on NVIDIA Blackwell' : '' },
+        ];
+      },
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled', label: 'Enabled', default: true },
+      ],
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled', label: 'Enabled', default: true },
+      ],
+    },
+    dpattention: {
+      name: 'dpattention',
+      title: 'DP Attention',
+      items: [
+        { id: 'disabled', label: 'Disabled', subtitle: 'Low Latency', default: true },
+        { id: 'enabled', label: 'Enabled', subtitle: 'High Throughput', default: false },
+      ],
+    },
+    speculative: {
+      name: 'speculative',
+      title: 'Speculative Decoding',
+      condition: (values) => !['mi300x', 'mi325x', 'mi350x', 'mi355x'].includes(values.hardware),
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false },
+      ],
+    },
+  };
+
+  const modelConfigs = {
+    h200: { tp: 8 },
+    b300: { tp: 8 },
+    gb300: { tp: 4 },
+    mi300x: { tp: 4 },
+    mi325x: { tp: 4 },
+    mi350x: { tp: 4 },
+    mi355x: { tp: 4 },
+  };
+
+  const nvfp4ModelConfigs = {
+    b300: { tp: 8 },
+    gb300: { tp: 4 },
+  };
+
+  const resolveItems = (option, values) =>
+    typeof option.getDynamicItems === 'function' ? option.getDynamicItems(values) : option.items || [];
+
+  const getInitialState = () => {
+    const initialState = {};
+    for (const [key, option] of Object.entries(options)) {
+      const items = resolveItems(option, initialState);
+      const def = items.find((item) => item.default && !item.disabled) || items.find((item) => !item.disabled) || items[0];
+      initialState[key] = def.id;
+    }
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    setValues((prev) => {
+      const next = { ...prev };
+      for (const [key, option] of Object.entries(options)) {
+        if (typeof option.condition === 'function' && !option.condition(next)) {
+          const items = resolveItems(option, next);
+          const fallback = items.find((item) => item.default && !item.disabled) || items.find((item) => !item.disabled);
+          if (fallback) next[key] = fallback.id;
+          continue;
+        }
+        if (typeof option.getDynamicItems !== 'function') continue;
+        const items = option.getDynamicItems(next);
+        const current = items.find((item) => item.id === next[key]);
+        if (!current || current.disabled) {
+          const fallback = items.find((item) => item.default && !item.disabled) || items.find((item) => !item.disabled);
+          if (fallback) next[key] = fallback.id;
+        }
+      }
+      return next;
+    });
+  }, [values.hardware]);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const generateCommand = () => {
+    const { hardware, quantization, reasoning, toolcall, dpattention, speculative } = values;
+    const isAMD = hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi350x' || hardware === 'mi355x';
+    const isNVFP4 = quantization === 'nvfp4';
+    const hwConfig = isNVFP4 ? nvfp4ModelConfigs[hardware] : modelConfigs[hardware];
+    if (!hwConfig) return '# NVFP4 is only supported on NVIDIA Blackwell hardware.';
+    if (speculative === 'enabled' && isAMD) {
+      return '# Speculative Decoding for Kimi-K2.6 is only supported on NVIDIA GPUs (H200/B300/GB300)';
+    }
+    const tpValue = hwConfig.tp;
+    const modelName = isNVFP4 ? 'nvidia/Kimi-K2.6-NVFP4' : 'moonshotai/Kimi-K2.6';
+
+    let cmd = '';
+
+    if (isAMD) {
+      cmd += 'SGLANG_USE_AITER=1 SGLANG_ROCM_FUSED_DECODE_MLA=0 \\\n';
+    }
+
+    cmd += 'sglang serve \\\n';
+    cmd += `  --model-path ${modelName}`;
+    cmd += ` \\\n  --tp ${tpValue}`;
+    if (isNVFP4) {
+      cmd += ' \\\n  --quantization modelopt_fp4';
+    }
+    if (isAMD) {
+      cmd += ' \\\n  --mem-fraction-static 0.8';
+    }
+    cmd += ' \\\n  --trust-remote-code';
+
+    if (dpattention === 'enabled') {
+      cmd += ` \\\n  --dp ${tpValue} \\\n  --enable-dp-attention`;
+    }
+
+    if (reasoning === 'enabled') {
+      cmd += ' \\\n  --reasoning-parser kimi_k2';
+    }
+
+    if (toolcall === 'enabled') {
+      cmd += ' \\\n  --tool-call-parser kimi_k2';
+    }
+
+    if (speculative === 'enabled') {
+      cmd += ' \\\n  --speculative-algorithm EAGLE3';
+      cmd += ' \\\n  --speculative-num-steps 3';
+      cmd += ' \\\n  --speculative-eagle-topk 1';
+      cmd += ' \\\n  --speculative-num-draft-tokens 4';
+      cmd += ' \\\n  --speculative-draft-model-path lightseekorg/kimi-k2.6-eagle3.1-mla';
+    }
+
+    const usesTokenspeedMla = hardware === 'b300' || hardware === 'gb300';
+
+    if (usesTokenspeedMla) {
+      cmd += ' \\\n  --attention-backend tokenspeed_mla';
+    }
+
+    if (isAMD || usesTokenspeedMla) {
+      cmd += ' \\\n  --kv-cache-dtype fp8_e4m3';
+    }
+
+    cmd += ' \\\n  --host 0.0.0.0 \\\n  --port 30000';
+    return cmd;
+  };
+
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.4 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (typeof option.condition === 'function' && !option.condition(values)) return null;
+        const items = resolveItems(option, values);
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {items.map((item) => {
+                const isChecked = values[option.name] === item.id;
+                const isDisabled = !!item.disabled;
+                return (
+                  <label
+                    key={item.id}
+                    style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}
+                    title={item.disabledReason || ''}
+                  >
+                    <input
+                      type="radio"
+                      name={option.name}
+                      value={item.id}
+                      checked={isChecked}
+                      disabled={isDisabled}
+                      onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                      style={{ display: 'none' }}
+                    />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/kimi-k27-code-deployment.jsx

@@ -0,0 +1,213 @@
+export const KimiK27CodeDeployment = () => {
+  // Kimi-K2.7-Code reuses the Kimi-K2.6 architecture and deployment layout.
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200', label: 'H200', default: true },
+        { id: 'b300', label: 'B300', default: false },
+        { id: 'gb300', label: 'GB300', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi350x', label: 'MI350X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false },
+      ],
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled', label: 'Enabled', default: true },
+      ],
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled', label: 'Enabled', default: true },
+      ],
+    },
+    dpattention: {
+      name: 'dpattention',
+      title: 'DP Attention',
+      items: [
+        { id: 'disabled', label: 'Disabled', subtitle: 'Low Latency', default: true },
+        { id: 'enabled', label: 'Enabled', subtitle: 'High Throughput', default: false },
+      ],
+    },
+  };
+
+  const modelConfigs = {
+    h200: { tp: 8 },
+    b300: { tp: 8 },
+    gb300: { tp: 4 },
+    mi300x: { tp: 4 },
+    mi325x: { tp: 4 },
+    mi350x: { tp: 4 },
+    mi355x: { tp: 4 },
+  };
+
+  const resolveItems = (option, values) =>
+    typeof option.getDynamicItems === 'function' ? option.getDynamicItems(values) : option.items || [];
+
+  const getInitialState = () => {
+    const initialState = {};
+    for (const [key, option] of Object.entries(options)) {
+      const items = resolveItems(option, initialState);
+      const def = items.find((item) => item.default && !item.disabled) || items.find((item) => !item.disabled) || items[0];
+      initialState[key] = def.id;
+    }
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    setValues((prev) => {
+      const next = { ...prev };
+      for (const [key, option] of Object.entries(options)) {
+        if (typeof option.condition === 'function' && !option.condition(next)) {
+          const items = resolveItems(option, next);
+          const fallback = items.find((item) => item.default && !item.disabled) || items.find((item) => !item.disabled);
+          if (fallback) next[key] = fallback.id;
+          continue;
+        }
+        if (typeof option.getDynamicItems !== 'function') continue;
+        const items = option.getDynamicItems(next);
+        const current = items.find((item) => item.id === next[key]);
+        if (!current || current.disabled) {
+          const fallback = items.find((item) => item.default && !item.disabled) || items.find((item) => !item.disabled);
+          if (fallback) next[key] = fallback.id;
+        }
+      }
+      return next;
+    });
+  }, [values.hardware]);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const generateCommand = () => {
+    const { hardware, reasoning, toolcall, dpattention } = values;
+    const isAMD = hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi350x' || hardware === 'mi355x';
+    const hwConfig = modelConfigs[hardware];
+    const tpValue = hwConfig.tp;
+    const modelName = 'moonshotai/Kimi-K2.7-Code';
+
+    let cmd = '';
+
+    if (isAMD) {
+      cmd += 'SGLANG_USE_AITER=1 SGLANG_ROCM_FUSED_DECODE_MLA=0 \\\n';
+    }
+
+    cmd += 'sglang serve \\\n';
+    cmd += `  --model-path ${modelName}`;
+    cmd += ` \\\n  --tp ${tpValue}`;
+    if (isAMD) {
+      cmd += ' \\\n  --mem-fraction-static 0.8';
+    }
+    cmd += ' \\\n  --trust-remote-code';
+
+    if (dpattention === 'enabled') {
+      cmd += ` \\\n  --dp ${tpValue} \\\n  --enable-dp-attention`;
+    }
+
+    if (reasoning === 'enabled') {
+      cmd += ' \\\n  --reasoning-parser kimi_k2';
+    }
+
+    if (toolcall === 'enabled') {
+      cmd += ' \\\n  --tool-call-parser kimi_k2';
+    }
+
+    const usesTokenspeedMla = hardware === 'b300' || hardware === 'gb300';
+
+    if (usesTokenspeedMla) {
+      cmd += ' \\\n  --attention-backend tokenspeed_mla';
+    }
+
+    if (isAMD || usesTokenspeedMla) {
+      cmd += ' \\\n  --kv-cache-dtype fp8_e4m3';
+    }
+
+    cmd += ' \\\n  --host 0.0.0.0 \\\n  --port 30000';
+    return cmd;
+  };
+
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.4 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (typeof option.condition === 'function' && !option.condition(values)) return null;
+        const items = resolveItems(option, values);
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {items.map((item) => {
+                const isChecked = values[option.name] === item.id;
+                const isDisabled = !!item.disabled;
+                return (
+                  <label
+                    key={item.id}
+                    style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}
+                    title={item.disabledReason || ''}
+                  >
+                    <input
+                      type="radio"
+                      name={option.name}
+                      value={item.id}
+                      checked={isChecked}
+                      disabled={isDisabled}
+                      onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                      style={{ display: 'none' }}
+                    />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/kimi-linear-deployment.jsx

@@ -0,0 +1,358 @@
+export const KimiLinearDeployment = () => {
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'mi300x', label: 'MI300x', default: false },
+        { id: 'mi325x', label: 'MI325x', default: false },
+        { id: 'mi355x', label: 'MI355x', default: false }
+      ]
+    },
+    modelname: {
+      name: 'modelname',
+      title: 'Model Name',
+      items: [
+        { id: 'instruct', label: 'Kimi-Linear-48B-A3B-Instruct', default: true },
+      ]
+    },
+    strategy: {
+      name: 'strategy',
+      title: 'Deployment Strategy',
+      type: 'checkbox',
+      items: [
+        { id: 'tp', label: 'TP', default: true, required: true },
+      ]
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    }
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, modelname, strategy, reasoning, toolcall } = values;
+
+    if (modelname === 'instruct' && reasoning === 'enabled') {
+      return `# Error: Kimi-Linear doesn't support reasoning parser\n# Please select "Disabled" for Reasoning Parser or choose Kimi-Linear-Thinking model`;
+    }
+
+    const modelMap = {
+      'instruct': 'moonshotai/Kimi-Linear-48B-A3B-Instruct',
+    };
+
+    const modelName = modelMap[modelname];
+
+    let cmd = 'python3 -m sglang.launch_server \\\n';
+
+    if (hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi355x') {
+      cmd = 'SGLANG_ROCM_FUSED_DECODE_MLA=0 ' + cmd;
+    }
+
+    cmd += `  --model-path ${modelName}`;
+
+    cmd += ` \\\n  --tp 4`;
+
+    cmd += ` \\\n  --trust-remote-code`;
+
+    if (toolcall === 'enabled') {
+      cmd += ` \\\n  --tool-call-parser kimi_k2`;
+    }
+
+    if (reasoning === 'enabled') {
+      cmd += ` \\\n  --reasoning-parser kimi_k2`;
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/laguna-xs2-deployment.jsx

@@ -0,0 +1,204 @@
+export const LagunaXS2Deployment = () => {
+  // Config options for Laguna-XS.2 (poolside)
+  //
+  //   poolside/Laguna-XS.2        BF16  -- H200 and B200
+  //   poolside/Laguna-XS.2-FP8    FP8   -- H200 and B200; first-launch DeepGEMM
+  //                                        JIT pre-compile is multi-session and slow.
+  //                                        Pre-warm with `python3 -m sglang.compile_deep_gemm`.
+  //   poolside/Laguna-XS.2-NVFP4  NVFP4 -- Blackwell-only (B200); raises
+  //                                        NotImplementedError on Hopper.
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200', label: 'H200', default: true },
+        { id: 'b200', label: 'B200/GB200', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16',  label: 'BF16',  default: true },
+        { id: 'fp8',   label: 'FP8',   default: false },
+        { id: 'nvfp4', label: 'NVFP4', default: false }
+      ]
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled',  label: 'Enabled',  default: true }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled',  label: 'Enabled',  default: true }
+      ]
+    },
+    dpAttention: {
+      name: 'dpAttention',
+      title: 'DP Attention',
+      items: [
+        { id: 'disabled', label: 'Disabled', subtitle: 'Low Latency',     default: true },
+        { id: 'enabled',  label: 'Enabled',  subtitle: 'High Throughput', default: false }
+      ]
+    }
+  };
+
+  const modelByQuant = {
+    bf16:  'poolside/Laguna-XS.2',
+    fp8:   'poolside/Laguna-XS.2-FP8',
+    nvfp4: 'poolside/Laguna-XS.2-NVFP4'
+  };
+
+  const resolveItems = (option, values) => {
+    if (typeof option.getDynamicItems === 'function') {
+      return option.getDynamicItems(values);
+    }
+    return option.items;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      const items = resolveItems(option, {});
+      const defaultItem = items.find(item => item.default && !item.disabled);
+      initialState[key] = defaultItem ? defaultItem.id : items[0].id;
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => {
+      const next = { ...prev, [optionName]: value };
+      Object.entries(options).forEach(([key, option]) => {
+        if (key === optionName) return;
+        const items = resolveItems(option, next);
+        const current = items.find(it => it.id === next[key]);
+        if (!current || current.disabled) {
+          const fallback = items.find(it => !it.disabled);
+          if (fallback) next[key] = fallback.id;
+        }
+      });
+      return next;
+    });
+  };
+
+  const generateCommand = () => {
+    const { hardware, quantization, reasoning, toolcall, dpAttention } = values;
+
+    if (hardware === 'h200' && quantization === 'nvfp4') {
+      return '# Error: NVFP4 is Blackwell-only. Select B200, or pick BF16/FP8 for H200.';
+    }
+
+    const modelId = modelByQuant[quantization];
+    if (!modelId) return `# Error: Unknown quantization: ${quantization}`;
+
+    const tp = 8;
+    const lines = [
+      'sglang serve \\',
+      `  --model-path ${modelId} \\`,
+      `  --tp ${tp} \\`,
+      '  --trust-remote-code'
+    ];
+
+    if (dpAttention === 'enabled') {
+      lines[lines.length - 1] += ' \\';
+      lines.push(`  --dp ${tp} \\`);
+      lines.push('  --enable-dp-attention');
+    }
+
+    if (reasoning === 'enabled') {
+      lines[lines.length - 1] += ' \\';
+      lines.push('  --reasoning-parser poolside_v1');
+    }
+
+    if (toolcall === 'enabled') {
+      lines[lines.length - 1] += ' \\';
+      lines.push('  --tool-call-parser poolside_v1');
+    }
+
+    lines[lines.length - 1] += ' \\';
+    lines.push('  --host 0.0.0.0 \\');
+    lines.push('  --port 30000');
+
+    return lines.join('\n');
+  };
+
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        const items = resolveItems(option, values);
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                return (
+                  <label
+                    key={item.id}
+                    style={{
+                      ...labelBaseStyle,
+                      ...(isChecked ? checkedStyle : {}),
+                      ...(item.disabled ? disabledStyle : {})
+                    }}
+                  >
+                    <input
+                      type="radio"
+                      name={option.name}
+                      value={item.id}
+                      checked={isChecked}
+                      disabled={item.disabled}
+                      onChange={() => !item.disabled && handleRadioChange(option.name, item.id)}
+                      style={{ display: 'none' }}
+                    />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/ling-25-1t-deployment.jsx

@@ -0,0 +1,189 @@
+export const Ling251TDeployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200', label: 'H200', default: true },
+        { id: 'b200', label: 'B200', default: false },
+        { id: 'gb200', label: 'GB200', default: false },
+        { id: 'gb300', label: 'GB300', default: false }
+      ]
+    },
+    parallelism: {
+      name: 'parallelism',
+      title: 'Parallelism Strategy',
+      items: [
+        { id: 'tp4pp2', label: 'TP4 + PP2', default: true },
+        { id: 'tp8', label: 'TP8', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'enabled', label: 'Enabled', default: true },
+        { id: 'disabled', label: 'Disabled', default: false }
+      ]
+    }
+  };
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = option.items.filter(item => item.default).map(item => item.id);
+      } else {
+        const defaultItem = option.items.find(item => item.default);
+        initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+      }
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues(prev => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      } else {
+        return { ...prev, [optionName]: currentValues.filter(id => id !== itemId) };
+      }
+    });
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, parallelism, toolcall } = values;
+
+    const isGB = hardware === 'gb200' || hardware === 'gb300';
+    const envPrefix = isGB ? 'NCCL_MNNVL_ENABLE=1 NCCL_CUMEM_ENABLE=1 ' : '';
+
+    let tp, pp;
+    if (isGB && parallelism === 'tp8') {
+      tp = 8;
+      pp = null;
+    } else if (isGB) {
+      tp = 4;
+      pp = 2;
+    } else {
+      tp = 8;
+      pp = 2;
+    }
+
+    const needMemFrac = hardware === 'h200' || (isGB && parallelism !== 'tp8');
+
+    const generateNodeCmd = (rank) => {
+      let cmd = `${envPrefix}python3 -m sglang.launch_server \\\n`;
+      cmd += `  --model-path inclusionAI/Ling-2.5-1T \\\n`;
+      cmd += `  --trust-remote-code \\\n`;
+      cmd += `  --tp-size ${tp} \\\n`;
+      if (pp) {
+        cmd += `  --pp-size ${pp} \\\n`;
+      }
+      cmd += `  --nnodes 2 \\\n`;
+      cmd += `  --node-rank ${rank} \\\n`;
+      if (rank === 0) {
+        cmd += `  --host 0.0.0.0 \\\n`;
+        cmd += `  --port \${PORT} \\\n`;
+      }
+      cmd += `  --dist-init-addr \${MASTER_IP}:\${DIST_PORT}`;
+      if (toolcall === 'enabled') {
+        cmd += ` \\\n  --tool-call-parser qwen`;
+      }
+      if (needMemFrac) {
+        cmd += ` \\\n  --mem-frac 0.95`;
+      }
+      return cmd;
+    };
+
+    let output = `# MASTER_IP is Node 0 IP. PORT and DIST_PORT can be assigned by yourself.\n\n`;
+    output += `# Node 0:\n`;
+    output += generateNodeCmd(0);
+    output += `\n\n\n# Node 1:\n`;
+    output += generateNodeCmd(1);
+
+    return output;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  const isGB = values.hardware === 'gb200' || values.hardware === 'gb300';
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        // Only show parallelism for GB200/GB300
+        if (key === 'parallelism' && !isGB) return null;
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'checkbox' ? (
+                option.items.map(item => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isItemDisabled = item.required;
+                  return (
+                    <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isItemDisabled ? disabledStyle : {}) }}>
+                      <input type="checkbox" checked={isChecked} disabled={isItemDisabled} onChange={(e) => handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                      {item.label}
+                      {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                    </label>
+                  );
+                })
+              ) : (
+                option.items.map(item => {
+                  const isChecked = values[option.name] === item.id;
+                  return (
+                    <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}) }}>
+                      <input type="radio" name={option.name} value={item.id} checked={isChecked} onChange={() => handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                      {item.label}
+                      {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/ling-26-1t-deployment.jsx

@@ -0,0 +1,178 @@
+export const Ling261TDeployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'gb300', label: 'GB300 ×4 (1 node)', default: true },
+        { id: 'gb200', label: 'GB200 ×4 (1 node)', default: false },
+        { id: 'h200', label: 'H200 ×8 (2 nodes)', default: false },
+        { id: 'b200', label: 'B200 ×8 (2 nodes)', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'enabled', label: 'Enabled', default: true },
+        { id: 'disabled', label: 'Disabled', default: false }
+      ]
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'qwen3 (split <think>)', default: false }
+      ]
+    }
+  };
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = option.items.filter(item => item.default).map(item => item.id);
+      } else {
+        const defaultItem = option.items.find(item => item.default);
+        initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+      }
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues(prev => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      } else {
+        return { ...prev, [optionName]: currentValues.filter(id => id !== itemId) };
+      }
+    });
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, toolcall, reasoning } = values;
+    const isSingleNode = hardware === 'gb300' || hardware === 'gb200';
+
+    const tail = (cmd) => {
+      let out = cmd;
+      out += ` \\\n  --model-loader-extra-config '{"enable_multithread_load":"true","num_threads":64}'`;
+      if (toolcall === 'enabled') out += ` \\\n  --tool-call-parser qwen`;
+      if (reasoning === 'enabled') out += ` \\\n  --reasoning-parser qwen3`;
+      return out;
+    };
+
+    if (isSingleNode) {
+      let cmd = `sglang serve \\\n`;
+      cmd += `  --model-path inclusionAI/Ling-2.6-1T \\\n`;
+      cmd += `  --tp-size 4 \\\n`;
+      cmd += `  --trust-remote-code \\\n`;
+      cmd += `  --host 0.0.0.0 \\\n`;
+      cmd += `  --port \${PORT}`;
+      return tail(cmd);
+    }
+
+    // Two-node deployment
+    const generateNodeCmd = (rank) => {
+      let cmd = `sglang serve \\\n`;
+      cmd += `  --model-path inclusionAI/Ling-2.6-1T \\\n`;
+      cmd += `  --tp-size 8 \\\n`;
+      cmd += `  --pp-size 2 \\\n`;
+      cmd += `  --nnodes 2 \\\n`;
+      cmd += `  --node-rank ${rank} \\\n`;
+      cmd += `  --trust-remote-code \\\n`;
+      if (rank === 0) {
+        cmd += `  --host 0.0.0.0 \\\n`;
+        cmd += `  --port \${PORT} \\\n`;
+      }
+      cmd += `  --dist-init-addr \${MASTER_IP}:\${DIST_PORT}`;
+      return tail(cmd);
+    };
+
+    let output = `# MASTER_IP is Node 0 IP. PORT and DIST_PORT can be assigned by yourself.\n\n`;
+    output += `# Node 0:\n`;
+    output += generateNodeCmd(0);
+    output += `\n\n\n# Node 1:\n`;
+    output += generateNodeCmd(1);
+
+    return output;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const isItemDisabled = item.required;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isItemDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isItemDisabled} onChange={(e) => handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+              option.items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}) }}>
+                    <input type="radio" name={option.name} value={item.id} checked={isChecked} onChange={() => handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/ling-26-flash-deployment.jsx

@@ -0,0 +1,160 @@
+export const Ling26FlashDeployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h20', label: 'H20-3e ×4', default: true },
+        { id: 'h100', label: 'H100 ×4', default: false },
+        { id: 'h200', label: 'H200 ×4', default: false },
+        { id: 'b200', label: 'B200 ×4', default: false }
+      ]
+    },
+    yarn: {
+      name: 'yarn',
+      title: 'Context Length',
+      items: [
+        { id: 'enabled', label: '256K (YaRN ×2)', default: true },
+        { id: 'disabled', label: '128K (default)', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'enabled', label: 'Enabled', default: true },
+        { id: 'disabled', label: 'Disabled', default: false }
+      ]
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'qwen3 (split <think>)', default: false }
+      ]
+    }
+  };
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = option.items.filter(item => item.default).map(item => item.id);
+      } else {
+        const defaultItem = option.items.find(item => item.default);
+        initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+      }
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues(prev => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      } else {
+        return { ...prev, [optionName]: currentValues.filter(id => id !== itemId) };
+      }
+    });
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { yarn, toolcall, reasoning } = values;
+
+    let cmd = `sglang serve \\\n`;
+    cmd += `  --model-path inclusionAI/Ling-2.6-flash \\\n`;
+    cmd += `  --tp-size 4 \\\n`;
+    cmd += `  --trust-remote-code \\\n`;
+    cmd += `  --host 0.0.0.0 \\\n`;
+    cmd += `  --port \${PORT}`;
+    if (yarn === 'enabled') {
+      cmd += ` \\\n  --context-length 262144`;
+      cmd += ` \\\n  --json-model-override-args '{"rope_scaling": {"rope_type": "yarn", "factor": 2.0, "rope_theta": 6000000, "partial_rotary_factor": 0.5, "original_max_position_embeddings": 131072}}'`;
+    }
+    if (toolcall === 'enabled') {
+      cmd += ` \\\n  --tool-call-parser qwen25`;
+    }
+    if (reasoning === 'enabled') {
+      cmd += ` \\\n  --reasoning-parser qwen3`;
+    }
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const isItemDisabled = item.required;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isItemDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isItemDisabled} onChange={(e) => handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+              option.items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}) }}>
+                    <input type="radio" name={option.name} value={item.id} checked={isChecked} onChange={() => handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/llada-21-deployment.jsx

@@ -0,0 +1,339 @@
+export const LLaDA21Deployment = () => {
+  const modelFamily = 'inclusionAI';
+
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h100', label: 'H100', default: true },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'b200', label: 'B200', default: false },
+        { id: 'b300', label: 'B300', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false }
+      ]
+    },
+    modelsize: {
+      name: 'modelsize',
+      title: 'Model Size',
+      items: [
+        { id: 'mini', label: 'Mini (16B)', subtitle: 'MoE', default: true },
+        { id: 'flash', label: 'Flash (100B)', subtitle: 'MoE', default: false }
+      ]
+    }
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, modelsize } = values;
+
+    const modelName = modelsize === 'mini' ? 'LLaDA2.1-mini' : 'LLaDA2.1-flash';
+    const modelPath = `${modelFamily}/${modelName}`;
+
+    let tpSize;
+    if (modelsize === 'mini') {
+      tpSize = 1;
+    } else {
+      if (hardware === 'b200' || hardware === 'b300') {
+        tpSize = 2;
+      } else {
+        tpSize = 4;
+      }
+    }
+
+    const args = [];
+    args.push(`--model-path ${modelPath}`);
+    args.push(`--dllm-algorithm JointThreshold`);
+    args.push(`--tp ${tpSize}`);
+    args.push(`--trust-remote-code`);
+    args.push(`--mem-fraction-static 0.8`);
+    args.push(`--max-running-requests 1`);
+    if (hardware === 'h100' || hardware === 'h200' || hardware === 'b200' || hardware === 'b300') {
+      args.push(`--attention-backend flashinfer`);
+    }
+
+    let cmd = 'python -m sglang.launch_server \\\n';
+    cmd += `  ${args.join(' \\\n  ')}`;
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/llama31-deployment.jsx

@@ -0,0 +1,300 @@
+export const Llama31Deployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h100', label: 'H100', default: true },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'b200', label: 'B200', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false },
+        { id: 'xeon', label: 'XEON', default: false }
+      ]
+    },
+    modelsize: {
+      name: 'modelsize',
+      title: 'Model Size',
+      items: [
+        { id: '8b', label: '8B', default: false },
+        { id: '70b', label: '70B', default: true },
+        { id: '405b', label: '405B', default: false }
+      ]
+    },
+    category: {
+      name: 'category',
+      title: 'Category',
+      items: [
+        { id: 'base', label: 'Base', default: false },
+        { id: 'instruct', label: 'Instruct', default: true }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    },
+    optimization: {
+      name: 'optimization',
+      title: 'Optimization Mode',
+      items: [
+        { id: 'basic', label: 'Basic', default: true },
+        { id: 'throughput', label: 'Throughput Optimized', default: false },
+        { id: 'latency', label: 'Latency Optimized', default: false }
+      ]
+    }
+  };
+
+  const getDisplayOptions = (values) => {
+    const displayOptions = {
+      ...options,
+      modelsize: {
+        ...options.modelsize,
+        items: options.modelsize.items.map(item => ({
+          ...item,
+          disabled: values.hardware === 'xeon' && item.id !== '8b'
+        }))
+      },
+      quantization: {
+        ...options.quantization,
+        items: options.quantization.items.map(item => ({
+          ...item,
+          disabled: values.hardware === 'xeon' && item.id === 'fp8'
+        }))
+      },
+      optimization: {
+        ...options.optimization,
+        items: options.optimization.items.map(item => ({
+          ...item,
+          disabled: values.hardware === 'xeon' && item.id !== 'basic'
+        }))
+      }
+    };
+    return displayOptions;
+  };
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      const defaultItem = option.items.find(item => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => {
+      const next = { ...prev, [optionName]: value };
+      if (optionName === 'hardware' && value === 'xeon') {
+        next.modelsize = '8b';
+        next.quantization = 'bf16';
+        next.optimization = 'basic';
+      }
+      return next;
+    });
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, optimization, modelsize, category, toolcall, quantization } = values;
+
+    const isAMD = hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi355x';
+    const isXeon = hardware === 'xeon';
+    const effectiveModelSize = isXeon ? '8b' : modelsize;
+
+    // Model size mapping
+    const sizeMap = {
+      '8b': '8B',
+      '70b': '70B',
+      '405b': '405B'
+    };
+    const sizeToken = sizeMap[effectiveModelSize] || '70B';
+    const categorySuffix = category === 'instruct' ? '-Instruct' : '';
+
+    // Determine model path
+    let modelPath;
+    if (quantization === 'fp8' && category === 'instruct' && !isXeon) {
+      if (effectiveModelSize === '405b') {
+        // Meta official FP8 for 405B
+        modelPath = `meta-llama/Llama-3.1-${sizeToken}${categorySuffix}-FP8`;
+      } else if (isAMD) {
+        // AMD FP8-KV variants for 70B/8B on AMD GPUs
+        modelPath = `amd/Llama-3.1-${sizeToken}${categorySuffix}-FP8-KV`;
+      } else {
+        modelPath = `meta-llama/Llama-3.1-${sizeToken}${categorySuffix}`;
+      }
+    } else {
+      modelPath = `meta-llama/Llama-3.1-${sizeToken}${categorySuffix}`;
+    }
+
+    // Determine TP size
+    let tpSize;
+    if (isAMD) {
+      // AMD GPU TP configuration
+      const amdTpConfig = {
+        'mi300x': {
+          '405b': { bf16: 8, fp8: 4 },
+          '70b': { bf16: 1, fp8: 1 },
+          '8b': { bf16: 1, fp8: 1 }
+        },
+        'mi325x': {
+          '405b': { bf16: 8, fp8: 4 },
+          '70b': { bf16: 1, fp8: 1 },
+          '8b': { bf16: 1, fp8: 1 }
+        },
+        'mi355x': {
+          '405b': { bf16: 4, fp8: 2 },
+          '70b': { bf16: 1, fp8: 1 },
+          '8b': { bf16: 1, fp8: 1 }
+        }
+      };
+      tpSize = quantization === 'fp8'
+        ? amdTpConfig[hardware][effectiveModelSize].fp8
+        : amdTpConfig[hardware][effectiveModelSize].bf16;
+    } else if (isXeon) {
+      // Intel Xeon CPU TP configuration
+      tpSize = 3;
+    } else {
+      // NVIDIA GPU TP configuration
+      if (effectiveModelSize === '405b') {
+        tpSize = 8;
+      } else if (effectiveModelSize === '70b' && (hardware === 'h100' || hardware === 'h200')) {
+        tpSize = 2;
+      }
+    }
+
+    // Build command args
+    const args = [];
+    args.push(`--model-path ${modelPath}`);
+
+    if (isXeon) {
+      args.push(`--device cpu`);
+      args.push(`--disable-overlap-schedule`);
+    }
+
+    if (tpSize) {
+      args.push(`--tp ${tpSize}`);
+    }
+
+    // Add quantization flag only if not using FP8 variant model
+    if (quantization === 'fp8' && category !== 'instruct' && !isXeon) {
+      args.push(`--quantization fp8`);
+    }
+
+    // NVIDIA-specific optimizations
+    if (!isAMD && !isXeon) {
+      if (optimization === 'throughput') {
+        args.push(`--enable-dp-attention`);
+        args.push(`--mem-fraction-static 0.85`);
+      } else if (optimization === 'latency') {
+        args.push(`--speculative-algorithm EAGLE3`);
+        args.push(`--speculative-num-steps 3`);
+        args.push(`--speculative-eagle-topk 1`);
+        args.push(`--speculative-num-draft-tokens 4`);
+        if (effectiveModelSize === '8b' && category === 'instruct') {
+          args.push(`--speculative-draft-model-path yuhuili/EAGLE3-LLaMA3.1-Instruct-8B`);
+        } else {
+          args.push(`--speculative-draft-model-path \${EAGLE3_MODEL_PATH}`);
+        }
+        args.push(`--disable-shared-experts-fusion`);
+        args.push(`--max-running-requests 64`);
+        args.push(`--mem-fraction-static 0.85`);
+        args.push(`--kv-cache-dtype fp8_e4m3`);
+        args.push(`--context-length 32768`);
+      }
+    }
+
+    if (toolcall === 'enabled') {
+      args.push(`--tool-call-parser llama3`);
+    }
+
+    let cmd = 'sglang serve \\\n';
+    cmd += `  ${args.join(' \\\n  ')}`;
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(getDisplayOptions(values)).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const isDisabled = item.required;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isDisabled} onChange={(e) => handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+              option.items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                const isDisabled = Boolean(item.disabled);
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="radio" name={option.name} value={item.id} checked={isChecked} disabled={isDisabled} onChange={() => !isDisabled && handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/llama33-70b-deployment.jsx

@@ -0,0 +1,163 @@
+export const Llama33Deployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'mi300x', label: 'MI300X', default: true },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false },
+        { id: 'xeon', label: 'XEON', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Calling',
+      items: [
+        { id: 'enabled', label: 'Enabled', default: true },
+        { id: 'disabled', label: 'Disabled', default: false }
+      ]
+    }
+  };
+
+  const getDisplayOptions = (values) => ({
+    ...options,
+    quantization: {
+      ...options.quantization,
+      items: options.quantization.items.map(item => ({
+        ...item,
+        disabled: values.hardware === 'xeon' && item.id === 'fp8'
+      }))
+    }
+  });
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      const defaultItem = option.items.find(item => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => {
+      const next = { ...prev, [optionName]: value };
+      if (optionName === 'hardware' && value === 'xeon') {
+        next.quantization = 'bf16';
+      }
+      return next;
+    });
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, quantization, toolcall } = values;
+
+    // Select model based on quantization
+    const modelPath = quantization === 'fp8' && hardware !== 'xeon'
+      ? 'amd/Llama-3.3-70B-Instruct-FP8-KV'
+      : 'meta-llama/Llama-3.3-70B-Instruct';
+
+    // Build command
+    let cmd = 'python -m sglang.launch_server \\\n';
+    cmd += `  --model-path ${modelPath} \\\n`;
+    if (hardware === 'xeon') {
+      cmd += `  --device cpu \\\n`;
+      cmd += `  --disable-overlap-schedule \\\n`;
+      cmd += `  --tp 6`;
+    } else {
+      cmd += `  --tp 1`;
+    }
+
+    // Add tool calling parser
+    if (toolcall === 'enabled') {
+      cmd += ' \\\n  --tool-call-parser llama3';
+    }
+
+    cmd += ' \\\n  --host 0.0.0.0 \\\n';
+    cmd += '  --port 30000';
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(getDisplayOptions(values)).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const isDisabled = item.required;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isDisabled} onChange={(e) => handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+              option.items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                const isDisabled = Boolean(item.disabled);
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="radio" name={option.name} value={item.id} checked={isChecked} disabled={isDisabled} onChange={() => !isDisabled && handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/llama4-maverick-deployment.jsx

@@ -0,0 +1,384 @@
+export const Llama4MaverickDeployment = () => {
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'b200', label: 'B200', default: false },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'mi300x', label: 'MI300x', default: true },
+        { id: 'mi325x', label: 'MI325x', default: false },
+        { id: 'mi355x', label: 'MI355x', default: false },
+        { id: 'xeon', label: 'XEON', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      getDynamicItems: (values) => [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false, disabled: values.hardware === 'xeon' }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    },
+    speculative: {
+      name: 'speculative',
+      title: 'Speculative Decoding (EAGLE3)',
+      condition: (values) => values.hardware !== 'xeon',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enable EAGLE3', default: false }
+      ]
+    },
+    host: {
+      name: 'host',
+      title: 'Host',
+      type: 'text',
+      default: '0.0.0.0',
+      placeholder: '0.0.0.0'
+    },
+    port: {
+      name: 'port',
+      title: 'Port',
+      type: 'text',
+      default: '8000',
+      placeholder: '8000'
+    }
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, quantization, toolcall, speculative, host, port } = values;
+
+    let cmd = 'python -m sglang.launch_server \\\n';
+    cmd += `  --model-path meta-llama/Llama-4-Maverick-17B-128E-Instruct`;
+
+    if (hardware === 'h200') {
+      cmd += ` \\\n  --tp 8`;
+    } else if (hardware === 'b200') {
+      cmd += ` \\\n  --tp 8`;
+    } else if (hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi355x') {
+      cmd += ` \\\n  --tp 8`;
+    } else if (hardware === 'xeon') {
+      cmd += ` \\\n  --device cpu \\\n  --disable-overlap-schedule \\\n  --tp 6`;
+    }
+
+    if (quantization === 'fp8' && hardware !== 'xeon') {
+      cmd += ` \\\n  --quantization fp8`;
+    }
+
+    if (toolcall === 'enabled') {
+      cmd += ` \\\n  --tool-call-parser pythonic`;
+    }
+
+    if (speculative === 'enabled' && hardware !== 'xeon') {
+      cmd += ` \\\n  --speculative-algorithm EAGLE3 \\\n`;
+      cmd += `  --speculative-draft-model-path lmsys/sglang-EAGLE3-Llama-4-Maverick-17B-128E-Instruct-v1 \\\n`;
+      cmd += `  --speculative-num-steps 3 \\\n`;
+      cmd += `  --speculative-eagle-topk 1 \\\n`;
+      cmd += `  --speculative-num-draft-tokens 4 \\\n`;
+      cmd += `  --mem-fraction-static 0.75 \\\n`;
+      cmd += `  --cuda-graph-max-bs-decode 2`;
+    }
+
+    cmd += ` \\\n  --enable-multimodal`;
+    cmd += ` \\\n  --context-length 65536`;
+    cmd += ` \\\n  --dtype bfloat16`;
+    cmd += ` \\\n  --trust-remote-code`;
+    cmd += ` \\\n  --host ${host || '0.0.0.0'}`;
+    cmd += ` \\\n  --port ${port || '8000'}`;
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => {
+      const next = { ...prev, [optionName]: value };
+      if (optionName === 'hardware' && value === 'xeon') {
+        next.quantization = 'bf16';
+        next.speculative = 'disabled';
+      }
+      return next;
+    });
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/llama4-scout-deployment.jsx

@@ -0,0 +1,385 @@
+export const Llama4ScoutDeployment = () => {
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'b200', label: 'B200', default: false },
+        { id: 'h100', label: 'H100', default: true },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'mi300x', label: 'MI300x', default: false },
+        { id: 'mi325x', label: 'MI325x', default: false },
+        { id: 'mi355x', label: 'MI355x', default: false },
+        { id: 'xeon', label: 'XEON', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      getDynamicItems: (values) => [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false, disabled: values.hardware === 'xeon' }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    },
+    speculative: {
+      name: 'speculative',
+      title: 'Speculative Decoding (EAGLE3)',
+      condition: (values) => values.hardware !== 'xeon',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enable EAGLE3', default: false }
+      ]
+    },
+    host: {
+      name: 'host',
+      title: 'Host',
+      type: 'text',
+      default: '0.0.0.0',
+      placeholder: '0.0.0.0'
+    },
+    port: {
+      name: 'port',
+      title: 'Port',
+      type: 'text',
+      default: '8000',
+      placeholder: '8000'
+    }
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, quantization, toolcall, speculative, host, port } = values;
+
+    let cmd = 'python -m sglang.launch_server \\\n';
+    cmd += `  --model-path meta-llama/Llama-4-Scout-17B-16E-Instruct`;
+
+    if (hardware === 'h100' || hardware === 'h200') {
+      cmd += ` \\\n  --tp 8`;
+    } else if (hardware === 'b200') {
+      cmd += ` \\\n  --tp 8`;
+    } else if (hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi355x') {
+      cmd += ` \\\n  --tp 8`;
+    } else if (hardware === 'xeon') {
+      cmd += ` \\\n  --device cpu \\\n  --disable-overlap-schedule \\\n  --tp 6`;
+    }
+
+    if (quantization === 'fp8' && hardware !== 'xeon') {
+      cmd += ` \\\n  --quantization fp8`;
+    }
+
+    if (toolcall === 'enabled') {
+      cmd += ` \\\n  --tool-call-parser pythonic`;
+    }
+
+    if (speculative === 'enabled' && hardware !== 'xeon') {
+      cmd += ` \\\n  --speculative-algorithm EAGLE3 \\\n`;
+      cmd += `  --speculative-draft-model-path lmsys/sglang-EAGLE3-Llama-4-Scout-17B-16E-Instruct-v1 \\\n`;
+      cmd += `  --speculative-num-steps 3 \\\n`;
+      cmd += `  --speculative-eagle-topk 1 \\\n`;
+      cmd += `  --speculative-num-draft-tokens 4 \\\n`;
+      cmd += `  --mem-fraction-static 0.75 \\\n`;
+      cmd += `  --cuda-graph-max-bs-decode 2`;
+    }
+
+    cmd += ` \\\n  --enable-multimodal`;
+    cmd += ` \\\n  --context-length 65536`;
+    cmd += ` \\\n  --dtype bfloat16`;
+    cmd += ` \\\n  --trust-remote-code`;
+    cmd += ` \\\n  --host ${host || '0.0.0.0'}`;
+    cmd += ` \\\n  --port ${port || '8000'}`;
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => {
+      const next = { ...prev, [optionName]: value };
+      if (optionName === 'hardware' && value === 'xeon') {
+        next.quantization = 'bf16';
+        next.speculative = 'disabled';
+      }
+      return next;
+    });
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/mimo-v2-flash-deployment.jsx

@@ -0,0 +1,194 @@
+export const MiMoV2FlashDeployment = () => {
+  // Config mirrors sgl-cookbook src/components/autoregressive/MiMoConfigGenerator/index.js.
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200', label: 'H200', default: true },
+        { id: 'h100', label: 'H100', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false }
+      ]
+    },
+    modelname: {
+      name: 'modelname',
+      title: 'Model Name',
+      items: [
+        { id: 'mimo-v2-flash', label: 'MiMo-V2-Flash', default: true }
+      ]
+    },
+    strategy: {
+      name: 'strategy',
+      title: 'Deployment Strategy',
+      type: 'checkbox',
+      items: [
+        { id: 'tp', label: 'TP 8 (Required)', default: true, disabled: true },
+        { id: 'dp', label: 'DP Attention (DP 2)', default: true },
+        { id: 'mtp', label: 'Multi-token Prediction (MTP)', default: true },
+        { id: 'optimization', label: 'Performance Optimizations', default: true }
+      ]
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning & Tools',
+      type: 'checkbox',
+      items: [
+        { id: 'reasoning', label: 'Reasoning Parser (Qwen3)', default: true },
+        { id: 'toolcall', label: 'Tool Call Parser', default: true }
+      ]
+    }
+  };
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = option.items.filter(item => item.default).map(item => item.id);
+      } else {
+        const defaultItem = option.items.find(item => item.default);
+        initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+      }
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues(prev => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      } else {
+        return { ...prev, [optionName]: currentValues.filter(id => id !== itemId) };
+      }
+    });
+  };
+
+  // Generate command — mirrors sgl-cookbook's config.generateCommand(values) exactly
+  const generateCommand = () => {
+    const { hardware, strategy, reasoning } = values;
+    const isMI355X = hardware === 'mi355x';
+
+    const modelPath = 'XiaomiMiMo/MiMo-V2-Flash';
+    const strategyArray = Array.isArray(strategy) ? strategy : [];
+    const reasoningArray = Array.isArray(reasoning) ? reasoning : [];
+
+    if (isMI355X && strategyArray.includes('mtp')) {
+      return '# MI355X Speculative Decoding (EAGLE): Work In Progress\n'
+        + '# Uncheck "Multi-token Prediction (MTP)" to view the validated non-speculative MI355X command.';
+    }
+
+    const commandPrefix = isMI355X
+      ? 'PYTHONPATH=/sgl-workspace/aiter SGLANG_USE_AITER=0 USE_ROCM_AITER_ROPE_BACKEND=0 '
+      : '';
+    const tpSize = isMI355X ? 4 : 8;
+
+    let cmd = `${commandPrefix}sglang serve \\\n`;
+    cmd += `  --model-path ${modelPath} \\\n`;
+    cmd += `  --trust-remote-code \\\n`;
+    cmd += `  --tp-size ${tpSize}`;
+
+    // DP settings
+    if (!isMI355X && strategyArray.includes('dp')) {
+      cmd += ` \\\n  --dp-size 2 \\\n  --enable-dp-attention`;
+    }
+
+    // Performance Optimizations
+    if (strategyArray.includes('optimization')) {
+      cmd += ` \\\n  --mem-fraction-static 0.75 \\\n  --max-running-requests 128 \\\n  --chunked-prefill-size 16384 \\\n  --model-loader-extra-config '{"enable_multithread_load": "true","num_threads": 64}'`;
+      cmd += isMI355X
+        ? ` \\\n  --attention-backend triton \\\n  --prefill-attention-backend triton \\\n  --decode-attention-backend triton \\\n  --disable-custom-all-reduce`
+        : ` \\\n  --attention-backend fa3`;
+    }
+
+    // MTP/Speculative settings
+    if (!isMI355X && strategyArray.includes('mtp')) {
+      cmd += ` \\\n  --speculative-algorithm EAGLE \\\n  --speculative-num-steps 3 \\\n  --speculative-eagle-topk 1 \\\n  --speculative-num-draft-tokens 4 \\\n  --enable-multi-layer-eagle`;
+    }
+
+    // Reasoning Parser
+    if (reasoningArray.includes('reasoning')) {
+      cmd += ` \\\n  --reasoning-parser qwen3`;
+    }
+
+    // Tool Call Parser
+    if (reasoningArray.includes('toolcall')) {
+      cmd += ` \\\n  --tool-call-parser mimo`;
+    }
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const isDisabled = item.disabled;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isDisabled} onChange={(e) => handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+              option.items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}) }}>
+                    <input type="radio" name={option.name} value={item.id} checked={isChecked} onChange={() => handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/mimo-v25-deployment.jsx

@@ -0,0 +1,478 @@
+export const MiMoV25Deployment = () => {
+  // MiMo-V2.5 family deployment matrix:
+  //   Variant × Hardware → slug, tp, multinode, blackwell
+  //
+  //   V2.5-Pro (1.02T / 42B active) — text-only:
+  //     H200  → tp=16, 2 nodes,     FP8 (Hopper: fa3 + DeepEP)
+  //     H100  → tp=16, 2 nodes,     FP8 (Hopper: fa3 + DeepEP)
+  //     B200  → tp=8,  single-node, FP8 (Blackwell verified: fa4 + flashinfer_trtllm)
+  //     GB300 → tp=8,  2 nodes,     FP8 (Blackwell verified: fa4 + flashinfer_trtllm + NCCL_MNNVL)
+  //   V2.5 (310B / 15B active) — multimodal. Checkpoint is TP=4 interleaved,
+  //   so attention-TP per DP group must be 4; effective parallelism = TP/DP = 4.
+  //     H200  → tp=8, dp=2, single-node, FP8 (verified)
+  //     H100  → tp=8, dp=2, single-node, FP8
+  //     B200  → tp=4, dp=1, single-node, FP8 (Blackwell: vision fa4)
+  //     GB300 → tp=4, dp=1, single-node, FP8 (Blackwell: vision fa4)
+  //
+  //   Optional toggles:
+  //     EAGLE MTP — adds --speculative-* flags.
+  //     DeepEP    — Hopper only (Blackwell uses flashinfer_trtllm). Adds
+  //                 --moe-a2a-backend deepep + --moe-dense-tp-size 1
+  //                 (and --ep on Pro) + SGLANG_DEEPEP_NUM_MAX_DISPATCH_TOKENS_PER_RANK=256.
+  //                 Requires `pip install deep_ep`.
+
+  const options = {
+    modelVariant: {
+      name: "modelVariant",
+      title: "Model Variant",
+      items: [
+        { id: "pro",  label: "V2.5-Pro", default: true,  subtitle: "1.02T / 42B" },
+        { id: "base", label: "V2.5",     default: false, subtitle: "310B / 15B"  },
+      ],
+    },
+    hardware: {
+      name: "hardware",
+      title: "Hardware Platform",
+      items: [
+        { id: "h200",     label: "H200",     default: true  },
+        { id: "h100",     label: "H100",     default: false },
+        { id: "b200",     label: "B200",     default: false },
+        { id: "gb300",    label: "GB300",    default: false },
+        { id: "tpu-v7x",  label: "TPU v7x",  default: false, subtitle: "sgl-jax, Pro only" },
+        { id: "tpu-v6e",  label: "TPU v6e",  default: false, subtitle: "sgl-jax, Pro only" },
+      ],
+    },
+    eagleMtp: {
+      name: "eagleMtp",
+      title: "EAGLE MTP",
+      items: [
+        { id: "enabled",  label: "Enabled",  default: true,  subtitle: "EAGLE" },
+        { id: "disabled", label: "Disabled", default: false },
+      ],
+    },
+    dpAttention: {
+      name: "dpAttention",
+      title: "DP Attention",
+      items: [
+        { id: "enabled",  label: "Enabled",  default: false, subtitle: "auto for V2.5" },
+        { id: "disabled", label: "Disabled", default: true },
+      ],
+    },
+    expertParallelism: {
+      name: "expertParallelism",
+      title: "Expert Parallelism",
+      items: [
+        { id: "enabled",  label: "Enabled",  default: false, subtitle: "Pro Hopper" },
+        { id: "disabled", label: "Disabled", default: true },
+      ],
+    },
+    deepep: {
+      name: "deepep",
+      title: "DeepEP",
+      items: [
+        { id: "enabled",  label: "Enabled",  default: false, subtitle: "needs deep_ep" },
+        { id: "disabled", label: "Disabled", default: true,  subtitle: "default" },
+      ],
+    },
+    reasoningParser: {
+      name: "reasoningParser",
+      title: "Reasoning Parser",
+      items: [
+        { id: "enabled",  label: "Enabled",  default: true,  subtitle: "mimo" },
+        { id: "disabled", label: "Disabled", default: false },
+      ],
+    },
+    toolcall: {
+      name: "toolcall",
+      title: "Tool Call Parser",
+      items: [
+        { id: "enabled",  label: "Enabled",  default: true,  subtitle: "mimo" },
+        { id: "disabled", label: "Disabled", default: false },
+      ],
+    },
+  };
+
+  // Per (variant, hardware): HF slug, tp, multinode info, Blackwell flag.
+  // The attention qkv_proj is TP-interleaved, so attention-TP per DP group is
+  // fixed: V2.5 (base) is TP=4-interleaved, V2.5-Pro is TP=8-interleaved. When
+  // tp exceeds that factor, DP-attention is required with `dp = tp / factor`
+  // (Pro: tp/8, base: tp/4); when tp equals the factor there is a single
+  // attention group and no `dp` field is set. So Pro on Hopper (tp=16) needs
+  // dp=2, while Pro on Blackwell (tp=8) needs no dp-attention at all.
+  // TPU rows go through the sgl-jax stack (`python -m sgl_jax.launch_server`),
+  // not the CUDA `sglang serve` binary; tp == total JAX devices across nodes.
+  const HW_VARIANT_SPEC = {
+    "pro|h200":     { slug: "XiaomiMiMo/MiMo-V2.5-Pro", tp: 16, multinode: true,  nnodes: 2,  blackwell: false, jax: false, dp: 2 },
+    "pro|h100":     { slug: "XiaomiMiMo/MiMo-V2.5-Pro", tp: 16, multinode: true,  nnodes: 2,  blackwell: false, jax: false, dp: 2 },
+    "pro|b200":     { slug: "XiaomiMiMo/MiMo-V2.5-Pro", tp: 8,  multinode: false,             blackwell: true,  jax: false },
+    "pro|gb300":    { slug: "XiaomiMiMo/MiMo-V2.5-Pro", tp: 8,  multinode: true,  nnodes: 2,  blackwell: true,  jax: false },
+    "pro|tpu-v7x":  { slug: "XiaomiMiMo/MiMo-V2.5-Pro", tp: 32, multinode: true,  nnodes: 4,  blackwell: false, jax: true  },
+    "pro|tpu-v6e":  { slug: "XiaomiMiMo/MiMo-V2.5-Pro", tp: 64, multinode: true,  nnodes: 16, blackwell: false, jax: true  },
+    "base|h200":    { slug: "XiaomiMiMo/MiMo-V2.5",     tp: 8,  multinode: false,             blackwell: false, jax: false, dp: 2 },
+    "base|h100":    { slug: "XiaomiMiMo/MiMo-V2.5",     tp: 8,  multinode: false,             blackwell: false, jax: false, dp: 2 },
+    "base|b200":    { slug: "XiaomiMiMo/MiMo-V2.5",     tp: 4,  multinode: false,             blackwell: true,  jax: false, dp: 1 },
+    "base|gb300":   { slug: "XiaomiMiMo/MiMo-V2.5",     tp: 4,  multinode: false,             blackwell: true,  jax: false, dp: 1 },
+  };
+
+  const multiNodeFlags = (nnodes) => [
+    `  --nnodes ${nnodes}`,
+    `  --node-rank <node-rank>`,
+    `  --dist-init-addr <node0-ip>:20000`,
+  ];
+
+  const prependMultiNodeNote = (cmd, nnodes) =>
+    `# Multi-node (${nnodes} nodes). Run the same command on every node with:\n` +
+    `#   <node-rank> = 0 on the head node, 1..${nnodes - 1} on the others\n` +
+    `#   <node0-ip>  = IP of the head node (reachable from all others)\n` +
+    `${cmd}`;
+
+  // Toggles whose value is forced by the current variant + hardware. Returns
+  // { optionName -> { force: "enabled" | "disabled", reason } }. The render
+  // layer grays out the OTHER radio, and a useEffect snaps the value to the
+  // forced choice so the UI never disagrees with the generated command.
+  const computeConstraints = (variant, hardware) => {
+    const isPro = variant === "pro";
+    const spec = HW_VARIANT_SPEC[`${variant}|${hardware}`];
+    const blackwell = spec ? spec.blackwell : false;
+    const jax = spec ? spec.jax : false;
+    const c = {};
+    // Both checkpoints are TP-interleaved (Pro: 8, base: 4), so attention-TP per
+    // DP group must equal that factor. When the spec carries dp>1 (Pro/Hopper
+    // tp=16, base tp=8) DP-attention with `--dp = tp/factor` is required; without
+    // it a bare `--tp` gives attn_tp = tp != factor and the loader rejects the
+    // checkpoint. When no dp>1 (Pro/Blackwell tp=8, base tp=4) it's a single
+    // attention group and DP-attention must stay off.
+    if (spec && !jax) {
+      const factor = isPro ? 8 : 4;
+      if (spec.dp > 1) {
+        c.dpAttention = { force: "enabled", reason: `Checkpoint is TP=${factor}-interleaved; DP-attention is required (--dp = tp/${factor} = ${spec.dp}).` };
+      } else {
+        c.dpAttention = { force: "disabled", reason: `Single attention group on this hardware (tp=${factor}, no dp-attention).` };
+      }
+    }
+    if (blackwell) {
+      // DeepEP upstream targets Ampere/Hopper PTX; only experimental paths exist
+      // for sm_100 in sglang and the verified Blackwell stack uses flashinfer_trtllm.
+      c.deepep = { force: "disabled", reason: "Blackwell uses flashinfer_trtllm; DeepEP is Hopper / Ampere only." };
+    }
+    if (jax) {
+      // sgl-jax stack: only V2.5-Pro is supported on TPU today; speculative
+      // decoding and the DeepEP CUDA backend do not apply to the JAX runtime.
+      // EP is always on (both verified launch commands set --ep-size = --tp-size).
+      c.modelVariant = { force: "pro", reason: "sgl-jax TPU runtime only supports MiMo-V2.5-Pro today." };
+      c.eagleMtp = { force: "disabled", reason: "EAGLE MTP is not supported on the sgl-jax TPU runtime." };
+      c.deepep = { force: "disabled", reason: "DeepEP is a CUDA-only backend; sgl-jax uses the fused Pallas MoE kernel." };
+      c.expertParallelism = { force: "enabled", reason: "sgl-jax TPU recipes always use EP = TP." };
+    }
+    return c;
+  };
+
+  const resolveItems = (option, constraints) => {
+    const c = constraints[option.name];
+    if (!c) return option.items;
+    // Gray out every item that doesn't match the forced choice. Works for both
+    // binary (enabled/disabled) toggles and N-way options like modelVariant.
+    return option.items.map((item) =>
+      item.id !== c.force ? { ...item, disabled: true, disabledReason: c.reason } : item,
+    );
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    const constraints = computeConstraints("pro", "h200");
+    for (const [key, option] of Object.entries(options)) {
+      const items = resolveItems(option, constraints);
+      const def = items.find((i) => i.default && !i.disabled) || items.find((i) => !i.disabled) || items[0];
+      initialState[key] = def.id;
+    }
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains("dark") ||
+        html.getAttribute("data-theme") === "dark" ||
+        html.style.colorScheme === "dark";
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme", "style"],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  // Snap forced toggles to their required value whenever variant/hardware
+  // changes — keeps the visible radio in sync with the generated command.
+  useEffect(() => {
+    const constraints = computeConstraints(values.modelVariant, values.hardware);
+    let patch = null;
+    for (const [key, c] of Object.entries(constraints)) {
+      if (values[key] !== c.force) {
+        patch = patch || {};
+        patch[key] = c.force;
+      }
+    }
+    if (patch) setValues((prev) => ({ ...prev, ...patch }));
+  }, [values.modelVariant, values.hardware]);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const generateCommand = () => {
+    const { modelVariant, hardware, eagleMtp, dpAttention, expertParallelism, deepep, reasoningParser, toolcall } = values;
+    const specKey = `${modelVariant}|${hardware}`;
+    const spec = HW_VARIANT_SPEC[specKey];
+    const { slug, tp, multinode, nnodes, blackwell, jax } = spec;
+    const isPro = modelVariant === "pro";
+
+    // ---------------- sgl-jax (TPU) branch ----------------
+    if (jax) {
+      // Recipe sources:
+      //   v7x: tp=ep=32, dp=4, omits --attention-backend, mem-frac 0.95, swa 0.25
+      //   v6e: tp=ep=64, dp=8, --attention-backend fa,    mem-frac 0.92, swa 0.15
+      //
+      // sgl-jax conventions:
+      //   - `--tp-size` is always the total JAX device count; per-DP TP is
+      //     derived automatically as tp/dp.
+      //   - No `--enable-dp-attention` flag — DP attention is the default
+      //     (FFN layers auto-pick EP-split for MoE, attn-TP-split for dense).
+      const isV7x = hardware === "tpu-v7x";
+      const useEp = expertParallelism === "enabled";
+      const useDpAttn = dpAttention === "enabled";
+      const dpSize = isV7x ? 4 : 8;
+      const flags = [];
+      flags.push(`  --model-path ${slug}`);
+      flags.push("  --trust-remote-code");
+      flags.push(`  --tp-size ${tp}`);
+      if (useEp) flags.push(`  --ep-size ${tp}`);
+      if (useDpAttn) flags.push(`  --dp-size ${dpSize}`);
+      flags.push("  --moe-backend fused");
+      if (!isV7x) flags.push("  --attention-backend fa");
+      flags.push("  --host 0.0.0.0");
+      flags.push("  --port 30000");
+      flags.push("  --page-size 256");
+      flags.push("  --context-length 262144");
+      flags.push("  --chunked-prefill-size 4096");
+      flags.push("  --max-running-requests 512");
+      if (isV7x) {
+        flags.push("  --dtype bfloat16");
+        flags.push("  --mem-fraction-static 0.95");
+        flags.push("  --swa-full-tokens-ratio 0.25");
+        flags.push("  --log-level info");
+      } else {
+        flags.push("  --max-seq-len 4096");
+        flags.push("  --max-prefill-tokens 16384");
+        flags.push("  --mem-fraction-static 0.92");
+        flags.push("  --swa-full-tokens-ratio 0.15");
+      }
+      if (reasoningParser === "enabled") flags.push("  --reasoning-parser mimo");
+      if (toolcall === "enabled") flags.push("  --tool-call-parser mimo");
+      flags.push(`  --nnodes ${nnodes}`);
+      flags.push("  --node-rank <node-rank>");
+      flags.push("  --dist-init-addr <node0-ip>:20000");
+      const cmd = `JAX_COMPILATION_CACHE_DIR=/tmp/jit_cache python -m sgl_jax.launch_server \\\n${flags.join(" \\\n")}`;
+      return prependMultiNodeNote(cmd, nnodes);
+    }
+
+    // ---------------- CUDA (sglang serve) branch ----------------
+    // Toggles. EAGLE MTP / EP / DeepEP / DP-attn are gated by hardware + variant
+    // through computeConstraints; here we just read the (already-snapped) value.
+    const useMtp = eagleMtp === "enabled";
+    const useDeepep = !blackwell && deepep === "enabled";
+    const useEp = isPro && !blackwell && expertParallelism === "enabled";
+    const useDpAttn = dpAttention === "enabled";
+    // dp size = required DP-attention degree from the spec (tp/factor), for both
+    // variants. Only read when useDpAttn is on, which computeConstraints forces
+    // exactly for the specs that carry dp>1 (Pro/Hopper tp=16 → 2, base tp=8 → 2).
+    const dpSize = spec.dp;
+
+    // ---- env (kept inline before `sglang serve`, matching the verified launch style) ----
+    const envVars = [];
+    if (isPro && blackwell && multinode) {
+      envVars.push("NCCL_MNNVL_ENABLE=1", "NCCL_CUMEM_ENABLE=1");
+    }
+    if (useDeepep) envVars.push("SGLANG_DEEPEP_NUM_MAX_DISPATCH_TOKENS_PER_RANK=256");
+
+    // ---- flags ----
+    const flags = [];
+    flags.push("  --trust-remote-code");
+    flags.push(`  --model-path ${slug}`);
+    flags.push(`  --tp ${tp}`);
+
+    if (useDpAttn) {
+      flags.push(`  --dp ${dpSize}`);
+      flags.push("  --enable-dp-attention");
+      if (!isPro) {
+        flags.push("  --enable-dp-lm-head");
+        flags.push("  --mm-enable-dp-encoder");
+      }
+    }
+
+    if (useEp) flags.push(`  --ep ${tp}`);
+
+    if (multinode) flags.push(...multiNodeFlags(nnodes));
+
+    // MoE backend: Blackwell uses flashinfer_trtllm (both variants); Hopper
+    // optionally uses DeepEP (toggle).
+    if (blackwell) {
+      flags.push("  --moe-runner-backend flashinfer_trtllm");
+    } else if (useDeepep) {
+      flags.push("  --moe-a2a-backend deepep");
+      if (!isPro) flags.push("  --deepep-mode auto");
+      flags.push("  --moe-dense-tp-size 1");
+    }
+
+    if (isPro) {
+      if (blackwell) {
+        flags.push("  --attention-backend fa4");
+        flags.push("  --mem-fraction-static 0.8");
+        flags.push("  --max-running-requests 128");
+        flags.push("  --chunked-prefill-size 16384");
+        if (hardware === "b200") flags.push("  --swa-full-tokens-ratio 0.1");
+        flags.push(`  --model-loader-extra-config '{"enable_multithread_load": true, "num_threads": 64}'`);
+      } else {
+        flags.push("  --mem-fraction-static 0.7");
+        flags.push("  --max-running-requests 128");
+        flags.push("  --chunked-prefill-size 32768");
+        flags.push("  --cuda-graph-max-bs-decode 64");
+        flags.push("  --page-size 64");
+        flags.push("  --swa-full-tokens-ratio 0.3");
+        flags.push(`  --model-loader-extra-config '{"enable_multithread_load": true, "num_threads": 64}'`);
+      }
+    } else {
+      if (blackwell) {
+        // fa4 is required, not tuning: trtllm_mha rejects MiMoV2's 192/128 KV.
+        flags.push("  --attention-backend fa4");
+        flags.push("  --mm-attention-backend fa4");
+      }
+      flags.push("  --mem-fraction-static 0.65");
+      flags.push("  --chunked-prefill-size 16384");
+    }
+
+    if (useMtp) {
+      flags.push("  --speculative-algorithm EAGLE");
+      flags.push("  --speculative-num-steps 3");
+      flags.push("  --speculative-eagle-topk 1");
+      flags.push("  --speculative-num-draft-tokens 4");
+      flags.push("  --enable-multi-layer-eagle");
+    }
+
+    if (reasoningParser === "enabled") flags.push("  --reasoning-parser mimo");
+    if (toolcall === "enabled") flags.push("  --tool-call-parser mimo");
+
+    flags.push("  --host 0.0.0.0");
+    flags.push("  --port 30000");
+
+    const envInline = envVars.length ? envVars.join(" ") + " " : "";
+    const base = `${envInline}sglang serve \\\n${flags.join(" \\\n")}`;
+    return multinode ? prependMultiNodeNote(base, nnodes) : base;
+  };
+
+  // ---- styles ----
+  const containerStyle = { maxWidth: "900px", margin: "0 auto", display: "flex", flexDirection: "column", gap: "4px" };
+  const cardStyle = {
+    padding: "8px 12px",
+    border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
+    borderLeft: `3px solid ${isDark ? "#E85D4D" : "#D45D44"}`,
+    borderRadius: "4px",
+    display: "flex",
+    alignItems: "center",
+    gap: "12px",
+    background: isDark ? "#1f2937" : "#fff",
+  };
+  const titleStyle = { fontSize: "13px", fontWeight: "600", minWidth: "140px", flexShrink: 0, color: isDark ? "#e5e7eb" : "inherit" };
+  const itemsStyle = { display: "flex", rowGap: "2px", columnGap: "6px", flexWrap: "wrap", alignItems: "center", flex: 1 };
+  const labelBaseStyle = {
+    padding: "4px 10px",
+    border: `1px solid ${isDark ? "#9ca3af" : "#d1d5db"}`,
+    borderRadius: "3px",
+    cursor: "pointer",
+    display: "inline-flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    fontWeight: "500",
+    fontSize: "13px",
+    transition: "all 0.2s",
+    userSelect: "none",
+    minWidth: "45px",
+    textAlign: "center",
+    flex: 1,
+    background: isDark ? "#374151" : "#fff",
+    color: isDark ? "#e5e7eb" : "inherit",
+  };
+  const checkedStyle = { background: "#D45D44", color: "white", borderColor: "#D45D44" };
+  const disabledStyle = { cursor: "not-allowed", opacity: 0.4 };
+  const subtitleStyle = { display: "block", fontSize: "9px", marginTop: "1px", lineHeight: "1.1", opacity: 0.7 };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: "12px 16px",
+    background: isDark ? "#111827" : "#f5f5f5",
+    borderRadius: "6px",
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: "12px",
+    lineHeight: "1.5",
+    color: isDark ? "#e5e7eb" : "#374151",
+    whiteSpace: "pre-wrap",
+    overflowX: "auto",
+    margin: 0,
+    border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
+  };
+
+  const constraints = computeConstraints(values.modelVariant, values.hardware);
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        const items = resolveItems(option, constraints);
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {items.map((item) => {
+                const isChecked = values[option.name] === item.id;
+                const isDisabled = !!item.disabled;
+                return (
+                  <label
+                    key={item.id}
+                    style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}
+                    title={item.disabledReason || ""}
+                  >
+                    <input
+                      type="radio"
+                      name={option.name}
+                      value={item.id}
+                      checked={isChecked}
+                      disabled={isDisabled}
+                      onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                      style={{ display: "none" }}
+                    />
+                    {item.label}
+                    {item.subtitle && (
+                      <small style={{ ...subtitleStyle, color: isChecked ? "rgba(255,255,255,0.85)" : "inherit" }}>
+                        {item.subtitle}
+                      </small>
+                    )}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/minicpm-v-4_6-deployment.jsx

@@ -0,0 +1,385 @@
+export const MiniCPMV46Deployment = () => {
+  // NVIDIA platforms listed in chronological generation order:
+  //   - A100 (Ampere, sm_80): FA3 falls back to flashinfer.
+  //   - H100 / H200 (Hopper, sm_90a): same kernel family.
+  //   - B200 (Blackwell, sm_100a): sglang auto-picks trtllm_mha; pinned
+  //     explicitly here for safety.
+  // B300 / GB300 (sm_103a) require the CUDA-13 image variant (`-cu130`)
+  // and are not exposed in this generator.
+  //
+  // mem-fraction-static values are conservative defaults; re-tune for
+  // your workload.
+  //
+  // Required flags (any hardware):
+  //   --trust-remote-code   tokenizer / preprocessor loading
+  //   --dtype bfloat16      released ckpt config.json has no torch_dtype;
+  //                         without forcing bf16 the GDN causal_conv1d
+  //                         triton kernel fails on bf16/fp16 branch merge.
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'a100', label: 'A100', default: false },
+        { id: 'h100', label: 'H100', default: false },
+        { id: 'h200', label: 'H200', default: true  },
+        { id: 'b200', label: 'B200', default: false },
+      ],
+    },
+    variant: {
+      name: 'variant',
+      title: 'Variant',
+      items: [
+        { id: 'base',     label: 'Base',     subtitle: 'MiniCPM-V-4.6',          default: true  },
+        { id: 'thinking', label: 'Thinking', subtitle: 'MiniCPM-V-4.6-Thinking', default: false },
+      ],
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'enabled',  label: 'enabled',  default: false  },
+        { id: 'disabled', label: 'disabled', default: true },
+      ],
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'enabled',  label: 'enabled',  default: false },
+        { id: 'disabled', label: 'disabled', default: true  },
+      ],
+    },
+    mambaCache: {
+      name: 'mambaCache',
+      title: 'Mamba Radix Cache',
+      items: [
+        { id: 'v1', label: 'V1', default: false  },
+        { id: 'v2', label: 'V2', default: true },
+      ],
+    },
+  };
+
+  // Per-hardware tp / mem-fraction-static recommendations (BF16 only).
+  // Conservative defaults; re-tune once the released parameter count is known.
+  const modelConfigs = {
+    a100: { tp: 1, mem: 0.7 },   // 80GB,  Ampere
+    h100: { tp: 1, mem: 0.7 },   // 80GB,  Hopper
+    h200: { tp: 1, mem: 0.5 },   // 141GB, Hopper
+    b200: { tp: 1, mem: 0.4 },   // 180GB, Blackwell
+  };
+
+  const generateCommand = (values) => {
+    const { variant, hardware, reasoning, toolcall, mambaCache } = values;
+
+    const hwConfig = modelConfigs[hardware];
+    if (!hwConfig) return `# Error: Unknown hardware platform`;
+
+    const { tp, mem } = hwConfig;
+    const isBlackwell = hardware === 'b200';
+    const modelPath = variant === 'thinking'
+      ? 'openbmb/MiniCPM-V-4.6-Thinking'
+      : 'openbmb/MiniCPM-V-4.6';
+
+    let cmd = `sglang serve --model-path ${modelPath}`;
+    if (tp > 1) {
+      cmd += ` \\\n  --tp ${tp}`;
+    }
+    cmd += ` \\\n  --trust-remote-code`;
+    cmd += ` \\\n  --dtype bfloat16`;
+    if (isBlackwell) {
+      cmd += ` \\\n  --attention-backend trtllm_mha`;
+    }
+    cmd += ` \\\n  --mem-fraction-static ${mem}`;
+    if (reasoning === 'enabled') {
+      cmd += ` \\\n  --reasoning-parser qwen3`;
+    }
+    if (toolcall === 'enabled') {
+      cmd += ` \\\n  --tool-call-parser qwen3_coder`;
+    }
+    if (mambaCache === 'v2') {
+      cmd += ` \\\n  --mamba-radix-cache-strategy extra_buffer`;
+    }
+    cmd += ` \\\n  --host 0.0.0.0 --port 30000`;
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/minimax-m2-deployment.jsx

@@ -0,0 +1,353 @@
+export const MiniMaxM2Deployment = () => {
+  const modelFamily = 'MiniMaxAI';
+
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'mi300x', label: 'MI300X', default: true },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false }
+      ]
+    },
+    modelname: {
+      name: 'modelname',
+      title: 'Model Name',
+      items: [
+        { id: 'M2.1', label: 'MiniMax-M2.1', default: true },
+        { id: 'M2', label: 'MiniMax-M2', default: false }
+      ]
+    },
+    strategy: {
+      name: 'strategy',
+      title: 'Deployment Strategy',
+      type: 'checkbox',
+      items: [
+        { id: 'tp', label: 'TP', default: true, required: true },
+      ]
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    }
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, modelname, strategy, reasoning, toolcall } = values;
+
+    const modelMap = {
+      'M2.1': 'MiniMax-M2.1',
+      'M2': 'MiniMax-M2'
+    };
+
+    const modelName = `${modelFamily}/${modelMap[modelname]}`;
+
+    let cmd = 'sglang serve \\\n';
+    cmd += `  --model-path ${modelName}`;
+
+    cmd += ` \\\n  --tp 4`;
+
+    cmd += ` \\\n  --trust-remote-code`;
+
+    if (toolcall === 'enabled') {
+      cmd += ` \\\n  --tool-call-parser minimax-m2`;
+    }
+
+    if (reasoning === 'enabled') {
+      cmd += ` \\\n  --reasoning-parser minimax-append-think`;
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/minimax-m25-deployment.jsx

@@ -0,0 +1,406 @@
+export const MiniMaxM25Deployment = () => {
+  const modelFamily = 'MiniMaxAI';
+
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200', label: 'H200', default: true },
+        { id: 'b200', label: 'B200', default: false },
+        { id: 'a100', label: 'A100', default: false },
+        { id: 'h100', label: 'H100', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false }
+      ]
+    },
+    gpuCount: {
+      name: 'gpuCount',
+      title: 'GPU Count',
+      getDynamicItems: (values) => {
+        const isAMD = values.hardware === 'mi300x' || values.hardware === 'mi325x' || values.hardware === 'mi355x';
+        return [
+          {
+            id: '2gpu',
+            label: '2',
+            default: isAMD,
+            disabled: !isAMD
+          },
+          {
+            id: '4gpu',
+            label: '4',
+            default: !isAMD,
+            disabled: false
+          },
+          {
+            id: '8gpu',
+            label: '8',
+            default: false,
+            disabled: false
+          }
+        ];
+      }
+    },
+    thinking: {
+      name: 'thinking',
+      title: 'Thinking Capabilities',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--reasoning-parser minimax-append-think' : null
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--tool-call-parser minimax-m2' : null
+    }
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, gpuCount, thinking, toolcall } = values;
+
+    const isAMD = hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi355x';
+    if (gpuCount === '2gpu' && !isAMD) {
+      return '# Please select compatible hardware\n# 2-GPU requires AMD MI300X/MI325X/MI355X';
+    }
+
+    const modelName = `${modelFamily}/MiniMax-M2.5`;
+
+    const isBlackwell = hardware === 'b200';
+    const useAllreduceFusion = hardware === 'h200' || hardware === 'b200';
+
+    let cmd = '';
+    if (useAllreduceFusion) {
+      cmd += 'SGLANG_USE_FUSED_PARALLEL_QKNORM=1 \\\n';
+    }
+    cmd += 'python -m sglang.launch_server \\\n';
+    cmd += `  --model-path ${modelName}`;
+
+    if (gpuCount === '8gpu') {
+      cmd += ` \\\n  --tp 8`;
+      cmd += ` \\\n  --ep 8`;
+    } else if (gpuCount === '4gpu') {
+      cmd += ` \\\n  --tp 4`;
+      if (isAMD) {
+        cmd += ` \\\n  --ep 4`;
+      }
+    } else if (gpuCount === '2gpu') {
+      cmd += ` \\\n  --tp 2`;
+      if (isAMD) {
+        cmd += ` \\\n  --ep 2`;
+      }
+    }
+
+    if (toolcall === 'enabled') {
+      cmd += ` \\\n  --tool-call-parser minimax-m2`;
+    }
+
+    if (thinking === 'enabled') {
+      cmd += ` \\\n  --reasoning-parser minimax-append-think`;
+    }
+
+    cmd += ` \\\n  --trust-remote-code`;
+    cmd += ` \\\n  --mem-fraction-static 0.85`;
+
+    if (isBlackwell) {
+      cmd += ` \\\n  --moe-runner-backend flashinfer_trtllm_routed`;
+      cmd += ` \\\n  --fp8-gemm-backend flashinfer_trtllm`;
+      cmd += ` \\\n  --dtype bfloat16`;
+    }
+
+    if (useAllreduceFusion) {
+      cmd += ` \\\n  --enable-flashinfer-allreduce-fusion`;
+    }
+
+    if (isAMD) {
+      cmd += ` \\\n  --kv-cache-dtype fp8_e4m3`;
+      cmd += ` \\\n  --attention-backend triton`;
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/minimax-m27-deployment.jsx

@@ -0,0 +1,261 @@
+export const MiniMaxM27Deployment = () => {
+  // Config options. `getDynamicItems(values)` is evaluated at render time so that
+  // e.g. the 2-GPU option is only enabled on AMD or GB300 hardware.
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200',   label: 'H200',   default: true  },
+        { id: 'b200',   label: 'B200',   default: false },
+        { id: 'b300',   label: 'B300',   default: false },
+        { id: 'gb300',  label: 'GB300',  default: false },
+        { id: 'a100',   label: 'A100',   default: false },
+        { id: 'h100',   label: 'H100',   default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false },
+        { id: 'xeon',  label: 'XEON',  default: false }
+      ]
+    },
+    gpuCount: {
+      name: 'gpuCount',
+      title: 'GPU Count',
+      getDynamicItems: (values) => {
+        const hw = values.hardware;
+        const isAMD = hw === 'mi300x' || hw === 'mi325x' || hw === 'mi355x';
+        const isB300 = hw === 'b300';
+        const isGB300 = hw === 'gb300';
+        const isXeon = hw === 'xeon';
+        if (isXeon) {
+          return [
+            { id: 'tp6', label: 'TP=6', default: true, disabled: false }
+          ];
+        }
+        const canUse2GPU = isAMD || isGB300;
+        return [
+          { id: '2gpu', label: '2', default: canUse2GPU,  disabled: !canUse2GPU },
+          { id: '4gpu', label: '4', default: !canUse2GPU || isB300, disabled: false },
+          { id: '8gpu', label: '8', default: false,       disabled: isGB300 || isB300 }
+        ];
+      }
+    },
+    precision: {
+      name: 'precision',
+      title: 'Precision',
+      getDynamicItems: (values) => {
+        const hw = values.hardware;
+        const isBlackwell = hw === 'b200' || hw === 'b300' || hw === 'gb300';
+        return [
+          { id: 'fp8', label: 'FP8', default: true,  disabled: false },
+          { id: 'fp4', label: 'FP4', default: false, disabled: !isBlackwell,
+            disabledReason: 'NVFP4 requires Blackwell (B200/B300/GB300)' }
+        ];
+      }
+    },
+    thinking: {
+      name: 'thinking',
+      title: 'Thinking Capabilities',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled',  label: 'Enabled',  default: true  }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled',  label: 'Enabled',  default: true  }
+      ]
+    }
+  };
+
+  // Helper: resolve an option's items (static or dynamic) given current values
+  const resolveItems = (option, values) => {
+    if (typeof option.getDynamicItems === 'function') {
+      return option.getDynamicItems(values);
+    }
+    return option.items;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    // Resolve hardware first so gpuCount's dynamic items can see it
+    for (const [key, option] of Object.entries(options)) {
+      const items = resolveItems(option, initialState);
+      const defaultItem = items.find(i => i.default && !i.disabled) || items.find(i => !i.disabled) || items[0];
+      initialState[key] = defaultItem.id;
+    }
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  // When hardware changes, re-evaluate gpuCount so disabled/default shifts apply
+  useEffect(() => {
+    setValues(prev => {
+      const next = { ...prev };
+      for (const [key, option] of Object.entries(options)) {
+        if (typeof option.getDynamicItems !== 'function') continue;
+        const items = option.getDynamicItems(next);
+        const current = items.find(i => i.id === next[key]);
+        if (!current || current.disabled) {
+          const fallback = items.find(i => i.default && !i.disabled) || items.find(i => !i.disabled);
+          if (fallback) next[key] = fallback.id;
+        }
+      }
+      return next;
+    });
+  }, [values.hardware]);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  // Generate command mirrors sgl-cookbook src/components/autoregressive/MiniMaxM27ConfigGenerator/index.js
+  const generateCommand = () => {
+    const { hardware, gpuCount, precision, thinking, toolcall } = values;
+
+    const isAMD = hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi355x';
+    const isB300 = hardware === 'b300';
+    const isGB300 = hardware === 'gb300';
+    const isXeon = hardware === 'xeon';
+    const canUse2GPU = isAMD || isGB300;
+
+    if (gpuCount === '2gpu' && !canUse2GPU) {
+      return '# Please select compatible hardware\n# 2-GPU requires AMD MI300X/MI325X/MI355X or GB300';
+    }
+
+    const isBlackwell = hardware === 'b200' || hardware === 'b300' || hardware === 'gb300';
+    const isFp4 = precision === 'fp4';
+
+    if (isFp4 && !isBlackwell) {
+      return '# NVFP4 requires Blackwell hardware (B200, B300, or GB300)';
+    }
+
+    const modelName = isFp4 ? 'nvidia/MiniMax-M2.7-NVFP4' : 'MiniMaxAI/MiniMax-M2.7';
+
+    const useAllreduceFusion = hardware === 'h200' || hardware === 'b200' || hardware === 'gb300';
+
+    let cmd = '';
+    if (useAllreduceFusion) {
+      cmd += 'SGLANG_USE_FUSED_PARALLEL_QKNORM=1 \\\n';
+    }
+    cmd += 'sglang serve \\\n';
+    cmd += `  --model-path ${modelName}`;
+
+    if (isXeon) {
+      cmd += ' \\\n  --device cpu';
+      cmd += ' \\\n  --disable-overlap-schedule';
+      cmd += ' \\\n  --tp 6';
+    } else if (gpuCount === '8gpu') {
+      cmd += ' \\\n  --tp 8';
+      cmd += ' \\\n  --ep 8';
+    } else if (gpuCount === '4gpu') {
+      cmd += ' \\\n  --tp 4';
+      if (isAMD) cmd += ' \\\n  --ep 4';
+    } else if (gpuCount === '2gpu') {
+      cmd += ' \\\n  --tp 2';
+      if (isAMD) cmd += ' \\\n  --ep 2';
+    }
+
+    if (toolcall === 'enabled') cmd += ' \\\n  --tool-call-parser minimax-m2';
+    if (thinking === 'enabled') cmd += ' \\\n  --reasoning-parser minimax-append-think';
+
+    cmd += ' \\\n  --trust-remote-code';
+    if (!isXeon) {
+      cmd += ' \\\n  --mem-fraction-static 0.85';
+    }
+
+    if (!isXeon && isAMD) {
+      cmd += ' \\\n  --kv-cache-dtype fp8_e4m3';
+      cmd += ' \\\n  --attention-backend triton';
+    }
+    if (isB300) {
+      cmd += ' \\\n  --attention-backend flashinfer';
+    }
+
+    if (isBlackwell) {
+      cmd += ' \\\n  --moe-runner-backend flashinfer_trtllm_routed';
+      if (!isFp4) {
+        cmd += ' \\\n  --fp8-gemm-backend flashinfer_trtllm';
+        cmd += ' \\\n  --dtype bfloat16';
+      }
+    }
+
+    if (useAllreduceFusion) {
+      cmd += ' \\\n  --enable-flashinfer-allreduce-fusion';
+    }
+
+    return cmd;
+  };
+
+  // Styles
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.4 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        const items = resolveItems(option, values);
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                const isDisabled = !!item.disabled;
+                return (
+                  <label
+                    key={item.id}
+                    style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}
+                    title={item.disabledReason || ''}
+                  >
+                    <input
+                      type="radio"
+                      name={option.name}
+                      value={item.id}
+                      checked={isChecked}
+                      disabled={isDisabled}
+                      onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                      style={{ display: 'none' }}
+                    />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/ministral-3-deployment.jsx

@@ -0,0 +1,348 @@
+export const Ministral3Deployment = () => {
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'mi300x', label: 'MI300x', default: true },
+        { id: 'mi325x', label: 'MI325x', default: false },
+        { id: 'mi355x', label: 'MI355x', default: false }
+      ]
+    },
+    model: {
+      name: 'model',
+      title: 'Model',
+      items: [
+        { id: 'small', label: 'Ministral-3-8B-Instruct-2512', default: true },
+        { id: 'large', label: 'Ministral-3-14B-Instruct-2512', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'enabled', label: 'enabled', default: true },
+        { id: 'disabled', label: 'disabled', default: false }
+      ],
+      commandRule: (value) => (value === 'enabled' ? '--tool-call-parser mistral' : null)
+    }
+  };
+
+  const modelConfigs = {
+    small: {
+      modelId: 'mistralai/Ministral-3-8B-Instruct-2512',
+      tpByHardware: { mi300x: 1, mi325x: 1, mi355x: 1 }
+    },
+    large: {
+      modelId: 'mistralai/Ministral-3-14B-Instruct-2512',
+      tpByHardware: { mi300x: 1, mi325x: 1, mi355x: 1 }
+    }
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, model } = values;
+
+    const modelCfg = modelConfigs[model];
+    if (!modelCfg) return `# Error: Unknown model selection: ${model}`;
+
+    const tp = modelCfg.tpByHardware[hardware];
+    if (!tp) return `# Error: Unknown hardware platform: ${hardware}`;
+
+    let cmd = 'sglang serve \\\n';
+
+    cmd += `  --model-path ${modelCfg.modelId}`;
+
+    if (tp > 1) {
+      cmd += ` \\\n  --tp ${tp}`;
+    }
+
+    cmd += ` \\\n  --trust-remote-code`;
+
+    for (const [key, option] of Object.entries(options)) {
+      if (option.commandRule) {
+        const rule = option.commandRule(values[key]);
+        if (rule) cmd += ` \\\n  ${rule}`;
+      }
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/mistral-medium-3-5-deployment.jsx

@@ -0,0 +1,349 @@
+export const MistralMedium35Deployment = () => {
+  const modelId = 'mistralai/Mistral-Medium-3.5-128B';
+
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h100', label: 'H100', default: false },
+        { id: 'h200', label: 'H200', default: true },
+        { id: 'b200', label: 'B200', default: false },
+        { id: 'b300', label: 'B300', default: false },
+      ],
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled', label: 'Enabled', default: true }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--reasoning-parser mistral' : null
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled', label: 'Enabled', default: true }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--tool-call-parser mistral' : null
+    },
+    speculative: {
+      name: 'speculative',
+      title: 'Speculative Decoding (EAGLE)',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled', label: 'Enabled', default: true }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--dtype bfloat16 \\\n  --speculative-algorithm EAGLE \\\n  --speculative-draft-model-path mistralai/Mistral-Medium-3.5-128B-EAGLE \\\n  --speculative-num-steps 3 \\\n  --speculative-eagle-topk 1 \\\n  --speculative-num-draft-tokens 4' : null
+    },
+  };
+
+  // 128B dense FP8 ≈ 130GB, plus KV cache headroom
+  const modelConfigs = {
+    h100: { tp: 4 },
+    h200: { tp: 4 },
+    b200: { tp: 2 },
+    b300: { tp: 2 },
+  };
+
+  const generateCommand = (values) => {
+    const { hardware } = values;
+    const hwConfig = modelConfigs[hardware];
+    if (!hwConfig) return `# Error: Unknown hardware combination`;
+    const { tp } = hwConfig;
+
+    let cmd = `sglang serve --model-path ${modelId}`;
+    cmd += ` \\\n  --tp ${tp}`;
+
+    Object.entries(options).forEach(([key, option]) => {
+      if (key === 'hardware') return;
+      if (option.commandRule) {
+        const rule = option.commandRule(values[key]);
+        if (rule) cmd += ` \\\n  ${rule}`;
+      }
+    });
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/mistral-small-4-deployment.jsx

@@ -0,0 +1,369 @@
+export const MistralSmall4Deployment = () => {
+  const modelId = 'mistralai/Mistral-Small-4-119B-2603';
+
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      getDynamicItems: (values) => {
+        const isNvfp4 = values.quantization === 'fp4';
+        return [
+          { id: 'h100', label: 'H100', default: !isNvfp4, disabled: isNvfp4 },
+          { id: 'h200', label: 'H200', default: false, disabled: isNvfp4 },
+          { id: 'b200', label: 'B200', default: isNvfp4, disabled: false },
+          { id: 'b300', label: 'B300', default: false, disabled: false },
+        ];
+      }
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'fp8', label: 'FP8', default: true },
+        { id: 'fp4', label: 'NVFP4', subtitle: 'Blackwell only', default: false },
+      ]
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled', label: 'Enabled', default: true }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--reasoning-parser mistral' : null
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled', label: 'Enabled', default: true }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--tool-call-parser mistral' : null
+    },
+    speculative: {
+      name: 'speculative',
+      title: 'Speculative Decoding (EAGLE)',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--speculative-algorithm EAGLE \\\n  --speculative-draft-model-path mistralai/Mistral-Small-4-119B-2603-eagle \\\n  --speculative-num-steps 3 \\\n  --speculative-eagle-topk 1 \\\n  --speculative-num-draft-tokens 4' : null
+    },
+  };
+
+  const modelConfigs = {
+    h100: { fp8: { tp: 2 } },
+    h200: { fp8: { tp: 2 } },
+    b200: { fp8: { tp: 1 }, fp4: { tp: 1 } },
+    b300: { fp8: { tp: 1 }, fp4: { tp: 1 } },
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, quantization } = values;
+
+    const hwConfig = modelConfigs[hardware]?.[quantization];
+    if (!hwConfig) return `# Error: Unknown hardware/quantization combination`;
+
+    const { tp } = hwConfig;
+
+    const modelName = quantization === 'fp4'
+      ? 'mistralai/Mistral-Small-4-119B-2603-NVFP4'
+      : modelId;
+
+    let cmd = `sglang serve --model-path ${modelName}`;
+    cmd += ` \\\n  --tp ${tp}`;
+
+    Object.entries(options).forEach(([key, option]) => {
+      if (key === 'quantization' || key === 'hardware') return;
+      if (option.commandRule) {
+        const rule = option.commandRule(values[key]);
+        if (rule) cmd += ` \\\n  ${rule}`;
+      }
+    });
+
+    if (hardware === 'b300') {
+      cmd += ` \\\n  --attention-backend flashinfer`;
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/nemotron3-nano-deployment.jsx

@@ -0,0 +1,375 @@
+export const Nemotron3NanoDeployment = () => {
+  const modelFamily = 'nvidia';
+
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'b200', label: 'B200', default: true },
+        { id: 'b300', label: 'B300', default: false }
+      ]
+    },
+    modelVariant: {
+      name: 'modelVariant',
+      title: 'Model Variant',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false },
+        { id: 'nvfp4', label: 'NVFP4', default: false }
+      ]
+    },
+    tp: {
+      name: 'tp',
+      title: 'Tensor Parallel (TP)',
+      items: [
+        { id: '1', label: 'TP=1', default: true },
+        { id: '2', label: 'TP=2', default: false },
+        { id: '4', label: 'TP=4', default: false },
+        { id: '8', label: 'TP=8', default: false }
+      ]
+    },
+    kvcache: {
+      name: 'kvcache',
+      title: 'KV Cache DType',
+      items: [
+        { id: 'fp8_e4m3', label: 'fp8_e4m3', default: true },
+        { id: 'bf16', label: 'bf16', default: false }
+      ]
+    },
+    thinking: {
+      name: 'thinking',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--reasoning-parser nemotron_3' : null
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--tool-call-parser qwen3_coder' : null
+    }
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, modelVariant, tp, kvcache, thinking, toolcall } = values;
+
+    // Default to FP8 if not selected
+    const variant = modelVariant || 'fp8';
+    const baseName = 'NVIDIA-Nemotron-3-Nano-30B-A3B';
+
+    const modelName = `${modelFamily}/${baseName}-${variant.toUpperCase()}`;
+
+    let cmd = 'python3 -m sglang.launch_server \\\n';
+    cmd += `  --model-path ${modelName} \\\n`;
+    cmd += `  --trust-remote-code \\\n`;
+    cmd += `  --tp ${tp} \\\n`;
+    cmd += `  --kv-cache-dtype ${kvcache} \\\n`;
+    if (hardware === 'b300') {
+      cmd += `  --attention-backend flashinfer \\\n`;
+    }
+
+    // Add thinking parser and tool call parser if enabled
+    for (const [key, option] of Object.entries(options)) {
+      if (option.commandRule) {
+        const rule = option.commandRule(values[key]);
+        if (rule) {
+          cmd += `  ${rule}  \\\n`;
+        }
+      }
+    }
+
+    // Remove trailing backslash from last option
+    cmd = cmd.trimEnd();
+    if (cmd.endsWith('\\')) {
+      cmd = cmd.slice(0, -1).trimEnd();
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/nemotron3-nano-omni-deployment.jsx

@@ -0,0 +1,198 @@
+export const Nemotron3NanoOmniDeployment = () => {
+  const MODEL_PATHS = {
+    bf16: 'nvidia/Nemotron-3-Nano-Omni-30B-A3B-Reasoning-BF16',
+    fp8: 'nvidia/Nemotron-3-Nano-Omni-30B-A3B-Reasoning-FP8',
+    nvfp4: 'nvidia/Nemotron-3-Nano-Omni-30B-A3B-Reasoning-NVFP4',
+  };
+
+  const options = {
+    model: {
+      name: 'model',
+      title: 'Model',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false },
+        { id: 'nvfp4', label: 'NVFP4', default: false },
+      ],
+    },
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h100', label: 'H100', default: true },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'b200', label: 'B200', default: false },
+        { id: 'a100', label: 'A100', default: false },
+        { id: 'l40s', label: 'L40S', default: false },
+      ],
+    },
+    tp: {
+      name: 'tp',
+      title: 'Tensor Parallel (TP)',
+      items: [
+        { id: '1', label: 'TP=1', default: false },
+        { id: '2', label: 'TP=2', default: false },
+        { id: '4', label: 'TP=4', default: true },
+        { id: '8', label: 'TP=8', default: false },
+      ],
+    },
+    kvcache: {
+      name: 'kvcache',
+      title: 'KV Cache DType',
+      items: [
+        { id: 'none', label: 'None', default: true },
+        { id: 'fp8_e4m3', label: 'fp8_e4m3', default: false },
+      ],
+    },
+    thinking: {
+      name: 'thinking',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'thinking_on', label: 'Enabled', default: true },
+        { id: 'thinking_off', label: 'Disabled', default: false },
+      ],
+      commandRule: (value) => value === 'thinking_on' ? '--reasoning-parser deepseek-r1' : null,
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'toolcall_on', label: 'Enabled', default: true },
+        { id: 'toolcall_off', label: 'Disabled', default: false },
+      ],
+      commandRule: (value) => value === 'toolcall_on' ? '--tool-call-parser qwen3_coder' : null,
+    },
+  };
+
+  const generateCommand = (values) => {
+    const { tp, kvcache, model, hardware } = values;
+
+    if (model === 'nvfp4' && hardware !== 'b200') {
+      return '# NVFP4 requires Blackwell hardware. Please select B200.';
+    }
+
+    if (hardware === 'l40s' && tp === '1') {
+      return '# TP=1 is not supported on L40S for this model. Please use TP=2 or higher.';
+    }
+
+    const modelPath = MODEL_PATHS[model] || MODEL_PATHS.bf16;
+
+    let cmd = 'sglang serve \\\n';
+    cmd += `  --model-path ${modelPath} \\\n`;
+    cmd += '  --host 0.0.0.0 \\\n';
+    cmd += '  --port 30000 \\\n';
+    cmd += '  --trust-remote-code \\\n';
+    cmd += `  --tp ${tp} \\\n`;
+
+    if (kvcache && kvcache !== 'none') {
+      cmd += `  --kv-cache-dtype ${kvcache} \\\n`;
+    }
+
+    for (const [key, option] of Object.entries(options)) {
+      if (option.commandRule) {
+        const rule = option.commandRule(values[key]);
+        if (rule) {
+          cmd += `  ${rule} \\\n`;
+        }
+      }
+    }
+
+    cmd = cmd.trimEnd();
+    if (cmd.endsWith('\\')) {
+      cmd = cmd.slice(0, -1).trimEnd();
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      const items = option.items || [];
+      const defaultItem = items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items[0]?.id || '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        const items = option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {items.map((item) => {
+                const isChecked = values[option.name] === item.id;
+                const isDisabled = Boolean(item.disabled);
+                return (
+                  <label
+                    key={item.id}
+                    title={item.disabledReason || ''}
+                    style={{
+                      ...labelBaseStyle,
+                      ...(isChecked ? checkedStyle : {}),
+                      ...(isDisabled ? disabledStyle : {}),
+                    }}
+                  >
+                    <input
+                      type="radio"
+                      name={option.name}
+                      value={item.id}
+                      checked={isChecked}
+                      disabled={isDisabled}
+                      onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                      style={{ display: 'none' }}
+                    />
+                    {item.label}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/nemotron3-super-deployment.jsx

@@ -0,0 +1,388 @@
+export const Nemotron3SuperDeployment = () => {
+  const MODEL_PATHS = {
+    bf16: 'nvidia/NVIDIA-Nemotron-3-Super-120B-A12B-BF16',
+    fp8: 'nvidia/NVIDIA-Nemotron-3-Super-120B-A12B-FP8',
+    nvfp4: 'nvidia/NVIDIA-Nemotron-3-Super-120B-A12B-NVFP4',
+  };
+
+  const options = {
+    model: {
+      name: 'model',
+      title: 'Model',
+      items: [
+        { id: 'bf16',   label: 'BF16',   default: true  },
+        { id: 'fp8',    label: 'FP8',    default: false },
+        { id: 'nvfp4',  label: 'NVFP4',  default: false },
+      ]
+    },
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'b200', label: 'B200', default: true },
+        { id: 'b300', label: 'B300', default: false }
+      ]
+    },
+    tp: {
+      name: 'tp',
+      title: 'Tensor Parallel (TP)',
+      items: [
+        { id: '2', label: 'TP=2', default: false },
+        { id: '4', label: 'TP=4', default: true },
+        { id: '8', label: 'TP=8', default: false }
+      ]
+    },
+    mtp: {
+      name: 'mtp',
+      title: 'Multi-token Prediction (MTP)',
+      items: [
+        { id: 'enabled', label: 'Enabled', default: false },
+        { id: 'disabled', label: 'Disabled', default: true }
+      ],
+      // trtllm_mha is Blackwell-only; on B200 it replaces the flashinfer default,
+      // whose per-step plan() host-sync breaks the spec-v2 overlap scheduler. H200
+      // defaults to fa3 (no such sync), so no override is needed there.
+      commandRule: (value, state) => value === 'enabled' ? '--speculative-algorithm EAGLE \\\n  --speculative-num-steps 3 \\\n  --speculative-eagle-topk 1 \\\n  --speculative-num-draft-tokens 4 \\\n  --mamba-radix-cache-strategy extra_buffer' + (state.hardware === 'b200' ? ' \\\n  --attention-backend trtllm_mha' : '') : null
+    },
+    kvcache: {
+      name: 'kvcache',
+      title: 'KV Cache DType',
+      items: [
+        { id: 'none', label: 'None', default: true },
+        { id: 'fp8_e4m3', label: 'fp8_e4m3', default: false },
+        { id: 'bf16', label: 'bf16', default: false }
+      ]
+    },
+    thinking: {
+      name: 'thinking',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'enabled', label: 'Enabled', default: true },
+        { id: 'disabled', label: 'Disabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--reasoning-parser nemotron_3' : null
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'enabled', label: 'Enabled', default: true },
+        { id: 'disabled', label: 'Disabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--tool-call-parser qwen3_coder' : null
+    }
+  };
+
+  const generateCommand = (values) => {
+    const { tp, kvcache, model } = values;
+
+    const modelPath = MODEL_PATHS[model] || MODEL_PATHS['bf16'];
+
+    let cmd = `sglang serve \\\n`;
+    cmd += `  --model-path ${modelPath} \\\n`;
+    cmd += `  --trust-remote-code \\\n`;
+    cmd += `  --tp ${tp} \\\n`;
+
+    if (kvcache && kvcache !== 'none') {
+      cmd += `  --kv-cache-dtype ${kvcache} \\\n`;
+    }
+    if (values.hardware === 'b300') {
+      cmd += `  --attention-backend flashinfer \\\n`;
+    }
+
+    for (const [key, option] of Object.entries(options)) {
+      if (option.commandRule) {
+        const rule = option.commandRule(values[key], values);
+        if (rule) {
+          cmd += `  ${rule} \\\n`;
+        }
+      }
+    }
+
+    cmd = cmd.trimEnd();
+    if (cmd.endsWith('\\')) {
+      cmd = cmd.slice(0, -1).trimEnd();
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/nemotron3-ultra-deployment.jsx

@@ -0,0 +1,540 @@
+export const Nemotron3UltraDeployment = () => {
+  const MODEL_PATHS = {
+    bf16: 'nvidia/NVIDIA-Nemotron-3-Ultra-550B-A55B-BF16',
+    nvfp4: 'nvidia/NVIDIA-Nemotron-3-Ultra-550B-A55B-NVFP4',
+  };
+
+  // Verified {model, hardware, tp} combinations. Any tuple not in this list is
+  // blocked by `generateCommand` so the UI cannot emit an unvalidated launch.
+  // Keep in sync with the "Supported GPUs" section of Nemotron3-Ultra.mdx.
+  const VERIFIED_CONFIGS = [
+    { model: 'bf16',  hardware: 'h100',  tp: '16', multinode: true },
+    { model: 'bf16',  hardware: 'h200',  tp: '16', multinode: true },
+    { model: 'bf16',  hardware: 'b200',  tp: '8'  },
+    { model: 'bf16',  hardware: 'b300',  tp: '8'  },
+    { model: 'nvfp4', hardware: 'b200',  tp: '4'  },
+    { model: 'nvfp4', hardware: 'b200',  tp: '8'  },
+    { model: 'nvfp4', hardware: 'b300',  tp: '4'  },
+    { model: 'nvfp4', hardware: 'b300',  tp: '8'  },
+    { model: 'nvfp4', hardware: 'gb200', tp: '4'  },
+    { model: 'nvfp4', hardware: 'gb300', tp: '4'  },
+  ];
+
+  const findVerified = (model, hardware, tp) =>
+    VERIFIED_CONFIGS.find((c) => c.model === model && c.hardware === hardware && c.tp === tp);
+
+  const verifiedHardwareForModel = (model) =>
+    [...new Set(VERIFIED_CONFIGS.filter((c) => c.model === model).map((c) => c.hardware))];
+
+  const verifiedTpForModelHardware = (model, hardware) =>
+    [...new Set(VERIFIED_CONFIGS.filter((c) => c.model === model && c.hardware === hardware).map((c) => c.tp))];
+
+  // DP attention is verified at dp=2 for BF16, and dp in {2,4,8} for NVFP4. SGLang
+  // requires tp_size % dp_size == 0, so dp is capped at both the selected TP and the
+  // max verified TP for this model+hardware (whichever is smaller).
+  const dpCandidatesForModel = (model) => (model === 'bf16' ? ['2'] : ['2', '4', '8']);
+
+  const maxVerifiedTpForModelHardware = (model, hardware) => {
+    const tps = verifiedTpForModelHardware(model, hardware).map(Number);
+    return tps.length ? Math.max(...tps) : 0;
+  };
+
+  const verifiedDpForModelHardwareTp = (model, hardware, tp) => {
+    const cap = Math.min(Number(tp) || 0, maxVerifiedTpForModelHardware(model, hardware));
+    return dpCandidatesForModel(model).filter((d) => Number(d) <= cap);
+  };
+
+  const options = {
+    model: {
+      name: 'model',
+      title: 'Model',
+      items: [
+        { id: 'bf16',   label: 'BF16',   default: false },
+        { id: 'nvfp4',  label: 'NVFP4',  default: true,  subtitle: 'Blackwell only' },
+      ]
+    },
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      getDynamicItems: (values) => {
+        const supported = new Set(verifiedHardwareForModel(values.model));
+        const base = [
+          { id: 'h100',  label: 'H100',  default: false },
+          { id: 'h200',  label: 'H200',  default: false },
+          { id: 'b200',  label: 'B200',  default: true  },
+          { id: 'gb200', label: 'GB200', default: false },
+          { id: 'b300',  label: 'B300',  default: false },
+          { id: 'gb300', label: 'GB300', default: false }
+        ];
+        return base.map((it) => {
+          const ok = supported.has(it.id);
+          return {
+            ...it,
+            disabled: !ok,
+            disabledReason: ok ? '' : `${values.model.toUpperCase()} is not verified on ${it.label}`
+          };
+        });
+      }
+    },
+    tp: {
+      name: 'tp',
+      title: 'Tensor Parallel (TP)',
+      getDynamicItems: (values) => {
+        const supported = new Set(verifiedTpForModelHardware(values.model, values.hardware));
+        const base = [
+          { id: '4',  label: 'TP=4'  },
+          { id: '8',  label: 'TP=8'  },
+          { id: '16', label: 'TP=16', subtitle: '2-node' }
+        ];
+        return base.map((it) => {
+          const ok = supported.has(it.id);
+          return {
+            ...it,
+            default: ok && supported.size === 1,
+            disabled: !ok,
+            disabledReason: ok ? '' : `TP=${it.id} is not verified for ${values.model.toUpperCase()} on ${values.hardware.toUpperCase()}`
+          };
+        });
+      }
+    },
+    ep: {
+      name: 'ep',
+      title: 'Expert Parallel (EP)',
+      items: [
+        { id: 'enabled',  label: 'Enabled', subtitle: 'EP = TP' },
+        { id: 'disabled', label: 'Disabled', default: true }
+      ],
+      // This MoE only supports ep_size == 1 or ep_size == tp_size; when on, EP equals TP.
+      commandRule: (value, state) => value === 'enabled' ? `--ep ${state.tp}` : null
+    },
+    dpattention: {
+      name: 'dpattention',
+      title: 'DP Attention',
+      getDynamicItems: (values) => {
+        const allowed = new Set(verifiedDpForModelHardwareTp(values.model, values.hardware, values.tp));
+        const base = [
+          { id: 'disabled', label: 'Disabled', subtitle: 'Low latency',    default: true },
+          { id: '2',        label: 'DP=2',      subtitle: 'High throughput' },
+          { id: '4',        label: 'DP=4',      subtitle: 'High throughput' },
+          { id: '8',        label: 'DP=8',      subtitle: 'High throughput' }
+        ];
+        return base.map((it) => {
+          if (it.id === 'disabled') return it;
+          const ok = allowed.has(it.id);
+          return {
+            ...it,
+            disabled: !ok,
+            disabledReason: ok ? '' : `DP=${it.id} is not verified for ${values.model.toUpperCase()} on ${values.hardware.toUpperCase()} at TP=${values.tp}`
+          };
+        });
+      },
+      // dp_size must divide tp_size; only emit when the selected DP is valid for the current TP.
+      commandRule: (value, state) =>
+        value && value !== 'disabled' &&
+        dpCandidatesForModel(state.model).includes(value) &&
+        Number(value) <= Number(state.tp)
+          ? `--dp ${value} \\\n  --enable-dp-attention`
+          : null
+    },
+    mtp: {
+      name: 'mtp',
+      title: 'Multi-token Prediction (MTP)',
+      items: [
+        { id: 'enabled',  label: 'Enabled',  default: true  },
+        { id: 'disabled', label: 'Disabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--speculative-algorithm EAGLE \\\n  --speculative-num-steps 5 \\\n  --speculative-eagle-topk 1 \\\n  --speculative-num-draft-tokens 6' : null
+    },
+    kvcache: {
+      name: 'kvcache',
+      title: 'KV Cache DType',
+      items: [
+        { id: 'none',     label: 'None',     default: true  },
+        { id: 'fp8_e4m3', label: 'fp8_e4m3', default: false },
+        { id: 'bf16',     label: 'bf16',     default: false }
+      ]
+    },
+    mambabackend: {
+      name: 'mambabackend',
+      title: 'Mamba Backend',
+      items: [
+        { id: 'triton',     label: 'Triton',     subtitle: 'Default', default: true  },
+        { id: 'flashinfer', label: 'FlashInfer', subtitle: 'Faster',  default: false }
+      ],
+      commandRule: (value) => value === 'flashinfer' ? '--mamba-backend flashinfer' : null
+    },
+    mambassmdtype: {
+      name: 'mambassmdtype',
+      title: 'Mamba SSM DType',
+      items: [
+        { id: 'default', label: 'Default', subtitle: 'Model config', default: true  },
+        { id: 'float16', label: 'float16', subtitle: 'Less memory',   default: false }
+      ],
+      commandRule: (value) => value === 'float16' ? '--mamba-ssm-dtype float16' : null
+    },
+    mambastochasticrounding: {
+      name: 'mambastochasticrounding',
+      title: 'Mamba Stochastic Rounding',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true  },
+        { id: 'enabled',  label: 'Enabled',  subtitle: 'FP16 SSM' }
+      ],
+      commandRule: (value, state) =>
+        value === 'enabled' && state.mambassmdtype === 'float16'
+          ? '--enable-mamba-cache-stochastic-rounding'
+          : null
+    },
+    thinking: {
+      name: 'thinking',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'enabled',  label: 'Enabled',  default: true  },
+        { id: 'disabled', label: 'Disabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--reasoning-parser nemotron_3' : null
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'enabled',  label: 'Enabled',  default: true  },
+        { id: 'disabled', label: 'Disabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--tool-call-parser qwen3_coder' : null
+    }
+  };
+
+  const renderVerifiedMatrix = () => {
+    const byModel = {};
+    for (const c of VERIFIED_CONFIGS) {
+      (byModel[c.model] ||= []).push(c);
+    }
+    return Object.entries(byModel)
+      .map(([m, cs]) => {
+        const lines = cs.map((c) => {
+          const node = c.multinode ? ', 2-node' : '';
+          return `#     - ${c.hardware.toUpperCase()} @ TP=${c.tp}${node}`;
+        });
+        return `#   ${m.toUpperCase()}:\n${lines.join('\n')}`;
+      })
+      .join('\n');
+  };
+
+  const generateCommand = (values) => {
+    const { tp, kvcache, model, hardware } = values;
+    const cfg = findVerified(model, hardware, tp);
+
+    // Block any combination that is not in the verified support matrix.
+    if (!cfg) {
+      return [
+        `# ERROR: ${model.toUpperCase()} on ${hardware.toUpperCase()} with TP=${tp} is not a verified configuration.`,
+        `# The launch command has been suppressed to avoid running an unvalidated setup.`,
+        `#`,
+        `# Verified configurations:`,
+        renderVerifiedMatrix(),
+      ].join('\n');
+    }
+
+    const modelPath = MODEL_PATHS[model] || MODEL_PATHS['bf16'];
+
+    let cmd = `python3 -m sglang.launch_server \\\n`;
+    cmd += `  --model-path ${modelPath} \\\n`;
+    cmd += `  --trust-remote-code \\\n`;
+    cmd += `  --tp ${tp} \\\n`;
+
+    for (const [key, option] of Object.entries(options)) {
+      if (option.commandRule) {
+        const rule = option.commandRule(values[key], values);
+        if (rule) {
+          cmd += `  ${rule} \\\n`;
+        }
+      }
+    }
+
+    cmd += `  --mamba-radix-cache-strategy extra_buffer \\\n`;
+    if (['b200', 'gb200', 'b300', 'gb300'].includes(hardware)) {
+      cmd += `  --attention-backend trtllm_mha \\\n`;
+    }
+
+    if (kvcache && kvcache !== 'none') {
+      cmd += `  --kv-cache-dtype ${kvcache} \\\n`;
+    }
+
+    if (cfg.multinode) {
+      cmd += `  --dist-init-addr <head-node-ip>:5000 \\\n`;
+      cmd += `  --nnodes 2 \\\n`;
+      cmd += `  --node-rank <0|1> \\\n`;
+    }
+
+    cmd = cmd.trimEnd();
+    if (cmd.endsWith('\\')) {
+      cmd = cmd.slice(0, -1).trimEnd();
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      const items = option.getDynamicItems
+        ? option.getDynamicItems(initialState)
+        : option.items || [];
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/qwen25-vl-deployment.jsx

@@ -0,0 +1,373 @@
+export const Qwen25VLDeployment = () => {
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'mi300x', label: 'MI300X', default: true },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false },
+        { id: 'xeon', label: 'XEON', default: false }
+      ]
+    },
+    modelsize: {
+      name: 'modelsize',
+      title: 'Model Size',
+      items: [
+        { id: '72b', label: '72B', subtitle: 'Dense', default: true },
+        { id: '32b', label: '32B', subtitle: 'Dense', default: false },
+        { id: '7b', label: '7B', subtitle: 'Dense', default: false },
+        { id: '3b', label: '3B', subtitle: 'Dense', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true }
+      ]
+    }
+  };
+
+  const modelConfigs = {
+    '72b': {
+      baseName: '72B',
+      mi300x: { tp: 8, ep: 0 },
+      mi325x: { tp: 8, ep: 0 },
+      mi355x: { tp: 8, ep: 0 },
+      xeon: { tp: 6, ep: 0 }
+    },
+    '32b': {
+      baseName: '32B',
+      mi300x: { tp: 2, ep: 0 },
+      mi325x: { tp: 2, ep: 0 },
+      mi355x: { tp: 2, ep: 0 },
+      xeon: { tp: 6, ep: 0 }
+    },
+    '7b': {
+      baseName: '7B',
+      mi300x: { tp: 1, ep: 0 },
+      mi325x: { tp: 1, ep: 0 },
+      mi355x: { tp: 1, ep: 0 },
+      xeon: { tp: 3, ep: 0 }
+    },
+    '3b': {
+      baseName: '3B',
+      mi300x: { tp: 1, ep: 0 },
+      mi325x: { tp: 1, ep: 0 },
+      mi355x: { tp: 1, ep: 0 },
+      xeon: { tp: 3, ep: 0 }
+    }
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, modelsize: modelSize } = values;
+
+    const modelSizeConfig = modelConfigs[modelSize];
+    if (!modelSizeConfig) {
+      return `# Error: Unknown model size: ${modelSize}`;
+    }
+
+    const hwConfig = modelSizeConfig[hardware];
+    if (!hwConfig) {
+      return `# Error: Unknown hardware platform: ${hardware}`;
+    }
+
+    const modelName = `Qwen/Qwen2.5-VL-${modelSizeConfig.baseName}-Instruct`;
+
+    let cmd = 'python -m sglang.launch_server \\\n';
+    cmd += `  --model ${modelName}`;
+
+    if (hardware === 'xeon') {
+      cmd += ` \\\n  --device cpu \\\n  --disable-overlap-schedule`;
+    }
+
+    if (hwConfig.tp > 1) {
+      cmd += ` \\\n  --tp ${hwConfig.tp}`;
+    }
+
+    if ((hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi355x') && modelSize === '72b') {
+      cmd += ` \\\n  --context-length 128000`;
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/qwen3-coder-480b-a35b-deployment.jsx

@@ -0,0 +1,139 @@
+export const Qwen3CoderDeployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'mi300x', label: 'MI300X', default: true }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false }
+      ]
+    }
+  };
+
+  // Model configurations
+  const modelConfigs = {
+    '480b': {
+      baseName: '480B-A35B',
+      mi300x: { tp: 8, ep: 0 }
+    }
+  };
+
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      const defaultItem = option.items.find(item => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, quantization } = values;
+
+    const config = modelConfigs['480b'];
+    const hwConfig = config[hardware];
+
+    if (!hwConfig) {
+      return `# Error: Unknown hardware platform: ${hardware}`;
+    }
+
+    // Build model name
+    const quantSuffix = quantization === 'fp8' ? '-FP8' : '';
+    const modelName = `Qwen/Qwen3-Coder-${config.baseName}-Instruct${quantSuffix}`;
+
+    let cmd = 'python -m sglang.launch_server \\\n';
+    cmd += `  --model ${modelName}`;
+
+    // TP is always 8 for this model
+    cmd += ` \\\n  --tp ${hwConfig.tp}`;
+
+    // FP8 requires EP=2 for MoE dimension alignment
+    if (quantization === 'fp8') {
+      cmd += ` \\\n  --ep 2`;
+    }
+
+    // Context length verified on MI300X
+    cmd += ` \\\n  --context-length 8192`;
+
+    // Page size for MoE models
+    cmd += ` \\\n  --page-size 32`;
+
+    // FP8 requires trust-remote-code
+    if (quantization === 'fp8') {
+      cmd += ` \\\n  --trust-remote-code`;
+    }
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.items.map(item => {
+              const isChecked = values[option.name] === item.id;
+              const isDisabled = item.disabled;
+              return (
+                <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                  <input type="radio" name={option.name} value={item.id} checked={isChecked} disabled={isDisabled} onChange={() => handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                  {item.label}
+                  {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                </label>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/qwen3-coder-deployment.jsx

@@ -0,0 +1,439 @@
+export const Qwen3CoderDeployment = () => {
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'mi300x', label: 'MI300X', default: true },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false },
+        { id: 'b200', label: 'B200', default: false },
+        { id: 'gb200', label: 'GB200', default: false },
+        { id: 'xeon', label: 'Xeon', default: false }
+      ]
+    },
+    modelSize: {
+      name: 'modelSize',
+      title: 'Model Size',
+      items: [
+        { id: '480b', label: '480B', subtitle: 'MOE', default: true },
+        { id: '30b', label: '30B', subtitle: 'MOE', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      getDynamicItems: (values) => {
+        const isXeon = values.hardware === 'xeon';
+        return [
+          { id: 'bf16', label: 'BF16', default: true },
+          { id: 'fp8', label: 'FP8', default: false, disabled: false, disabledReason: '' },
+          { id: 'nvfp4', label: 'NVFP4', default: false, disabled: isXeon, disabledReason: isXeon ? 'FP4 is not supported on Xeon' : '' }
+        ];
+      }
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--tool-call-parser qwen3_coder' : null
+    }
+  };
+
+  const modelConfigs = {
+    '480b': {
+      baseName: '480B-A35B',
+      mi300x: { tp: 8 },
+      mi325x: { tp: 8 },
+      mi355x: { tp: 8 },
+      b200: { tp: 8, ep: 8 },
+      gb200: { tp: 4, ep: 4 },
+      xeon: { tp: 6 }
+    },
+    '30b': {
+      baseName: '30B-A3B',
+      mi300x: { tp: 1 },
+      mi325x: { tp: 1 },
+      mi355x: { tp: 1 },
+      xeon: { tp: 3 }
+    }
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, modelSize, quantization } = values;
+
+    const isNvidia = hardware === 'b200' || hardware === 'gb200';
+    const isXeon = hardware === 'xeon';
+
+    const modelConfig = modelConfigs[modelSize];
+    const hwConfig = modelConfig[hardware];
+
+    if (!hwConfig) {
+      return `# Configuration not available: ${modelSize.toUpperCase()} model has not been verified on ${hardware.toUpperCase()}.`;
+    }
+
+    // NVFP4 is only available on NVIDIA hardware
+    if (quantization === 'nvfp4' && !isNvidia) {
+      return `# NVFP4 quantization is only available on NVIDIA B200/GB200 hardware.`;
+    }
+
+    // BF16 not verified on NVIDIA
+    if (quantization === 'bf16' && isNvidia) {
+      return `# BF16 deployment on ${hardware.toUpperCase()} has not been verified yet. Please use FP8 or NVFP4.`;
+    }
+
+    // Build model name
+    let modelName;
+    if (quantization === 'nvfp4') {
+      modelName = `nvidia/Qwen3-Coder-${modelConfig.baseName}-Instruct-NVFP`;
+    } else {
+      const quantSuffix = quantization === 'fp8' ? '-FP8' : '';
+      modelName = `Qwen/Qwen3-Coder-${modelConfig.baseName}-Instruct${quantSuffix}`;
+    }
+
+    let cmd = '';
+    if (!isNvidia && !isXeon) {
+      cmd += 'SGLANG_USE_AITER=0 ';
+    }
+    cmd += 'python -m sglang.launch_server \\\n';
+    cmd += `  --model ${modelName}`;
+
+    if (isXeon) {
+      cmd += ` \\\n  --device cpu \\\n  --disable-overlap-schedule`;
+    }
+
+    // TP setting
+    cmd += ` \\\n  --tp ${hwConfig.tp}`;
+
+    // EP settings
+    const ep = hwConfig.ep || (quantization === 'nvfp4' ? 1 : null);
+    if (ep) {
+      cmd += ` \\\n  --ep ${ep}`;
+    } else if (modelSize === '480b' && quantization === 'fp8' && !isXeon) {
+      // FP8 requires EP=2 for 480B model due to MoE dimension alignment
+      // moe_intermediate_size=2560, with tp=8 ep=1: 2560/8=320, 320%128!=0
+      // with tp=8 ep=2: 2560/4=640, 640%128=0
+      cmd += ` \\\n  --ep 2`;
+    }
+
+    // DP attention setting
+    if (quantization === 'nvfp4') {
+      cmd += ` \\\n  --enable-dp-attention`;
+    }
+
+    // MOE runner backend for NVIDIA
+    if (isNvidia) {
+      if (quantization === 'nvfp4') {
+        cmd += ` \\\n  --quantization modelopt_fp4`;
+      }
+    }
+
+    // Apply commandRule from all options
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.commandRule && values[key]) {
+        // Pass the full values object so commandRule can access other option values
+        const additionalCmd = option.commandRule(values[key], values);
+        if (additionalCmd) {
+          cmd += ` \\\n  ${additionalCmd}`;
+        }
+      }
+    });
+
+    // AMD-specific flags
+    if (!isNvidia && !isXeon) {
+      // Context length verified on MI300X/MI325X/MI355X
+      cmd += ` \\\n  --context-length 8192`;
+
+      // Page size for MoE models
+      cmd += ` \\\n  --page-size 32`;
+
+      // FP8 requires trust-remote-code
+      if (quantization === 'fp8') {
+        cmd += ` \\\n  --trust-remote-code`;
+      }
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/qwen3-coder-next-deployment.jsx

@@ -0,0 +1,388 @@
+export const Qwen3CoderNextDeployment = () => {
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200', label: 'H200', default: true },
+        { id: 'h100', label: 'H100', default: false },
+        { id: 'b200', label: 'B200', default: false },
+        { id: 'b300', label: 'B300', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false },
+        { id: 'xeon', label: 'XEON', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'enabled', label: 'Enabled', default: true },
+        { id: 'disabled', label: 'Disabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--tool-call-parser qwen3_coder' : null
+    },
+    mambaCache: {
+      name: 'mambaCache',
+      title: 'Mamba Radix Cache',
+      condition: (values) => values.hardware !== 'xeon',
+      items: [
+        { id: 'v1', label: 'V1', default: true },
+        { id: 'v2', label: 'V2', default: false }
+      ],
+      commandRule: (value) => value === 'v2' ? '--mamba-radix-cache-strategy extra_buffer \\\n  --page-size 64' : null
+    }
+  };
+
+  const modelConfigs = {
+    default: {
+      baseName: 'Qwen3-Coder-Next',
+      h100: { bf16: { tp: 4 }, fp8: { tp: 2 } },
+      h200: { bf16: { tp: 2 }, fp8: { tp: 1 } },
+      b200: { bf16: { tp: 2 }, fp8: { tp: 1 } },
+      b300: { bf16: { tp: 2 }, fp8: { tp: 1 } },
+      mi300x: { bf16: { tp: 2 }, fp8: { tp: 1 } },
+      mi325x: { bf16: { tp: 2 }, fp8: { tp: 1 } },
+      mi355x: { bf16: { tp: 2 }, fp8: { tp: 1 } },
+      xeon: { bf16: { tp: 3 }, fp8: { tp: 3 } }
+    }
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, quantization } = values;
+
+    const hwConfig = modelConfigs.default[hardware];
+    if (!hwConfig) {
+      return `# Error: Unknown hardware platform: ${hardware}`;
+    }
+
+    const quantConfig = hwConfig[quantization];
+    if (!quantConfig) {
+      return '# Configuration not available for the selected hardware/quantization.';
+    }
+    const quantSuffix = quantization === 'fp8' ? '-FP8' : '';
+    const modelName = `Qwen/${modelConfigs.default.baseName}${quantSuffix}`;
+
+    let cmd = 'python -m sglang.launch_server \\\n';
+    cmd += `  --model ${modelName}`;
+
+    if (hardware === 'xeon') {
+      cmd += ` \\\n  --device cpu \\\n  --disable-overlap-schedule`;
+    }
+
+    // TP setting
+    if (quantConfig.tp > 1) {
+      cmd += ` \\\n  --tp ${quantConfig.tp}`;
+    }
+
+    // Apply commandRule from all options
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.condition && !option.condition(values)) {
+        return;
+      }
+      if (option.commandRule && values[key]) {
+        const additionalCmd = option.commandRule(values[key], values);
+        if (additionalCmd) {
+          cmd += ` \\\n  ${additionalCmd}`;
+        }
+      }
+    });
+
+    // AMD GPUs require triton attention backend
+    if (hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi355x') {
+      cmd += ` \\\n  --attention-backend triton`;
+    }
+    if (hardware === 'b300') {
+      cmd += ` \\\n  --attention-backend flashinfer`;
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/qwen3-deployment.jsx

@@ -0,0 +1,357 @@
+export const Qwen3Deployment = () => {
+  // Model configurations
+  const modelConfigs = {
+    '235b': {
+      baseName: '235B-A22B',
+      hasThinkingVariants: true,
+      h100: { tp: 8, ep: 0, bf16: true, fp8: true },
+      h200: { tp: 8, ep: 0, bf16: true, fp8: true },
+      b200: { tp: 8, ep: 0, bf16: true, fp8: true },
+      b300: { tp: 8, ep: 0, bf16: true, fp8: true },
+      mi300x: { tp: 4, ep: 0, bf16: true, fp8: true },
+      mi325x: { tp: 4, ep: 0, bf16: true, fp8: true },
+      mi355x: { tp: 4, ep: 0, bf16: true, fp8: true },
+      xeon: { tp: 6, ep: 0, bf16: true, fp8: true }
+    },
+    '30b': {
+      baseName: '30B-A3B',
+      hasThinkingVariants: true,
+      h100: { tp: 1, ep: 0, bf16: true, fp8: true },
+      h200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b300: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi300x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi325x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi355x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      xeon: { tp: 3, ep: 0, bf16: true, fp8: true }
+    },
+    '32b': {
+      baseName: '32B',
+      hasThinkingVariants: false,
+      h100: { tp: 1, ep: 0, bf16: true, fp8: true },
+      h200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b300: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi300x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi325x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi355x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      xeon: { tp: 6, ep: 0, bf16: true, fp8: true }
+    },
+    '14b': {
+      baseName: '14B',
+      hasThinkingVariants: false,
+      h100: { tp: 1, ep: 0, bf16: true, fp8: true },
+      h200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b300: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi300x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi325x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi355x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      xeon: { tp: 3, ep: 0, bf16: true, fp8: true }
+    },
+    '8b': {
+      baseName: '8B',
+      hasThinkingVariants: false,
+      h100: { tp: 1, ep: 0, bf16: true, fp8: true },
+      h200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b300: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi300x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi325x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi355x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      xeon: { tp: 3, ep: 0, bf16: true, fp8: true }
+    },
+    '4b': {
+      baseName: '4B',
+      hasThinkingVariants: true,
+      h100: { tp: 1, ep: 0, bf16: true, fp8: true },
+      h200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b300: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi300x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi325x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi355x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      xeon: { tp: 3, ep: 0, bf16: true, fp8: true }
+    },
+    '1.7b': {
+      baseName: '1.7B',
+      hasThinkingVariants: false,
+      h100: { tp: 1, ep: 0, bf16: true, fp8: true },
+      h200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b300: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi300x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi325x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi355x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      xeon: { tp: 3, ep: 0, bf16: true, fp8: true }
+    },
+    '0.6b': {
+      baseName: '0.6B',
+      hasThinkingVariants: false,
+      h100: { tp: 1, ep: 0, bf16: true, fp8: true },
+      h200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b300: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi300x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi325x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi355x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      xeon: { tp: 3, ep: 0, bf16: true, fp8: true }
+    }
+  };
+
+  // Base options
+  const baseOptions = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'b200', label: 'B200', default: true },
+        { id: 'b300', label: 'B300', default: false },
+        { id: 'h100', label: 'H100', default: false },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false },
+        { id: 'xeon', label: 'XEON', default: false }
+      ]
+    },
+    modelsize: {
+      name: 'modelsize',
+      title: 'Model Size',
+      items: [
+        { id: '235b', label: '235B', subtitle: 'MOE', default: true },
+        { id: '30b', label: '30B', subtitle: 'MOE', default: false },
+        { id: '32b', label: '32B', subtitle: 'Dense', default: false },
+        { id: '14b', label: '14B', subtitle: 'Dense', default: false },
+        { id: '8b', label: '8B', subtitle: 'Dense', default: false },
+        { id: '4b', label: '4B', subtitle: 'Dense', default: false },
+        { id: '1.7b', label: '1.7B', subtitle: 'Dense', default: false },
+        { id: '0.6b', label: '0.6B', subtitle: 'Dense', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false }
+      ]
+    },
+    category: {
+      name: 'category',
+      title: 'Categories',
+      items: [
+        { id: 'base', label: 'Base', default: true },
+        { id: 'instruct', label: 'Instruct', default: false },
+        { id: 'thinking', label: 'Thinking', default: false }
+      ]
+    },
+    reasoningParser: {
+      name: 'reasoningParser',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    }
+  };
+
+  // Get dynamic options based on current values
+  const getDisplayOptions = (values) => {
+    const options = { ...baseOptions };
+    const currentModelConfig = modelConfigs[values.modelsize];
+
+    // If model doesn't have thinking variants, disable non-base category options
+    if (currentModelConfig && !currentModelConfig.hasThinkingVariants) {
+      options.category = {
+        ...baseOptions.category,
+        items: baseOptions.category.items.map(item => ({
+          ...item,
+          disabled: item.id !== 'base'
+        }))
+      };
+    }
+
+    // Only show reasoningParser when category is not 'instruct'
+    if (values.category === 'instruct') {
+      delete options.reasoningParser;
+    }
+
+    return options;
+  };
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(baseOptions).forEach(([key, option]) => {
+      const defaultItem = option.items.find(item => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => {
+      const newValues = { ...prev, [optionName]: value };
+
+      // Auto-switch to 'base' category for models without thinking variants
+      if (optionName === 'modelsize') {
+        const modelConfig = modelConfigs[value];
+        if (modelConfig && !modelConfig.hasThinkingVariants) {
+          if (newValues.category !== 'base') {
+            newValues.category = 'base';
+          }
+        }
+      }
+
+      // Reset reasoningParser when switching to 'instruct' category
+      if (optionName === 'category' && value === 'instruct') {
+        newValues.reasoningParser = 'disabled';
+      }
+
+      return newValues;
+    });
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, modelsize, quantization, category, reasoningParser, toolcall } = values;
+    const displayOptions = getDisplayOptions(values);
+
+    // Special error handling
+    const commandKey = `${hardware}-${modelsize}-${quantization}-${category}`;
+    if (commandKey === 'h100-235b-bf16-instruct' || commandKey === 'h100-235b-bf16-thinking') {
+      return '# Error: Model is too large, cannot fit into 8*H100\n# Please use H200 (141GB) or select FP8 quantization';
+    }
+
+    const config = modelConfigs[modelsize];
+    if (!config) {
+      return `# Error: Unknown model size: ${modelsize}`;
+    }
+
+    const hwConfig = config[hardware];
+    if (!hwConfig) {
+      return `# Error: Unknown hardware platform: ${hardware}`;
+    }
+
+    const quantSuffix = quantization === 'fp8' ? '-FP8' : '';
+
+    // Build model name based on model category
+    let modelName;
+    if (config.hasThinkingVariants) {
+      if (category === 'base') {
+        modelName = `Qwen/Qwen3-${config.baseName}${quantSuffix}`;
+      } else {
+        const thinkingSuffix = category === 'thinking' ? '-Thinking' : '-Instruct';
+        const dateSuffix = '-2507';
+        modelName = `Qwen/Qwen3-${config.baseName}${thinkingSuffix}${dateSuffix}${quantSuffix}`;
+      }
+    } else {
+      modelName = `Qwen/Qwen3-${config.baseName}${quantSuffix}`;
+    }
+
+    let cmd = 'python -m sglang.launch_server \\\n';
+    cmd += `  --model ${modelName}`;
+
+    if (hardware === 'xeon') {
+      cmd += ` \\\n  --device cpu \\\n  --disable-overlap-schedule`;
+    }
+
+    if (hwConfig.tp > 1) {
+      cmd += ` \\\n  --tp ${hwConfig.tp}`;
+    }
+
+    let ep = hwConfig.ep;
+    if (quantization === 'fp8' && hwConfig.tp === 8) {
+      ep = 2;
+    }
+
+    if (ep > 0) {
+      cmd += ` \\\n  --ep ${ep}`;
+    }
+
+    // Add reasoning parser
+    if (reasoningParser === 'enabled' && category !== 'instruct') {
+      cmd += ' \\\n  --reasoning-parser qwen3';
+    }
+
+    // Add tool call parser
+    if (toolcall === 'enabled') {
+      cmd += ' \\\n  --tool-call-parser qwen25';
+    }
+
+    if (hardware === 'b300') {
+      cmd += ' \\\n  --attention-backend flashinfer';
+      cmd += ' \\\n  --enforce-disable-flashinfer-allreduce-fusion';
+    }
+
+    return cmd;
+  };
+
+  // Get current display options
+  const displayOptions = getDisplayOptions(values);
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(displayOptions).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.items.map(item => {
+              const isChecked = values[option.name] === item.id;
+              const isDisabled = item.disabled;
+              return (
+                <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                  <input type="radio" name={option.name} value={item.id} checked={isChecked} disabled={isDisabled} onChange={() => handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                  {item.label}
+                  {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                </label>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/qwen3-next-deployment.jsx

@@ -0,0 +1,426 @@
+export const Qwen3NextDeployment = () => {
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'b200', label: 'B200', default: true },
+        { id: 'b300', label: 'B300', default: false },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'h100', label: 'H100', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false },
+        { id: 'xeon', label: 'Xeon', default: false }
+      ]
+    },
+    modelsize: {
+      name: 'modelsize',
+      title: 'Model Size',
+      items: [
+        { id: '80b', label: '80B', subtitle: 'MOE', default: true },
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16', label: 'BF16', subtitle: 'Full Weights', default: true },
+        { id: 'fp8', label: 'FP8', subtitle: 'High Throughput', default: false }
+      ]
+    },
+    thinking: {
+      name: 'thinking',
+      title: 'Thinking Capabilities',
+      items: [
+        { id: 'instruct', label: 'Instruct', subtitle: 'General Purpose', default: true },
+        { id: 'thinking', label: 'Thinking', subtitle: 'Reasoning / CoT', default: false }
+      ],
+      commandRule: (value) => value === 'thinking' ? '--reasoning-parser qwen3' : null
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--tool-call-parser qwen' : null
+    },
+    speculative: {
+      name: 'speculative',
+      title: 'Speculative Decoding',
+      condition: (values) => values.hardware !== 'xeon',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--speculative-algorithm EAGLE \\\n  --speculative-num-steps 3 \\\n  --speculative-eagle-topk 1 \\\n  --speculative-num-draft-tokens 4' : null
+    },
+    mambaCache: {
+      name: 'mambaCache',
+      title: 'Mamba Radix Cache',
+      condition: (values) => values.hardware !== 'xeon',
+      items: [
+        { id: 'v1', label: 'V1', default: true },
+        { id: 'v2', label: 'V2', default: false }
+      ],
+      commandRule: (value) => value === 'v2' ? '--mamba-radix-cache-strategy extra_buffer \\\n  --page-size 64' : null
+    }
+  };
+
+  const modelConfigs = {
+    '80b': {
+      baseName: '80B-A3B',
+      isMOE: true,
+      h100: { tp: 4, ep: 0, bf16: true, fp8: true },
+      h200: { tp: 2, ep: 0, bf16: true, fp8: true },
+      b200: { tp: 2, ep: 0, bf16: true, fp8: true },
+      b300: { tp: 2, ep: 0, bf16: true, fp8: true },
+      mi300x: { tp: 2, ep: 0, bf16: true, fp8: true },
+      mi325x: { tp: 2, ep: 0, bf16: true, fp8: true },
+      mi355x: { tp: 2, ep: 0, bf16: true, fp8: true },
+      xeon: { tp: 3, ep: 0, bf16: true, fp8: true }
+    }
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, modelsize: modelSize, quantization, thinking } = values;
+    const commandKey = `${hardware}-${modelSize}-${quantization}-${thinking}`;
+
+    const modelSizeConfig = modelConfigs[modelSize];
+    if (!modelSizeConfig) {
+      return `# Error: Unknown model size: ${modelSize}`;
+    }
+
+    const hwConfig = modelSizeConfig[hardware];
+    if (!hwConfig) {
+      return `# Error: Unknown hardware platform: ${hardware}`;
+    }
+
+    const quantSuffix = quantization === 'fp8' ? '-FP8' : '';
+    const thinkingSuffix = thinking === 'thinking' ? '-Thinking' : '-Instruct';
+    const modelName = `Qwen/Qwen3-Next-${modelSizeConfig.baseName}${thinkingSuffix}${quantSuffix}`;
+
+    let cmd = 'python -m sglang.launch_server \\\n';
+    cmd += `  --model ${modelName}`;
+
+    if (hardware === 'xeon') {
+      cmd += ` \\\n  --device cpu \\\n  --disable-overlap-schedule`;
+    }
+
+    if (hwConfig.tp > 1) {
+      cmd += ` \\\n  --tp ${hwConfig.tp}`;
+    }
+
+    let ep = hwConfig.ep;
+    if (quantization === 'fp8' && hwConfig.tp === 8) {
+      ep = 2;
+    }
+
+    if (ep > 0) {
+      cmd += ` \\\n  --ep ${ep}`;
+    }
+
+    for (const [key, option] of Object.entries(options)) {
+      if (option.condition && !option.condition(values)) {
+        continue;
+      }
+      if (option.commandRule) {
+        const rule = option.commandRule(values[key]);
+        if (rule) {
+          cmd += ` \\\n  ${rule}`;
+        }
+      }
+    }
+
+    // AMD GPUs require triton attention backend
+    if (hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi355x') {
+      cmd += ` \\\n  --attention-backend triton`;
+    }
+    if (hardware === 'b300') {
+      cmd += ` \\\n  --attention-backend flashinfer`;
+      cmd += ` \\\n  --enforce-disable-flashinfer-allreduce-fusion`;
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/qwen3-vl-deployment.jsx

@@ -0,0 +1,268 @@
+export const Qwen3VLDeployment = () => {
+  // Config options
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'b200', label: 'B200', default: true },
+        { id: 'b300', label: 'B300', default: false },
+        { id: 'h100', label: 'H100', default: false },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false },
+        { id: 'xeon', label: 'XEON', default: false }
+      ]
+    },
+    modelsize: {
+      name: 'modelsize',
+      title: 'Model Size',
+      items: [
+        { id: '235b', label: '235B', subtitle: 'MOE', default: true },
+        { id: '30b', label: '30B', subtitle: 'MOE', default: false },
+        { id: '32b', label: '32B', subtitle: 'Dense', default: false },
+        { id: '8b', label: '8B', subtitle: 'Dense', default: false },
+        { id: '4b', label: '4B', subtitle: 'Dense', default: false },
+        { id: '2b', label: '2B', subtitle: 'Dense', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false }
+      ]
+    },
+    thinking: {
+      name: 'thinking',
+      title: 'Thinking Capabilities',
+      items: [
+        { id: 'instruct', label: 'Instruct', default: true },
+        { id: 'thinking', label: 'Thinking', default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ]
+    }
+  };
+
+  // Model configurations
+  const modelConfigs = {
+    '235b': {
+      baseName: '235B-A22B',
+      isMOE: true,
+      h100: { tp: 8, ep: 0, bf16: true, fp8: true },
+      h200: { tp: 8, ep: 0, bf16: true, fp8: true },
+      b200: { tp: 8, ep: 0, bf16: true, fp8: true },
+      b300: { tp: 8, ep: 0, bf16: true, fp8: true },
+      mi300x: { tp: 8, ep: 0, bf16: true, fp8: true },
+      mi325x: { tp: 8, ep: 0, bf16: true, fp8: true },
+      mi355x: { tp: 8, ep: 0, bf16: true, fp8: true },
+      xeon: { tp: 6, ep: 0, bf16: true, fp8: true }
+    },
+    '30b': {
+      baseName: '30B-A3B',
+      isMOE: true,
+      h100: { tp: 1, ep: 0, bf16: true, fp8: true },
+      h200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b300: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi300x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi325x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi355x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      xeon: { tp: 3, ep: 0, bf16: true, fp8: true }
+    },
+    '32b': {
+      baseName: '32B',
+      isMOE: false,
+      h100: { tp: 1, ep: 0, bf16: true, fp8: true },
+      h200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b300: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi300x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi325x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi355x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      xeon: { tp: 6, ep: 0, bf16: true, fp8: true }
+    },
+    '8b': {
+      baseName: '8B',
+      isMOE: false,
+      h100: { tp: 1, ep: 0, bf16: true, fp8: true },
+      h200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b300: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi300x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi325x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi355x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      xeon: { tp: 3, ep: 0, bf16: true, fp8: true }
+    },
+    '4b': {
+      baseName: '4B',
+      isMOE: false,
+      h100: { tp: 1, ep: 0, bf16: true, fp8: true },
+      h200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b300: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi300x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi325x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi355x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      xeon: { tp: 3, ep: 0, bf16: true, fp8: true }
+    },
+    '2b': {
+      baseName: '2B',
+      isMOE: false,
+      h100: { tp: 1, ep: 0, bf16: true, fp8: true },
+      h200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b200: { tp: 1, ep: 0, bf16: true, fp8: true },
+      b300: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi300x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi325x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      mi355x: { tp: 1, ep: 0, bf16: true, fp8: true },
+      xeon: { tp: 3, ep: 0, bf16: true, fp8: true }
+    }
+  };
+
+
+  // Initialize state
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      const defaultItem = option.items.find(item => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  // Generate command
+  const generateCommand = () => {
+    const { hardware, modelsize, quantization, thinking, toolcall } = values;
+    const commandKey = `${hardware}-${modelsize}-${quantization}-${thinking}`;
+    const isXeon = hardware === 'xeon';
+
+    // Special error handling
+    if (commandKey === 'h100-235b-bf16-instruct' || commandKey === 'h100-235b-bf16-thinking') {
+      return '# Error: Model is too large, cannot fit into 8*H100\n# Please use H200 (141GB) or select FP8 quantization';
+    }
+
+    const config = modelConfigs[modelsize];
+    if (!config) {
+      return `# Error: Unknown model size: ${modelsize}`;
+    }
+
+    const hwConfig = config[hardware];
+    if (!hwConfig) {
+      return `# Error: Unknown hardware platform: ${hardware}`;
+    }
+
+    const quantSuffix = quantization === 'fp8' ? '-FP8' : '';
+    const thinkingSuffix = thinking === 'thinking' ? '-Thinking' : '-Instruct';
+    const modelName = `Qwen/Qwen3-VL-${config.baseName}${thinkingSuffix}${quantSuffix}`;
+
+    let cmd = 'python -m sglang.launch_server \\\n';
+    cmd += `  --model ${modelName}`;
+    if (isXeon) {
+      cmd += ` \\\n  --device cpu \\\n  --disable-overlap-schedule`;
+    }
+
+    if (hwConfig.tp > 1) {
+      cmd += ` \\\n  --tp ${hwConfig.tp}`;
+    }
+
+    let ep = hwConfig.ep;
+    if (quantization === 'fp8' && hwConfig.tp === 8) {
+      ep = 2;
+    }
+
+    if (ep > 0) {
+      cmd += ` \\\n  --ep ${ep}`;
+    }
+
+    if (!isXeon && (hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi355x')) {
+      if (modelsize === '32b' && quantization === 'bf16') {
+        cmd += ` \\\n  --context-length 65536`;
+      }
+    }
+
+    if (thinking === 'thinking') {
+      cmd += ' \\\n  --reasoning-parser qwen3';
+    }
+
+    if (toolcall === 'enabled') {
+      cmd += ' \\\n  --tool-call-parser qwen';
+    }
+
+    if (hardware === 'b300') {
+      cmd += ' \\\n  --attention-backend flashinfer';
+      cmd += ' \\\n  --enforce-disable-flashinfer-allreduce-fusion';
+    }
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.items.map(item => {
+              const isChecked = values[option.name] === item.id;
+              const isDisabled = item.disabled;
+              return (
+                <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}>
+                  <input type="radio" name={option.name} value={item.id} checked={isChecked} disabled={isDisabled} onChange={() => handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                  {item.label}
+                  {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                </label>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/qwen35-deployment.jsx

@@ -0,0 +1,566 @@
+export const Qwen35Deployment = () => {
+  // Qwen3.5 Configuration Generator
+  //
+  // MoE models (Gated Delta Networks + sparse MoE, hybrid architecture):
+  //   397B-A17B, 122B-A10B, 35B-A3B
+  //
+  // Dense models (standard transformer):
+  //   27B, 9B, 4B, 2B, 0.8B
+  //
+  // GPU requirements (BF16):
+  //   397B-A17B: H100 tp=16 (2 nodes), H200 tp=8, B200 tp=8, B300 tp=8, MI300X tp=8, MI325X tp=4, MI355X tp=4
+  //   122B-A10B: H100 tp=4,  H200 tp=4, B200 tp=2, B300 tp=2, MI300X tp=2, MI325X tp=1, MI355X tp=1
+  //   35B-A3B:   H100 tp=1 (tp=2 w/ MTP), H200 tp=1, B200 tp=1, B300 tp=1, MI300X tp=1, MI325X tp=1, MI355X tp=1
+  //   27B:       H100 tp=1 (tp=2 w/ MTP); tp=1 on all other hardware
+  //   9B/4B/2B/0.8B: tp=1 on all hardware (including MI300X, MI325X, MI355X)
+  //
+  // GPU requirements (FP8, where available):
+  //   397B-A17B: H100 tp=8, H200 tp=8 ep=8, B200 tp=4, B300 tp=4, MI300X tp=4, MI325X tp=2, MI355X tp=2
+  //   122B-A10B: H100 tp=2 (tp=4 w/ MTP), H200 tp=2, B200 tp=1, B300 tp=1, MI300X tp=1, MI325X tp=1, MI355X tp=1
+  //   35B-A3B:   H100 tp=1, H200 tp=1, B200 tp=1, B300 tp=1, MI300X tp=1, MI325X tp=1, MI355X tp=1
+  //   27B:       tp=1 on all hardware (including MI300X, MI325X, MI355X)
+  //
+  // FP4 (397B only): NVFP4 on Blackwell B200/B300 tp=4; AMD MXFP4 on MI355X tp=2
+
+  const MOE_MODELS = new Set(['397b', '122b', '35b']);
+  const FP8_MODELS = new Set(['397b', '122b', '35b', '27b']);
+
+  // Maps model id -> HuggingFace model name suffix
+  const MODEL_SUFFIX = {
+    '397b': '397B-A17B',
+    '122b': '122B-A10B',
+    '35b':  '35B-A3B',
+    '27b':  '27B',
+    '9b':   '9B',
+    '4b':   '4B',
+    '2b':   '2B',
+    '0.8b': '0.8B',
+  };
+
+  const options = {
+    model: {
+      name: 'model',
+      title: 'Model Variant',
+      items: [
+        { id: '397b',  label: '397B', subtitle: 'MoE', default: true  },
+        { id: '122b',  label: '122B', subtitle: 'MoE', default: false },
+        { id: '35b',   label: '35B',  subtitle: 'MoE', default: false },
+        { id: '27b',   label: '27B',  subtitle: 'Dense', default: false },
+        { id: '9b',    label: '9B',   subtitle: 'Dense', default: false },
+        { id: '4b',    label: '4B',   subtitle: 'Dense', default: false },
+        { id: '2b',    label: '2B',   subtitle: 'Dense', default: false },
+        { id: '0.8b',  label: '0.8B', subtitle: 'Dense', default: false },
+      ]
+    },
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      getDynamicItems: (values) => {
+        const isNvfp4 = values.quantization === 'fp4';
+        return [
+          { id: 'h100',   label: 'H100',   default: !isNvfp4, disabled: isNvfp4 },
+          { id: 'h200',   label: 'H200',   default: false,     disabled: isNvfp4 },
+          { id: 'b200',   label: 'B200',   default: false,     disabled: false },
+          { id: 'b300',   label: 'B300',   default: isNvfp4,   disabled: false },
+          { id: 'mi300x', label: 'MI300X', default: false,     disabled: isNvfp4 },
+          { id: 'mi325x', label: 'MI325X', default: false,     disabled: isNvfp4 },
+          { id: 'mi355x', label: 'MI355X', default: false,     disabled: false },
+          { id: 'xeon',   label: 'XEON',   default: false,     disabled: isNvfp4 }
+        ];
+      }
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      getDynamicItems: (values) => {
+        const hasFp8 = FP8_MODELS.has(values.model);
+        const hasFp4 = values.model === '397b';
+        const isXeon = values.hardware === 'xeon';
+        return [
+          { id: 'bf16', label: 'BF16', default: !hasFp8 || isXeon },
+          { id: 'fp8',  label: 'FP8',  default: hasFp8 && !isXeon, disabled: !hasFp8,
+            disabledReason: 'No FP8 variant available for this model' },
+          { id: 'fp4',  label: 'FP4',  default: false,   disabled: !hasFp4 || isXeon,
+            disabledReason: isXeon ? 'FP4 is not supported on Xeon' : 'FP4 is only available for Qwen3.5-397B-A17B' }
+        ];
+      }
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled',  label: 'Enabled',  default: true  }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled',  label: 'Enabled',  default: true  }
+      ]
+    },
+    speculative: {
+      name: 'speculative',
+      title: 'Speculative Decoding (MTP)',
+      condition: (values) => values.hardware !== 'xeon',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled',  label: 'Enabled',  default: true  }
+      ]
+    },
+    mambaCache: {
+      name: 'mambaCache',
+      title: 'Mamba Radix Cache',
+      condition: (values) => MOE_MODELS.has(values.model) && values.hardware !== 'xeon',
+      getDynamicItems: (currentValues) => {
+        const amdGpus = ['mi300x', 'mi325x', 'mi355x'];
+        const isAmdGpu = amdGpus.includes(currentValues.hardware);
+        const mtpEnabled = currentValues.speculative === 'enabled';
+
+        // MTP requires V2 mamba radix cache
+        if (mtpEnabled && !isAmdGpu) {
+          return [
+            { id: 'v1', label: 'V1', default: false, disabled: true },
+            { id: 'v2', label: 'V2', default: true }
+          ];
+        }
+
+        // Show V2 as disabled for AMD GPUs (V2 requires FLA backend, NVIDIA only)
+        if (isAmdGpu) {
+          return [
+            { id: 'v1', label: 'V1', default: true },
+            { id: 'v2', label: 'V2', default: false, disabled: true }
+          ];
+        }
+
+        // Show both V1 and V2 enabled for NVIDIA GPUs
+        return [
+          { id: 'v1', label: 'V1', default: true },
+          { id: 'v2', label: 'V2', default: false }
+        ];
+      }
+    }
+  };
+
+  const modelConfigs = {
+    '397b': {
+      h100:   { bf16: { tp: 16, mem: 0.8, multinode: true, nnodes: 2 }, fp8: { tp: 8, mem: 0.8 } },
+      h200:   { bf16: { tp: 8,  mem: 0.8 }, fp8: { tp: 8, ep: 8, mem: 0.8 } },
+      b200:   { bf16: { tp: 8,  mem: 0.8 }, fp8: { tp: 4, mem: 0.8 }, fp4: { tp: 4, mem: 0.85 } },
+      b300:   { bf16: { tp: 8,  mem: 0.8 }, fp8: { tp: 4, mem: 0.8 }, fp4: { tp: 4, mem: 0.8 } },
+      mi300x: { bf16: { tp: 8, mem: 0.8 }, fp8: { tp: 4, mem: 0.8 } },
+      mi325x: { bf16: { tp: 4, mem: 0.8 }, fp8: { tp: 2, mem: 0.8 } },
+      mi355x: { bf16: { tp: 4, mem: 0.8 }, fp8: { tp: 2, mem: 0.8 }, fp4: { tp: 2, mem: 0.8 } },
+      xeon:   { bf16: { tp: 6 },           fp8: { tp: 6 } }
+    },
+    '122b': {
+      h100:   { bf16: { tp: 4, mem: 0.88 }, fp8: { tp: 2, mem: 0.8 } },
+      h200:   { bf16: { tp: 4 },            fp8: { tp: 2 } },
+      b200:   { bf16: { tp: 2, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      b300:   { bf16: { tp: 2 },           fp8: { tp: 1, mem: 0.8 } },
+      mi300x: { bf16: { tp: 2, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      mi325x: { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      mi355x: { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      xeon:   { bf16: { tp: 6 },           fp8: { tp: 6 } }
+    },
+    '35b': {
+      h100:   { bf16: { tp: 1, mem: 0.88 }, fp8: { tp: 1, mem: 0.8 } },
+      h200:   { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      b200:   { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      b300:   { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      mi300x: { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      mi325x: { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      mi355x: { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      xeon:   { bf16: { tp: 3 }, fp8: { tp: 3 } }
+    },
+    '27b': {
+      h100:   { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      h200:   { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      b200:   { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      b300:   { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      mi300x: { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      mi325x: { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      mi355x: { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      xeon:   { bf16: { tp: 6 }, fp8: { tp: 6 } }
+    },
+    '9b': {
+      h100:   { bf16: { tp: 1, mem: 0.8 } },
+      h200:   { bf16: { tp: 1, mem: 0.8 } },
+      b200:   { bf16: { tp: 1, mem: 0.8 } },
+      b300:   { bf16: { tp: 1, mem: 0.8 } },
+      mi300x: { bf16: { tp: 1, mem: 0.8 } },
+      mi325x: { bf16: { tp: 1, mem: 0.8 } },
+      mi355x: { bf16: { tp: 1, mem: 0.8 } },
+      xeon:   { bf16: { tp: 3 } }
+    },
+    '4b': {
+      h100:   { bf16: { tp: 1, mem: 0.8 } },
+      h200:   { bf16: { tp: 1, mem: 0.8 } },
+      b200:   { bf16: { tp: 1, mem: 0.8 } },
+      b300:   { bf16: { tp: 1, mem: 0.8 } },
+      mi300x: { bf16: { tp: 1, mem: 0.8 } },
+      mi325x: { bf16: { tp: 1, mem: 0.8 } },
+      mi355x: { bf16: { tp: 1, mem: 0.8 } },
+      xeon:   { bf16: { tp: 3 } }
+    },
+    '2b': {
+      h100:   { bf16: { tp: 1, mem: 0.8 } },
+      h200:   { bf16: { tp: 1, mem: 0.8 } },
+      b200:   { bf16: { tp: 1, mem: 0.8 } },
+      b300:   { bf16: { tp: 1, mem: 0.8 } },
+      mi300x: { bf16: { tp: 1, mem: 0.8 } },
+      mi325x: { bf16: { tp: 1, mem: 0.8 } },
+      mi355x: { bf16: { tp: 1, mem: 0.8 } },
+      xeon:   { bf16: { tp: 3 } }
+    },
+    '0.8b': {
+      h100:   { bf16: { tp: 1, mem: 0.8 } },
+      h200:   { bf16: { tp: 1, mem: 0.8 } },
+      b200:   { bf16: { tp: 1, mem: 0.8 } },
+      b300:   { bf16: { tp: 1, mem: 0.8 } },
+      mi300x: { bf16: { tp: 1, mem: 0.8 } },
+      mi325x: { bf16: { tp: 1, mem: 0.8 } },
+      mi355x: { bf16: { tp: 1, mem: 0.8 } },
+      xeon:   { bf16: { tp: 3 } }
+    }
+  };
+
+  const resolveItems = (option, vals) =>
+    typeof option.getDynamicItems === 'function' ? option.getDynamicItems(vals) : option.items;
+
+  const getInitialState = () => {
+    const initialState = {};
+    for (const [key, option] of Object.entries(options)) {
+      const items = resolveItems(option, initialState);
+      const def = items.find(i => i.default && !i.disabled) || items.find(i => !i.disabled) || items[0];
+      initialState[key] = def.id;
+    }
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  // When hardware or model changes, re-resolve dynamic selections to stay consistent.
+  useEffect(() => {
+    setValues(prev => {
+      const next = { ...prev };
+      for (const [key, option] of Object.entries(options)) {
+        if (typeof option.getDynamicItems !== 'function') continue;
+        const items = option.getDynamicItems(next);
+        const current = items.find(i => i.id === next[key]);
+        if (!current || current.disabled) {
+          const fallback = items.find(i => i.default && !i.disabled) || items.find(i => !i.disabled);
+          if (fallback) next[key] = fallback.id;
+        }
+      }
+      return next;
+    });
+  }, [values.hardware, values.model]);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  // Multi-node flag template — mirrors DeepSeek-V4 cookbook's multiNodeFlags.
+  // Each launcher must be invoked on every node with <node-rank> set to its rank
+  // (0 on the head node) and <node0-ip> resolvable from every node.
+  const multiNodeFlags = (nnodes) => [
+    `--nnodes ${nnodes}`,
+    `--node-rank <node-rank>`,
+    `--dist-init-addr <node0-ip>:20000`,
+  ];
+
+  const prependMultiNodeNote = (cmd, nnodes) =>
+    `# Multi-node (${nnodes} nodes). Run the same command on every node with:\n` +
+    `#   <node-rank> = 0 on the head node, 1..${nnodes - 1} on the others\n` +
+    `#   <node0-ip>  = IP of the head node (reachable from all others)\n` +
+    cmd;
+
+  // Generate command — must produce byte-identical output to sgl-cookbook's
+  // config.generateCommand(values) for every valid combination.
+  const generateCommand = () => {
+    const { model, hardware, quantization, speculative, mambaCache } = values;
+
+    let hwConfig = modelConfigs[model]?.[hardware]?.[quantization];
+    if (!hwConfig) {
+      if (quantization === 'fp4') {
+        return '# FP4 requires B200/B300 (Blackwell) and is only available for Qwen3.5-397B-A17B';
+      }
+      return '# Please select a valid hardware and quantization combination';
+    }
+
+    // 35B / 27B H100 BF16 with MTP: bump TP to 2 and skip --mem-fraction-static.
+    // Spread the base spec so any future fields (multinode, ep, ...) survive.
+    if ((model === '35b' || model === '27b') && hardware === 'h100' && quantization === 'bf16' && speculative === 'enabled') {
+      hwConfig = { ...hwConfig, tp: 2, mem: undefined };
+    }
+    // 122B H100 FP8 with MTP: bump TP to 4 and skip --mem-fraction-static.
+    if (model === '122b' && hardware === 'h100' && quantization === 'fp8' && speculative === 'enabled') {
+      hwConfig = { ...hwConfig, tp: 4, mem: undefined };
+    }
+
+    let modelName;
+    if (quantization === 'fp4') {
+      // AMD MI355X uses the MXFP4 checkpoint; Blackwell uses NVFP4.
+      modelName = hardware === 'mi355x'
+        ? 'amd/Qwen3.5-397B-A17B-MXFP4'
+        : 'nvidia/Qwen3.5-397B-A17B-NVFP4';
+    } else {
+      const suffix = MODEL_SUFFIX[model];
+      const quantSuffix = quantization === 'fp8' ? '-FP8' : '';
+      modelName = `Qwen/Qwen3.5-${suffix}${quantSuffix}`;
+    }
+
+    const tpValue = hwConfig.tp;
+    const epValue = hwConfig.ep;
+    const memFraction = hwConfig.mem;
+    const isMultinode = !!hwConfig.multinode;
+    const nnodes = hwConfig.nnodes || 1;
+
+    // Initialize the base command
+    let cmd = `sglang serve --model-path ${modelName}`;
+    if (hardware === 'xeon') {
+      cmd += ` \\\n  --device cpu \\\n  --disable-overlap-schedule`;
+    }
+    if (tpValue > 1) {
+      cmd += ` \\\n  --tp ${tpValue}`;
+    }
+    if (epValue) {
+      cmd += ` \\\n  --expert-parallel-size ${epValue}`;
+    }
+
+    // Multi-node wiring goes right after --tp / --expert-parallel-size so the
+    // distributed-init flags sit next to the parallelism flags they configure.
+    if (isMultinode) {
+      for (const flag of multiNodeFlags(nnodes)) {
+        cmd += ` \\\n  ${flag}`;
+      }
+    }
+
+    // Force Mamba V1 for AMD GPUs and Xeon CPUs (V2 requires FLA backend).
+    // Force Mamba V2 when MTP is enabled.
+    // Dense models with MTP off: force V1 — values.mambaCache is not
+    // re-resolved on a speculative toggle (useEffect deps are hardware/model),
+    // so it can stay at 'v2' from a prior MTP-on state. Reading it directly
+    // would emit a spurious --mamba-radix-cache-strategy extra_buffer. The UI
+    // radio is hidden for dense models, so users can't manually correct it.
+    // MoE keeps the old behavior — the UI radio is the recovery path there.
+    const mamba_v1_dev = ['mi300x', 'mi325x', 'mi355x', 'xeon'];
+    const actualMambaCache = mamba_v1_dev.includes(hardware)
+      ? 'v1'
+      : (speculative === 'enabled' ? 'v2' : (MOE_MODELS.has(model) ? mambaCache : 'v1'));
+
+    // Apply commandRules from options (reasoning, toolcall, speculative, mambaCache)
+    // Skip quantization and model (handled via model name)
+    const commandRules = {
+      reasoning: (value) => value === 'enabled' ? '--reasoning-parser qwen3' : null,
+      toolcall: (value) => value === 'enabled' ? '--tool-call-parser qwen3_coder' : null,
+      speculative: (value) => value === 'enabled' ? '--speculative-algorithm NEXTN \\\n  --speculative-num-steps 3 \\\n  --speculative-eagle-topk 1 \\\n  --speculative-num-draft-tokens 4' : null,
+      mambaCache: (value) => value === 'v2' ? '--mamba-radix-cache-strategy extra_buffer' : null,
+    };
+
+    // Iterate options in order, applying commandRules
+    for (const [key, option] of Object.entries(options)) {
+      if (key === 'quantization' || key === 'model') continue;
+      // Skip options that don't pass their condition. mambaCache is special:
+      // its condition gates only the UI radio (hidden for dense models), but
+      // the rule still fires for dense models on NVIDIA + MTP to emit
+      // --mamba-radix-cache-strategy extra_buffer.
+      if (option.condition && !option.condition(values) && (key !== 'mambaCache' || speculative !== 'enabled')) continue;
+      const rule = commandRules[key];
+      if (rule) {
+        const adjustedValue = key === 'mambaCache' ? actualMambaCache : values[key];
+        const result = rule(adjustedValue);
+        if (result) {
+          cmd += ` \\\n  ${result}`;
+        }
+      }
+    }
+
+    // Enable NCCL symmetric memory for H100 FP8 deployments.
+    if (hardware === 'h100' && quantization === 'fp8' && hwConfig.tp > 1) {
+      cmd += ` \\\n  --enable-symm-mem`;
+    }
+
+    // Chunked prefill tuning for H200 FP8 + MTP (validated on H200 only)
+    if (hardware === 'h200' && quantization === 'fp8' && speculative === 'enabled') {
+      cmd += ` \\\n  --max-running-requests 128`;
+      cmd += ` \\\n  --chunked-prefill-size 16384`;
+      cmd += ` \\\n  --tokenizer-worker-num 6`;
+    }
+
+    // Enable FlashInfer allreduce fusion for NVIDIA Qwen3.5 configs (skip for FP4:
+    // benchmark only enables this for TP>=8). AMD MI GPUs use the AITER allreduce
+    // fusion flag instead, handled in the AMD backend block below.
+    const amdGpu = hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi355x';
+    if (quantization !== 'fp4' && hardware !== 'xeon' && !amdGpu) {
+      cmd += ` \\\n  --enable-flashinfer-allreduce-fusion`;
+    }
+
+    // H200 FP8-specific optimizations
+    if (hardware === 'h200' && quantization === 'fp8') {
+      cmd += ` \\\n  --attention-backend flashinfer`;
+      if (MOE_MODELS.has(model)) {
+        cmd += ` \\\n  --mamba-ssm-dtype bfloat16`;
+      }
+    }
+
+    // Append backend configurations
+    if (hardware === 'b200' || (hardware === 'b300' && quantization === 'fp4')) {
+      cmd += ` \\\n  --attention-backend trtllm_mha`;
+    }
+    if (hardware === 'b300' && quantization !== 'fp4') {
+      cmd += ` \\\n  --attention-backend flashinfer`;
+    }
+
+    // Append AMD GPU-specific backend configurations.
+    // All AMD MI GPUs use the AITER unified-attention backend (pair with
+    // SGLANG_USE_AITER=1 and SGLANG_USE_AITER_UNIFIED_ATTN=1; see cookbook prose),
+    // which requires --page-size 16. Multi-GPU runs enable AITER allreduce fusion,
+    // except the MXFP4 MI355X recipe, which uses ROCm INT8 quantized quick
+    // all-reduce (ROCM_QUICK_REDUCE_QUANTIZATION=INT8) instead.
+    if (amdGpu) {
+      const amdFp4 = quantization === 'fp4' && hardware === 'mi355x';
+      let amdEnv = "SGLANG_USE_AITER=1 \\\nSGLANG_USE_AITER_UNIFIED_ATTN=1 \\\nAITER_FLYDSL_FORCE=1 \\\n";
+      if (MOE_MODELS.has(model)) {
+        amdEnv += "SGLANG_MAMBA_SSM_DTYPE=bfloat16 \\\n";
+      }
+      if (amdFp4) {
+        amdEnv += "ROCM_QUICK_REDUCE_QUANTIZATION=INT8 \\\n";
+      }
+      cmd = amdEnv + cmd;
+      cmd += " \\\n  --attention-backend aiter";
+      cmd += " \\\n  --page-size 16";
+      if (hwConfig.tp > 1 && !amdFp4) {
+        cmd += " \\\n  --enable-aiter-allreduce-fusion";
+      }
+    }
+
+    // Tokenizer workers for H200 and B200/B300
+    if (hardware === 'h200' || hardware === 'b200' || hardware === 'b300') {
+      if (speculative === 'disabled') {
+        cmd += ` \\\n  --tokenizer-worker-num 6`;
+      }
+    }
+
+    // Workaround: FlashInfer autotune's warmup dummy_run trips a CUDA grid-dim
+    // overflow in the GDN packed_decode Triton kernel (B*HV >= 65536). Remove
+    // once the kernel is fixed upstream.
+    if (hardware === 'b300' && quantization === 'bf16' && (model === '0.8b' || model === '2b')) {
+      cmd += ` \\\n  --max-running-requests 4064`;
+    }
+
+    // FP4-specific backend settings
+    if (quantization === 'fp4') {
+      if (hardware === 'mi355x') {
+        // AMD MXFP4 on MI355X: backend / --page-size 16 and the INT8 quantized
+        // ROCm quick all-reduce env are emitted by the AMD backend block above
+        // (this recipe uses quick all-reduce instead of AITER allreduce fusion).
+        // Add the FP4-specific flags here.
+        cmd += ' \\\n  --disable-radix-cache';
+        // Cap concurrency under MTP to avoid OOM at tp=2.
+        if (speculative === 'enabled') {
+          cmd += ' \\\n  --max-running-requests 128';
+        }
+      } else {
+        // NVIDIA NVFP4 on Blackwell (B200 / B300).
+        if (hardware === 'b300') {
+          cmd += ' \\\n  --moe-runner-backend flashinfer_trtllm';
+          cmd += ' \\\n  --fp4-gemm-backend flashinfer_cutlass';
+        } else {
+          cmd += ' \\\n  --quantization modelopt_fp4';
+          cmd += ' \\\n  --fp4-gemm-backend flashinfer_cutlass';
+          cmd += ' \\\n  --kv-cache-dtype fp8_e4m3';
+          cmd += ' \\\n  --moe-runner-backend flashinfer_trtllm';
+          cmd += ' \\\n  --chunked-prefill-size 32768';
+          cmd += ' \\\n  --max-prefill-tokens 32768';
+          cmd += ' \\\n  --max-running-requests 128';
+          cmd += ' \\\n  --stream-interval 30';
+          cmd += ' \\\n  --disable-radix-cache';
+        }
+      }
+    }
+
+    // Add memory fraction last
+    if (memFraction !== undefined) {
+      cmd += ` \\\n  --mem-fraction-static ${memFraction}`;
+    }
+
+    if (isMultinode) {
+      cmd = prependMultiNodeNote(cmd, nnodes);
+    }
+
+    return cmd;
+  };
+
+  // Styles
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.4 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (typeof option.condition === 'function' && !option.condition(values)) return null;
+        const items = resolveItems(option, values);
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                const isDisabled = !!item.disabled;
+                return (
+                  <label
+                    key={item.id}
+                    style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}
+                    title={item.disabledReason || ''}
+                  >
+                    <input
+                      type="radio"
+                      name={option.name}
+                      value={item.id}
+                      checked={isChecked}
+                      disabled={isDisabled}
+                      onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                      style={{ display: 'none' }}
+                    />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/qwen36-deployment.jsx

@@ -0,0 +1,278 @@
+export const Qwen36Deployment = () => {
+  // Config mirrors sgl-cookbook src/components/autoregressive/Qwen36ConfigGenerator/index.js.
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h100', label: 'H100', default: true },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'b200', label: 'B200', default: false },
+        { id: 'b300', label: 'B300', default: false },
+        { id: 'xeon', label: 'XEON', default: false },
+      ],
+    },
+    modelSize: {
+      name: 'modelSize',
+      title: 'Model Size',
+      items: [
+        { id: '35b-a3b', label: '35B-A3B (MoE)', default: true },
+        { id: '27b', label: '27B (Dense)', default: false },
+      ],
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      // NVFP4 checkpoints are available for both model sizes on Blackwell (B200/B300).
+      getDynamicItems: (values) => {
+        const items = [
+          { id: 'fp8', label: 'FP8', default: true },
+          { id: 'bf16', label: 'BF16', default: false },
+        ];
+        const nvfp4Supported = values.hardware === 'b200' || values.hardware === 'b300';
+        if (nvfp4Supported) {
+          items.push({ id: 'nvfp4', label: 'NVFP4', default: false });
+        }
+        return items;
+      },
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled', label: 'Enabled', default: true },
+      ],
+      commandRule: (value) => value === 'enabled' ? '--reasoning-parser qwen3' : null,
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: false },
+        { id: 'enabled', label: 'Enabled', default: true },
+      ],
+      commandRule: (value) => value === 'enabled' ? '--tool-call-parser qwen3_coder' : null,
+    },
+    speculative: {
+      name: 'speculative',
+      title: 'Speculative Decoding (MTP)',
+      getDynamicItems: (values) => {
+        const isXeon = values.hardware === 'xeon';
+        return [
+          { id: 'disabled', label: 'Disabled', default: isXeon },
+          { id: 'enabled', label: 'Enabled', default: !isXeon, disabled: isXeon,
+            disabledReason: isXeon ? 'Speculative decoding is not supported on Xeon' : '' },
+        ];
+      },
+      commandRule: (value) => value === 'enabled' ? '--speculative-algorithm EAGLE \\\n  --speculative-num-steps 3 \\\n  --speculative-eagle-topk 1 \\\n  --speculative-num-draft-tokens 4' : null,
+    },
+    mambaCache: {
+      name: 'mambaCache',
+      title: 'Mamba Radix Cache',
+      condition: (values) => values.hardware !== 'xeon',
+      getDynamicItems: (values) => {
+        const mtpEnabled = values.speculative === 'enabled';
+        if (mtpEnabled) {
+          return [
+            { id: 'v1', label: 'V1', default: false, disabled: true },
+            { id: 'v2', label: 'V2', default: true },
+          ];
+        }
+        return [
+          { id: 'v1', label: 'V1', default: true },
+          { id: 'v2', label: 'V2', default: false },
+        ];
+      },
+      commandRule: (value) => value === 'v2' ? '--mamba-radix-cache-strategy extra_buffer' : null,
+    },
+  };
+
+  const modelConfigs = {
+    '35b-a3b': {
+      baseName: '35B-A3B',
+      h100: { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      h200: { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      b200: { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 }, nvfp4: { tp: 1 } },
+      b300: { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 }, nvfp4: { tp: 1 } },
+      xeon: { bf16: { tp: 3 },           fp8: { tp: 3 } },
+    },
+    '27b': {
+      baseName: '27B',
+      h100: { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      h200: { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 } },
+      b200: { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 }, nvfp4: { tp: 1 } },
+      b300: { bf16: { tp: 1, mem: 0.8 }, fp8: { tp: 1, mem: 0.8 }, nvfp4: { tp: 1 } },
+      xeon: { bf16: { tp: 6 },           fp8: { tp: 6 } },
+    },
+  };
+
+  const resolveItems = (option, vals) =>
+    typeof option.getDynamicItems === 'function' ? option.getDynamicItems(vals) : option.items;
+
+  const getInitialState = () => {
+    const initialState = {};
+    for (const [key, option] of Object.entries(options)) {
+      const items = resolveItems(option, initialState);
+      const def = items.find((item) => item.default && !item.disabled) || items.find((item) => !item.disabled) || items[0];
+      initialState[key] = def.id;
+    }
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    setValues((prev) => {
+      const next = { ...prev };
+      for (const [key, option] of Object.entries(options)) {
+        if (typeof option.getDynamicItems !== 'function') continue;
+        const items = option.getDynamicItems(next);
+        const current = items.find((item) => item.id === next[key]);
+        if (!current || current.disabled) {
+          const fallback = items.find((item) => item.default && !item.disabled) || items.find((item) => !item.disabled);
+          if (fallback) next[key] = fallback.id;
+        }
+      }
+      return next;
+    });
+  }, [values.speculative, values.hardware, values.modelSize]);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const generateCommand = () => {
+    const { hardware, modelSize, quantization, speculative } = values;
+    const sizeConfig = modelConfigs[modelSize];
+    const hwConfig = sizeConfig?.[hardware]?.[quantization];
+    if (!hwConfig) {
+      return '# Please select a valid hardware and quantization combination';
+    }
+
+    const adjustedValues = {
+      ...values,
+      mambaCache: speculative === 'enabled' ? 'v2' : values.mambaCache,
+    };
+
+    // NVFP4: nvidia/Qwen3.6-{35B-A3B,27B}-NVFP4 on Blackwell (B200/B300). Follows the exact command
+    // shape from the checkpoint's docs — explicit --tp-size 1, --attention-backend trtllm_mha,
+    // new-style --mamba-radix-cache-strategy, and explicit --host/--port (no
+    // --mem-fraction-static). Reasoning / tool-call parsers still follow their toggles.
+    if (quantization === 'nvfp4') {
+      let cmd = `sglang serve --model-path nvidia/Qwen3.6-${sizeConfig.baseName}-NVFP4`;
+      cmd += ` \\\n  --tp-size ${hwConfig.tp} --attention-backend trtllm_mha`;
+      const reasoningRule = options.reasoning.commandRule(values.reasoning);
+      if (reasoningRule) cmd += ` \\\n  ${reasoningRule}`;
+      const toolcallRule = options.toolcall.commandRule(values.toolcall);
+      if (toolcallRule) cmd += ` \\\n  ${toolcallRule}`;
+      if (speculative === 'enabled') {
+        cmd += ` \\\n  --speculative-algorithm EAGLE --speculative-num-steps 3 \\\n  --speculative-eagle-topk 1 --speculative-num-draft-tokens 4`;
+      }
+      if (adjustedValues.mambaCache === 'v2') {
+        cmd += ` \\\n  --mamba-radix-cache-strategy extra_buffer`;
+      }
+      cmd += ` \\\n  --host 0.0.0.0 --port 30000`;
+      return cmd;
+    }
+
+    const quantSuffix = quantization === 'fp8' ? '-FP8' : '';
+    const modelName = `Qwen/Qwen3.6-${sizeConfig.baseName}${quantSuffix}`;
+
+    let cmd = `sglang serve --model-path ${modelName}`;
+    if (hardware === 'xeon') {
+      cmd += ` \\\n  --device cpu \\\n  --disable-overlap-schedule`;
+    }
+    if (hwConfig.tp > 1) {
+      cmd += ` \\\n  --tp ${hwConfig.tp}`;
+    }
+
+    for (const [key, option] of Object.entries(options)) {
+      if (key === 'quantization' || key === 'hardware' || key === 'modelSize') continue;
+      if (option.condition && !option.condition(values)) continue;
+      if (!option.commandRule) continue;
+      const rule = option.commandRule(adjustedValues[key]);
+      if (rule) {
+        cmd += ` \\\n  ${rule}`;
+      }
+    }
+
+    if (hardware === 'b200' || hardware === 'b300') {
+      cmd += ` \\\n  --attention-backend trtllm_mha`;
+    }
+    if (hwConfig.mem !== undefined) {
+      cmd += ` \\\n  --mem-fraction-static ${hwConfig.mem}`;
+    }
+    return cmd;
+  };
+
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.4 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (typeof option.condition === 'function' && !option.condition(values)) return null;
+        const items = resolveItems(option, values);
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {items.map((item) => {
+                const isChecked = values[option.name] === item.id;
+                const isDisabled = !!item.disabled;
+                return (
+                  <label
+                    key={item.id}
+                    style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isDisabled ? disabledStyle : {}) }}
+                    title={item.disabledReason || ''}
+                  >
+                    <input
+                      type="radio"
+                      name={option.name}
+                      value={item.id}
+                      checked={isChecked}
+                      disabled={isDisabled}
+                      onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                      style={{ display: 'none' }}
+                    />
+                    {item.label}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/ring-25-1t-deployment.jsx

@@ -0,0 +1,222 @@
+export const Ring251TDeployment = () => {
+  // Config mirrors sgl-cookbook src/components/autoregressive/Ring25ConfigGenerator/index.js.
+  //
+  // GPU requirements:
+  //   H200 / B200 / B300 / GB200 / GB300 / MI355X: single-node (tp per platform)
+  //   MI300X / MI325X: two nodes, tp-size 8, pp-size 2 (multi-node scripts)
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200',   label: 'H200',   default: true  },
+        { id: 'b200',   label: 'B200',   default: false },
+        { id: 'b300',   label: 'B300',   default: false },
+        { id: 'gb200',  label: 'GB200',  default: false },
+        { id: 'gb300',  label: 'GB300',  default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false }
+      ]
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled',  label: 'Enabled',  default: false }
+      ]
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled',  label: 'Enabled',  default: false }
+      ]
+    }
+  };
+
+  const modelConfigs = {
+    h200:   { fp8: { tp: 8 } },
+    b200:   { fp8: { tp: 8 } },
+    b300:   { fp8: { tp: 8 } },
+    gb200:  { fp8: { tp: 4 } },
+    gb300:  { fp8: { tp: 4 } },
+    mi300x: { fp8: { tp: 8, pp: 2, nnodes: 2 } },
+    mi325x: { fp8: { tp: 8, pp: 2, nnodes: 2 } },
+    mi355x: { fp8: { tp: 8 } }
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = option.items.filter(item => item.default).map(item => item.id);
+      } else {
+        const defaultItem = option.items.find(item => item.default);
+        initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+      }
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+                         html.getAttribute('data-theme') === 'dark' ||
+                         html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues(prev => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues(prev => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      } else {
+        return { ...prev, [optionName]: currentValues.filter(id => id !== itemId) };
+      }
+    });
+  };
+
+  // Generate command — byte-identical to sgl-cookbook Ring25ConfigGenerator
+  const generateCommand = () => {
+    const { hardware, reasoning, toolcall } = values;
+    const modelName = 'inclusionAI/Ring-2.5-1T';
+    const amdMultiNode = hardware === 'mi300x' || hardware === 'mi325x';
+
+    // Extra flags from reasoning / toolcall
+    const extraFlags = [];
+    if (reasoning === 'enabled') extraFlags.push('--reasoning-parser deepseek-r1');
+    if (toolcall === 'enabled') extraFlags.push('--tool-call-parser qwen');
+
+    if (amdMultiNode) {
+      const hwConfig = modelConfigs[hardware].fp8;
+      const tpSize = hwConfig.tp;
+      const ppSize = hwConfig.pp;
+
+      const buildAmdNodeCmd = (nodeRank) => {
+        let cmd = 'sglang serve \\\n';
+        cmd += `--model-path ${modelName} \\\n`;
+        cmd += '--trust-remote-code \\\n';
+        cmd += `--tp-size ${tpSize} \\\n`;
+        cmd += `--pp-size ${ppSize} \\\n`;
+        cmd += `--nnodes ${hwConfig.nnodes} \\\n`;
+        cmd += `--node-rank ${nodeRank} \\\n`;
+        if (nodeRank === 0) {
+          cmd += '--host 0.0.0.0 \\\n';
+          cmd += '--port 30000 \\\n';
+        }
+        cmd += '--dist-init-addr ${MASTER_IP}:${DIST_PORT} \\\n';
+        cmd += '--attention-backend triton \\\n';
+        cmd += '--model-loader-extra-config \'{"enable_multithread_load": "true","num_threads": 64}\' \\\n';
+        cmd += '--mem-frac 0.95';
+        extraFlags.forEach((flag) => {
+          cmd += ` \\\n${flag}`;
+        });
+        return cmd;
+      };
+
+      const envBlock =
+        'export MASTER_IP=<your-node0-ip> # Replace with the IP of Node 0\n' +
+        'export PORT=30000\n' +
+        'export DIST_PORT=20000\n' +
+        '# Replace <nic-ifname> with your actual NIC interface name\n' +
+        'export GLOO_SOCKET_IFNAME=<nic-ifname>\n' +
+        'export TP_SOCKET_IFNAME=<nic-ifname>\n';
+
+      let out = envBlock + '\n';
+
+      out += '\n# Node 0:\n';
+      out += buildAmdNodeCmd(0);
+
+      out += '\n\n\n# Node 1:\n';
+      out += buildAmdNodeCmd(1);
+
+      return out;
+    }
+
+    // Single-node path (H200, B200, GB200, GB300, MI355X)
+    const hwConfig = modelConfigs[hardware].fp8;
+    const tpValue = hwConfig.tp;
+
+    let cmd = 'sglang serve \\\n';
+    cmd += `  --model-path ${modelName}`;
+    cmd += ` \\\n  --tp ${tpValue}`;
+    cmd += ' \\\n  --trust-remote-code';
+    if (hardware === 'b300') {
+      cmd += ' \\\n  --attention-backend flashinfer';
+    }
+
+    extraFlags.forEach((flag) => {
+      cmd += ` \\\n  ${flag}`;
+    });
+
+    return cmd;
+  };
+
+  // Styles - with dark mode support
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const disabledStyle = { cursor: 'not-allowed', opacity: 0.5 };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.type === 'checkbox' ? (
+              option.items.map(item => {
+                const isChecked = (values[option.name] || []).includes(item.id);
+                const isItemDisabled = item.required;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}), ...(isItemDisabled ? disabledStyle : {}) }}>
+                    <input type="checkbox" checked={isChecked} disabled={isItemDisabled} onChange={(e) => handleCheckboxChange(option.name, item.id, e.target.checked)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            ) : (
+              option.items.map(item => {
+                const isChecked = values[option.name] === item.id;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}) }}>
+                    <input type="radio" name={option.name} value={item.id} checked={isChecked} onChange={() => handleRadioChange(option.name, item.id)} style={{ display: 'none' }} />
+                    {item.label}
+                    {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/ring-26-1t-deployment.jsx

@@ -0,0 +1,131 @@
+export const Ring261TDeployment = () => {
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'gb300', label: 'GB300 x4', default: true },
+        { id: 'b200', label: 'B200 x8', default: false },
+        { id: 'h200', label: 'H200 x8', default: false },
+      ],
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'enabled', label: 'Enabled', default: true },
+        { id: 'disabled', label: 'Disabled', default: false },
+      ],
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'enabled', label: 'Enabled', default: true },
+        { id: 'disabled', label: 'Disabled', default: false },
+      ],
+    },
+  };
+
+  const modelConfigs = {
+    gb300: { tp: 4, memFraction: '0.95' },
+    b200: { tp: 8, memFraction: '0.8' },
+    h200: { tp: 8, memFraction: '0.95' },
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      const defaultItem = option.items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : option.items[0].id;
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const generateCommand = () => {
+    const { hardware, toolcall, reasoning } = values;
+    const { tp, memFraction } = modelConfigs[hardware];
+
+    let cmd = 'sglang serve \\\n';
+    cmd += '  --model-path inclusionAI/Ring-2.6-1T \\\n';
+    cmd += `  --tp-size ${tp} \\\n`;
+    cmd += '  --trust-remote-code \\\n';
+    cmd += '  --host 0.0.0.0 \\\n';
+    cmd += '  --port ${PORT} \\\n';
+    cmd += `  --mem-fraction-static ${memFraction} \\\n`;
+    cmd += '  --model-loader-extra-config \'{"enable_multithread_load":"true","num_threads":64}\'';
+
+    if (toolcall === 'enabled') {
+      cmd += ' \\\n  --tool-call-parser glm';
+    }
+    if (reasoning === 'enabled') {
+      cmd += ' \\\n  --reasoning-parser deepseek-r1';
+    }
+
+    return cmd;
+  };
+
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => (
+        <div key={key} style={cardStyle}>
+          <div style={titleStyle}>{option.title}</div>
+          <div style={itemsStyle}>
+            {option.items.map((item) => {
+              const isChecked = values[option.name] === item.id;
+              return (
+                <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}) }}>
+                  <input
+                    type="radio"
+                    name={option.name}
+                    value={item.id}
+                    checked={isChecked}
+                    onChange={() => handleRadioChange(option.name, item.id)}
+                    style={{ display: 'none' }}
+                  />
+                  {item.label}
+                  {item.subtitle && <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>{item.subtitle}</small>}
+                </label>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/step-35-deployment.jsx

@@ -0,0 +1,393 @@
+export const Step35Deployment = () => {
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'h200', label: 'H200', default: true },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi350x', label: 'MI350X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false }
+      ]
+    },
+    modelsize: {
+      name: 'modelsize',
+      title: 'Model Size',
+      items: [
+        { id: '196b', label: '196B', subtitle: 'MOE', default: true },
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false }
+      ]
+    },
+    reasoningParser: {
+      name: 'reasoningParser',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--reasoning-parser step3p5' : null
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--tool-call-parser step3p5' : null
+    },
+    speculative: {
+      name: 'speculative',
+      title: 'Speculative Decoding',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ],
+      commandRule: (value) => {
+        if (value !== 'enabled') return null;
+
+        let cmd = '--speculative-algorithm EAGLE \\\n  --speculative-num-steps 3 \\\n  --speculative-eagle-topk 1 \\\n  --speculative-num-draft-tokens 4 \\\n  --enable-multi-layer-eagle ';
+
+        return cmd;
+      }
+    }
+  };
+
+  const modelConfigs = {
+    '196b': {
+      baseName: '196b',
+      isMOE: true,
+      h200: { tp: 4, bf16: true },
+      mi300x: { tp: 4, bf16: true },
+      mi325x: { tp: 4, bf16: true },
+      mi350x: { tp: 4, bf16: true },
+      mi355x: { tp: 4, bf16: true },
+    },
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, modelsize: modelSize, quantization, reasoningParser } = values;
+    const isAMD = hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi350x' || hardware === 'mi355x';
+
+    const modelSizeConfig = modelConfigs[modelSize];
+    const hwConfig = modelSizeConfig[hardware];
+    const quantSuffix = quantization === 'fp8' ? '-FP8' : '';
+    const modelName = `stepfun-ai/Step-3.5-Flash${quantSuffix}`;
+
+    let tpValue = hwConfig.tp;
+
+    let cmd = '';
+
+    cmd += 'sglang serve \\\n';
+    cmd += `  --model-path ${modelName}`;
+
+    if (tpValue > 1) {
+      cmd += ` \\\n  --tp ${tpValue}`;
+    }
+    // EP required for FP8, and for AMD BF16 (AITER CK GEMM N=320 crash without EP)
+    if (quantSuffix === '-FP8' || isAMD) {
+      cmd += ` \\\n  --ep ${tpValue}`;
+    }
+
+    // Trust remote code for custom architecture
+    cmd += ' \\\n  --trust-remote-code';
+
+    for (const [key, option] of Object.entries(options)) {
+      if (option.commandRule) {
+        const rule = option.commandRule(values[key], values);
+
+        if (rule) {
+          cmd += ` \\\n  ${rule}`;
+        }
+      }
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/step-37-flash-deployment.jsx

@@ -0,0 +1,394 @@
+export const Step37FlashDeployment = () => {
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'hopper', label: 'Hopper', default: true },
+        { id: 'b200_b300', label: 'B200/B300', default: false },
+        { id: 'gb200_gb300', label: 'GB200/GB300', default: false }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      getDynamicItems: (values) => {
+        const isHopper = values.hardware === 'hopper';
+        return [
+          { id: 'bf16', label: 'BF16', default: true },
+          { id: 'fp8', label: 'FP8', default: false },
+          ...(isHopper ? [] : [{ id: 'nvfp4', label: 'NVFP4', default: false }])
+        ];
+      }
+    },
+    reasoningParser: {
+      name: 'reasoningParser',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--reasoning-parser step3p5' : null
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--tool-call-parser step3p5' : null
+    },
+    speculative: {
+      name: 'speculative',
+      title: 'Speculative Decoding',
+      getDynamicItems: (values) => {
+        const isNVFP4 = values.quantization === 'nvfp4';
+        return [
+          { id: 'disabled', label: 'Disabled', default: true },
+          { id: 'enabled', label: 'Enabled', default: false, disabled: isNVFP4, disabledReason: 'Not supported with NVFP4' }
+        ];
+      },
+      commandRule: (value) => {
+        if (value !== 'enabled') return null;
+
+        let cmd = '--speculative-algorithm EAGLE \\\n  --speculative-num-steps 3 \\\n  --speculative-eagle-topk 1 \\\n  --speculative-num-draft-tokens 4 \\\n  --enable-multi-layer-eagle ';
+
+        return cmd;
+      }
+    }
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, quantization } = values;
+    const isNVFP4 = quantization === 'nvfp4';
+    const quantSuffix = quantization === 'fp8' ? '-FP8' : quantization === 'nvfp4' ? '-NVFP4' : '';
+    const modelName = `stepfun-ai/Step-3.7-Flash${quantSuffix}`;
+    const tpValue = hardware === 'gb200_gb300' ? 4 : 8;
+
+    let cmd = '';
+
+    cmd += 'sglang serve \\\n';
+    cmd += `  --model-path ${modelName}`;
+
+    if (tpValue > 1) {
+      cmd += ` \\\n  --tp ${tpValue}`;
+    }
+    // EP required for FP8 and NVFP4
+    if (quantSuffix === '-FP8' || isNVFP4) {
+      cmd += ` \\\n  --ep ${tpValue}`;
+    }
+
+    // NVFP4 requires additional flags (Blackwell only)
+    if (isNVFP4) {
+      cmd += ' \\\n  --moe-runner-backend flashinfer_trtllm';
+      cmd += ' \\\n  --kv-cache-dtype fp8_e4m3';
+      cmd += ' \\\n  --quantization modelopt_fp4';
+      cmd += ' \\\n  --attention-backend trtllm_mha';
+    }
+
+    // Trust remote code for custom architecture
+    cmd += ' \\\n  --trust-remote-code';
+
+    for (const [key, option] of Object.entries(options)) {
+      if (option.commandRule) {
+        const rule = option.commandRule(values[key], values);
+
+        if (rule) {
+          cmd += ` \\\n  ${rule}`;
+        }
+      }
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => {
+      const next = { ...prev, [optionName]: value };
+      // Reset nvfp4 to bf16 when switching to Hopper
+      if (optionName === 'hardware' && value === 'hopper' && prev.quantization === 'nvfp4') {
+        next.quantization = 'bf16';
+      }
+      // Reset speculative to disabled when switching to nvfp4
+      if (optionName === 'quantization' && value === 'nvfp4' && prev.speculative === 'enabled') {
+        next.speculative = 'disabled';
+      }
+      return next;
+    });
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/autoregressive/step-3vl-10b-deployment.jsx

@@ -0,0 +1,383 @@
+export const Step3VL10BDeployment = () => {
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Hardware Platform',
+      items: [
+        { id: 'b200', label: 'B200', default: true },
+        { id: 'h100', label: 'H100', default: false },
+        { id: 'h200', label: 'H200', default: false },
+        { id: 'a100', label: 'A100', default: false },
+        { id: 'mi300x', label: 'MI300X', default: false },
+        { id: 'mi325x', label: 'MI325X', default: false },
+        { id: 'mi355x', label: 'MI355X', default: false }
+      ]
+    },
+    modelsize: {
+      name: 'modelsize',
+      title: 'Model Size',
+      items: [
+        { id: '10b', label: '10B', subtitle: 'Dense', default: true }
+      ]
+    },
+    quantization: {
+      name: 'quantization',
+      title: 'Quantization',
+      items: [
+        { id: 'bf16', label: 'BF16', default: true },
+        { id: 'fp8', label: 'FP8', default: false }
+      ]
+    },
+    reasoning: {
+      name: 'reasoning',
+      title: 'Reasoning Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--reasoning-parser deepseek-r1' : null
+    },
+    toolcall: {
+      name: 'toolcall',
+      title: 'Tool Call Parser',
+      items: [
+        { id: 'disabled', label: 'Disabled', default: true },
+        { id: 'enabled', label: 'Enabled', default: false }
+      ],
+      commandRule: (value) => value === 'enabled' ? '--tool-call-parser hermes' : null
+    }
+  };
+
+  const modelConfigs = {
+    '10b': {
+      baseName: '10B',
+      isMOE: false,
+      b200: { tp: 1, bf16: true, fp8: true },
+      h100: { tp: 1, bf16: true, fp8: true },
+      h200: { tp: 1, bf16: true, fp8: true },
+      a100: { tp: 1, bf16: true, fp8: true },
+      mi300x: { tp: 1, bf16: true, fp8: true },
+      mi325x: { tp: 1, bf16: true, fp8: true },
+      mi355x: { tp: 1, bf16: true, fp8: true }
+    }
+  };
+
+  const generateCommand = (values) => {
+    const { hardware, modelsize: modelSize, quantization } = values;
+
+    const modelSizeConfig = modelConfigs[modelSize];
+    if (!modelSizeConfig) {
+      return `# Error: Unknown model size: ${modelSize}`;
+    }
+
+    const hwConfig = modelSizeConfig[hardware];
+    if (!hwConfig) {
+      return `# Error: Unknown hardware platform: ${hardware}`;
+    }
+
+    const quantSuffix = quantization === 'fp8' ? '-FP8' : '';
+    const modelName = `stepfun-ai/Step3-VL-10B${quantSuffix}`;
+
+    let cmd = 'python -m sglang.launch_server \\\n';
+    cmd += `  --model ${modelName}`;
+
+    if (hwConfig.tp > 1) {
+      cmd += ` \\\n  --tp ${hwConfig.tp}`;
+    }
+
+    cmd += ' \\\n  --host 0.0.0.0 \\\n  --port 30000';
+    if (hardware === 'mi300x' || hardware === 'mi325x' || hardware === 'mi355x') {
+      cmd += ' \\\n  --attention-backend triton';
+    }
+    cmd += ' \\\n  --trust-remote-code';
+
+    for (const [key, option] of Object.entries(options)) {
+      if (option.commandRule) {
+        const rule = option.commandRule(values[key]);
+        if (rule) {
+          cmd += ` \\\n  ${rule}`;
+        }
+      }
+    }
+
+    return cmd;
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = generateCommand(values);
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/configs/LiquidAI/lfm2.5-benchmarks.jsx

@@ -0,0 +1,257 @@
+// One entry per cell `match` tuple (same 5 keys as the config cells). Speed
+// measured with python3 -m sglang.bench_serving on Modal cloud GPUs (one GPU,
+// TP=1): latency = 10 prompts at concurrency 1, throughput = 1000 prompts at
+// concurrency 100 (`random` dataset, 1024/1024 token caps). Accuracy comes
+// from the config's `defaultAccuracy` (Liquid-AI-reported GPQA / AIME25).
+
+export const benchmarks = [
+  // ====================================================================
+  // H100
+  // ====================================================================
+  {
+    match: { hw: "h100", variant: "8b-a1b", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 287.24, tpot_ms: 2.4, tokens_per_sec_per_gpu: 650 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 171.72, tpot_ms: 11.87, tokens_per_sec_per_gpu: 15751 },
+    ],
+  },
+  {
+    match: { hw: "h100", variant: "instruct", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 18.9, tpot_ms: 2.08, tokens_per_sec_per_gpu: 943 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 180.55, tpot_ms: 7, tokens_per_sec_per_gpu: 26099 },
+    ],
+  },
+  {
+    match: { hw: "h100", variant: "thinking", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 16.23, tpot_ms: 2.19, tokens_per_sec_per_gpu: 898 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 127.45, tpot_ms: 5.31, tokens_per_sec_per_gpu: 34862 },
+    ],
+  },
+  {
+    match: { hw: "h100", variant: "350m", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 18.8, tpot_ms: 1.65, tokens_per_sec_per_gpu: 1181 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 476.85, tpot_ms: 4.26, tokens_per_sec_per_gpu: 37491 },
+    ],
+  },
+  {
+    match: { hw: "h100", variant: "230m", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 23.74, tpot_ms: 1.77, tokens_per_sec_per_gpu: 1092 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 1128.14, tpot_ms: 4.54, tokens_per_sec_per_gpu: 28561 },
+    ],
+  },
+  {
+    match: { hw: "h100", variant: "jp", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 17.04, tpot_ms: 2.1, tokens_per_sec_per_gpu: 937 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 195.67, tpot_ms: 5.05, tokens_per_sec_per_gpu: 35389 },
+    ],
+  },
+  {
+    match: { hw: "h100", variant: "vl", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 22.01, tpot_ms: 1.54, tokens_per_sec_per_gpu: 1260 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 1676.37, tpot_ms: 3.38, tokens_per_sec_per_gpu: 28967 },
+    ],
+  },
+  {
+    match: { hw: "h100", variant: "vl-450m", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 26.01, tpot_ms: 1.34, tokens_per_sec_per_gpu: 1427 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 1604.2, tpot_ms: 3.38, tokens_per_sec_per_gpu: 29704 },
+    ],
+  },
+  // ====================================================================
+  // H200
+  // ====================================================================
+  {
+    match: { hw: "h200", variant: "8b-a1b", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 48.8, tpot_ms: 2.23, tokens_per_sec_per_gpu: 853 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 119.9, tpot_ms: 11.96, tokens_per_sec_per_gpu: 15826 },
+    ],
+  },
+  {
+    match: { hw: "h200", variant: "instruct", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 20.97, tpot_ms: 2.2, tokens_per_sec_per_gpu: 891 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 601.53, tpot_ms: 5.37, tokens_per_sec_per_gpu: 29748 },
+    ],
+  },
+  {
+    match: { hw: "h200", variant: "thinking", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 21.39, tpot_ms: 2.22, tokens_per_sec_per_gpu: 880 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 398.87, tpot_ms: 5.58, tokens_per_sec_per_gpu: 30426 },
+    ],
+  },
+  {
+    match: { hw: "h200", variant: "350m", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 22.51, tpot_ms: 1.72, tokens_per_sec_per_gpu: 1129 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 880.23, tpot_ms: 4.37, tokens_per_sec_per_gpu: 31530 },
+    ],
+  },
+  {
+    match: { hw: "h200", variant: "230m", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 18.74, tpot_ms: 1.74, tokens_per_sec_per_gpu: 1123 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 458.07, tpot_ms: 4.47, tokens_per_sec_per_gpu: 35785 },
+    ],
+  },
+  {
+    match: { hw: "h200", variant: "jp", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 20.85, tpot_ms: 2.09, tokens_per_sec_per_gpu: 938 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 781.82, tpot_ms: 5.23, tokens_per_sec_per_gpu: 28985 },
+    ],
+  },
+  {
+    match: { hw: "h200", variant: "vl", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 20.88, tpot_ms: 1.32, tokens_per_sec_per_gpu: 1465 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 1550.27, tpot_ms: 3.26, tokens_per_sec_per_gpu: 30944 },
+    ],
+  },
+  {
+    match: { hw: "h200", variant: "vl-450m", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 23.48, tpot_ms: 1.2, tokens_per_sec_per_gpu: 1597 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 1544.41, tpot_ms: 3.14, tokens_per_sec_per_gpu: 31235 },
+    ],
+  },
+  // ====================================================================
+  // B200
+  // ====================================================================
+  {
+    match: { hw: "b200", variant: "8b-a1b", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 124.36, tpot_ms: 2, tokens_per_sec_per_gpu: 873 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 154.77, tpot_ms: 7.54, tokens_per_sec_per_gpu: 24688 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "instruct", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 11.22, tpot_ms: 1.19, tokens_per_sec_per_gpu: 1637 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 1223.9, tpot_ms: 2.19, tokens_per_sec_per_gpu: 42274 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "thinking", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 11.12, tpot_ms: 1.19, tokens_per_sec_per_gpu: 1637 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 1230.34, tpot_ms: 2.18, tokens_per_sec_per_gpu: 42243 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "350m", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 12.18, tpot_ms: 0.91, tokens_per_sec_per_gpu: 2131 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 1177.6, tpot_ms: 1.92, tokens_per_sec_per_gpu: 45273 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "230m", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 12.28, tpot_ms: 0.84, tokens_per_sec_per_gpu: 2316 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 1550.61, tpot_ms: 1.93, tokens_per_sec_per_gpu: 38411 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "jp", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 11.98, tpot_ms: 1.19, tokens_per_sec_per_gpu: 1635 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 1367.79, tpot_ms: 2.27, tokens_per_sec_per_gpu: 39589 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "vl", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 11.55, tpot_ms: 1.22, tokens_per_sec_per_gpu: 1614 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 935.24, tpot_ms: 2.34, tokens_per_sec_per_gpu: 46272 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "vl-450m", quant: "bf16", strategy: "default", nodes: "single" },
+    sglang_version: "0.0.0.dev1+g631db6c75",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 1, num_prompts: 10 },
+        ttft_ms: 12.09, tpot_ms: 0.92, tokens_per_sec_per_gpu: 2106 },
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 100, num_prompts: 1000 },
+        ttft_ms: 939.41, tpot_ms: 2.25, tokens_per_sec_per_gpu: 47761 },
+    ],
+  },
+];

docs/src/snippets/configs/LiquidAI/lfm2.5.jsx

@@ -0,0 +1,523 @@
+// Single `export const config` literal — no spreads/calls/IIFE (Mintlify re-evals at hydration).
+// Cells are denormalized: no `--nnodes`/`--node-rank`/`--dist-init-addr`/`--host`/`--port` literals — engine injects them.
+//
+// LFM2.5 note: every variant runs on ONE GPU (TP=1), so the matrix is
+// hw × variant only (single quant / strategy / nodes). The reasoning parser is
+// variant-intrinsic (`qwen3` for 8B-A1B, `qwen3-thinking` for 1.2B-Thinking) and
+// the `lfm2` tool-call parser is part of the recommended launch, so both are baked
+// into the verified cells rather than exposed as a Parsers playground axis (a
+// single axis item cannot carry a per-variant flag).
+
+export const config = {
+  modelName: "LFM2.5",
+
+  // TTFT/TPOT were recorded as Mean (no percentile restated in the source runs).
+  latencyPercentile: "Mean",
+
+  supportedHardware: ["h100", "h200", "b200"],
+
+  variants: [
+    { id: "8b-a1b",   label: "8B-A1B",        subtitle: "8.3B MoE · reasoning" },
+    { id: "instruct", label: "1.2B Instruct", subtitle: "1.17B dense" },
+    { id: "thinking", label: "1.2B Thinking", subtitle: "1.17B · reasoning" },
+    { id: "350m",     label: "350M",          subtitle: "dense" },
+    { id: "230m",     label: "230M",          subtitle: "dense · compact" },
+    { id: "jp",       label: "1.2B JP",       subtitle: "Japanese" },
+    { id: "vl",       label: "VL 1.6B",       subtitle: "vision" },
+    { id: "vl-450m",  label: "VL 450M",       subtitle: "vision · compact" },
+  ],
+  quantizations: [
+    { id: "bf16", label: "BF16" },
+  ],
+  strategies: [
+    { id: "default", label: "Default" },
+  ],
+  nodesOptions: [
+    { id: "single", label: "Single Node" },
+  ],
+
+  modelNames: {
+    "8b-a1b|bf16":   "LiquidAI/LFM2.5-8B-A1B",
+    "instruct|bf16": "LiquidAI/LFM2.5-1.2B-Instruct",
+    "thinking|bf16": "LiquidAI/LFM2.5-1.2B-Thinking",
+    "350m|bf16":     "LiquidAI/LFM2.5-350M",
+    "230m|bf16":     "LiquidAI/LFM2.5-230M",
+    "jp|bf16":       "LiquidAI/LFM2.5-1.2B-JP-202606",
+    "vl|bf16":       "LiquidAI/LFM2.5-VL-1.6B",
+    "vl-450m|bf16":  "LiquidAI/LFM2.5-VL-450M",
+  },
+
+  placeholders: {
+    HOST_IP:   { target: "command", label: "Bind host",         default: "0.0.0.0"  },
+    PORT:      { target: "command", label: "Bind port",         default: "30000"    },
+    HF_TOKEN:  { target: "command", label: "HF token (Docker)", default: "<your-hf-token>" },
+    CURL_HOST: { target: "curl",    label: "Server host",       default: "localhost" },
+    CURL_PORT: { target: "curl",    label: "Server port",       default: "30000"     },
+  },
+
+  curl: `curl http://{{CURL_HOST}}:{{CURL_PORT}}/v1/chat/completions \\
+-H 'Content-Type: application/json' \\
+-d '{ "model": "{{MODEL_NAME}}", "messages": [{"role":"user","content":"Hello"}] }'`,
+
+  // Reproduce commands for the Benchmark card's "⚡ Reproduce" modal.
+  benchmarkCommands: {
+    speed:
+`python3 -m sglang.bench_serving \\
+  --backend sglang \\
+  --host {{CURL_HOST}} --port {{CURL_PORT}} \\
+  --model {{MODEL_NAME}} \\
+  --dataset-name {{DATASET}} \\
+  --random-input-len {{ISL}} --random-output-len {{OSL}} \\
+  --num-prompts {{NUM_PROMPTS}} --max-concurrency {{MAX_CONCURRENCY}}`,
+    accuracy: {
+      gsm8k_pct:
+`# To install sgl-eval: pip install git+https://github.com/sgl-project/sgl-eval
+sgl-eval run gsm8k \\
+  --base-url http://{{CURL_HOST}}:{{CURL_PORT}}/v1 \\
+  --model {{MODEL_NAME}} \\
+  --num-threads 128`,
+      gpqa_pct:
+`# To install sgl-eval: pip install git+https://github.com/sgl-project/sgl-eval
+# GPQA's HF dataset (Idavidrein/gpqa) is gated — accept its terms with your HF account first.
+sgl-eval run gpqa \\
+  --base-url http://{{CURL_HOST}}:{{CURL_PORT}}/v1 \\
+  --model {{MODEL_NAME}} \\
+  --num-threads 128`,
+      mmlu_pct:
+`# To install sgl-eval: pip install git+https://github.com/sgl-project/sgl-eval
+sgl-eval run mmlu \\
+  --base-url http://{{CURL_HOST}}:{{CURL_PORT}}/v1 \\
+  --model {{MODEL_NAME}} \\
+  --num-threads 128`,
+      aime25_pct:
+`# To install sgl-eval: pip install git+https://github.com/sgl-project/sgl-eval
+sgl-eval run aime25 \\
+  --base-url http://{{CURL_HOST}}:{{CURL_PORT}}/v1 \\
+  --model {{MODEL_NAME}} \\
+  --num-threads 128`,
+      mmmu_pct:
+`python3 -m sglang.test.run_eval --eval-name mmmu \\
+  --host {{CURL_HOST}} --port {{CURL_PORT}} \\
+  --model {{MODEL_NAME}} \\
+  --num-examples 900 --num-threads 128 --max-tokens 2048 \\
+  --temperature 0.1 --min-p 0.15`,
+    },
+    numPromptsByConc: { 1: 10, 16: 32, 64: 128, 100: 1000, 256: 512 },
+  },
+
+  // The eval set rendered in the benchmark card + "⚡ Reproduce" (the engine
+  // ships no default — every config declares its own).
+  accuracyLabels: [
+    ["gpqa_pct",   "GPQA Diamond",   "%"],
+    ["aime25_pct", "AIME25",         "%"],
+    ["gsm8k_pct",  "GSM8K (1-shot)", "%"],
+    ["mmlu_pct",   "MMLU",           "%"],
+    ["mmmu_pct",   "MMMU (val)",     "%"],
+  ],
+
+  // Per-variant accuracy applied to every cell. ALL values are MEASURED through
+  // SGLang (B200, dev-cu13) with the exact commands in the Reproduce modal:
+  // gsm8k / gpqa / aime25 / mmlu via sgl-eval (registry defaults — gpqa pass@1
+  // avg-of-8, aime25 avg-of-16, gsm8k + mmlu single-shot), mmmu via
+  // sglang.test.run_eval (900 examples, card sampling). They agree with the
+  // LiquidAI model-card numbers within a few points where both exist; see the
+  // model cards for Liquid's own reported suite (IFEval / MATH500 / BFCL / ...).
+  defaultAccuracy: {
+    "8b-a1b":  { mmlu_pct: 76.61, gsm8k_pct: 91.96, gpqa_pct: 52.27, aime25_pct: 45.21 },
+    thinking:  { mmlu_pct: 63.2, gsm8k_pct: 86.35, gpqa_pct: 39.08, aime25_pct: 27.08 },
+    instruct:  { mmlu_pct: 60.33, gsm8k_pct: 75.13, gpqa_pct: 34.41, aime25_pct: 9.58 },
+    "350m":    { mmlu_pct: 40.69, gsm8k_pct: 30.63, gpqa_pct: 28.35 },
+    "230m":    { mmlu_pct: 38.45, gsm8k_pct: 31.84, gpqa_pct: 27.78 },
+    vl:        { mmmu_pct: 39.12 },
+    "vl-450m": { mmmu_pct: 30.56 },
+  },
+
+  // LFM2.5 support (model classes + the `lfm2` tool-call parser) ships in the
+  // SGLang dev image; not yet in a tagged release.
+  dockerImages: {
+    h100: "lmsysorg/sglang:dev-cu13",
+    h200: "lmsysorg/sglang:dev-cu13",
+    b200: "lmsysorg/sglang:dev-cu13",
+  },
+
+  // Pre-selects the issue template's `model` dropdown on "Submit verified cell".
+  github: {
+    cookbookModel: "LiquidAI/lfm2.5",
+  },
+
+  playgroundFeatures: {
+    // TP override only: every variant fits on (and is verified at) TP=1; TP=2 is
+    // exposed for experimentation on the larger checkpoints. No Parsers axis —
+    // see the header note (parsers are variant-intrinsic and live in the cells).
+    attention: {
+      knobs: [
+        { id: "tp", label: "TP", values: [null, 1, 2] },
+      ],
+    },
+  },
+
+  cells: [
+    // ====================================================================
+    // H100 (sm90) — default attention backend; parsers per variant
+    // ====================================================================
+    {
+      match: { hw: "h100", variant: "8b-a1b", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--reasoning-parser qwen3",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h100", variant: "instruct", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h100", variant: "thinking", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--reasoning-parser qwen3-thinking",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h100", variant: "350m", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h100", variant: "230m", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h100", variant: "jp", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h100", variant: "vl", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [
+        "SGLANG_USE_CUDA_IPC_TRANSPORT=1",
+        "SGLANG_USE_IPC_POOL_HANDLE_CACHE=1",
+      ],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h100", variant: "vl-450m", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [
+        "SGLANG_USE_CUDA_IPC_TRANSPORT=1",
+        "SGLANG_USE_IPC_POOL_HANDLE_CACHE=1",
+      ],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--tool-call-parser lfm2",
+        "--mem-fraction-static 0.8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+
+    // ====================================================================
+    // H200 (sm90) — same hopper recipes as H100
+    // ====================================================================
+    {
+      match: { hw: "h200", variant: "8b-a1b", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--reasoning-parser qwen3",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "instruct", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "thinking", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--reasoning-parser qwen3-thinking",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "350m", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "230m", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "jp", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "vl", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [
+        "SGLANG_USE_CUDA_IPC_TRANSPORT=1",
+        "SGLANG_USE_IPC_POOL_HANDLE_CACHE=1",
+      ],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "vl-450m", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [
+        "SGLANG_USE_CUDA_IPC_TRANSPORT=1",
+        "SGLANG_USE_IPC_POOL_HANDLE_CACHE=1",
+      ],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--tool-call-parser lfm2",
+        "--mem-fraction-static 0.8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+
+    // ====================================================================
+    // B200 (sm100) — explicit attention backend per variant:
+    // dense text → trtllm_mha; 8B-A1B + VL use a mamba-style conv state cache
+    // that needs a page-size-1 backend → flashinfer (VL adds fa4 vision tower)
+    // ====================================================================
+    {
+      match: { hw: "b200", variant: "8b-a1b", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--attention-backend flashinfer",
+        "--reasoning-parser qwen3",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b200", variant: "instruct", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--attention-backend trtllm_mha",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b200", variant: "thinking", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--attention-backend trtllm_mha",
+        "--reasoning-parser qwen3-thinking",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b200", variant: "350m", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--attention-backend trtllm_mha",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b200", variant: "230m", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--attention-backend trtllm_mha",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b200", variant: "jp", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--attention-backend trtllm_mha",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b200", variant: "vl", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [
+        "SGLANG_USE_CUDA_IPC_TRANSPORT=1",
+        "SGLANG_USE_IPC_POOL_HANDLE_CACHE=1",
+      ],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--attention-backend flashinfer",
+        "--mm-attention-backend fa4",
+        "--tool-call-parser lfm2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b200", variant: "vl-450m", quant: "bf16", strategy: "default", nodes: "single" },
+      verified: true,
+      env: [
+        "SGLANG_USE_CUDA_IPC_TRANSPORT=1",
+        "SGLANG_USE_IPC_POOL_HANDLE_CACHE=1",
+      ],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 1",
+        "--attention-backend flashinfer",
+        "--mm-attention-backend fa4",
+        "--tool-call-parser lfm2",
+        "--mem-fraction-static 0.8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+  ],
+};

docs/src/snippets/configs/MiniMaxAI/minimax-h3.jsx

@@ -0,0 +1,618 @@
+// MiniMax-H3 diffusion deployment matrix. Consumed by _deployment.jsx.
+//
+// The mode, quantization, and encoder choices are deployment overlays because
+// they do not change which base hardware topology fits. Request sampling
+// controls remain in the generated cURL instead of being mixed into this
+// deployment matrix.
+// Hardware/profile cells remain deliberately small and carry an honest
+// verification state for the exact platform, rather than inheriting a result
+// measured on a different GPU.
+
+
+export const config = {
+  modelName: "MiniMax-H3",
+
+  supportedHardware: [
+    "b200",
+    "b300",
+    "h200",
+    "h100",
+    "mi300x",
+    "mi355x",
+    "rtx5090",
+  ],
+  hardware: [
+    { id: "rtx5090", label: "RTX 5090", vram: "32GB", vendor: "consumer" },
+  ],
+  groupHardware: false,
+
+  matchDims: [
+    {
+      id: "profile",
+      title: "Deployment Profile",
+      showWhen: (s) => ["b200", "b300", "h200", "h100"].includes(s.hw),
+      options: [
+        { id: "resident", label: "Resident" },
+        {
+          id: "fsdp",
+          label: "FSDP sharded",
+          showWhen: (s) =>
+            ["b200", "b300", "h200", "h100"].includes(s.hw),
+        },
+        {
+          id: "offload",
+          label: "Layerwise offload",
+          showWhen: (s) => s.hw === "rtx5090",
+        },
+      ],
+    },
+  ],
+
+  overlayDims: [
+    {
+      id: "weights",
+      title: "Checkpoint Weights",
+      default: "fl2va",
+      options: [
+        {
+          id: "fl2va",
+          label: "FL2VA (First-and-Last-Frame-to-Video-and-Audio)",
+          flags: ["--model-variant fl2va"],
+        },
+        {
+          id: "ref2va",
+          label: "Ref2VA (Reference-to-Video-and-Audio)",
+          flags: ["--model-variant ref2va"],
+        },
+      ],
+    },
+    {
+      id: "mode",
+      title: "Request Mode",
+      default: "t2va",
+      options: [
+        {
+          id: "t2va",
+          label: "Text only",
+          showWhen: (s) => s.weights === "fl2va",
+        },
+        {
+          id: "i2va",
+          label: "First frame",
+          showWhen: (s) => s.weights === "fl2va",
+        },
+        {
+          id: "l2va",
+          label: "Last frame",
+          showWhen: (s) => s.weights === "fl2va",
+        },
+        {
+          id: "fl2va",
+          label: "First + last frames",
+          showWhen: (s) => s.weights === "fl2va",
+        },
+        {
+          id: "ref_image",
+          label: "Image reference",
+          showWhen: (s) => s.weights === "ref2va",
+        },
+        {
+          id: "ref_image_audio",
+          label: "Image + audio",
+          showWhen: (s) => s.weights === "ref2va",
+        },
+        {
+          id: "v2v",
+          label: "Video reference",
+          showWhen: (s) => s.weights === "ref2va",
+        },
+        {
+          id: "video_audio",
+          label: "Video + soundtrack",
+          showWhen: (s) => s.weights === "ref2va",
+        },
+        {
+          id: "audio_only",
+          label: "Audio reference",
+          showWhen: (s) => s.weights === "ref2va",
+        },
+        {
+          id: "mixed_ref",
+          label: "Mixed references",
+          showWhen: (s) => s.weights === "ref2va",
+        },
+      ],
+    },
+    {
+      id: "quant",
+      title: "Online Quantization",
+      default: "bf16",
+      showWhen: (s) => ["b200", "b300"].includes(s.hw),
+      options: [
+        { id: "bf16", label: "Off — Native BF16/FP32" },
+        {
+          id: "fp8",
+          label: "FP8 — Approximate",
+          showWhen: (s) => ["b200", "b300"].includes(s.hw),
+          disabled: (s) => s.profile !== "resident",
+          disableReason:
+            "The documented FP8 operating point keeps the transformer resident; FSDP combinations have not been validated.",
+          flags: ["--quantization fp8"],
+          hints: [
+            "Online FP8 is approximate. Validate both video and audio quality;",
+            "verified B200 and B300 runs reduced memory; re-benchmark latency on the target workload.",
+          ],
+        },
+      ],
+    },
+    {
+      id: "encoder",
+      title: "Text Encoder Parallel",
+      default: "auto",
+      options: [
+        {
+          id: "auto",
+          label: "Auto (recommended)",
+          hints: [
+            "Auto uses folding for the single-request recipes below and can",
+            "select data parallel encoding for a compatible TP1 request batch.",
+          ],
+        },
+        {
+          id: "fold",
+          label: "Fold (single-request)",
+          flags: ["--encoder-parallel fold"],
+          hints: [
+            "Fold shards the resident Qwen3-VL encoder across the replica and is",
+            "best suited to single-node GPUs with fast peer-to-peer links.",
+          ],
+        },
+        {
+          id: "dp",
+          label: "DP (batched throughput)",
+          disabled: (s) =>
+            s.hw === "rtx5090" ||
+            (s.hw === "h100" && s.profile === "resident"),
+          disableReason:
+            "Encoder DP requires TP1 and DiT DP1; this verified recipe uses TP2.",
+          flags: [
+            "--encoder-parallel dp",
+            "--batching-max-size {{BATCHING_MAX_SIZE}}",
+          ],
+          hints: [
+            "DP distributes a compatible multi-request text batch across ranks;",
+            "it does not improve a batch of one and replicates encoder weights.",
+          ],
+        },
+        {
+          id: "replicate",
+          label: "Replicate (compatibility)",
+          flags: ["--encoder-parallel replicate"],
+        },
+      ],
+    },
+  ],
+
+  modelNames: {
+    default: "MiniMaxAI/MiniMax-H3",
+  },
+
+  placeholders: {
+    HOST_IP: {
+      target: "command",
+      label: "Bind host",
+      default: "0.0.0.0",
+    },
+    PORT: {
+      target: "command",
+      label: "Bind port",
+      default: "30010",
+    },
+    HF_TOKEN: {
+      target: "command",
+      label: "HF token (Docker)",
+      default: "<your-hf-token>",
+    },
+    MEDIA_DIR: {
+      target: "command",
+      label: "Host media directory (Docker)",
+      default: "/data/minimax-h3",
+    },
+    CURL_HOST: {
+      target: "curl",
+      label: "Server host",
+      default: "localhost",
+    },
+    CURL_PORT: {
+      target: "curl",
+      label: "Server port",
+      default: "30010",
+    },
+    NUM_OUTPUTS: {
+      target: "curl",
+      label: "Outputs per prompt (1-10)",
+      default: "1",
+    },
+    BATCHING_MAX_SIZE: {
+      target: "command",
+      label: "Maximum request batch size",
+      default: "2",
+    },
+    DURATION_SECONDS: {
+      target: "curl",
+      label: "Duration (seconds, 4-15)",
+      default: "5",
+    },
+    FIRST_FRAME: {
+      target: "curl",
+      label: "FL2VA first frame URI",
+      default: "file:///data/minimax-h3/first-frame.png",
+    },
+    LAST_FRAME: {
+      target: "curl",
+      label: "FL2VA last frame URI",
+      default: "file:///data/minimax-h3/last-frame.png",
+    },
+    INPUT_VIDEO: {
+      target: "curl",
+      label: "First video URI",
+      default: "file:///data/minimax-h3/video-1.mp4",
+    },
+    INPUT_VIDEO_START_SECONDS: {
+      target: "curl",
+      label: "First video start (seconds)",
+      default: "0",
+    },
+    SECOND_INPUT_VIDEO: {
+      target: "curl",
+      label: "Second video URI (mixed ref)",
+      default: "file:///data/minimax-h3/video-2.mp4",
+    },
+    SECOND_INPUT_VIDEO_START_SECONDS: {
+      target: "curl",
+      label: "Second video start (seconds)",
+      default: "0",
+    },
+    REFERENCE_IMAGE: {
+      target: "curl",
+      label: "First reference image URI",
+      default: "file:///data/minimax-h3/reference-1.png",
+    },
+    SECOND_REFERENCE_IMAGE: {
+      target: "curl",
+      label: "Second reference image URI",
+      default: "file:///data/minimax-h3/reference-2.png",
+    },
+    REFERENCE_AUDIO: {
+      target: "curl",
+      label: "First reference audio URI",
+      default: "file:///data/minimax-h3/reference-1.mp3",
+    },
+    SECOND_REFERENCE_AUDIO: {
+      target: "curl",
+      label: "Second reference audio URI",
+      default: "file:///data/minimax-h3/reference-2.mp3",
+    },
+  },
+
+  curl: (s) => {
+    const request = {
+      model: "{{MODEL_NAME}}",
+      prompt:
+        "Night-vision bedroom footage: while the owner sleeps, three cats burst in playing tiny brass instruments at full volume, freeze, then march out as if nothing happened.",
+      seconds: "{{DURATION_SECONDS}}",
+      task: "t2va",
+      conditions: [],
+      target: {
+        short_edge: 768,
+        aspect_ratio: "16:9",
+        duration_seconds: "{{DURATION_SECONDS}}",
+      },
+      num_outputs_per_prompt: "{{NUM_OUTPUTS}}",
+      num_inference_steps: 50,
+      flow_shift: 12.0,
+      audio_flow_shift: 3.0,
+      seed: 1101,
+    };
+    const imageReference = (uri) => ({
+      type: "image",
+      uri,
+      role: "reference",
+    });
+    const audioReference = (uri) => ({
+      type: "audio",
+      uri,
+      role: "reference",
+    });
+    const videoReference = (uri, start, type = "video") => ({
+      type,
+      uri,
+      role: "reference",
+      start_time_seconds: start,
+    });
+
+    if (["i2va", "l2va", "fl2va"].includes(s.mode)) {
+      request.task = "fl2va";
+      request.prompt =
+        "Continue naturally between the supplied endpoint frame or frames, with synchronized ambient sound.";
+      request.target.aspect_ratio = "auto";
+      request.seed = 2101;
+      request.conditions = [];
+      if (s.mode !== "l2va") {
+        request.conditions.push({
+          type: "image",
+          uri: "{{FIRST_FRAME}}",
+          role: "keyframe",
+          frame_index: 0,
+        });
+      }
+      if (s.mode !== "i2va") {
+        request.conditions.push({
+          type: "image",
+          uri: "{{LAST_FRAME}}",
+          role: "keyframe",
+          frame_index: -1,
+        });
+      }
+    } else if (s.mode === "ref_image") {
+      request.task = "ref2va";
+      request.prompt = "Use <Picture 1> as the visual subject and style reference.";
+      request.target.aspect_ratio = "auto";
+      request.conditions = [imageReference("{{REFERENCE_IMAGE}}")];
+      request.seed = 3101;
+    } else if (s.mode === "ref_image_audio") {
+      request.task = "ref2va";
+      request.prompt =
+        "Use <Picture 1> as the visual subject and <Audio 1> as the sound reference.";
+      request.target.aspect_ratio = "auto";
+      request.conditions = [
+        imageReference("{{REFERENCE_IMAGE}}"),
+        audioReference("{{REFERENCE_AUDIO}}"),
+      ];
+      request.seed = 3102;
+    } else if (s.mode === "v2v" || s.mode === "video_audio") {
+      request.task = "ref2va";
+      request.prompt =
+        s.mode === "video_audio"
+          ? "Follow <Video 1> and its required <Audio 1> soundtrack with coherent synchronized motion."
+          : "Follow the appearance and motion of <Video 1>; use its soundtrack when present.";
+      request.conditions = [
+        videoReference(
+          "{{INPUT_VIDEO}}",
+          "{{INPUT_VIDEO_START_SECONDS}}",
+          s.mode === "video_audio" ? "video_audio" : "video",
+        ),
+      ];
+      request.seed = s.mode === "video_audio" ? 4102 : 4101;
+    } else if (s.mode === "audio_only") {
+      request.task = "ref2va";
+      request.prompt = "Build a coherent visual scene around <Audio 1>.";
+      request.conditions = [audioReference("{{REFERENCE_AUDIO}}")];
+      request.seed = 3103;
+    } else if (s.mode === "mixed_ref") {
+      request.task = "ref2va";
+      request.prompt =
+        "Combine <Picture 1>, <Picture 2>, <Audio 1>, <Audio 2>, <Video 1>, and <Video 2> in their one-based modality order.";
+      request.conditions = [
+        imageReference("{{REFERENCE_IMAGE}}"),
+        imageReference("{{SECOND_REFERENCE_IMAGE}}"),
+        audioReference("{{REFERENCE_AUDIO}}"),
+        audioReference("{{SECOND_REFERENCE_AUDIO}}"),
+        videoReference("{{INPUT_VIDEO}}", "{{INPUT_VIDEO_START_SECONDS}}"),
+        videoReference(
+          "{{SECOND_INPUT_VIDEO}}",
+          "{{SECOND_INPUT_VIDEO_START_SECONDS}}",
+        ),
+      ];
+      request.seed = 3104;
+    }
+
+    const body = JSON.stringify(request, null, 2).replace(
+      /"{{(NUM_OUTPUTS|DURATION_SECONDS|INPUT_VIDEO_START_SECONDS|SECOND_INPUT_VIDEO_START_SECONDS)}}"/g,
+      "{{$1}}",
+    );
+    return `curl -sS -X POST http://{{CURL_HOST}}:{{CURL_PORT}}/v1/videos \\
+  -H 'Content-Type: application/json' \\
+  -d '${body}'`;
+  },
+
+  dockerMounts: ["{{MEDIA_DIR}}:/data/minimax-h3:ro"],
+
+  dockerRunCommand: (s) =>
+    ["mi300x", "mi355x"].includes(s.hw)
+      ? `bash -lc 'python -m pip install -e "/sgl-workspace/sglang/python[diffusion_hip]" && exec sglang serve "$@"' --`
+      : `bash -lc 'python -m pip install -e "/sgl-workspace/sglang/python[diffusion]" && exec sglang serve "$@"' --`,
+
+  // Publish AMD Docker only after an H3-capable ROCm image has been validated.
+  runModes: (s) =>
+    ["mi300x", "mi355x"].includes(s.hw)
+      ? ["python"]
+      : ["python", "docker"],
+
+  dockerImages: {
+    b200: "lmsysorg/sglang:dev",
+    b300: "lmsysorg/sglang:dev",
+    h200: "lmsysorg/sglang:dev",
+    h100: "lmsysorg/sglang:dev",
+  },
+
+  showPlaygroundLink: false,
+
+  cells: [
+    {
+      match: { hw: "b200", profile: "resident" },
+      nnodes: 1,
+      verified: true,
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--num-gpus 8",
+        "--ulysses-degree 8",
+        "--performance-mode speed",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", profile: "resident" },
+      nnodes: 1,
+      verified: true,
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--num-gpus 8",
+        "--ulysses-degree 8",
+        "--performance-mode speed",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+      warn:
+        "This is the B300 topology used for the documented benchmark sweep, not a claimed minimum GPU count.",
+    },
+    {
+      match: { hw: "h200", profile: "resident" },
+      nnodes: 1,
+      verified: true,
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--num-gpus 4",
+        "--ulysses-degree 4",
+        "--performance-mode speed",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", profile: "fsdp" },
+      nnodes: 1,
+      verified: true,
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--num-gpus 8",
+        "--ulysses-degree 8",
+        "--performance-mode speed",
+        "--use-fsdp-inference true",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+      warn:
+        "FSDP reduces resident DiT memory but adds per-block parameter collectives. Prefer Resident when the full pipeline fits.",
+    },
+    {
+      match: { hw: "h200", profile: "fsdp" },
+      nnodes: 1,
+      verified: true,
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--num-gpus 4",
+        "--ulysses-degree 4",
+        "--performance-mode speed",
+        "--use-fsdp-inference true",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+      warn:
+        "FSDP reduces resident DiT memory but adds per-block parameter collectives. Prefer Resident when the full pipeline fits.",
+    },
+    {
+      match: { hw: "b200", profile: "fsdp" },
+      nnodes: 1,
+      verified: true,
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--num-gpus 4",
+        "--ulysses-degree 4",
+        "--performance-mode speed",
+        "--use-fsdp-inference true",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+      warn:
+        "The 4-GPU FSDP path is lossless but slower than the 8-GPU resident recipe.",
+    },
+    {
+      match: { hw: "h100", profile: "resident" },
+      nnodes: 1,
+      verified: true,
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--num-gpus 4",
+        "--tp-size 2",
+        "--ulysses-degree 2",
+        "--performance-mode speed",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+      warn:
+        "Fastest measured 4× H100 80 GB topology. TP4 + Ulysses1 lowers peak memory at a small latency cost.",
+    },
+    {
+      match: { hw: "h100", profile: "fsdp" },
+      nnodes: 1,
+      verified: true,
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--num-gpus 4",
+        "--ulysses-degree 4",
+        "--performance-mode speed",
+        "--use-fsdp-inference true",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+      warn:
+        "Capacity path on 4× H100 80 GB. Prefer the resident TP2 + Ulysses2 profile for latency.",
+    },
+    {
+      match: { hw: "mi300x", profile: "resident" },
+      nnodes: 1,
+      verified: true,
+      env: ["SGLANG_USE_AITER=1"],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--num-gpus 8",
+        "--ulysses-degree 8",
+        "--performance-mode speed",
+        "--attention-backend aiter",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+      warn:
+        "Validated on 1×, 2×, 4×, and 8× MI300X with BF16 and AITER packed attention. The picker emits the fastest measured 8-GPU topology; set --num-gpus and --ulysses-degree to the same lower count for a measured capacity recipe.",
+    },
+    {
+      match: { hw: "mi355x", profile: "resident" },
+      nnodes: 1,
+      verified: true,
+      env: ["SGLANG_USE_AITER=1"],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--num-gpus 8",
+        "--ulysses-degree 8",
+        "--performance-mode speed",
+        "--attention-backend aiter",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+      warn:
+        "Validated on 1×, 2×, 4×, and 8× MI355X with BF16 and AITER packed attention. The picker emits the fastest measured 8-GPU topology; set --num-gpus and --ulysses-degree to the same lower count for a measured capacity recipe.",
+    },
+    {
+      match: { hw: "rtx5090", profile: "offload" },
+      nnodes: 1,
+      verified: true,
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--num-gpus 2",
+        "--tp-size 2",
+        "--ulysses-degree 1",
+        "--performance-mode memory",
+        "--layerwise-offload-components dit,text_encoder,vae",
+        "--dit-offload-prefetch-size 1",
+        "--dit-layerwise-resident-layers 20",
+        "--enable-torch-compile false",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+      warn:
+        "Validated lossless BF16/FP32 recipe on 2× RTX 5090 (32 GB each) with a 384 GiB-class host. TP2 avoids the full per-rank DiT replication observed with Ulysses2 on PCIe.",
+    },
+  ],
+};

docs/src/snippets/configs/MiniMaxAI/minimax-m3-benchmarks.jsx

@@ -0,0 +1,102 @@
+// MiniMax-M3 per-cell benchmark numbers, keyed by the same `match` tuple as
+// minimax-m3.jsx cells. See _deployment.jsx for the speed/accuracy schema.
+//
+// SPEED — bench_serving --flush-cache, random isl2048/osl256, max_concurrency 64,
+// CUDA graph on. B200 (tp8, MXFP8, MSA fmha_sm100 path; re-measured 2026-06-15
+// with piecewise CUDA graph default-on) and H200 (tp8, bf16, built-in Triton
+// sparse) are measured on PR #27944 — warm steady-state from a 3-run sweep (the
+// B200 3-run is identical; the H200 cold-start first run, ~2x slower, is
+// excluded). B300 / GB300
+// rows are the earlier 2026-06-11 tp4 MSA numbers (pre-piecewise),
+// pending a #27944 re-measure on their own boxes. GB200 is a bare-match
+// stub (inferred-supported, not benchmarked). AMD: MI355X at 8-GPU tp8 (native
+// MXFP8) carries a bench_serving speed row; MI300X (MXFP8 -> block-fp8) was
+// accuracy-only. MI350X / MI325X inherit their same-arch sibling's recipe
+// (stubs). (sgl-eval does NOT measure serving throughput — TTFT/TPOT/tok-s come
+// from sglang.bench_serving.)
+//
+// GSM8K / GPQA — unified on a SINGLE harness: sgl-eval (github.com/sgl-project/sgl-eval)
+// `run gsm8k` (full 1319) / `run gpqa` (GPQA Diamond 198, n-repeats 4), chat
+// endpoint with --thinking (M3's reasoning path) + M3's recommended sampling
+// (temp 1.0 / top_p 0.95), symbolic grading. This is the config's Reproduce command.
+// H200 is stable at GSM8K 97.04% (std 0.0). B200 was re-measured 2026-06-15 on
+// minimax-m3-upstream (piecewise + MSA decode fix): GSM8K 96.51% recommended /
+// 96.89% greedy (stable single-run), GPQA pass@1[avg-of-4] 89.14% — the merged
+// MSA decode fix resolves the earlier fresh-server-94.4%-then-drift under-load issue.
+// Per-platform re-measurement under sgl-eval is in progress; rows still pending
+// show `gsm8k_pct: null` (no GSM8K row rendered) with the legacy-harness number
+// kept in a comment. Legacy harnesses were NOT comparable across platforms
+// (NVIDIA: few_shot_gsm8k --num-questions 200; AMD: run_eval gsm8k 1319 examples) —
+// which is exactly why we re-measure on one harness.
+export const benchmarks = [
+  {
+    // B200 re-measured 2026-06-15 at tp8 on minimax-m3-upstream (piecewise CUDA
+    // graph default-on + AR-fusion revert/off + MSA decode fix). The earlier
+    // #27944 tp4 speed + GSM8K drift were pre-fix; the merged MSA decode fix
+    // resolves the drift (stable single-run greedy 96.89% / recommended 96.51%).
+    match: { hw: "b200", variant: "default", quant: "mxfp8", strategy: "balanced", nodes: "single" },
+    sglang_version: "PR #27944",
+    speed: [
+      // bench_serving --flush-cache, MSA path, tp8; warm steady-state (3-run, identical).
+      { workload: { dataset: "random", isl: 2048, osl: 256, max_concurrency: 64, num_prompts: 128 },
+        ttft_ms: 1580, tpot_ms: 24.1, tokens_per_sec_per_gpu: 2385 },
+    ],
+    accuracy: { gpqa_pct: 89.1, gsm8k_pct: 96.5, mmmu_pro_pct: 72.7 }, // 2026-06-15, sgl-eval --thinking, recommended sampling (temp 1.0/top_p 0.95), tp8. GSM8K full 1319 = 96.51% (greedy 96.89%). GPQA Diamond 198, n-repeats 4 = pass@1[avg-of-4] 89.14% +/-1.73% (pass@4 95.45%, majority@4 93.52%). MMMU-Pro 2026-06-18, sgl-eval "standard (10 options)" test split, full 1730, single-shot 72.66% (thinking, temp 1.0/top_p 0.95).
+  },
+  {
+    // Hopper H200: bf16 build (MXFP8 is Blackwell-only) at tp8, built-in Triton
+    // sparse path (MSA is Blackwell-only). GSM8K re-measured on #27944.
+    match: { hw: "h200", variant: "default", quant: "bf16", strategy: "balanced", nodes: "single" },
+    sglang_version: "PR #27944",
+    speed: [
+      // bench_serving --flush-cache, bf16 Triton path; warm steady-state (3-run, cold-start run-1 excluded).
+      { workload: { dataset: "random", isl: 2048, osl: 256, max_concurrency: 64, num_prompts: 128 },
+        ttft_ms: 1054, tpot_ms: 70.8, tokens_per_sec_per_gpu: 1044 },
+    ],
+    accuracy: { gsm8k_pct: 97.0 }, // #27944, sgl-eval --thinking, full 1319, recommended sampling (temp 1.0/top_p 0.95/top_k 40); stable 97.04% across all 3 runs (std 0.0)
+  },
+  {
+    match: { hw: "b300", variant: "default", quant: "mxfp8", strategy: "balanced", nodes: "single" },
+    sglang_version: "PR #27944",
+    speed: [
+      { workload: { dataset: "random", isl: 2048, osl: 256, max_concurrency: 64 },
+        ttft_ms: null, tpot_ms: 32.8, tokens_per_sec_per_gpu: 3285 },
+    ],
+    accuracy: { gsm8k_pct: null }, // TODO: pending sgl-eval re-measure on B300 (legacy few_shot 200: 87.5)
+  },
+  // GB200: inferred-supported, not directly benchmarked.
+  { match: { hw: "gb200", variant: "default", quant: "mxfp8", strategy: "balanced", nodes: "single" } },
+  {
+    match: { hw: "gb300", variant: "default", quant: "mxfp8", strategy: "balanced", nodes: "single" },
+    sglang_version: "PR #27944",
+    speed: [
+      { workload: { dataset: "random", isl: 2048, osl: 256, max_concurrency: 64 },
+        ttft_ms: 4746, tpot_ms: 39.3, tokens_per_sec_per_gpu: 2493 },
+      { workload: { dataset: "random", isl: 8192, osl: 256, max_concurrency: 24 },
+        ttft_ms: 3324, tpot_ms: 32.9, tokens_per_sec_per_gpu: 4323 },
+    ],
+    accuracy: { gsm8k_pct: null }, // TODO: pending sgl-eval re-measure on GB300 (legacy few_shot 200: 87.5)
+  },
+  // MI355X (gfx950): native MXFP8. Speed: bench_serving 1024/1024 @ conc 64, tp8
+  // -> 1678 output tok/s (3355 total incl. input); 3355 / 8 = ~420 tokens/sec/GPU (total, in+out).
+  // No TTFT/TPOT reported for this run.
+  {
+    match: { hw: "mi355x", variant: "default", quant: "mxfp8", strategy: "balanced", nodes: "single" },
+    sglang_version: "PR #27944",
+    speed: [
+      { workload: { dataset: "random", isl: 1024, osl: 1024, max_concurrency: 64, num_prompts: 640 },
+        ttft_ms: null, tpot_ms: null, tokens_per_sec_per_gpu: 420 },
+    ],
+    accuracy: { gsm8k_pct: null }, // TODO: pending sgl-eval re-measure on MI355X (legacy run_eval 1319: 92.2)
+  },
+  // MI350X (gfx950): inferred-supported from MI355X, not separately benchmarked.
+  { match: { hw: "mi350x", variant: "default", quant: "mxfp8", strategy: "balanced", nodes: "single" } },
+  // MI300X (gfx942): MXFP8 -> block-fp8 [128,128].
+  {
+    match: { hw: "mi300x", variant: "default", quant: "mxfp8", strategy: "balanced", nodes: "single" },
+    sglang_version: "PR #27944",
+    accuracy: { gsm8k_pct: null }, // TODO: pending sgl-eval re-measure on MI300X (legacy run_eval 1319: 92.0, triton 0.917-0.929 / aiter ~0.929)
+  },
+  // MI325X (gfx942): inferred-supported from MI300X, not separately benchmarked.
+  { match: { hw: "mi325x", variant: "default", quant: "mxfp8", strategy: "balanced", nodes: "single" } },
+];

docs/src/snippets/configs/MiniMaxAI/minimax-m3.jsx

@@ -0,0 +1,391 @@
+// MiniMax-M3 cookbook config. Consumed by _deployment.jsx + _playground.jsx;
+// see _deployment.jsx header for the field contract.
+//
+// MXFP8 MoE: validated single-node tp4 on NVIDIA Blackwell — B200 (sm_100),
+// B300 (sm_103), GB300 (sm_103, aarch64 Grace); GB200 (sm_100, aarch64) is
+// inferred-supported (both axes validated above) but not directly benchmarked.
+// AMD: validated single-node tp8 — MI355X (gfx950, CDNA4) serves MXFP8
+// natively; MI300X (gfx942, CDNA3) auto-converts MXFP8 -> block-fp8 [128,128]
+// at load and serves it with the tuned ROCm kernels. MI350X (gfx950) and
+// MI325X (gfx942) are inferred-supported from their same-arch siblings.
+// Hopper (H200) cannot run the MXFP8 kernels, so it serves the bf16 build
+// (MiniMaxAI/MiniMax-M3) at tp8 — validated on 8xH200. See §2.4 on the page.
+
+export const config = {
+  modelName: "MiniMax-M3",
+
+  // TTFT/TPOT were recorded as Mean (no percentile restated in the source runs).
+  latencyPercentile: "Mean",
+
+  supportedHardware: ["b200", "b300", "gb200", "gb300", "mi300x", "mi325x", "mi350x", "mi355x", "h200"],
+
+  variants: [
+    { id: "default", label: "Default" },
+  ],
+  quantizations: [
+    { id: "mxfp8", label: "MXFP8" },
+    { id: "bf16", label: "BF16" },
+  ],
+  strategies: [
+    { id: "balanced", label: "Balanced" },
+  ],
+  nodesOptions: [
+    { id: "single", label: "Single Node" },
+  ],
+
+  modelNames: {
+    "default|mxfp8": "MiniMaxAI/MiniMax-M3-MXFP8",
+    "default|bf16": "MiniMaxAI/MiniMax-M3",
+  },
+
+  placeholders: {
+    HOST_IP:   { target: "command", label: "Bind host",        default: "0.0.0.0"        },
+    PORT:      { target: "command", label: "Bind port",        default: "30000"          },
+    HF_TOKEN:  { target: "command", label: "HF token (Docker)", default: "<your-hf-token>" },
+    CURL_HOST: { target: "curl",    label: "Server host",      default: "localhost"      },
+    CURL_PORT: { target: "curl",    label: "Server port",      default: "30000"          },
+  },
+
+  curl: `curl http://{{CURL_HOST}}:{{CURL_PORT}}/v1/chat/completions \\
+-H 'Content-Type: application/json' \\
+-d '{ "model": "{{MODEL_NAME}}", "messages": [{"role":"user","content":"Hello"}] }'`,
+
+  benchmarkCommands: {
+    speed:
+`python3 -m sglang.bench_serving \\
+  --backend sglang \\
+  --host {{CURL_HOST}} --port {{CURL_PORT}} \\
+  --model {{MODEL_NAME}} \\
+  --dataset-name {{DATASET}} \\
+  --random-input-len {{ISL}} --random-output-len {{OSL}} \\
+  --num-prompts {{NUM_PROMPTS}} --max-concurrency {{MAX_CONCURRENCY}}`,
+    accuracy: {
+      gsm8k_pct:
+`pip install git+https://github.com/sgl-project/sgl-eval
+sgl-eval run gsm8k \\
+  --base-url http://{{CURL_HOST}}:{{CURL_PORT}}/v1 \\
+  --model {{MODEL_NAME}} \\
+  --temperature 1.0 --top-p 0.95 \\
+  --thinking`,
+      gpqa_pct:
+`pip install git+https://github.com/sgl-project/sgl-eval
+sgl-eval run gpqa \\
+  --base-url http://{{CURL_HOST}}:{{CURL_PORT}}/v1 \\
+  --model {{MODEL_NAME}} \\
+  --temperature 1.0 --top-p 0.95 \\
+  --thinking --n-repeats 4 --max-tokens 40960`,
+      mmmu_pro_pct:
+`pip install git+https://github.com/sgl-project/sgl-eval
+sgl-eval run mmmu_pro \\
+  --base-url http://{{CURL_HOST}}:{{CURL_PORT}}/v1 \\
+  --model {{MODEL_NAME}} \\
+  --temperature 1.0 --top-p 0.95 \\
+  --thinking`,
+    },
+    numPromptsByConc: { 24: 24, 64: 128 },
+  },
+
+  accuracyLabels: [
+    ["gpqa_pct", "GPQA Diamond", "%"],
+    ["gsm8k_pct", "GSM8K", "%"],
+    ["mmmu_pro_pct", "MMMU-Pro", "%"],
+  ],
+
+  dockerImages: {
+    // M3-specific dev images (multi-arch amd64+arm64). cu13 carries the sm_103
+    // (B300/GB300) + Grace arm64 builds; cu12 is the Hopper/CUDA-12 build;
+    // dev-minimax-m3 is the rolling default. M3 model support is not yet in a
+    // tagged release, so :latest cannot serve it.
+    b200: "lmsysorg/sglang:dev-minimax-m3",
+    b300: "lmsysorg/sglang:dev-cu13-minimax-m3",
+    gb200: "lmsysorg/sglang:dev-cu13-minimax-m3",
+    gb300: "lmsysorg/sglang:dev-cu13-minimax-m3",
+    h200: "lmsysorg/sglang:dev-cu12-minimax-m3",
+    // AMD ROCm images — published M3 builds, by arch (gfx942 -> mi30x, gfx950 -> mi35x).
+    mi300x: "aigmkt/minimax-m3-sglang-rocm700-mi30x",
+    mi325x: "aigmkt/minimax-m3-sglang-rocm700-mi30x",
+    mi350x: "aigmkt/minimax-m3-sglang-rocm720-mi35x",
+    mi355x: "aigmkt/minimax-m3-sglang-rocm720-mi35x",
+  },
+
+  github: {
+    cookbookModel: "MiniMaxAI/MiniMax-M3-MXFP8",
+  },
+
+  playgroundFeatures: {
+
+    // ----- Attention Parallelism -----
+    // No CP knob: prefill Context Parallel needs model-side integration in
+    // SGLang (DeepSeek-family / Qwen-MoE / Mellum have it) and
+    // MiniMaxM3SparseForCausalLM has none — the engine's CP knob would emit
+    // --enable-prefill-cp flags that don't work on this model.
+    attention: {
+      knobs: [
+        { id: "tp",     label: "TP", values: [null, 1, 2, 4, 8] },
+        { id: "dpAttn", label: "DP-Attention",
+          values: [null, false, 1, 2, 4, 8],
+          labels: { "auto": "Auto", "false": "Off" } },
+      ],
+    },
+
+    // ----- MoE Parallelism -----
+    moe: {
+      backend: {
+        options: [
+          { id: null,     label: "Inherited" },
+          { id: "deepep", label: "DeepEP", flags: ["--moe-a2a-backend deepep"] },
+        ],
+      },
+      ep: { label: "EP", values: [null, 2, 4, 8] },
+    },
+
+    // ----- Parsers -----
+    parsers: {
+      items: [
+        { id: "reasoning", label: "Reasoning Parser", flag: "--reasoning-parser auto" },
+        { id: "toolCall",  label: "Tool Call Parser", flag: "--tool-call-parser auto" },
+      ],
+    },
+
+    // ----- PD Disaggregation -----
+    pdDisagg: {
+      modes: [
+        { id: "off",     label: "Off" },
+        { id: "prefill", label: "Prefill role" },
+        { id: "decode",  label: "Decode role" },
+      ],
+      transferBackends: [
+        { id: "mooncake", label: "Mooncake",
+          env: [
+            "NCCL_MNNVL_ENABLE=1",
+            "NCCL_CUMEM_ENABLE=1",
+            "SGLANG_MOONCAKE_CUSTOM_MEM_POOL=True",
+            "MC_FORCE_MNNVL=1",
+          ],
+          envWhen: { hw: ["gb200", "gb300"] } },
+        { id: "nixl",     label: "NiXL" },
+      ],
+      ibDevices: [{ id: "auto", label: "Auto" }, "mlx5_0", "mlx5_7"],
+      router: {
+        port: 8000,
+        command:
+`python3 -m sglang_router.launch_router \\
+  --pd-disaggregation \\
+  --prefill http://<prefill-host>:{{PREFILL_PORT}} \\
+  --decode http://<decode-host>:{{DECODE_PORT}} \\
+  --policy round_robin \\
+  --host 0.0.0.0 --port {{ROUTER_PORT}}`,
+      },
+    },
+
+    // ----- Hierarchical KV Cache -----
+    hicache: {
+      backends: [
+        { id: null,        label: "Auto" },
+        { id: "file",      label: "File" },
+        { id: "mooncake",  label: "Mooncake" },
+        { id: "hf3fs",     label: "HF3FS" },
+        { id: "nixl",      label: "NiXL" },
+      ],
+      writePolicies: [
+        { id: "auto",                    label: "Auto" },
+        { id: "write_through",           label: "Write-through" },
+        { id: "write_back",              label: "Write-back" },
+        { id: "write_through_selective", label: "Write-through (selective)" },
+      ],
+    },
+  },
+
+  // NVIDIA Blackwell: one validated single-node recipe per family — tp4 across
+  // B300 / GB200 / GB300, tp8 on B200. fa4 + page 128 + deep_gemm are the M3
+  // SM100 auto-defaults on current main, so this is also the bare-launch
+  // behavior; they engage MiniMax's MSA sparse-attention kernel (fmha_sm100,
+  // pre-installed in the dev-minimax-m3 images; see Configuration Tips), Triton
+  // fallback otherwise.
+  // AMD: tp8. MI350X/MI355X (gfx950) serve MXFP8 natively (backends auto). MI300X/
+  // MI325X (gfx942) need --attention-backend aiter + --moe-runner-backend triton,
+  // and the MXFP8 weights are auto-converted to block-fp8 at load; the cold-start
+  // AITER JIT can exceed the default warmup window, hence the watchdog/skip flags.
+  cells: [
+    {
+      match: { hw: "b200", variant: "default", quant: "mxfp8", strategy: "balanced", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 8",
+        "--attention-backend fa4",
+        "--moe-runner-backend deep_gemm",
+        "--chunked-prefill-size 8192",
+        "--mem-fraction-static 0.65",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", variant: "default", quant: "mxfp8", strategy: "balanced", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 4",
+        "--attention-backend fa4",
+        "--moe-runner-backend deep_gemm",
+        "--chunked-prefill-size 8192",
+        "--mem-fraction-static 0.75",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // GB200 (sm_100 + aarch64): inferred-supported (both axes validated on
+      // B200 and GB300), not directly benchmarked. Same recipe as the others.
+      match: { hw: "gb200", variant: "default", quant: "mxfp8", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 4",
+        "--attention-backend fa4",
+        "--moe-runner-backend deep_gemm",
+        "--chunked-prefill-size 8192",
+        "--mem-fraction-static 0.75",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "gb300", variant: "default", quant: "mxfp8", strategy: "balanced", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 4",
+        "--attention-backend fa4",
+        "--moe-runner-backend deep_gemm",
+        "--chunked-prefill-size 8192",
+        "--mem-fraction-static 0.75",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // MI355X (gfx950, CDNA4): native MXFP8, backends auto-selected.
+      match: { hw: "mi355x", variant: "default", quant: "mxfp8", strategy: "balanced", nodes: "single" },
+      verified: true,
+      env: ["SGLANG_USE_AITER=1"],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 8",
+        "--quantization mxfp8",
+        "--dtype bfloat16",
+        "--chunked-prefill-size 8192",
+        "--mem-fraction-static 0.80",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // MI350X (gfx950, CDNA4): inferred-supported from MI355X (same arch),
+      // not directly benchmarked. Same native-MXFP8 recipe.
+      match: { hw: "mi350x", variant: "default", quant: "mxfp8", strategy: "balanced", nodes: "single" },
+      env: ["SGLANG_USE_AITER=1"],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 8",
+        "--quantization mxfp8",
+        "--dtype bfloat16",
+        "--chunked-prefill-size 8192",
+        "--mem-fraction-static 0.80",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // MI300X (gfx942, CDNA3): no hardware MX matmul — SGLang converts MXFP8 ->
+      // block-fp8 [128,128] at load. aiter attention + triton MoE runner are the
+      // validated backends; watchdog/skip-warmup ride out the cold-start AITER JIT.
+      match: { hw: "mi300x", variant: "default", quant: "mxfp8", strategy: "balanced", nodes: "single" },
+      verified: true,
+      env: ["SGLANG_USE_AITER=1"],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 8",
+        "--quantization mxfp8",
+        "--dtype bfloat16",
+        "--attention-backend aiter",
+        "--moe-runner-backend triton",
+        "--chunked-prefill-size 8192",
+        "--mem-fraction-static 0.80",
+        "--watchdog-timeout 3600",
+        "--skip-server-warmup",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // MI325X (gfx942, CDNA3): inferred-supported from MI300X (same arch),
+      // not directly benchmarked. Same MXFP8 -> block-fp8 recipe.
+      match: { hw: "mi325x", variant: "default", quant: "mxfp8", strategy: "balanced", nodes: "single" },
+      env: ["SGLANG_USE_AITER=1"],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 8",
+        "--quantization mxfp8",
+        "--dtype bfloat16",
+        "--attention-backend aiter",
+        "--moe-runner-backend triton",
+        "--chunked-prefill-size 8192",
+        "--mem-fraction-static 0.80",
+        "--watchdog-timeout 3600",
+        "--skip-server-warmup",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // Hopper (H200): MXFP8 MoE kernels are Blackwell-only, so Hopper serves the
+      // full-precision bf16 build (MiniMaxAI/MiniMax-M3) at tp8 — bf16 weights don't
+      // fit a single 4-GPU node. Everything else auto-resolves for Hopper: fa3
+      // attention, page_size 1, MoE auto-pins to Triton (the bf16 deep_gemm path is
+      // not used), decode keeps full CUDA graph; MSA (§2.1) is Blackwell-only so the
+      // sparse step runs on the built-in Triton fallback. See §2.4.
+      match: { hw: "h200", variant: "default", quant: "bf16", strategy: "balanced", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 8",
+        "--mem-fraction-static 0.75",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+  ],
+};

docs/src/snippets/configs/baidu/unlimited-ocr.jsx

@@ -0,0 +1,84 @@
+// Unlimited-OCR cookbook config. Consumed by _deployment.jsx + _playground.jsx.
+
+export const config = {
+  modelName: "Unlimited-OCR",
+
+  supportedHardware: ["h100"],
+
+  variants: [{ id: "default", label: "Default" }],
+  quantizations: [{ id: "default", label: "Default" }],
+  strategies: [{ id: "balanced", label: "Balanced" }],
+  nodesOptions: [{ id: "single", label: "Single Node" }],
+
+  modelNames: {
+    "default|default": "baidu/Unlimited-OCR",
+  },
+
+  placeholders: {
+    HOST_IP: { target: "command", label: "Bind host", default: "0.0.0.0" },
+    PORT: { target: "command", label: "Bind port", default: "30000" },
+    HF_TOKEN: {
+      target: "command",
+      label: "HF token (Docker)",
+      default: "<your-hf-token>",
+    },
+    CURL_HOST: { target: "curl", label: "Server host", default: "localhost" },
+    CURL_PORT: { target: "curl", label: "Server port", default: "30000" },
+  },
+
+  curl: `curl http://{{CURL_HOST}}:{{CURL_PORT}}/v1/chat/completions \\
+-H 'Content-Type: application/json' \\
+-d '{
+  "model": "{{MODEL_NAME}}",
+  "messages": [{
+    "role": "user",
+    "content": [
+      {"type": "text", "text": "document parsing."},
+      {"type": "image_url", "image_url": {"url": "https://example.com/your_document.png"}}
+    ]
+  }],
+  "images_config": {"image_mode": "gundam"},
+  "temperature": 0,
+  "max_tokens": 2048
+}'`,
+
+  dockerImages: {
+    h100: "lmsysorg/sglang:dev",
+  },
+
+  github: {
+    cookbookModel: "baidu/Unlimited-OCR",
+  },
+
+  playgroundFeatures: {
+    attention: {
+      knobs: [
+        { id: "tp", label: "TP", values: [null, 1, 2, 4, 8] },
+      ],
+    },
+  },
+
+  cells: [
+    {
+      match: {
+        hw: "h100",
+        variant: "default",
+        quant: "default",
+        strategy: "balanced",
+        nodes: "single",
+      },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--attention-backend fa3",
+        "--page-size 1",
+        "--context-length 32768",
+        "--enable-custom-logit-processor",
+        "--disable-radix-cache",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+  ],
+};

docs/src/snippets/configs/deepreinforce-ai/ornith-1.0.jsx

@@ -0,0 +1,202 @@
+// Ornith-1.0 (DeepReinforce) — config-driven cookbook page.
+// The launch flags follow the SGLang quickstarts published on the model cards; the 9B recipe makes the single-GPU default explicit with --tp 1.
+// FP8 quantization cells use their FP8 repo ids from the collection with the same flags; their README quickstarts currently point to the non-FP8 repos.
+// Reasoning / tool-call parsers are exposed as a Playground toggle (qwen3 / qwen3_coder), not baked into the deploy cells.
+// Cells remain unverified until exact recipes are run and signed off.
+
+export const config = {
+  modelName: "Ornith-1.0",
+
+  supportedHardware: ["h100", "h200"],
+
+  variants: [
+    { id: "397b", label: "397B", subtitle: "MoE" },
+    { id: "35b",  label: "35B",  subtitle: "MoE" },
+    { id: "9b",       label: "9B",       subtitle: "dense" },
+  ],
+
+  quantizations: [
+    { id: "bf16",  label: "BF16" },
+    { id: "fp8",   label: "FP8" },
+  ],
+
+  strategies: [
+    { id: "balanced", label: "Balanced" },
+  ],
+
+  nodesOptions: [
+    { id: "single", label: "Single Node" },
+  ],
+
+  modelNames: {
+    "397b|bf16":     "Ornith-1.0-397B",
+    "397b|fp8":      "Ornith-1.0-397B-FP8",
+    "35b|bf16":      "Ornith-1.0-35B",
+    "35b|fp8":       "Ornith-1.0-35B-FP8",
+    "9b|bf16":       "Ornith-1.0-9B",
+  },
+
+  placeholders: {
+    HOST_IP:   { target: "command", label: "Bind host",         default: "0.0.0.0"         },
+    PORT:      { target: "command", label: "Bind port",         default: "30000"           },
+    CURL_HOST: { target: "curl",    label: "Server host",       default: "localhost"       },
+    CURL_PORT: { target: "curl",    label: "Server port",       default: "30000"           },
+  },
+
+  curl: `curl http://{{CURL_HOST}}:{{CURL_PORT}}/v1/chat/completions \\
+-H 'Content-Type: application/json' \\
+-d '{ "model": "{{MODEL_NAME}}", "messages": [{"role":"user","content":"Write a compact Python is_prime function."}], "temperature": 0.6, "top_p": 0.95, "top_k": 20, "max_tokens": 1024 }'`,
+
+  benchmarkCommands: {
+    speed:
+`python3 -m sglang.bench_serving \\
+  --backend sglang \\
+  --host {{CURL_HOST}} --port {{CURL_PORT}} \\
+  --model {{MODEL_NAME}} \\
+  --dataset-name random \\
+  --random-input-len {{ISL}} --random-output-len {{OSL}} \\
+  --num-prompts {{NUM_PROMPTS}} --max-concurrency {{MAX_CONCURRENCY}}`,
+    numPromptsByConc: { 1: 8, 16: 32, 64: 128, 128: 256, 256: 512 },
+  },
+
+  dockerImages: {
+    h100: "lmsysorg/sglang:latest",
+    h200: "lmsysorg/sglang:latest",
+  },
+
+  github: {
+    cookbookModel: "deepreinforce-ai/Ornith-1.0",
+  },
+
+  // Parsers are added on top of the base deploy command via the Playground,
+  // not baked into the cells. Both ids are registered in the SGLang parser
+  // registries and match the model's Qwen3.5 chat template.
+  playgroundFeatures: {
+    parsers: {
+      items: [
+        { id: "reasoning", label: "Reasoning Parser", flag: "--reasoning-parser qwen3" },
+        { id: "toolCall",  label: "Tool Call Parser", flag: "--tool-call-parser qwen3_coder" },
+      ],
+    },
+  },
+
+  cells: [
+    {
+      match: { hw: "h200", variant: "397b", quant: "bf16", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path deepreinforce-ai/Ornith-1.0-397B",
+        "--served-model-name {{MODEL_NAME}}",
+        "--tp 8",
+        "--context-length 262144",
+        "--mem-fraction-static 0.8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "397b", quant: "fp8", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path deepreinforce-ai/Ornith-1.0-397B-FP8",
+        "--served-model-name {{MODEL_NAME}}",
+        "--tp 8",
+        "--context-length 262144",
+        "--mem-fraction-static 0.8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "35b", quant: "bf16", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path deepreinforce-ai/Ornith-1.0-35B",
+        "--served-model-name {{MODEL_NAME}}",
+        "--tp 2",
+        "--context-length 262144",
+        "--mem-fraction-static 0.85",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "35b", quant: "fp8", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path deepreinforce-ai/Ornith-1.0-35B-FP8",
+        "--served-model-name {{MODEL_NAME}}",
+        "--tp 2",
+        "--context-length 262144",
+        "--mem-fraction-static 0.85",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "9b", quant: "bf16", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path deepreinforce-ai/Ornith-1.0-9B",
+        "--served-model-name {{MODEL_NAME}}",
+        "--tp 1",
+        "--context-length 262144",
+        "--mem-fraction-static 0.85",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h100", variant: "397b", quant: "fp8", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path deepreinforce-ai/Ornith-1.0-397B-FP8",
+        "--served-model-name {{MODEL_NAME}}",
+        "--tp 8",
+        "--context-length 262144",
+        "--mem-fraction-static 0.8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h100", variant: "35b", quant: "bf16", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path deepreinforce-ai/Ornith-1.0-35B",
+        "--served-model-name {{MODEL_NAME}}",
+        "--tp 2",
+        "--context-length 262144",
+        "--mem-fraction-static 0.85",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h100", variant: "35b", quant: "fp8", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path deepreinforce-ai/Ornith-1.0-35B-FP8",
+        "--served-model-name {{MODEL_NAME}}",
+        "--tp 2",
+        "--context-length 262144",
+        "--mem-fraction-static 0.85",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h100", variant: "9b", quant: "bf16", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path deepreinforce-ai/Ornith-1.0-9B",
+        "--served-model-name {{MODEL_NAME}}",
+        "--tp 1",
+        "--context-length 262144",
+        "--mem-fraction-static 0.85",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+  ],
+};

docs/src/snippets/configs/deepseek-ai/deepseek-v4-benchmarks.jsx

@@ -0,0 +1,585 @@
+// DeepSeek-V4 per-cell benchmark numbers, keyed by the same `match` tuple as
+// deepseek-v4.jsx cells. See _deployment.jsx for the speed/accuracy schema.
+// Measured on sglang v0.5.15 / v0.5.15.post1 / v0.5.16 (per-cell sglang_version).
+// tokens_per_sec_per_gpu is total (input+output) tok/s/GPU = output/GPU × (isl+osl)/osl.
+export const benchmarks = [
+  // ====================================================================
+  // B200 + FP4
+  // ====================================================================
+  {
+    match: { hw: "b200", variant: "flash-official", quant: "fp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.16",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 218.90, tpot_ms: 1.28, tokens_per_sec_per_gpu: 481 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 189.89, tpot_ms: 3.38, tokens_per_sec_per_gpu: 3383 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "flash-official", quant: "fp4", strategy: "balanced", nodes: "single" },
+    sglang_version: "0.5.16",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 1629.45, tpot_ms: 34.13, tokens_per_sec_per_gpu: 1595 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 2568.55, tpot_ms: 57.15, tokens_per_sec_per_gpu: 4326 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "flash-official", quant: "fp4", strategy: "high-throughput", nodes: "single" },
+    sglang_version: "0.5.16",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 74853.51, tpot_ms: 51.72, tokens_per_sec_per_gpu: 5464 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 4096 },
+        ttft_ms: 216241.01, tpot_ms: 51.80, tokens_per_sec_per_gpu: 5301 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "flash", quant: "fp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.15",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 302, tpot_ms: 2.91, tokens_per_sec_per_gpu: 677 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 454, tpot_ms: 8.76, tokens_per_sec_per_gpu: 3059 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "flash", quant: "fp4", strategy: "balanced", nodes: "single" },
+    sglang_version: "0.5.15",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 642, tpot_ms: 23.2, tokens_per_sec_per_gpu: 5222 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 3147, tpot_ms: 64.0, tokens_per_sec_per_gpu: 8399 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "flash", quant: "fp4", strategy: "high-throughput", nodes: "single" },
+    sglang_version: "0.5.15",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 104109, tpot_ms: 70.25, tokens_per_sec_per_gpu: 8345 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 4096 },
+        ttft_ms: 273808, tpot_ms: 71.34, tokens_per_sec_per_gpu: 8156 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "pro", quant: "fp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.15",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 230, tpot_ms: 4.25, tokens_per_sec_per_gpu: 243 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 446, tpot_ms: 11.56, tokens_per_sec_per_gpu: 1165 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "pro", quant: "fp4", strategy: "balanced", nodes: "single" },
+    sglang_version: "0.5.15",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 1081, tpot_ms: 36.23, tokens_per_sec_per_gpu: 1696 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 4330, tpot_ms: 97.59, tokens_per_sec_per_gpu: 2721 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "pro", quant: "fp4", strategy: "high-throughput", nodes: "single" },
+    sglang_version: "0.5.15",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 107158, tpot_ms: 44.45, tokens_per_sec_per_gpu: 4169 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 4096 },
+        ttft_ms: 265159, tpot_ms: 44.12, tokens_per_sec_per_gpu: 4252 },
+    ],
+  },
+  // ====================================================================
+  // B200 + NVFP4
+  // ====================================================================
+  {
+    match: { hw: "b200", variant: "flash", quant: "nvfp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.15",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 308, tpot_ms: 2.88, tokens_per_sec_per_gpu: 682 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 466, tpot_ms: 8.67, tokens_per_sec_per_gpu: 3059 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "pro", quant: "nvfp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.15",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 223, tpot_ms: 4.19, tokens_per_sec_per_gpu: 245 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 509, tpot_ms: 11.13, tokens_per_sec_per_gpu: 1210 },
+    ],
+  },
+  // ====================================================================
+  // B300 + FP4
+  // ====================================================================
+  {
+    match: { hw: "b300", variant: "flash", quant: "fp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 191, tpot_ms: 2.87, tokens_per_sec_per_gpu: 720 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 360, tpot_ms: 8.05, tokens_per_sec_per_gpu: 3376 },
+    ],
+  },
+  {
+    match: { hw: "b300", variant: "flash", quant: "fp4", strategy: "balanced", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 1317, tpot_ms: 33.78, tokens_per_sec_per_gpu: 3801 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 2722, tpot_ms: 52.84, tokens_per_sec_per_gpu: 9773 },
+    ],
+  },
+  {
+    match: { hw: "b300", variant: "flash", quant: "fp4", strategy: "high-throughput", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 89936, tpot_ms: 61.42, tokens_per_sec_per_gpu: 9336 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 4096 },
+        ttft_ms: 238636, tpot_ms: 61.15, tokens_per_sec_per_gpu: 9432 },
+    ],
+  },
+  {
+    match: { hw: "b300", variant: "pro", quant: "fp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 258, tpot_ms: 4.2, tokens_per_sec_per_gpu: 243 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 460, tpot_ms: 10.97, tokens_per_sec_per_gpu: 1149 },
+    ],
+  },
+  {
+    match: { hw: "b300", variant: "pro", quant: "fp4", strategy: "balanced", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 1868, tpot_ms: 42.19, tokens_per_sec_per_gpu: 1336 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 2917, tpot_ms: 99.32, tokens_per_sec_per_gpu: 2669 },
+    ],
+  },
+  {
+    // At conc 4096 the engine is saturated (running at its max batch), so extra requests
+    // queue — the high TTFT is queue wait, not compute; throughput is at its ceiling here.
+    match: { hw: "b300", variant: "pro", quant: "fp4", strategy: "high-throughput", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 103678, tpot_ms: 43.99, tokens_per_sec_per_gpu: 4203 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 4096 },
+        ttft_ms: 257656, tpot_ms: 42.13, tokens_per_sec_per_gpu: 4400 },
+    ],
+  },
+  // ====================================================================
+  // B300 + NVFP4
+  // ====================================================================
+  {
+    match: { hw: "b300", variant: "flash", quant: "nvfp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 187, tpot_ms: 2.83, tokens_per_sec_per_gpu: 729 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 410, tpot_ms: 7.68, tokens_per_sec_per_gpu: 3407 },
+    ],
+  },
+  {
+    match: { hw: "b300", variant: "pro", quant: "nvfp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 206, tpot_ms: 4.14, tokens_per_sec_per_gpu: 251 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 425, tpot_ms: 10.51, tokens_per_sec_per_gpu: 1256 },
+    ],
+  },
+  // ====================================================================
+  // GB200 + FP4
+  // ====================================================================
+  {
+    match: { hw: "gb200", variant: "flash", quant: "fp4", strategy: "low-latency", nodes: "single" },
+  },
+  {
+    match: { hw: "gb200", variant: "flash", quant: "fp4", strategy: "balanced", nodes: "single" },
+    sglang_version: "0.5.12.post1",
+    latencyPercentile: "Mean",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 2560, tpot_ms: 39.71, tokens_per_sec_per_gpu: 3078 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 3995, tpot_ms: 82.56, tokens_per_sec_per_gpu: 6462 },
+    ],
+  },
+  {
+    match: { hw: "gb200", variant: "flash", quant: "fp4", strategy: "high-throughput", nodes: "single" },
+  },
+  {
+    match: { hw: "gb200", variant: "pro", quant: "fp4", strategy: "low-latency", nodes: "multi-2" },
+  },
+  {
+    match: { hw: "gb200", variant: "pro", quant: "fp4", strategy: "balanced", nodes: "multi-2" },
+  },
+  {
+    match: { hw: "gb200", variant: "pro", quant: "fp4", strategy: "high-throughput", nodes: "multi-2" },
+  },
+  // ====================================================================
+  // GB200 + NVFP4
+  // ====================================================================
+  {
+    match: { hw: "gb200", variant: "flash", quant: "nvfp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "PR #25820",
+    latencyPercentile: "Mean",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 323.85, tpot_ms: 3.62, tokens_per_sec_per_gpu: 496 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 397.31, tpot_ms: 8.11, tokens_per_sec_per_gpu: 3663 },
+    ],
+    accuracy: { gsm8k_pct: 96.66 },
+  },
+  {
+    match: { hw: "gb200", variant: "pro", quant: "nvfp4", strategy: "low-latency", nodes: "multi-2" },
+    sglang_version: "PR #25820",
+    latencyPercentile: "Mean",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 338.20, tpot_ms: 6.25, tokens_per_sec_per_gpu: 161 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 524.85, tpot_ms: 14.45, tokens_per_sec_per_gpu: 1015 },
+    ],
+    accuracy: { gsm8k_pct: 95.98 },
+  },
+  // ====================================================================
+  // GB300 + FP4
+  // ====================================================================
+  {
+    match: { hw: "gb300", variant: "flash-official", quant: "fp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.16",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 468.93, tpot_ms: 1.31, tokens_per_sec_per_gpu: 930 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 726.81, tpot_ms: 8.84, tokens_per_sec_per_gpu: 2711 },
+    ],
+    accuracy: { gpqa_pct: 87.03, aime25_pct: 96.25, gsm8k_pct: 97.04 },
+  },
+  {
+    match: { hw: "gb300", variant: "flash-official", quant: "fp4", strategy: "balanced", nodes: "single" },
+    sglang_version: "0.5.16",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 1292.88, tpot_ms: 46.03, tokens_per_sec_per_gpu: 2678 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 5861.87, tpot_ms: 103.54, tokens_per_sec_per_gpu: 5030 },
+    ],
+  },
+  {
+    match: { hw: "gb300", variant: "flash-official", quant: "fp4", strategy: "high-throughput", nodes: "single" },
+    sglang_version: "0.5.16",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 156841.34, tpot_ms: 106.18, tokens_per_sec_per_gpu: 5520 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 4096 },
+        ttft_ms: 410259.84, tpot_ms: 105.33, tokens_per_sec_per_gpu: 5461 },
+    ],
+  },
+  {
+    match: { hw: "gb300", variant: "flash", quant: "fp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 434, tpot_ms: 3.72, tokens_per_sec_per_gpu: 513 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 735, tpot_ms: 9.95, tokens_per_sec_per_gpu: 2465 },
+    ],
+  },
+  {
+    match: { hw: "gb300", variant: "flash", quant: "fp4", strategy: "balanced", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 1041, tpot_ms: 30.45, tokens_per_sec_per_gpu: 4022 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 4291, tpot_ms: 85.9, tokens_per_sec_per_gpu: 6366 },
+    ],
+  },
+  {
+    match: { hw: "gb300", variant: "flash", quant: "fp4", strategy: "high-throughput", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 137866, tpot_ms: 93.14, tokens_per_sec_per_gpu: 6338 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 4096 },
+        ttft_ms: 364274, tpot_ms: 93.27, tokens_per_sec_per_gpu: 6246 },
+    ],
+  },
+  {
+    match: { hw: "gb300", variant: "pro", quant: "fp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 317, tpot_ms: 4.49, tokens_per_sec_per_gpu: 441 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 501, tpot_ms: 14.54, tokens_per_sec_per_gpu: 1934 },
+    ],
+  },
+  {
+    match: { hw: "gb300", variant: "pro", quant: "fp4", strategy: "balanced", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 1088, tpot_ms: 50.17, tokens_per_sec_per_gpu: 2455 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 8122, tpot_ms: 156.18, tokens_per_sec_per_gpu: 3429 },
+    ],
+  },
+  {
+    match: { hw: "gb300", variant: "pro", quant: "fp4", strategy: "high-throughput", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 288182, tpot_ms: 185.19, tokens_per_sec_per_gpu: 2832 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 4096 },
+        ttft_ms: 761128, tpot_ms: 188.23, tokens_per_sec_per_gpu: 2787 },
+    ],
+  },
+  // ====================================================================
+  // GB300 + NVFP4
+  // ====================================================================
+  {
+    match: { hw: "gb300", variant: "flash", quant: "nvfp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 430, tpot_ms: 3.51, tokens_per_sec_per_gpu: 537 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 734, tpot_ms: 10.59, tokens_per_sec_per_gpu: 2385 },
+    ],
+  },
+  {
+    match: { hw: "gb300", variant: "pro", quant: "nvfp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 321, tpot_ms: 4.61, tokens_per_sec_per_gpu: 440 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 631, tpot_ms: 14.25, tokens_per_sec_per_gpu: 1921 },
+    ],
+  },
+  // ====================================================================
+  // H200 + FP8
+  // ====================================================================
+  {
+    match: { hw: "h200", variant: "flash", quant: "fp8", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 183, tpot_ms: 3.26, tokens_per_sec_per_gpu: 632 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 655, tpot_ms: 10.11, tokens_per_sec_per_gpu: 2752 },
+    ],
+  },
+  {
+    match: { hw: "h200", variant: "flash", quant: "fp8", strategy: "balanced", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 880, tpot_ms: 40.63, tokens_per_sec_per_gpu: 3156 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 46563, tpot_ms: 89.82, tokens_per_sec_per_gpu: 3226 },
+    ],
+  },
+  {
+    match: { hw: "h200", variant: "flash", quant: "fp8", strategy: "high-throughput", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 217694, tpot_ms: 146.95, tokens_per_sec_per_gpu: 3975 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 4096 },
+        ttft_ms: 576540, tpot_ms: 148.29, tokens_per_sec_per_gpu: 3920 },
+    ],
+  },
+  {
+    match: { hw: "h200", variant: "pro", quant: "fp8", strategy: "low-latency", nodes: "multi-2" },
+  },
+  {
+    match: { hw: "h200", variant: "pro", quant: "fp8", strategy: "balanced", nodes: "multi-2" },
+  },
+  {
+    match: { hw: "h200", variant: "pro", quant: "fp8", strategy: "high-throughput", nodes: "multi-2" },
+  },
+  // ====================================================================
+  // H200 + FP4
+  // ====================================================================
+  {
+    match: { hw: "h200", variant: "flash-official", quant: "fp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.16",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 308.29, tpot_ms: 1.72, tokens_per_sec_per_gpu: 606 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 661.70, tpot_ms: 8.39, tokens_per_sec_per_gpu: 2538 },
+    ],
+  },
+  {
+    match: { hw: "h200", variant: "flash-official", quant: "fp4", strategy: "balanced", nodes: "single" },
+    sglang_version: "0.5.16",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 1617.91, tpot_ms: 38.05, tokens_per_sec_per_gpu: 2994 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 1931.94, tpot_ms: 104.53, tokens_per_sec_per_gpu: 4872 },
+    ],
+  },
+  {
+    match: { hw: "h200", variant: "flash-official", quant: "fp4", strategy: "high-throughput", nodes: "single" },
+    sglang_version: "0.5.16",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 195108.42, tpot_ms: 123.81, tokens_per_sec_per_gpu: 4573 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 4096 },
+        ttft_ms: 505508.73, tpot_ms: 123.97, tokens_per_sec_per_gpu: 4542 },
+    ],
+  },
+  {
+    match: { hw: "h200", variant: "flash", quant: "fp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 242, tpot_ms: 3.37, tokens_per_sec_per_gpu: 603 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 498, tpot_ms: 10.19, tokens_per_sec_per_gpu: 2636 },
+    ],
+  },
+  {
+    match: { hw: "h200", variant: "flash", quant: "fp4", strategy: "balanced", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 864, tpot_ms: 34.12, tokens_per_sec_per_gpu: 3072 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 3222, tpot_ms: 116.3, tokens_per_sec_per_gpu: 3768 },
+    ],
+  },
+  {
+    match: { hw: "h200", variant: "flash", quant: "fp4", strategy: "high-throughput", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 193812, tpot_ms: 126.31, tokens_per_sec_per_gpu: 4503 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 4096 },
+        ttft_ms: 499528, tpot_ms: 125.07, tokens_per_sec_per_gpu: 4546 },
+    ],
+  },
+  {
+    match: { hw: "h200", variant: "pro", quant: "fp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 634, tpot_ms: 5.65, tokens_per_sec_per_gpu: 170 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 1727, tpot_ms: 23.12, tokens_per_sec_per_gpu: 559 },
+    ],
+  },
+  {
+    // Capacity-bound on 8xH200 for the 1.6T model: KV fits only ~15 concurrent requests, so
+    // tok/s/GPU is pinned (~535-572) from conc 64 through the ht conc-4096 cell and the excess
+    // concurrency just queues — P50 TTFT climbs to ~46s here and minutes at higher conc. The
+    // throughput numbers are real but reflect that ceiling, not linear scaling.
+    match: { hw: "h200", variant: "pro", quant: "fp4", strategy: "balanced", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 41506, tpot_ms: 26.14, tokens_per_sec_per_gpu: 589 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 209586, tpot_ms: 28.23, tokens_per_sec_per_gpu: 591 },
+    ],
+  },
+  {
+    match: { hw: "h200", variant: "pro", quant: "fp4", strategy: "high-throughput", nodes: "single" },
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 889185, tpot_ms: 66.39, tokens_per_sec_per_gpu: 594 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 4096 },
+        ttft_ms: 1833386, tpot_ms: 65.86, tokens_per_sec_per_gpu: 601 },
+    ],
+  },
+  // ====================================================================
+  // H100 + FP4
+  // ====================================================================
+  {
+    match: { hw: "h100", variant: "flash", quant: "fp4", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.15",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 205, tpot_ms: 3.19, tokens_per_sec_per_gpu: 319 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 469, tpot_ms: 8.48, tokens_per_sec_per_gpu: 1539 },
+    ],
+  },
+  {
+    match: { hw: "h100", variant: "flash", quant: "fp4", strategy: "balanced", nodes: "single" },
+    sglang_version: "0.5.15",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 726, tpot_ms: 23.11, tokens_per_sec_per_gpu: 2306 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 35793, tpot_ms: 48.46, tokens_per_sec_per_gpu: 2416 },
+    ],
+  },
+  {
+    match: { hw: "h100", variant: "flash", quant: "fp4", strategy: "high-throughput", nodes: "single" },
+    sglang_version: "0.5.15",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 209393, tpot_ms: 65.31, tokens_per_sec_per_gpu: 2252 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 4096 },
+        ttft_ms: 476764, tpot_ms: 66.0, tokens_per_sec_per_gpu: 2248 },
+    ],
+  },
+  {
+    match: { hw: "h100", variant: "pro", quant: "fp4", strategy: "low-latency", nodes: "multi-2" },
+  },
+  {
+    match: { hw: "h100", variant: "pro", quant: "fp4", strategy: "balanced", nodes: "multi-2" },
+  },
+  {
+    match: { hw: "h100", variant: "pro", quant: "fp4", strategy: "high-throughput", nodes: "multi-2" },
+  },
+  // ====================================================================
+  // MI300X + FP8 (Flash)
+  { match: { hw: "mi300x", variant: "flash", quant: "fp8", strategy: "low-latency", nodes: "single" } },
+  { match: { hw: "mi300x", variant: "flash", quant: "fp8", strategy: "balanced", nodes: "single" } },
+  { match: { hw: "mi300x", variant: "flash", quant: "fp8", strategy: "high-throughput", nodes: "single" } },
+  // MI355X + FP4 (Flash)
+  { match: { hw: "mi355x", variant: "flash", quant: "fp4", strategy: "low-latency", nodes: "single" } },
+  { match: { hw: "mi355x", variant: "flash", quant: "fp4", strategy: "balanced", nodes: "single" } },
+  { match: { hw: "mi355x", variant: "flash", quant: "fp4", strategy: "high-throughput", nodes: "single" } },
+  // MI355X + FP8 (Flash)
+  { match: { hw: "mi355x", variant: "flash", quant: "fp8", strategy: "low-latency", nodes: "single" } },
+  { match: { hw: "mi355x", variant: "flash", quant: "fp8", strategy: "balanced", nodes: "single" } },
+  { match: { hw: "mi355x", variant: "flash", quant: "fp8", strategy: "high-throughput", nodes: "single" } },
+  // MI355X + FP4 (Pro)
+  { match: { hw: "mi355x", variant: "pro", quant: "fp4", strategy: "low-latency", nodes: "single" } },
+  { match: { hw: "mi355x", variant: "pro", quant: "fp4", strategy: "balanced", nodes: "single" } },
+  { match: { hw: "mi355x", variant: "pro", quant: "fp4", strategy: "high-throughput", nodes: "single" } },
+  // MI355X + FP8 (Pro)
+  { match: { hw: "mi355x", variant: "pro", quant: "fp8", strategy: "low-latency", nodes: "single" } },
+  { match: { hw: "mi355x", variant: "pro", quant: "fp8", strategy: "balanced", nodes: "single" } },
+  { match: { hw: "mi355x", variant: "pro", quant: "fp8", strategy: "high-throughput", nodes: "single" } },
+];

docs/src/snippets/configs/meituan-longcat/longcat-2.0-benchmarks.jsx

@@ -0,0 +1,10 @@
+// LongCat-2.0 per-cell benchmark numbers, keyed by the same `match` tuple as longcat-2.0.jsx cells.
+// See _deployment.jsx for the speed/accuracy schema.
+export const benchmarks = [
+  {
+    match: { hw: "b300", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" },
+    sglang_version: "SGLang nightly",
+    accuracy: { gsm8k_pct: 95.8904109589041 },
+    notes: "GSM8K was also spot-checked on 200 examples at 98.0%.",
+  },
+];

docs/src/snippets/configs/meituan-longcat/longcat-2.0.jsx

@@ -0,0 +1,203 @@
+// Single `export const config` literal - no spreads/calls/IIFE (Mintlify re-evals at hydration).
+// Cells are denormalized: no `--nnodes`/`--node-rank`/`--dist-init-addr` literals - engine injects them.
+
+export const config = {
+  modelName: "LongCat-2.0",
+
+  supportedHardware: ["b300", "b200", "h200", "h20"],
+
+  // Model-specific GPUs the shared HARDWARE_CATALOG does not carry.
+  hardware: [
+    { id: "h20", label: "H20", vram: "96GB", vendor: "hopper" },
+  ],
+
+  variants: [
+    { id: "default", label: "LongCat-2.0", subtitle: "1.6T MoE · LSA" },
+  ],
+  quantizations: [
+    { id: "fp8", label: "FP8" },
+  ],
+  strategies: [
+    { id: "balanced", label: "Balanced" },
+  ],
+  nodesOptions: [
+    { id: "single",  label: "Single Node" },
+    { id: "multi-2", label: "Multi-Nodes" },
+  ],
+
+  modelNames: {
+    "default|fp8": "meituan-longcat/LongCat-2.0-FP8",
+  },
+
+  placeholders: {
+    HOST_IP:   { target: "command", label: "Bind host",         default: "0.0.0.0"  },
+    PORT:      { target: "command", label: "Bind port",         default: "30000"    },
+    NODE0_IP:  { target: "command", label: "Head node IP",      default: "<node0-ip>"   },
+    NODE_RANK: { target: "command", label: "This node rank",    default: "<node-rank>"  },
+    HF_TOKEN:  { target: "command", label: "HF token (Docker)", default: "<your-hf-token>" },
+    CURL_HOST: { target: "curl",    label: "Server host",       default: "localhost" },
+    CURL_PORT: { target: "curl",    label: "Server port",       default: "30000"     },
+  },
+
+  curl: `curl http://{{CURL_HOST}}:{{CURL_PORT}}/v1/chat/completions \\
+-H 'Content-Type: application/json' \\
+-d '{ "model": "{{MODEL_NAME}}", "messages": [{"role":"user","content":"Hello"}] }'`,
+
+  // Reproduce commands for the Benchmark card's "Reproduce" modal.
+  benchmarkCommands: {
+    speed:
+`python3 -m sglang.bench_serving \\
+  --backend sglang \\
+  --host {{CURL_HOST}} --port {{CURL_PORT}} \\
+  --model {{MODEL_NAME}} \\
+  --dataset-name {{DATASET}} \\
+  --random-input-len {{ISL}} --random-output-len {{OSL}} \\
+  --random-range-ratio 1.0 \\
+  --num-prompts {{NUM_PROMPTS}} --max-concurrency {{MAX_CONCURRENCY}} \\
+  --warmup-requests 64 --flush-cache`,
+    accuracy: {
+      gsm8k_pct:
+`# To install sgl-eval: pip install git+https://github.com/sgl-project/sgl-eval
+sgl-eval run gsm8k \\
+  --base-url http://{{CURL_HOST}}:{{CURL_PORT}}/v1 \\
+  --num-threads 32`,
+    },
+    numPromptsByConc: { 1: 8, 16: 64, 64: 128, 256: 512, 1024: 2048 },
+  },
+
+  accuracyLabels: [
+    ["gsm8k_pct", "GSM8K", "%"],
+  ],
+
+  dockerImages: {
+    b300: "lmsysorg/sglang:dev-cu13",
+    b200: "lmsysorg/sglang:dev",
+    h200: "lmsysorg/sglang:dev",
+    h20:  "lmsysorg/sglang:dev",
+  },
+
+  github: {
+    cookbookModel: "meituan-longcat/LongCat-2.0-FP8",
+  },
+
+  playgroundFeatures: {
+    attention: {
+      knobs: [
+        { id: "tp", label: "TP", values: [
+          null,
+          8,
+          { value: 16, disable: { nodes: ["single"] },
+            disableReason: "TP=16 requires 16 ranks - switch the Deploy panel's Nodes to Multi-Nodes first." },
+        ]},
+      ],
+    },
+
+    moe: {
+      backend: {
+        options: [
+          { id: null,     label: "Inherited" },
+          { id: "deepep", label: "DeepEP", flags: ["--moe-a2a-backend deepep"] },
+        ],
+      },
+      ep: { label: "EP", values: [
+        null,
+        8,
+        { value: 16, disable: { nodes: ["single"] },
+          disableReason: "EP=16 requires 16 ranks - switch the Deploy panel's Nodes to Multi-Nodes first." },
+      ]},
+    },
+
+    hicache: {
+      backends: [
+        { id: null,       label: "Auto" },
+        { id: "file",     label: "File" },
+        { id: "mooncake", label: "Mooncake" },
+      ],
+      writePolicies: [
+        { id: "auto",          label: "Auto" },
+        { id: "write_through", label: "Write-through" },
+        { id: "write_back",    label: "Write-back" },
+      ],
+    },
+  },
+
+  cells: [
+    {
+      match: { hw: "b300", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 8",
+        "--ep 8",
+        "--max-running-requests 64",
+        "--mem-fraction-static 0.92",
+        "--chunked-prefill-size 2048",
+        "--nsa-prefill-backend fa3",
+        "--kv-cache-dtype bfloat16",
+        "--model-loader-extra-config '{\"enable_multithread_load\":true,\"num_threads\":12}'",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+
+    {
+      match: { hw: "b200", variant: "default", quant: "fp8", strategy: "balanced", nodes: "multi-2" },
+      verified: false,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 16",
+        "--ep 16",
+        "--max-running-requests 64",
+        "--mem-fraction-static 0.92",
+        "--chunked-prefill-size 2048",
+        "--nsa-prefill-backend fa3",
+        "--kv-cache-dtype bfloat16",
+        "--model-loader-extra-config '{\"enable_multithread_load\":true,\"num_threads\":12}'",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "default", quant: "fp8", strategy: "balanced", nodes: "multi-2" },
+      verified: false,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 16",
+        "--ep 16",
+        "--max-running-requests 64",
+        "--mem-fraction-static 0.92",
+        "--chunked-prefill-size 2048",
+        "--nsa-prefill-backend fa3",
+        "--kv-cache-dtype bfloat16",
+        "--model-loader-extra-config '{\"enable_multithread_load\":true,\"num_threads\":12}'",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h20", variant: "default", quant: "fp8", strategy: "balanced", nodes: "multi-2" },
+      verified: false,
+      env: [],
+      flags: [
+        "--trust-remote-code",
+        "--model-path {{MODEL_NAME}}",
+        "--tp 16",
+        "--ep 16",
+        "--max-running-requests 64",
+        "--mem-fraction-static 0.92",
+        "--chunked-prefill-size 2048",
+        "--nsa-prefill-backend fa3",
+        "--kv-cache-dtype bfloat16",
+        "--model-loader-extra-config '{\"enable_multithread_load\":true,\"num_threads\":12}'",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+  ],
+};

docs/src/snippets/configs/moonshotai/kimi-k3-benchmarks.jsx

@@ -0,0 +1,22 @@
+export const benchmarks = [
+  { match: { hw: "b300",  pdMode: "unified", strategy: "balanced"    } },
+  { match: { hw: "b300",  pdMode: "unified", strategy: "low-latency" } },
+  { match: { hw: "b300",  pdMode: "unified", strategy: "high-throughput"    } },
+  { match: { hw: "b200",  pdMode: "unified", strategy: "low-latency" } },
+  { match: { hw: "b200",  pdMode: "unified", strategy: "balanced"    } },
+  { match: { hw: "b200",  pdMode: "unified", strategy: "high-throughput"    } },
+  { match: { hw: "mi350x", pdMode: "unified", strategy: "balanced"    } },
+  { match: { hw: "mi355x", pdMode: "unified", strategy: "balanced"    } },
+  { match: { hw: "h100",  pdMode: "unified", strategy: "low-latency" } },
+  { match: { hw: "h100",  pdMode: "unified", strategy: "balanced"    } },
+  { match: { hw: "h100",  pdMode: "unified", strategy: "high-throughput"    } },
+  { match: { hw: "h200",  pdMode: "unified", strategy: "low-latency" } },
+  { match: { hw: "h200",  pdMode: "unified", strategy: "balanced"    } },
+  { match: { hw: "h200",  pdMode: "unified", strategy: "high-throughput"    } },
+  { match: { hw: "gb300", pdMode: "unified", strategy: "low-latency" } },
+  { match: { hw: "gb300", pdMode: "unified", strategy: "balanced"    } },
+  { match: { hw: "gb300", pdMode: "unified", strategy: "high-throughput"    } },
+  { match: { hw: "gb200", pdMode: "unified", strategy: "low-latency" } },
+  { match: { hw: "gb200", pdMode: "unified", strategy: "balanced"    } },
+  { match: { hw: "gb200", pdMode: "unified", strategy: "high-throughput"    } },
+];

docs/src/snippets/configs/poolside/laguna-m1-benchmarks.jsx

@@ -0,0 +1,84 @@
+// Laguna-M.1 benchmarks — one entry per cell `match` (same 5 keys as laguna-m1.jsx cells).
+//
+// All numbers below are REAL measured values; cells without measurements are bare `{ match }`
+// pending stubs (the card renders "pending"). NO fabricated/dummy numbers.
+// Accuracy axis is GSM8K-only for now (AIME 25 will be re-added once truncation-free numbers exist).
+//
+// REAL GSM8K (sgl-eval `run gsm8k`, full 1319, non-thinking):
+//   H200 BF16 (tp8): 93.02%  · perf bench_serving random 4096/1024 (cc1, cc128).
+//   H200 FP8  (tp8): 93.25%.
+//   B200 BF16 (tp8): 91.88%  · perf A/B (cc1, cc128).
+//   B200 FP8  (tp8): 93.78%  — with `--fp8-gemm-backend triton` (DeepGEMM UE8M0 workaround; ~19% slower).
+//   B200 NVFP4 (tp8): 89.38%.
+// (perf tokens_per_sec_per_gpu = total (in+out) tok/s/GPU = measured output tok/s ÷ 8 × (isl+osl)/osl; TTFT = median.)
+//
+// sglang_version = the build the numbers ran on (PR #28400 + #28604, +#28649 for FP8 load,
+// +#28662/triton-workaround for Blackwell FP8). H200 numbers taken on a main build @ 3f668733.
+
+export const benchmarks = [
+  // ===== H200 — BF16 / FP8 =====
+  {
+    // ✅ REAL — 8xH200, BF16, tp8. GSM8K 0.9302; perf bench_serving random 4096/1024.
+    match: { hw: "h200", variant: "default", quant: "bf16", strategy: "balanced", nodes: "single" },
+    verified: true,
+    sglang_version: "main @ 3f668733 (#28400 + #28604)",
+    speed: [
+      // cc=1: median TTFT 81.89 ms, median TPOT 8.91 ms, output 109.96 tok/s (÷8 ≈ 13.7 output/GPU → 69 total/GPU).
+      { workload: { dataset: "random", isl: 4096, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 81.9, tpot_ms: 8.91, tokens_per_sec_per_gpu: 69 },
+      // cc=128: median TTFT 200.11 ms (mean 1221), median TPOT 52.09 ms, output 2266 tok/s (÷8 ≈ 283 output/GPU → 1415 total/GPU).
+      { workload: { dataset: "random", isl: 4096, osl: 1024, max_concurrency: 128 },
+        ttft_ms: 200.1, tpot_ms: 52.1, tokens_per_sec_per_gpu: 1415 },
+    ],
+    accuracy: { gsm8k_pct: 93.02 },
+  },
+  {
+    // ✅ REAL — 8xH200, FP8, tp8. GSM8K 93.25%. (Hopper: no --fp8-gemm-backend flag needed.)
+    match: { hw: "h200", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" },
+    verified: true,
+    sglang_version: "main @ 3f668733 (#28400 + #28604 + g_proj FP8 fix #28649)",
+    accuracy: { gsm8k_pct: 93.25 },
+  },
+
+  // ===== B200 (8-GPU HGX) — BF16 / FP8 / NVFP4 =====
+  {
+    // ✅ REAL — 8xB200, BF16, tp8. GSM8K 91.88; perf A/B (laguna-m1-results.md).
+    match: { hw: "b200", variant: "default", quant: "bf16", strategy: "balanced", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #28400 + #28604",
+    speed: [
+      { workload: { dataset: "random", isl: 4096, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 108, tpot_ms: 9.0, tokens_per_sec_per_gpu: 68 },
+      { workload: { dataset: "random", isl: 4096, osl: 1024, max_concurrency: 128 },
+        ttft_ms: 170, tpot_ms: 43.3, tokens_per_sec_per_gpu: 1655 },
+    ],
+    accuracy: { gsm8k_pct: 91.88 },
+  },
+  {
+    // ✅ REAL — 8xB200, FP8, tp8, with --fp8-gemm-backend triton. GSM8K 93.78% (full 1319,
+    // laguna-m1-results.md). Matches H200 FP8 (93.25) within noise; sits above B200 NVFP4 (89.38).
+    match: { hw: "b200", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" },
+    verified: true,
+    sglang_version: "main + #28649 + --fp8-gemm-backend triton (DeepGEMM UE8M0 workaround; fix = PR #28662)",
+    accuracy: { gsm8k_pct: 93.78 },
+  },
+  {
+    // ✅ REAL — 8xB200, NVFP4, tp8. GSM8K 89.38% (laguna-m1-results.md).
+    match: { hw: "b200", variant: "default", quant: "nvfp4", strategy: "balanced", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #28400 + #28604",
+    accuracy: { gsm8k_pct: 89.38 },
+  },
+
+  // ===== B300 / GB200 / GB300 — BF16 / FP8 / NVFP4, UNVERIFIED → bare "pending" stubs (no
+  // fabricated numbers). Blackwell FP8 cells carry --fp8-gemm-backend triton in the config. =====
+  { match: { hw: "b300",  variant: "default", quant: "bf16",  strategy: "balanced", nodes: "single" } },
+  { match: { hw: "b300",  variant: "default", quant: "fp8",   strategy: "balanced", nodes: "single" } },
+  { match: { hw: "b300",  variant: "default", quant: "nvfp4", strategy: "balanced", nodes: "single" } },
+  { match: { hw: "gb200", variant: "default", quant: "bf16",  strategy: "balanced", nodes: "single" } },
+  { match: { hw: "gb200", variant: "default", quant: "fp8",   strategy: "balanced", nodes: "single" } },
+  { match: { hw: "gb200", variant: "default", quant: "nvfp4", strategy: "balanced", nodes: "single" } },
+  { match: { hw: "gb300", variant: "default", quant: "bf16",  strategy: "balanced", nodes: "single" } },
+  { match: { hw: "gb300", variant: "default", quant: "fp8",   strategy: "balanced", nodes: "single" } },
+  { match: { hw: "gb300", variant: "default", quant: "nvfp4", strategy: "balanced", nodes: "single" } },
+];

docs/src/snippets/configs/poolside/laguna-m1.jsx

@@ -0,0 +1,424 @@
+// Laguna-M.1 (poolside) — config-driven cookbook page.
+// Consumed by the shared _deployment.jsx + _playground.jsx engines (no model code there).
+//
+// Build: M.1 needs SGLang PR #28400 (softplus per-element output gating, MERGED) AND PR #28604
+// (global-attention SWA fix — M.1 is sliding_window=0 / all-global; without it M.1 crashes ~1s
+// into any concurrent batch with AssertionError: ... swa_lock_ref=0). Both are merged on main
+// (verified on a 3f668733 build). The shipped recipe carries NO SWA workaround flag, but the pinned
+// build MUST contain BOTH; the #28400-merge wheel 0.5.14.dev20260618+g343aeeef39 is #28400-ONLY
+// and crashes under load. Pin dockerImages + benchmarks.sglang_version to a build at a commit
+// ≥ #28604. See /sgl-workspace/laguna-m1-day0-checklist.md (step 2) + laguna-m1-results.md.
+//
+// --trust-remote-code is required: M.1 ships custom config code on the Hub (the transformers-native
+// `laguna` config is incompatible). Carried on every cell.
+//
+// Hardware: H200 (Hopper) + B200/B300/GB200/GB300 (Blackwell).
+//   - BF16 runs everywhere.
+//   - FP8 runs everywhere. On Blackwell (sm_100) the compressed-tensors block-FP8 weight scales
+//     aren't UE8M0-packed, so the default DeepGEMM path produces garbage → the Blackwell FP8 cells
+//     add `--fp8-gemm-backend triton` (correct, ~19% slower than DeepGEMM). Temporary until the
+//     ue8m0-requant fix (PR #28662) lands; H200 FP8 (Hopper) is unaffected and needs no flag.
+//   - NVFP4 is Blackwell-only.
+// Cells: H200×{BF16,FP8}; each Blackwell×{BF16,FP8,NVFP4}.
+// TP: 8-GPU HGX nodes (H200/B200/B300) → --tp 8 (the maintainer's baseline); GB200/GB300
+// (Grace-Blackwell, typically 4-GPU single node) → --tp 4. Adjust --tp to your node size.
+//
+// Strategy: a SINGLE "Balanced" operating point (maintainer decision — no LL/HT split; an
+// earlier TP=8+DP-Attention "high-throughput" idea was dropped: DP-Attention is ~15% SLOWER
+// on this GQA model, see laguna-m1-results.md).
+
+export const config = {
+  modelName: "Laguna-M.1",
+
+  supportedHardware: ["h200", "b200", "b300", "gb200", "gb300"],
+
+  variants: [
+    { id: "default", label: "Default" },
+  ],
+
+  quantizations: [
+    { id: "bf16",  label: "BF16"  },
+    { id: "fp8",   label: "FP8"   },
+    { id: "nvfp4", label: "NVFP4" },
+  ],
+
+  // Single balanced operating point (maintainer decision — no LL/HT split).
+  strategies: [
+    { id: "balanced", label: "Balanced" },
+  ],
+
+  nodesOptions: [
+    { id: "single", label: "Single Node" },
+  ],
+
+  modelNames: {
+    "default|bf16":  "poolside/Laguna-M.1",
+    "default|fp8":   "poolside/Laguna-M.1-FP8",
+    "default|nvfp4": "poolside/Laguna-M.1-NVFP4",
+  },
+
+  placeholders: {
+    HOST_IP:   { target: "command", label: "Bind host",         default: "0.0.0.0"         },
+    PORT:      { target: "command", label: "Bind port",         default: "30000"           },
+    HF_TOKEN:  { target: "command", label: "HF token (Docker)", default: "<your-hf-token>" },
+    CURL_HOST: { target: "curl",    label: "Server host",       default: "localhost"       },
+    CURL_PORT: { target: "curl",    label: "Server port",       default: "30000"           },
+  },
+
+  curl: `curl http://{{CURL_HOST}}:{{CURL_PORT}}/v1/chat/completions \\
+-H 'Content-Type: application/json' \\
+-d '{ "model": "{{MODEL_NAME}}", "messages": [{"role":"user","content":"Hello"}] }'`,
+
+  benchmarkCommands: {
+    speed:
+`python3 -m sglang.bench_serving \\
+  --backend sglang \\
+  --host {{CURL_HOST}} --port {{CURL_PORT}} \\
+  --model {{MODEL_NAME}} \\
+  --dataset-name {{DATASET}} \\
+  --random-input-len {{ISL}} --random-output-len {{OSL}} \\
+  --num-prompts {{NUM_PROMPTS}} --max-concurrency {{MAX_CONCURRENCY}}`,
+    // GSM8K is the required accuracy sanity on every verified cell (cookbook_guide §3), via sgl-eval.
+    // (AIME 25 to be added back once truncation-free numbers are measured.)
+    accuracy: {
+      gsm8k_pct:
+`# pip install git+https://github.com/sgl-project/sgl-eval
+sgl-eval run gsm8k \\
+  --base-url http://{{CURL_HOST}}:{{CURL_PORT}}/v1 \\
+  --num-threads 128`,
+    },
+    numPromptsByConc: { 1: 8, 16: 32, 64: 128, 128: 256, 256: 512, 1024: 2048, 4096: 4096 },
+  },
+
+  // Hardware-independent accuracy default (null = no variant-wide default; real numbers are per-cell
+  // in laguna-m1-benchmarks.jsx).
+  defaultAccuracy: {
+    default: { gsm8k_pct: null },
+  },
+
+  accuracyLabels: [
+    ["gsm8k_pct", "GSM8K", "%"],
+  ],
+
+  // lmsysorg/sglang:latest (cu13) covers H200 + all Blackwell and carries the
+  // Laguna-M.1 build (PR #28400 + #28604 + #28649, incl. the FP8 g_proj fix).
+  dockerImages: {
+    h200:  "lmsysorg/sglang:latest",
+    b200:  "lmsysorg/sglang:latest",
+    b300:  "lmsysorg/sglang:latest",
+    gb200: "lmsysorg/sglang:latest",
+    gb300: "lmsysorg/sglang:latest",
+  },
+
+  github: {
+    cookbookModel: "poolside/Laguna-M.1",
+  },
+
+  playgroundFeatures: {
+
+    // M.1 is global-attention (no SWA); expose TP + DP-Attention here. No CP: the default
+    // trtllm_mha backend has no CP-aware KV-store (crashes), and the engine's built-in attention CP
+    // knob emits prefill-CP flags (--enable-prefill-cp / --cp-strategy / --attn-cp-size) that apply
+    // to DeepSeek-family models, not M.1. (CP works only via the fa3 backend, which is Hopper
+    // SM90 — left out here.)
+    // DP-Attention: VERIFIED functionally correct on 8×B200 BF16 (GSM8K 0.94, identical to the TP
+    // baseline) but ~15–28% slower on this GQA model (8 KV heads). Playground experiment only —
+    // deliberately NOT in the shipped Balanced recipe.
+    attention: {
+      knobs: [
+        { id: "tp",     label: "TP",           values: [null, 1, 2, 4, 8] },
+        { id: "dpAttn", label: "DP-Attention", values: [null, false, 1, 2, 4, 8],
+          labels: { "auto": "Auto", "false": "Off" } },
+      ],
+    },
+
+    // 256-expert top-16 MoE — EP degree only.
+    // EP: VERIFIED on 8×B200 BF16 (--ep-size 8, GSM8K 0.94, identical to the TP baseline).
+    // DeepEP intentionally NOT exposed — it does not work on M.1: top-16 routing exceeds DeepEP's
+    // low-latency internode kernel cap of 11 (internode_ll.cu kNumMaxTopK=11) → assert at decode
+    // CUDA-graph capture, and `--deepep-mode normal` is NotImplemented for unquantized weights. Use EP.
+    moe: {
+      ep: { label: "EP", values: [null, 1, 2, 4, 8] },
+    },
+
+    // Reasoning + tool-call parsers (poolside_v1, same family as Laguna-XS.2). ALSO baked into
+    // every Deploy cell below (the maintainer's baseline carries them).
+    parsers: {
+      items: [
+        { id: "reasoning", label: "Reasoning Parser", flag: "--reasoning-parser poolside_v1" },
+        { id: "toolCall",  label: "Tool Call Parser", flag: "--tool-call-parser poolside_v1" },
+      ],
+    },
+
+    // HiCache (hierarchical KV cache). VERIFIED on 8×B200 BF16: enabling the host L2 tier on a
+    // zipfian shared-prefix workload cut mean TTFT ~36% (median ~43%) and lifted throughput ~19% vs
+    // GPU-only, with ~1.14M tokens served from the host tier (TPOT unchanged — the win is on prefill
+    // / prefix reuse). Biggest gains on reuse-heavy traffic: shared system prompts, multi-turn
+    // agentic coding, repeated long contexts. "Enable" emits --enable-hierarchical-cache (+host L2);
+    // Write policy is optional. (L3 storage backends exist but were not validated, so none exposed.)
+    hicache: {
+      writePolicies: [
+        { id: "auto",          label: "Auto" },
+        { id: "write_through", label: "Write-through" },
+        { id: "write_back",    label: "Write-back" },
+      ],
+    },
+
+    // Prefill-Decode disaggregation (§3.3). M.1 is standard-KV (global attention, no sparse
+    // index buffer), so it disaggregates with just the --disaggregation-* flags — no model-specific
+    // backend pinning. Verified on 2×8×H200 (TP8+TP8, BF16) over InfiniBand.
+    pdDisagg: {
+      modes: [
+        { id: "off",     label: "Off" },
+        { id: "prefill", label: "Prefill role" },
+        { id: "decode",  label: "Decode role" },
+      ],
+      transferBackends: [
+        // mooncake (recommended): honors --disaggregation-ib-device, no transfer cold-start.
+        // The NCCL/MNNVL env is only needed on NVLink-multinode Grace-Blackwell (GB200/GB300).
+        { id: "mooncake", label: "Mooncake",
+          env: [
+            "NCCL_MNNVL_ENABLE=1",
+            "NCCL_CUMEM_ENABLE=1",
+            "SGLANG_MOONCAKE_CUSTOM_MEM_POOL=True",
+            "MC_FORCE_MNNVL=1",
+          ],
+          envWhen: { hw: ["gb200", "gb300"] } },
+        // NiXL ignores --disaggregation-ib-device; its UCX backend needs the NIC pinned via
+        // UCX_NET_DEVICES or every KV transfer hangs to the 300s timeout (§3.3). Baked in here
+        // for the IB-based HGX platforms; also expect a ~38s one-time UCX cold-start.
+        { id: "nixl",     label: "NiXL",
+          env: ["UCX_NET_DEVICES=mlx5_0:1"],
+          envWhen: { hw: ["h200", "b200", "b300"] } },
+      ],
+      ibDevices: [{ id: "auto", label: "Auto" }, "mlx5_0", "mlx5_7"],
+      router: {
+        port: 8000,
+        command:
+`python3 -m sglang_router.launch_router \\
+  --pd-disaggregation \\
+  --prefill http://<prefill-host>:{{PREFILL_PORT}} \\
+  --decode http://<decode-host>:{{DECODE_PORT}} \\
+  --policy round_robin \\
+  --host 0.0.0.0 --port {{ROUTER_PORT}}`,
+      },
+    },
+  },
+
+  // One Balanced cell per valid (hw × quant): H200×{BF16,FP8}; each Blackwell×{BF16,FP8,NVFP4}.
+  // Blackwell FP8 cells add `--fp8-gemm-backend triton` (DeepGEMM UE8M0 workaround, pending #28662);
+  // H200 FP8 needs no such flag. Baseline recipe (parsers poolside_v1 + --trust-remote-code) on every cell.
+  // TP: H200/B200/B300 = --tp 8; GB200/GB300 = --tp 4 (4-GPU single node).
+  // verified:true = ran that exact command on that hardware and it served correctly + passed a
+  // GSM8K-class eval. Absent verified = yellow/unverified badge.
+  cells: [
+    // ===== NVIDIA Hopper (H200) — BF16 / FP8 (NVFP4 is Blackwell-only) =====
+    {
+      // VERIFIED on 8xH200 (BF16, tp8): GSM8K 93.02% + perf (laguna-m1 H200 results).
+      match: { hw: "h200", variant: "default", quant: "bf16", strategy: "balanced", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // VERIFIED on 8xH200 (FP8, tp8): GSM8K 93.25%. FP8 needs the g_proj fix (PR #28649, MERGED) on
+      // top of #28400+#28604 — lmsysorg/sglang:latest has it. Hopper does NOT hit the
+      // Blackwell DeepGEMM UE8M0 issue, so no --fp8-gemm-backend flag here.
+      match: { hw: "h200", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    // ===== NVIDIA Blackwell B200 (8-GPU HGX) — BF16 / FP8 / NVFP4 =====
+    {
+      // VERIFIED on 8xB200 (BF16, tp8): served clean under batched shared-prefix load, GSM8K 91.88%.
+      match: { hw: "b200", variant: "default", quant: "bf16", strategy: "balanced", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // VERIFIED on 8xB200 (FP8, tp8): GSM8K 93.78% with --fp8-gemm-backend triton (laguna-m1-results.md).
+      // The triton backend sidesteps the DeepGEMM UE8M0 weight-scale bug on Blackwell (~19% slower than
+      // the DeepGEMM fast path). Drop the flag once PR #28662 (ue8m0 requant) merges.
+      match: { hw: "b200", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--fp8-gemm-backend triton",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // VERIFIED on 8xB200 (NVFP4, tp8): GSM8K 89.38% (laguna-m1-results.md).
+      match: { hw: "b200", variant: "default", quant: "nvfp4", strategy: "balanced", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    // ===== NVIDIA Blackwell B300 (8-GPU HGX) — BF16 / FP8 / NVFP4 (UNVERIFIED) =====
+    {
+      match: { hw: "b300", variant: "default", quant: "bf16", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // FP8 on Blackwell → --fp8-gemm-backend triton (DeepGEMM UE8M0 workaround, pending #28662).
+      match: { hw: "b300", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--fp8-gemm-backend triton",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", variant: "default", quant: "nvfp4", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    // ===== NVIDIA Grace-Blackwell GB200 (4-GPU single node) — BF16 / FP8 / NVFP4 (UNVERIFIED) =====
+    {
+      match: { hw: "gb200", variant: "default", quant: "bf16", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // FP8 on Blackwell → --fp8-gemm-backend triton (DeepGEMM UE8M0 workaround, pending #28662).
+      match: { hw: "gb200", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--fp8-gemm-backend triton",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "gb200", variant: "default", quant: "nvfp4", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    // ===== NVIDIA Grace-Blackwell GB300 (4-GPU single node) — BF16 / FP8 / NVFP4 (UNVERIFIED) =====
+    {
+      match: { hw: "gb300", variant: "default", quant: "bf16", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // FP8 on Blackwell → --fp8-gemm-backend triton (DeepGEMM UE8M0 workaround, pending #28662).
+      match: { hw: "gb300", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--fp8-gemm-backend triton",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "gb300", variant: "default", quant: "nvfp4", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+  ],
+};

docs/src/snippets/configs/poolside/laguna-s21-benchmarks.jsx

@@ -0,0 +1,218 @@
+export const benchmarks = [
+
+  // ── H200 (8×H200, tp 8, sglang 0.5.15.post1, random ISL=8192/OSL=1024) ──
+  // tokens_per_sec_per_gpu = (input+output) tok/s/GPU = output_tok_s / 8 * (8192+1024)/1024
+  // TTFT/TPOT are mean values from bench_serving.
+
+  {
+    match: { hw: "h200", variant: "default", quant: "bf16", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 23742, tpot_ms: 256.8, tokens_per_sec_per_gpu: 5264 },
+    ],
+    // BF16 reasons ~2× longer than FP8/INT4 (median 34.8k vs 16.9k tokens);
+    // truncation at max_tokens=64000 invalidates the result. Needs max_tokens ≥ 131072.
+    accuracy: { gsm8k_pct: 93.18, aime25_pct: null },
+  },
+  {
+    match: { hw: "h200", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 102.3, tpot_ms: 3.48, tokens_per_sec_per_gpu: 305 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 97.7, tpot_ms: 6.45, tokens_per_sec_per_gpu: 2094 },
+    ],
+    accuracy: { gsm8k_pct: 93.33, aime25_pct: null },
+  },
+  {
+    match: { hw: "h200", variant: "default", quant: "fp8", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 16199, tpot_ms: 293.2, tokens_per_sec_per_gpu: 5175 },
+    ],
+    accuracy: { gsm8k_pct: 94.24, aime25_pct: 0.654 },
+  },
+  {
+    match: { hw: "h200", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 97.7, tpot_ms: 4.43, tokens_per_sec_per_gpu: 242 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 99.4, tpot_ms: 7.16, tokens_per_sec_per_gpu: 1956 },
+    ],
+    accuracy: { gsm8k_pct: 94.47, aime25_pct: null },
+  },
+  {
+    match: { hw: "h200", variant: "default", quant: "int4", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 19886, tpot_ms: 318.5, tokens_per_sec_per_gpu: 5055 },
+    ],
+    accuracy: { gsm8k_pct: 95.00, aime25_pct: 0.690 },
+  },
+  {
+    match: { hw: "h200", variant: "default", quant: "int4", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 113.1, tpot_ms: 3.83, tokens_per_sec_per_gpu: 276 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 94.1, tpot_ms: 6.40, tokens_per_sec_per_gpu: 2125 },
+    ],
+    accuracy: { gsm8k_pct: 94.24, aime25_pct: null },
+  },
+
+  // ── B300 (8×B300, tp 8, sglang 0.5.15.post1) ──
+  // AIME25 (high-throughput cells): sgl-eval run aime25, 30 problems × 16 repeats,
+  // temp 1.0, top_p 0.95, max_tokens 64000 (BF16: 131072), 128 threads, thinking ON
+  // via enable_thinking-patched sgl-eval. 2026-07-21.
+
+  {
+    match: { hw: "b300", variant: "default", quant: "bf16", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    accuracy: { gsm8k_pct: 93.71, aime25_pct: null },
+  },
+  {
+    match: { hw: "b300", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    accuracy: { gsm8k_pct: 93.63, aime25_pct: null },
+  },
+  {
+    match: { hw: "b300", variant: "default", quant: "fp8", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    accuracy: { gsm8k_pct: 94.39, aime25_pct: 66.88 },
+  },
+  {
+    match: { hw: "b300", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    accuracy: { gsm8k_pct: 94.69, aime25_pct: null },
+  },
+  {
+    match: { hw: "b300", variant: "default", quant: "nvfp4", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    accuracy: { gsm8k_pct: 94.54, aime25_pct: 66.46 },
+  },
+  {
+    match: { hw: "b300", variant: "default", quant: "nvfp4", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    accuracy: { gsm8k_pct: 95.30, aime25_pct: null },
+  },
+  {
+    match: { hw: "b300", variant: "default", quant: "int4", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    accuracy: { gsm8k_pct: 94.62, aime25_pct: 68.33 },
+  },
+  {
+    match: { hw: "b300", variant: "default", quant: "int4", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    accuracy: { gsm8k_pct: 94.69, aime25_pct: null },
+  },
+
+  // ── GB300 (4×GB300, tp 4, sglang 0.5.15.post1, random ISL=8192/OSL=1024) ──
+  // tokens_per_sec_per_gpu = output_tok_s / 4 * (8192+1024)/1024
+  // TTFT/TPOT are median values from bench_serving.
+
+  {
+    match: { hw: "gb300", variant: "default", quant: "bf16", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    accuracy: { gsm8k_pct: 93.33, aime25_pct: null },
+  },
+  {
+    match: { hw: "gb300", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 114, tpot_ms: 4.2, tokens_per_sec_per_gpu: 562 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 141, tpot_ms: 8.4, tokens_per_sec_per_gpu: 3413 },
+    ],
+    accuracy: { gsm8k_pct: 93.33, aime25_pct: null },
+  },
+  {
+    match: { hw: "gb300", variant: "default", quant: "fp8", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 10062, tpot_ms: 216, tokens_per_sec_per_gpu: 9536 },
+    ],
+    accuracy: { gsm8k_pct: 94.31, aime25_pct: null },
+  },
+  {
+    match: { hw: "gb300", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 109, tpot_ms: 6.1, tokens_per_sec_per_gpu: 369 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 135, tpot_ms: 10.7, tokens_per_sec_per_gpu: 2578 },
+    ],
+    accuracy: { gsm8k_pct: 94.54, aime25_pct: null },
+  },
+  {
+    match: { hw: "gb300", variant: "default", quant: "nvfp4", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 7186, tpot_ms: 211, tokens_per_sec_per_gpu: 9658 },
+    ],
+    accuracy: { gsm8k_pct: 94.47, aime25_pct: null },
+  },
+  {
+    match: { hw: "gb300", variant: "default", quant: "nvfp4", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 115, tpot_ms: 11.2, tokens_per_sec_per_gpu: 204 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 125, tpot_ms: 18.8, tokens_per_sec_per_gpu: 1549 },
+    ],
+    accuracy: { gsm8k_pct: 94.77, aime25_pct: null },
+  },
+  {
+    match: { hw: "gb300", variant: "default", quant: "int4", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 10428, tpot_ms: 216, tokens_per_sec_per_gpu: 9184 },
+    ],
+    accuracy: { gsm8k_pct: 94.69, aime25_pct: null },
+  },
+  {
+    match: { hw: "gb300", variant: "default", quant: "int4", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "0.5.15.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 134, tpot_ms: 5.4, tokens_per_sec_per_gpu: 410 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 127, tpot_ms: 10.1, tokens_per_sec_per_gpu: 2880 },
+    ],
+    accuracy: { gsm8k_pct: 95.00, aime25_pct: null },
+  },
+];

docs/src/snippets/configs/poolside/laguna-s21.jsx

@@ -0,0 +1,506 @@
+// Laguna-S-2.1 (poolside) — 118B MoE (8B active), 1M context, laguna arch (SGLang main).
+// --trust-remote-code required (custom config code on Hub).
+//
+// Attention backend: leave unset for High-Throughput (auto-selects fa3/trtllm_mha).
+// With DFlash active, auto falls back to flashinfer which breaks hybrid-SWA at tp≥4
+// on Blackwell — Low-Latency cells pin the target backend explicitly.
+// Never use --attention-backend triton on Laguna (broken SWA handling).
+//
+// BF16 on H200 HT: --mem-fraction-static 0.80 required — BF16 leaves less headroom
+// for CUDA-graph capture and NCCL allocs than FP8/INT4 on 141 GB/GPU.
+// B300/GB300 (288 GB/GPU) unaffected.
+//
+// SGLANG_SHARED_EXPERT_TP1=1 (FP8 cells, all hardware): FP8 block-quantizes the shared
+// expert; required at both TP=4 (GB300) and TP=8 (H200/B300). INT4 shared expert stays
+// bf16 — no flag needed. Differs from Laguna-XS-2.1 where TP=4 works without this flag.
+//
+// NVFP4 is Blackwell-only → no h200×nvfp4 cells.
+// DFlash cells carry --mem-fraction-static 0.7.
+
+export const config = {
+  modelName: "Laguna-S-2.1",
+
+  supportedHardware: ["h200", "b300", "gb300"],
+
+  variants: [
+    { id: "default", label: "Default" },
+  ],
+
+  quantizations: [
+    { id: "bf16",  label: "BF16"  },
+    { id: "fp8",   label: "FP8"   },
+    { id: "nvfp4", label: "NVFP4" },
+    { id: "int4",  label: "INT4"  },
+  ],
+
+  strategies: [
+    { id: "low-latency",     label: "Low-latency" },
+    { id: "high-throughput", label: "High-throughput" },
+  ],
+
+  nodesOptions: [
+    { id: "single", label: "Single Node" },
+  ],
+
+  modelNames: {
+    "default|bf16":  "poolside/Laguna-S-2.1",
+    "default|fp8":   "poolside/Laguna-S-2.1-FP8",
+    "default|nvfp4": "poolside/Laguna-S-2.1-NVFP4",
+    "default|int4":  "poolside/Laguna-S-2.1-INT4",
+  },
+
+  placeholders: {
+    HOST_IP:   { target: "command", label: "Bind host",         default: "0.0.0.0"         },
+    PORT:      { target: "command", label: "Bind port",         default: "30000"           },
+    HF_TOKEN:  { target: "command", label: "HF token (Docker)", default: "<your-hf-token>" },
+    CURL_HOST: { target: "curl",    label: "Server host",       default: "localhost"       },
+    CURL_PORT: { target: "curl",    label: "Server port",       default: "30000"           },
+  },
+
+  curl: `curl http://{{CURL_HOST}}:{{CURL_PORT}}/v1/chat/completions \\
+-H 'Content-Type: application/json' \\
+-d '{ "model": "{{MODEL_NAME}}", "messages": [{"role":"user","content":"Hello"}] }'`,
+
+  benchmarkCommands: {
+    speed:
+`python3 -m sglang.bench_serving \\
+  --backend sglang \\
+  --host {{CURL_HOST}} --port {{CURL_PORT}} \\
+  --model {{MODEL_NAME}} \\
+  --dataset-name {{DATASET}} \\
+  --random-input-len {{ISL}} --random-output-len {{OSL}} \\
+  --num-prompts {{NUM_PROMPTS}} --max-concurrency {{MAX_CONCURRENCY}}`,
+    accuracy: {
+      gsm8k_pct:
+`# pip install git+https://github.com/sgl-project/sgl-eval
+sgl-eval run gsm8k \\
+  --base-url http://{{CURL_HOST}}:{{CURL_PORT}}/v1 \\
+  --num-threads 128`,
+      // Laguna's template gates on enable_thinking, not the generic 'thinking' key.
+      // Serve with a copy of the model's chat template whose enable_thinking default
+      // is flipped to true. For BF16: use --max-tokens 131072 (see Configuration Tips).
+      aime25_pct:
+`# pip install git+https://github.com/sgl-project/sgl-eval
+# Serve with an enable_thinking=true chat template (see Configuration Tips: Thinking).
+# For BF16: use --max-tokens 131072 (see Configuration Tips: BF16 reasoning length).
+sgl-eval run aime25 \\
+  --base-url http://{{CURL_HOST}}:{{CURL_PORT}}/v1 \\
+  --n-repeats 16 --max-tokens 64000 \\
+  --temperature 1.0 --top-p 0.95 --thinking \\
+  --num-threads 128`,
+    },
+    numPromptsByConc: { 1: 8, 16: 32, 64: 128, 128: 256, 256: 512, 1024: 2048, 4096: 4096 },
+  },
+
+  defaultAccuracy: {
+    default: { gsm8k_pct: null, aime25_pct: null },
+  },
+
+  accuracyLabels: [
+    ["gsm8k_pct", "GSM8K", "%"],
+    ["aime25_pct", "AIME25", "%"],
+  ],
+
+  dockerImages: {
+    h200:  "lmsysorg/sglang:latest",
+    b300:  "lmsysorg/sglang:dev",
+    gb300: "lmsysorg/sglang:dev",
+  },
+
+  github: {
+    cookbookModel: "poolside/Laguna-S-2.1",
+  },
+
+  playgroundFeatures: {
+    attention: {
+      knobs: [
+        { id: "tp", label: "TP", values: [null, 1, 2, 4, 8] },
+      ],
+    },
+    parsers: {
+      items: [
+        { id: "reasoning", label: "Reasoning Parser", flag: "--reasoning-parser poolside_v1" },
+        { id: "toolCall",  label: "Tool Call Parser", flag: "--tool-call-parser poolside_v1" },
+      ],
+    },
+  },
+
+  cells: [
+
+    // ══════════════ B300 FP8 low-latency — default (cells[0]) ══════════════
+
+    {
+      match: { hw: "b300", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: ["SGLANG_SHARED_EXPERT_TP1=1"],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--attention-backend trtllm_mha",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-S-2.1-DFlash-FP8",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+
+    // ══════════════ H200 (8-GPU HGX, tp 8) ══════════════
+
+    {
+      match: { hw: "h200", variant: "default", quant: "bf16", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--mem-fraction-static 0.80",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--attention-backend fa3",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-S-2.1-DFlash",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "default", quant: "fp8", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: ["SGLANG_SHARED_EXPERT_TP1=1"],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: ["SGLANG_SHARED_EXPERT_TP1=1"],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--attention-backend fa3",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-S-2.1-DFlash-FP8",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "default", quant: "int4", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "default", quant: "int4", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--attention-backend fa3",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-S-2.1-DFlash-INT4",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+
+    // ══════════════ B300 (8-GPU HGX, tp 8) ══════════════
+
+    {
+      match: { hw: "b300", variant: "default", quant: "bf16", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--attention-backend trtllm_mha",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-S-2.1-DFlash",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", variant: "default", quant: "fp8", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: ["SGLANG_SHARED_EXPERT_TP1=1"],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", variant: "default", quant: "nvfp4", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", variant: "default", quant: "nvfp4", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--attention-backend trtllm_mha",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-S-2.1-DFlash-NVFP4",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", variant: "default", quant: "int4", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", variant: "default", quant: "int4", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--attention-backend trtllm_mha",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-S-2.1-DFlash-INT4",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+
+    // ══════════════ GB300 (4-GPU single node, tp 4) ══════════════
+
+    {
+      match: { hw: "gb300", variant: "default", quant: "bf16", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "gb300", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--attention-backend trtllm_mha",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-S-2.1-DFlash",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "gb300", variant: "default", quant: "fp8", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: ["SGLANG_SHARED_EXPERT_TP1=1"],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "gb300", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: ["SGLANG_SHARED_EXPERT_TP1=1"],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--attention-backend trtllm_mha",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-S-2.1-DFlash-FP8",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "gb300", variant: "default", quant: "nvfp4", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "gb300", variant: "default", quant: "nvfp4", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--attention-backend trtllm_mha",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-S-2.1-DFlash-NVFP4",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "gb300", variant: "default", quant: "int4", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "gb300", variant: "default", quant: "int4", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--attention-backend trtllm_mha",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-S-2.1-DFlash-INT4",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+  ],
+};

docs/src/snippets/configs/poolside/laguna-xs21-benchmarks.jsx

@@ -0,0 +1,264 @@
+// Laguna-XS-2.1 benchmarks — one entry per cell `match` (same 5 keys as laguna-xs21.jsx cells).
+//
+// All numbers below are REAL measured values; cells without measurements are bare `{ match }`
+// pending stubs (the card renders "pending"). NO fabricated/dummy numbers.
+//
+// REAL GSM8K (sgl-eval `run gsm8k`, FULL 1319 questions, greedy/non-thinking, chat template
+// auto-loaded), measured on a 4×GB300 single node at tp 4:
+//
+//   high-throughput (dense, backend auto→trtllm_mha):
+//     BF16 75.66% · FP8 71.87% · NVFP4 78.39% · INT4 66.79%
+//   low-latency (DFlash, --attention-backend trtllm_mha, matched-precision draft):
+//     BF16 76.19% (accept-len 4.17) · FP8 72.02% (4.05) · NVFP4 74.53% (4.02) · INT4 67.02% (3.80)
+//
+//   Spec == dense within noise on every quant → DFlash is accuracy-neutral, as expected for
+//   verification-based speculation. Accept-length is the speedup lever (~4× fewer target steps
+//   at tp=4; ~5.7–6.8 accept-len measured at tp=1 on the same pairs).
+//
+//   Backend caveats baked into the configs (do not "simplify" them away):
+//     - DFlash cells pin --attention-backend trtllm_mha on Blackwell: with speculation active,
+//       auto-select falls back to flashinfer, which breaks this hybrid-SWA model at tp≥4
+//       (GSM8K 28% vs 76%, reproduced + single-variable-bisected on GB300).
+//     - `triton` attention is broken for Laguna (13.2% GSM8K) — never use it here.
+//     - Known open question: FP8/INT4 score ~5/~7 pts higher under flashinfer at tp≤2 than under
+//       trtllm_mha/fa4 (which agree with each other); bf16/nvfp4 are backend-invariant. Ground
+//       truth (HF eager reference) not yet established — the trtllm_mha numbers are shipped since
+//       that is the only tp≥4-viable backend.
+//
+// REAL GSM8K on an 8×H200 HGX node (sgl-eval `run gsm8k`, FULL 1319 questions, greedy/
+// non-thinking), backend fa3 (= the Hopper auto-select for dense; pinned for DFlash):
+//
+//   high-throughput (dense):        BF16 76.12% (tp 8) · FP8 73.54% (tp8+ep8) · INT4 67.02% (tp8+ep8)
+//   low-latency (DFlash, fa3):      BF16 75.97% (tp 8) · FP8 74.53% (tp8+ep8) · INT4 66.57% (tp8+ep8)
+//     accept-lengths (matched-precision draft, greedy GSM8K): BF16 ~3.9 (bs=1) · FP8 6.75 · INT4 ~5.
+//
+//   Spec == dense within noise on every quant, same as GB300 — DFlash is accuracy-neutral.
+//   INT4+DFlash's first full-set EP8 run drew 64.52% (2pt below the tp4 reference at 66.41%);
+//   a same-command repeat scored 66.57%, back in the reference cluster — the two EP8 draws
+//   alone span 2.05pt, comparable to the ~1pt spread FP8-dense showed across its own three
+//   independent full-set measurements (74.53 / 74.30 / 73.54). Confirmed ordinary eval noise,
+//   not an EP8/DFlash/INT4 interaction; 66.57% (the reproducing value) is shipped here.
+//
+//   FP8/INT4 run --tp 8 --ep-size 8 (NOT plain tp 8, which fails at weight load — see
+//   laguna-xs21.jsx header comment for why: moe_intermediate_size=512 with FP8 block
+//   [128,128] / INT4 gs=128 scales can't shard 8-way). EP keeps whole experts per rank,
+//   sidestepping the shard-granularity wall entirely, so both quantizations use all 8 GPUs
+//   on one instance. FP8 additionally needs SGLANG_SHARED_EXPERT_TP1=1 (its shared expert
+//   is also block-quantized; INT4's stays bf16, no flag needed). The checks that make plain
+//   tp 8 fail are pure shard arithmetic with no arch branch → any 8-way plain-TP fails the
+//   same way, hence the B300 fp8/int4 cells also carry tp8+ep8.
+//
+// sglang_version = PR #29446 (DFlash + SGLANG_SHARED_EXPERT_TP1 fix) + PR #29761 (INT4
+// mixed-precision MoE load fix) — BOTH MERGED to main as of 2026-07-02.
+//
+// REAL GSM8K for the B300 column (sgl-eval `run gsm8k`, FULL 1319 questions, greedy/
+// non-thinking): the B300 cells' exact command shapes were run at tp8 as 2x(4xGB300)
+// over MNNVL (NCCL_MNNVL_ENABLE/NCCL_CUMEM_ENABLE/MC_FORCE_MNNVL) — GB300 and B300 are
+// the same Blackwell-Ultra 288GB GPU and the shard math (tp8; ep8 for fp8/int4) is
+// identical to a single 8-GPU B300 node, so the accuracy measurement carries. Perf
+// numbers (TTFT/throughput) were NOT taken from that topology and are left pending.
+//
+//   high-throughput (dense): BF16 75.59% (tp8) | FP8 71.19% (tp8+ep8+flag) |
+//                            NVFP4 78.01% (tp8) | INT4 67.25% (tp8+ep8)
+//   low-latency (DFlash, trtllm_mha): BF16 75.36% (4.08) | FP8 71.87% (4.05) |
+//                            NVFP4 77.79% (4.04) | INT4 66.72% (4.01)
+//   Every cell at parity with its tp4-GB300 and H200 references; NVFP4 needs NO escape
+//   (group_size=16 divides the 64-wide tp8 shard — unlike FP8 [128,128] / INT4 gs=128).
+
+//
+// REAL AIME25 (sgl-eval `run aime25`, 30 problems x 16 repeats, temperature 1.0, top-p 0.95,
+// max-tokens 64000, 128 threads; value shipped = pass@1[avg-of-16], SEM ~1.4pt/cell at 480
+// samples). Thinking ENABLED by serving with a copy of the model's chat template whose
+// enable_thinking default is flipped to true — sgl-eval's --thinking sets the generic
+// 'thinking' key, which Laguna's template ignores (see Configuration Tips: Thinking).
+// Run @ main 0543246184.
+//
+//   B300 (same 2x(4xGB300) tp8/MNNVL topology + shard math as the GSM8K B300 numbers):
+//     high-throughput: BF16 65.21 | FP8 61.67 | NVFP4 57.92 | INT4 63.54
+//     low-latency:     BF16 65.62 | FP8 62.50 | NVFP4 60.21 | INT4 62.92
+//   GB300 (4-GPU single node, tp 4):
+//     high-throughput: BF16 62.50 | FP8 63.12 | NVFP4 60.00 | INT4 64.79
+//     low-latency:     BF16 65.83 | FP8 63.12 | NVFP4 60.00 | INT4 61.04
+//
+//   H200 (8-GPU HGX; bf16 tp8, fp8/int4 tp8+ep8 — same recipes as GSM8K):
+//     high-throughput: BF16 63.96 | FP8 64.79 | INT4 63.33
+//     low-latency:     BF16 65.00 | FP8 62.50 | INT4 64.17
+//
+//   DFlash accuracy-neutral on AIME25 too (|dense-spec| <= 2.7pt ~ 1-2 SEM); accept-len ~2.9
+//   on long thinking traces (vs ~4 on greedy GSM8K). NVFP4 is the weakest quant on AIME25
+//   (~4-5 SEM below BF16) while being the strongest on GSM8K — quant rankings are
+//   benchmark-dependent. Truncation ~0% at the 64k cap.
+//   H200 tp8+ep8 vs tp4/tp8-plain reference (same eval shape, different sglang session):
+//   BF16 dense 65.83->63.96 (1.25 SEM), FP8 dense 61.67->64.79 (2.50 SEM, higher not lower —
+//   FP8-dense alone now spans ~3pt across 4 independent full-set-equivalent measurements this
+//   week, so this is ordinary AIME variance for a 30x16 eval, not an EP8 effect), all other
+//   cells <=1.05 SEM. pass@16/majority@16 (single 30-item proportions, ~6-8pt SE) all <1 SEM;
+//   full detail in the day-0 support log, not reproduced here.
+export const benchmarks = [
+  // ===== H200 (8-GPU HGX; bf16 tp 8, fp8/int4 tp8+ep8) — ✅ REAL, full GSM8K =====
+  {
+    // ✅ REAL — 8×H200, BF16 dense, tp8, backend fa3 (Hopper auto-select).
+    match: { hw: "h200", variant: "default", quant: "bf16", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main)",
+    accuracy: { gsm8k_pct: 76.12, aime25_pct: 63.96 },
+  },
+  {
+    // ✅ REAL — 8×H200, BF16 + DFlash (matched bf16 draft), tp8, fa3. Accept-len 3.05
+    // (mixed eval traffic; ~3.9 greedy GSM8K bs=1).
+    match: { hw: "h200", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main)",
+    accuracy: { gsm8k_pct: 75.97, aime25_pct: 65.00 },
+  },
+  {
+    // ✅ REAL — 8×H200, FP8 dense, tp8+ep8+SGLANG_SHARED_EXPERT_TP1=1 (plain tp8 impossible:
+    // block-FP8 scale granularity), fa3.
+    match: { hw: "h200", variant: "default", quant: "fp8", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main)",
+    accuracy: { gsm8k_pct: 73.54, aime25_pct: 64.79 },
+  },
+  {
+    // ✅ REAL — 8×H200, FP8 + DFlash (matched fp8-calibrated draft), tp8+ep8+flag, fa3.
+    // Accept-len 6.75.
+    match: { hw: "h200", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main)",
+    accuracy: { gsm8k_pct: 74.53, aime25_pct: 62.50 },
+  },
+  {
+    // ✅ REAL — 8×H200, INT4 dense (mixed 4/8-bit MoE, needs #29761), tp8+ep8 (plain tp8
+    // impossible: Marlin gs=128 scale layout; no shared-expert flag needed), fa3.
+    match: { hw: "h200", variant: "default", quant: "int4", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main)",
+    accuracy: { gsm8k_pct: 67.02, aime25_pct: 63.33 },
+  },
+  {
+    // ✅ REAL — 8×H200, INT4 + DFlash (matched int4-calibrated draft), tp8+ep8, fa3.
+    // Accept-len ~5. First run drew 64.52%, repeat scored this value (66.57%) — confirmed
+    // ordinary eval noise, not a real EP8/DFlash interaction; see header note.
+    match: { hw: "h200", variant: "default", quant: "int4", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main)",
+    accuracy: { gsm8k_pct: 66.57, aime25_pct: 64.17 },
+  },
+
+  // ===== B300 (8-GPU HGX; bf16/nvfp4 tp 8, fp8/int4 tp8+ep8) — REAL, full GSM8K =====
+  // (accuracy measured as 2x(4xGB300) tp8/MNNVL — same GPU + shard math as one B300 node)
+  {
+    // REAL — BF16 dense, tp8, backend auto->trtllm_mha.
+    match: { hw: "b300", variant: "default", quant: "bf16", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main; run @ main 0543246184)",
+    accuracy: { gsm8k_pct: 75.59, aime25_pct: 65.21 },
+  },
+  {
+    // REAL — BF16 + DFlash (matched bf16 draft), tp8, trtllm_mha. Accept-len 4.08.
+    match: { hw: "b300", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main; run @ main 0543246184)",
+    accuracy: { gsm8k_pct: 75.36, aime25_pct: 65.62 },
+  },
+  {
+    // REAL — FP8 dense, tp8+ep8+SGLANG_SHARED_EXPERT_TP1=1 (plain tp8 impossible: block-FP8 scale granularity).
+    match: { hw: "b300", variant: "default", quant: "fp8", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main; run @ main 0543246184)",
+    accuracy: { gsm8k_pct: 71.19, aime25_pct: 61.67 },
+  },
+  {
+    // REAL — FP8 + DFlash (matched fp8-calibrated draft), tp8+ep8+flag, trtllm_mha. Accept-len 4.05.
+    match: { hw: "b300", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main; run @ main 0543246184)",
+    accuracy: { gsm8k_pct: 71.87, aime25_pct: 62.50 },
+  },
+  {
+    // REAL — NVFP4 dense, tp8 — NO escape needed (group_size=16 shards 8-way cleanly).
+    match: { hw: "b300", variant: "default", quant: "nvfp4", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main; run @ main 0543246184)",
+    accuracy: { gsm8k_pct: 78.01, aime25_pct: 57.92 },
+  },
+  {
+    // REAL — NVFP4 + DFlash (matched nvfp4-calibrated draft), tp8, trtllm_mha. Accept-len 4.04.
+    match: { hw: "b300", variant: "default", quant: "nvfp4", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main; run @ main 0543246184)",
+    accuracy: { gsm8k_pct: 77.79, aime25_pct: 60.21 },
+  },
+  {
+    // REAL — INT4 dense (mixed 4/8-bit MoE), tp8+ep8 (plain tp8 impossible: Marlin gs=128 'scales is not contiguous', same signature as H200).
+    match: { hw: "b300", variant: "default", quant: "int4", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main; run @ main 0543246184)",
+    accuracy: { gsm8k_pct: 67.25, aime25_pct: 63.54 },
+  },
+  {
+    // REAL — INT4 + DFlash (matched int4-calibrated draft), tp8+ep8, trtllm_mha. Accept-len 4.01.
+    match: { hw: "b300", variant: "default", quant: "int4", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main; run @ main 0543246184)",
+    accuracy: { gsm8k_pct: 66.72, aime25_pct: 62.92 },
+  },
+
+  // ===== GB300 (4-GPU single node, tp 4) — ✅ REAL, full GSM8K =====
+  {
+    // ✅ REAL — 4×GB300, BF16 dense, tp4, backend auto→trtllm_mha.
+    match: { hw: "gb300", variant: "default", quant: "bf16", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main)",
+    accuracy: { gsm8k_pct: 75.66, aime25_pct: 62.50 },
+  },
+  {
+    // ✅ REAL — 4×GB300, BF16 + DFlash (matched bf16 draft), tp4, trtllm_mha. Accept-len 4.17.
+    match: { hw: "gb300", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main)",
+    accuracy: { gsm8k_pct: 76.19, aime25_pct: 65.83 },
+  },
+  {
+    // ✅ REAL — 4×GB300, FP8 dense, tp4, backend auto→trtllm_mha.
+    match: { hw: "gb300", variant: "default", quant: "fp8", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main)",
+    accuracy: { gsm8k_pct: 71.87, aime25_pct: 63.12 },
+  },
+  {
+    // ✅ REAL — 4×GB300, FP8 + DFlash (matched fp8-calibrated draft), tp4, trtllm_mha. Accept-len 4.05.
+    match: { hw: "gb300", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main)",
+    accuracy: { gsm8k_pct: 72.02, aime25_pct: 63.12 },
+  },
+  {
+    // ✅ REAL — 4×GB300, NVFP4 dense, tp4, backend auto→trtllm_mha.
+    match: { hw: "gb300", variant: "default", quant: "nvfp4", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main)",
+    accuracy: { gsm8k_pct: 78.39, aime25_pct: 60.00 },
+  },
+  {
+    // ✅ REAL — 4×GB300, NVFP4 + DFlash (matched nvfp4-calibrated draft), tp4, trtllm_mha. Accept-len 4.02.
+    match: { hw: "gb300", variant: "default", quant: "nvfp4", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main)",
+    accuracy: { gsm8k_pct: 74.53, aime25_pct: 60.00 },
+  },
+  {
+    // ✅ REAL — 4×GB300, INT4 dense (mixed 4/8-bit MoE, needs #29761), tp4, backend auto→trtllm_mha.
+    match: { hw: "gb300", variant: "default", quant: "int4", strategy: "high-throughput", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main)",
+    accuracy: { gsm8k_pct: 66.79, aime25_pct: 64.79 },
+  },
+  {
+    // ✅ REAL — 4×GB300, INT4 + DFlash (matched int4-calibrated draft), tp4, trtllm_mha. Accept-len 3.80.
+    match: { hw: "gb300", variant: "default", quant: "int4", strategy: "low-latency", nodes: "single" },
+    verified: true,
+    sglang_version: "PR #29446 + #29761 (both merged to main)",
+    accuracy: { gsm8k_pct: 67.02, aime25_pct: 61.04 },
+  },
+];

docs/src/snippets/configs/poolside/laguna-xs21.jsx

@@ -0,0 +1,600 @@
+// Laguna-XS-2.1 (poolside) — config-driven cookbook page.
+// Consumed by the shared _deployment.jsx + _playground.jsx engines (no model code there).
+//
+// Build: the `laguna` model type (hybrid SWA + MoE) is on SGLang main. Two extra pieces,
+// BOTH MERGED to main as of 2026-07-02 — no branch/cherry-pick needed:
+//   - INT4: poolside/Laguna-XS-2.1-INT4 is a MIXED-precision compressed-tensors MoE
+//     (4-bit + 8-bit config groups, regex targets, no "Linear" group) — needs PR #29761
+//     or it crashes at load with KeyError: 'Linear'.
+//   - Low-Latency (DFlash speculative decoding) + the 8-GPU FP8 recipe below both need
+//     PR #29446 (Laguna XS-2.1 DFlash support + SGLANG_SHARED_EXPERT_TP1 shared-expert fix).
+//
+// Attention backend (IMPORTANT — Laguna is hybrid-SWA and backend-sensitive):
+//   - Dense (High-Throughput): leave --attention-backend UNSET. Auto-select is correct:
+//     fa3 on Hopper (H200), trtllm_mha on Blackwell (B300/GB300).
+//   - DFlash (Low-Latency): auto-select is NOT safe — with a speculative algorithm active
+//     the resolver falls back to flashinfer, which on Blackwell HALVES greedy GSM8K at
+//     tp=4 (76.2% -> 28%, reproduced+bisected on GB300). Every LL cell therefore PINS the
+//     target backend explicitly: fa3 on H200, trtllm_mha on Blackwell. The draft worker
+//     cannot run trtllm_mha and auto-falls-back to flashinfer — measured identical to a
+//     forced fa4 draft (82.5% vs 81.5% holdout, accept-len 4.63 both), so it is left auto.
+//   - NEVER use --attention-backend triton for Laguna: 13.2% GSM8K (broken SWA handling)
+//     plus a CUBLAS crash at tp=4 CUDA-graph capture.
+//
+// Draft/target precision ALWAYS matches: each quantized target pairs with the DFlash draft
+// calibrated for it (…-DFlash, …-DFlash-FP8, …-DFlash-NVFP4, …-DFlash-INT4). The drafts
+// themselves are small bf16 5-layer models (~0.9 GB) — the suffix is the calibration target.
+//
+// Memory: DFlash cells carry --mem-fraction-static 0.7 — at tp=4 on GB300 the default
+// fraction OOMs in the draft vocab all-gather ("Failed to CUDA calloc"); 0.7 is validated.
+// Dense cells use the default heuristic (validated at defaults on GB300).
+//
+// TP/EP on the 8-GPU HGX platforms (H200/B300): plain --tp 8 works for BF16, but the
+// quantized checkpoints cap PLAIN TP at 4 — moe_intermediate_size=512 with FP8 block
+// [128,128] / INT4 group_size=128 scales cannot shard 8-way (512/8 = 64 < 128 granularity
+// → FP8 ValueError at weight create, INT4 Marlin scale-contiguity crash; reproduced on
+// 8×H200, and the checks are pure shard arithmetic — arch-independent, so this is not an
+// H200-only limitation). To still use all 8 GPUs on a single instance, FP8/INT4 cells use
+// `--tp 8 --ep-size 8` instead: EP keeps whole experts per rank (256 experts ÷ 8 = 32,
+// avoiding the 512-dim MoE intermediate shard entirely) which fixes the *routed* experts
+// for both precisions. FP8's shared expert is ALSO block-quantized (unlike INT4's, which
+// stays bf16), so FP8 additionally needs `SGLANG_SHARED_EXPERT_TP1=1` (replicates the
+// shared expert instead of TP-sharding it — see PR #29446). GB300 (4-GPU node) uses plain
+// `--tp 4` throughout since 4 GPUs is already inside the plain-TP ceiling.
+//
+// NVFP4 is Blackwell-only → no h200×nvfp4 cells (same rule as Laguna-M.1).
+//
+// verified:true = ran that command shape and it served correctly + passed full GSM8K
+// (see laguna-xs21-benchmarks.jsx). GB300 cells verified (4×GB300, tp 4); H200 cells
+// verified (8×H200: bf16 tp8, fp8/int4 tp8+ep8). B300 cells verified with the identical
+// commands run as tp8 across 2×(4×GB300) over MNNVL — same GPU (GB300/B300 = Blackwell
+// Ultra, 288GB), same shard math, so the accuracy measurement carries; single-node B300
+// re-timing (perf) is the only thing not covered by that setup.
+
+export const config = {
+  modelName: "Laguna-XS-2.1",
+
+  supportedHardware: ["h200", "b300", "gb300"],
+
+  variants: [
+    { id: "default", label: "Default" },
+  ],
+
+  quantizations: [
+    { id: "bf16",  label: "BF16"  },
+    { id: "fp8",   label: "FP8"   },
+    { id: "nvfp4", label: "NVFP4" },
+    { id: "int4",  label: "INT4"  },
+  ],
+
+  // Two operating points:
+  //   low-latency  = DFlash speculative decoding (matched-precision draft) — interactive /
+  //                  few-stream serving; measured accept-length ~3.8–4.2 at tp=4 (~5.7–6.8 at tp=1).
+  //   high-throughput = plain serving (no speculation) — batch-saturated workloads, where
+  //                  speculation's draft+rejection overhead costs more than it saves.
+  strategies: [
+    { id: "low-latency",     label: "Low-latency" },
+    { id: "high-throughput", label: "High-throughput" },
+  ],
+
+  nodesOptions: [
+    { id: "single", label: "Single Node" },
+  ],
+
+  modelNames: {
+    "default|bf16":  "poolside/Laguna-XS-2.1",
+    "default|fp8":   "poolside/Laguna-XS-2.1-FP8",
+    "default|nvfp4": "poolside/Laguna-XS-2.1-NVFP4",
+    "default|int4":  "poolside/Laguna-XS-2.1-INT4",
+  },
+
+  placeholders: {
+    HOST_IP:   { target: "command", label: "Bind host",         default: "0.0.0.0"         },
+    PORT:      { target: "command", label: "Bind port",         default: "30000"           },
+    HF_TOKEN:  { target: "command", label: "HF token (Docker)", default: "<your-hf-token>" },
+    CURL_HOST: { target: "curl",    label: "Server host",       default: "localhost"       },
+    CURL_PORT: { target: "curl",    label: "Server port",       default: "30000"           },
+  },
+
+  curl: `curl http://{{CURL_HOST}}:{{CURL_PORT}}/v1/chat/completions \\
+-H 'Content-Type: application/json' \\
+-d '{ "model": "{{MODEL_NAME}}", "messages": [{"role":"user","content":"Hello"}] }'`,
+
+  benchmarkCommands: {
+    speed:
+`python3 -m sglang.bench_serving \\
+  --backend sglang \\
+  --host {{CURL_HOST}} --port {{CURL_PORT}} \\
+  --model {{MODEL_NAME}} \\
+  --dataset-name {{DATASET}} \\
+  --random-input-len {{ISL}} --random-output-len {{OSL}} \\
+  --num-prompts {{NUM_PROMPTS}} --max-concurrency {{MAX_CONCURRENCY}}`,
+    // GSM8K is the required accuracy sanity on every verified cell (cookbook_guide §3), via sgl-eval.
+    accuracy: {
+      gsm8k_pct:
+`# pip install git+https://github.com/sgl-project/sgl-eval
+sgl-eval run gsm8k \\
+  --base-url http://{{CURL_HOST}}:{{CURL_PORT}}/v1 \\
+  --num-threads 128`,
+      // sgl-eval's --thinking sets the generic 'thinking' key, which Laguna's template
+      // ignores (it gates on enable_thinking — see Configuration Tips: Thinking). To run
+      // AIME25 with thinking, serve with a copy of the model's chat template whose
+      // enable_thinking default is flipped to true, passed via --chat-template.
+      aime25_pct:
+`# pip install git+https://github.com/sgl-project/sgl-eval
+# Serve with an enable_thinking=true chat template (see Configuration Tips: Thinking).
+sgl-eval run aime25 \\
+  --base-url http://{{CURL_HOST}}:{{CURL_PORT}}/v1 \\
+  --n-repeats 16 --max-tokens 64000 \\
+  --temperature 1.0 --top-p 0.95 --thinking \\
+  --num-threads 128`,
+    },
+    numPromptsByConc: { 1: 8, 16: 32, 64: 128, 128: 256, 256: 512, 1024: 2048, 4096: 4096 },
+  },
+
+  // No variant-wide accuracy default; real numbers are per-cell in laguna-xs21-benchmarks.jsx.
+  defaultAccuracy: {
+    default: { gsm8k_pct: null, aime25_pct: null },
+  },
+
+  accuracyLabels: [
+    ["gsm8k_pct", "GSM8K", "%"],
+    ["aime25_pct", "AIME25", "%"],
+  ],
+
+  // lmsysorg/sglang:latest (cu13) carries the Laguna-XS.2.1 build (PR #29446 + #29761).
+  dockerImages: {
+    h200:  "lmsysorg/sglang:latest",
+    b300:  "lmsysorg/sglang:latest",
+    gb300: "lmsysorg/sglang:latest",
+  },
+
+  github: {
+    cookbookModel: "poolside/Laguna-XS-2.1",
+  },
+
+  playgroundFeatures: {
+
+    // Hybrid-SWA GQA model (48 Q / 8 KV heads) — TP shards cleanly at 1/2/4/8.
+    // Accuracy verified TP-independent on the trtllm_mha backend (tp1 == tp4 on GB300).
+    // No DP-Attention / CP knobs: unvalidated on this model family — not exposed.
+    attention: {
+      knobs: [
+        { id: "tp", label: "TP", values: [null, 1, 2, 4, 8] },
+      ],
+    },
+
+    // Reasoning + tool-call parsers (poolside_v1, same family as Laguna-M.1 / XS.2).
+    // ALSO baked into every Deploy cell below. The chat template auto-detects both
+    // (`Auto-detected template features: reasoning_parser=poolside_v1, tool_call_parser=poolside_v1`),
+    // so these are explicit-but-redundant on transformers ≥ 5.10.
+    parsers: {
+      items: [
+        { id: "reasoning", label: "Reasoning Parser", flag: "--reasoning-parser poolside_v1" },
+        { id: "toolCall",  label: "Tool Call Parser", flag: "--tool-call-parser poolside_v1" },
+      ],
+    },
+  },
+
+  // Cells: (h200 × {bf16,fp8,int4} + b300/gb300 × {bf16,fp8,nvfp4,int4}) × {low-latency, high-throughput}.
+  // Draft model precision always matches the target's.
+  cells: [
+
+    // ══════════════ NVIDIA Hopper H200 (8-GPU HGX) — BF16 / FP8 / INT4 — VERIFIED ══════════════
+    // All 6 cells ran on 8×H200 with full-GSM8K accuracy (laguna-xs21-benchmarks.jsx).
+    // Dense auto-selects fa3 on Hopper (no flag). LL pins fa3 (DFlash-safe on Hopper;
+    // with a spec algorithm active, auto would fall back to flashinfer).
+    // FP8/INT4 use --tp 8 --ep-size 8 to use all 8 GPUs on one instance (plain --tp 8
+    // crashes at weight load for both — see header comment). FP8 additionally needs
+    // SGLANG_SHARED_EXPERT_TP1=1 (its shared expert is block-quantized too).
+    {
+      // VERIFIED 8×H200 tp8: GSM8K 76.12% (full 1319, greedy).
+      match: { hw: "h200", variant: "default", quant: "bf16", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // VERIFIED 8×H200 tp8: GSM8K 75.97%, accept-length 3.05 (matched bf16 draft;
+      // ~3.9 on greedy GSM8K at bs=1).
+      match: { hw: "h200", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--attention-backend fa3",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-XS-2.1-DFlash",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // VERIFIED 8×H200 tp8+ep8: GSM8K 73.54% (full 1319, greedy).
+      match: { hw: "h200", variant: "default", quant: "fp8", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: ["SGLANG_SHARED_EXPERT_TP1=1"],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--ep-size 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // VERIFIED 8×H200 tp8+ep8: GSM8K 74.53%, accept-length 6.75 (matched fp8-calibrated draft).
+      match: { hw: "h200", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: ["SGLANG_SHARED_EXPERT_TP1=1"],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--ep-size 8",
+        "--attention-backend fa3",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-XS-2.1-DFlash-FP8",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // VERIFIED 8×H200 tp8+ep8: GSM8K 67.02% (full 1319, greedy). Mixed 4/8-bit MoE —
+      // needs a build ≥ PR #29761 (merged). No SGLANG_SHARED_EXPERT_TP1 needed — INT4's
+      // shared expert stays bf16 (its ignore-list keeps it unquantized), so it TP-shards
+      // freely under EP; only FP8's shared expert needs replication.
+      match: { hw: "h200", variant: "default", quant: "int4", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--ep-size 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // VERIFIED 8×H200 tp8+ep8: GSM8K 66.57% (matched int4-calibrated draft), accept-length
+      // ~5. First run drew 64.52% — 2pt below the tp4 sibling (66.41%); a same-command repeat
+      // scored 66.57%, confirming ordinary eval noise (not an EP8/DFlash interaction).
+      match: { hw: "h200", variant: "default", quant: "int4", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--ep-size 8",
+        "--attention-backend fa3",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-XS-2.1-DFlash-INT4",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+
+    // ══════════════ NVIDIA Blackwell Ultra B300 (8-GPU HGX) — BF16 / FP8 / NVFP4 / INT4 ══════════════
+    // Dense auto-selects trtllm_mha on Blackwell (no flag). LL MUST pin trtllm_mha —
+    // with DFlash active, auto falls back to flashinfer, which is broken for this
+    // hybrid-SWA model at tp≥4 (GSM8K 28% vs 76%; reproduced + bisected on GB300).
+    // VERIFIED: these exact command shapes ran as tp8 across 2×(4×GB300)/MNNVL — identical
+    // silicon + shard math to one 8-GPU B300 node — with full-GSM8K accuracy per cell
+    // (dense 75.59/71.19/78.01/67.25, DFlash 75.36/71.87/77.79/66.72 for bf16/fp8/nvfp4/int4).
+    {
+      match: { hw: "b300", variant: "default", quant: "bf16", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--attention-backend trtllm_mha",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-XS-2.1-DFlash",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // Plain tp 8 fails at weight load (quantized MoE TP cap, arch-independent — see
+      // header comment); tp 8 + ep 8 uses all 8 GPUs instead (verified on 8×H200, same
+      // merged fix — pending measurement on this hardware).
+      match: { hw: "b300", variant: "default", quant: "fp8", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: ["SGLANG_SHARED_EXPERT_TP1=1"],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--ep-size 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: ["SGLANG_SHARED_EXPERT_TP1=1"],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--ep-size 8",
+        "--attention-backend trtllm_mha",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-XS-2.1-DFlash-FP8",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", variant: "default", quant: "nvfp4", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", variant: "default", quant: "nvfp4", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--attention-backend trtllm_mha",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-XS-2.1-DFlash-NVFP4",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // INT4 (mixed 4/8-bit compressed-tensors MoE) — needs a build ≥ PR #29761 (merged).
+      // tp 8 + ep 8 uses all 8 GPUs (verified on 8×H200 — pending measurement on this
+      // hardware); no SGLANG_SHARED_EXPERT_TP1 needed, INT4's shared expert stays bf16.
+      match: { hw: "b300", variant: "default", quant: "int4", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--ep-size 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", variant: "default", quant: "int4", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 8",
+        "--ep-size 8",
+        "--attention-backend trtllm_mha",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-XS-2.1-DFlash-INT4",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+
+    // ══════════════ NVIDIA Grace-Blackwell GB300 (4-GPU single node) — VERIFIED ══════════════
+    // All 8 cells ran on 4×GB300 (tp 4) with full-GSM8K accuracy (laguna-xs21-benchmarks.jsx):
+    // dense via backend auto-select (resolves trtllm_mha), DFlash with trtllm_mha pinned.
+    {
+      // VERIFIED 4×GB300 tp4: GSM8K 75.66% (full 1319, greedy).
+      match: { hw: "gb300", variant: "default", quant: "bf16", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // VERIFIED 4×GB300 tp4: GSM8K 76.19%, accept-length 4.17 (matched bf16 draft).
+      match: { hw: "gb300", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--attention-backend trtllm_mha",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-XS-2.1-DFlash",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // VERIFIED 4×GB300 tp4: GSM8K 71.87%.
+      match: { hw: "gb300", variant: "default", quant: "fp8", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // VERIFIED 4×GB300 tp4: GSM8K 72.02%, accept-length 4.05 (matched fp8-calibrated draft).
+      match: { hw: "gb300", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--attention-backend trtllm_mha",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-XS-2.1-DFlash-FP8",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // VERIFIED 4×GB300 tp4: GSM8K 78.39%.
+      match: { hw: "gb300", variant: "default", quant: "nvfp4", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // VERIFIED 4×GB300 tp4: GSM8K 74.53%, accept-length 4.02 (matched nvfp4-calibrated draft).
+      match: { hw: "gb300", variant: "default", quant: "nvfp4", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--attention-backend trtllm_mha",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-XS-2.1-DFlash-NVFP4",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // VERIFIED 4×GB300 tp4: GSM8K 66.79%. Mixed 4/8-bit MoE — needs a build ≥ PR #29761 (merged).
+      match: { hw: "gb300", variant: "default", quant: "int4", strategy: "high-throughput", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      // VERIFIED 4×GB300 tp4: GSM8K 67.02%, accept-length 3.80 (matched int4-calibrated draft).
+      match: { hw: "gb300", variant: "default", quant: "int4", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--trust-remote-code",
+        "--reasoning-parser poolside_v1",
+        "--tool-call-parser poolside_v1",
+        "--tp 4",
+        "--attention-backend trtllm_mha",
+        "--speculative-algorithm DFLASH",
+        "--speculative-draft-model-path poolside/Laguna-XS-2.1-DFlash-INT4",
+        "--page-size 1",
+        "--mem-fraction-static 0.7",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+  ],
+};

docs/src/snippets/configs/popular-models.jsx

@@ -0,0 +1,66 @@
+// Single `export const popularModels` literal — no spreads/calls/IIFE (Mintlify
+// re-evals at hydration).
+//
+// Rotated by <PopularModels> (/src/snippets/_popular_models.jsx) on the docs home
+// (`variant="hero"`, uses each entry's `hero` block) and the Cookbook home
+// (compact strip, uses `name` / `badge` / `tags`). Both walk this list in order,
+// so an entry added here becomes a slide on both; an entry with no `hero` block
+// still rotates on the home page, just without a blurb.
+//
+// Keep the copy to claims that hold on the linked page: platform counts from that
+// model's config `supportedHardware`, precisions from its `quantizations`, blurbs
+// paraphrasing that page's own opening.
+
+export const popularModels = [
+  {
+    name: "Kimi-K3",
+    vendor: "Moonshot AI",
+    href: "/cookbook/autoregressive/Moonshotai/Kimi-K3",
+    logo: "/cards/logos/moonshotai.png",
+    badge: "New",
+    tags: ["8 platforms", "PD disagg", "DSPARK"],
+    hero: {
+      eyebrow: "Featured model · New",
+      headline: "Meet Kimi-K3 on SGLang",
+      blurb:
+        "SGLang natively implements and deeply optimizes K3's new architecture with fused KDA decode kernels, DP attention, MTP, PD disaggregation, and KDA-aware prefix caching. Kimi-K3 is supported on both NVIDIA and AMD GPUs.",
+      tags: ["2.8T parameters", "Fused KDA decode", "NVIDIA + AMD"],
+      cta: "Open the Kimi-K3 cookbook",
+      caption: "Kimi-K3 deployment guide",
+    },
+  },
+  {
+    name: "Inkling",
+    vendor: "Thinking Machines",
+    href: "/cookbook/autoregressive/ThinkingMachines/Inkling",
+    logo: "/cards/logos/thinkingmachines.png",
+    badge: "New",
+    tags: ["7 platforms", "NVFP4 / BF16", "MTP + DSpark"],
+    hero: {
+      eyebrow: "Featured model · New",
+      headline: "Meet Inkling on SGLang",
+      blurb:
+        "Thinking Machines' open-weights Mixture-of-Experts model — 975B parameters, 41B active per token, a 1M-token context window, and native text, image, and audio input. The cookbook covers its MTP speculative-decoding path and long-context prefix caching on NVIDIA and AMD.",
+      tags: ["975B · 41B active", "1M context", "Text + image + audio"],
+      cta: "Open the Inkling cookbook",
+      caption: "Inkling deployment guide",
+    },
+  },
+  {
+    name: "GLM-5.2",
+    vendor: "Z.ai",
+    href: "/cookbook/autoregressive/GLM/GLM-5.2",
+    logo: "/cards/logos/glm.png",
+    badge: "New",
+    tags: ["7 platforms", "DSA attention", "FP8 / NVFP4"],
+    hero: {
+      eyebrow: "Featured model · New",
+      headline: "Meet GLM-5.2 on SGLang",
+      blurb:
+        "Z.ai's DeepSeek-Sparse-Attention Mixture-of-Experts model, with MTP speculative decoding and a 1M-token context window. Recipes cover FP8, BF16, and NVFP4 across H200, B200, B300, GB300, and AMD MI300X / MI325X / MI355X.",
+      tags: ["DSA attention", "1M context", "FP8 / BF16 / NVFP4"],
+      cta: "Open the GLM-5.2 cookbook",
+      caption: "GLM-5.2 deployment guide",
+    },
+  },
+];

docs/src/snippets/configs/tencent/hy3-benchmarks.jsx

@@ -0,0 +1,26 @@
+// Hy3 per-cell benchmark numbers, keyed by the same `match` tuple as hy3.jsx cells.
+// See _deployment.jsx for the speed/accuracy schema.
+// H200 BF16 low-latency + balanced verified on 8×H200 (sgl-eval, single-shot, temp=0).
+// FP8 cells not yet verified.
+export const benchmarks = [
+  { match: { hw: "h200",  variant: "default", quant: "bf16", strategy: "low-latency",     nodes: "single" }, gsm8k_pct: 95.75 },
+  { match: { hw: "h200",  variant: "default", quant: "bf16", strategy: "balanced",        nodes: "single" }, gsm8k_pct: 95.83 },
+  { match: { hw: "b200",  variant: "default", quant: "bf16", strategy: "low-latency",     nodes: "single" } },
+  { match: { hw: "b200",  variant: "default", quant: "bf16", strategy: "balanced",        nodes: "single" } },
+  { match: { hw: "b300",  variant: "default", quant: "bf16", strategy: "low-latency",     nodes: "single" } },
+  { match: { hw: "b300",  variant: "default", quant: "bf16", strategy: "balanced",        nodes: "single" } },
+  { match: { hw: "gb300", variant: "default", quant: "bf16", strategy: "low-latency",     nodes: "single" } },
+  { match: { hw: "gb300", variant: "default", quant: "bf16", strategy: "balanced",        nodes: "single" } },
+  { match: { hw: "gb200", variant: "default", quant: "bf16", strategy: "low-latency",     nodes: "single" } },
+  { match: { hw: "gb200", variant: "default", quant: "bf16", strategy: "balanced",        nodes: "single" } },
+  { match: { hw: "h200",  variant: "default",  quant: "fp8",  strategy: "low-latency",     nodes: "single" } },
+  { match: { hw: "h200",  variant: "default",  quant: "fp8",  strategy: "balanced",        nodes: "single" } },
+  { match: { hw: "b200",  variant: "default",  quant: "fp8",  strategy: "low-latency",     nodes: "single" } },
+  { match: { hw: "b200",  variant: "default",  quant: "fp8",  strategy: "balanced",        nodes: "single" } },
+  { match: { hw: "b300",  variant: "default",  quant: "fp8",  strategy: "low-latency",     nodes: "single" } },
+  { match: { hw: "b300",  variant: "default",  quant: "fp8",  strategy: "balanced",        nodes: "single" } },
+  { match: { hw: "gb300", variant: "default",  quant: "fp8",  strategy: "low-latency",     nodes: "single" } },
+  { match: { hw: "gb300", variant: "default",  quant: "fp8",  strategy: "balanced",        nodes: "single" } },
+  { match: { hw: "gb200", variant: "default",  quant: "fp8",  strategy: "low-latency",     nodes: "single" } },
+  { match: { hw: "gb200", variant: "default",  quant: "fp8",  strategy: "balanced",        nodes: "single" } },
+];

docs/src/snippets/configs/tencent/hy3.jsx

@@ -0,0 +1,549 @@
+// Hy3 cookbook config. Consumed by _deployment.jsx + _playground.jsx;
+// see _deployment.jsx header for the field contract.
+//
+// The shipping Hy3 tokenizer appends a shared suffix to every special token
+// (e.g. <tool_calls:TAG>); SGLang's `hunyuan` reasoning/tool-call parsers
+// resolve the real token strings from the vocab at runtime (PR #29920), so the
+// same recipe serves both the preview (suffix-less) and the shipping (suffixed)
+// tokenizer — no per-model hard-coding.
+//
+// BF16 weights are ~590GB. Single-node TP fits: H200 (141GB, TP8 = 74GB/GPU),
+// B200 (180GB, TP4 = 148GB/GPU), B300/GB300 (272GB, TP4), GB200 (192GB, TP4).
+
+export const config = {
+  modelName: "Hy3",
+
+  supportedHardware: ["h200", "b200", "b300", "gb200", "gb300"],
+
+  variants: [
+    { id: "default", label: "Default" },
+  ],
+  quantizations: [
+    { id: "bf16", label: "BF16" },
+    { id: "fp8",  label: "FP8"  },
+  ],
+  strategies: [
+    { id: "low-latency",     label: "Low-Latency"     },
+    { id: "balanced",        label: "Balanced"        },
+  ],
+  nodesOptions: [
+    { id: "single",  label: "Single Node" },
+    { id: "multi-2", label: "Multi-Nodes" },
+  ],
+
+  modelNames: {
+    "default|bf16": "tencent/Hy3",
+    "default|fp8":  "tencent/Hy3-FP8",
+  },
+
+  placeholders: {
+    HOST_IP:   { target: "command", label: "Bind host",        default: "0.0.0.0"        },
+    PORT:      { target: "command", label: "Bind port",        default: "30000"          },
+    NODE0_IP:  { target: "command", label: "Head node IP",     default: "<node0-ip>"      },
+    NODE_RANK: { target: "command", label: "This node rank",   default: "<node-rank>"    },
+    HF_TOKEN:  { target: "command", label: "HF token (Docker)", default: "<your-hf-token>" },
+    CURL_HOST: { target: "curl",    label: "Server host",       default: "localhost"       },
+    CURL_PORT: { target: "curl",    label: "Server port",       default: "30000"           },
+  },
+
+  curl: `curl http://{{CURL_HOST}}:{{CURL_PORT}}/v1/chat/completions \\
+-H 'Content-Type: application/json' \\
+-d '{ "model": "{{MODEL_NAME}}", "messages": [{"role":"user","content":"Hello"}] }'`,
+
+  benchmarkCommands: {
+    speed:
+`python3 -m sglang.bench_serving \\
+  --backend sglang \\
+  --host {{CURL_HOST}} --port {{CURL_PORT}} \\
+  --model {{MODEL_NAME}} \\
+  --dataset-name {{DATASET}} \\
+  --random-input-len {{ISL}} --random-output-len {{OSL}} \\
+  --num-prompts {{NUM_PROMPTS}} --max-concurrency {{MAX_CONCURRENCY}} \\
+  --warmup-requests 64`,
+    accuracy: {
+      gsm8k_pct:
+`# To install sgl-eval: pip install git+https://github.com/sgl-project/sgl-eval
+sgl-eval run gsm8k \\
+  --base-url http://{{CURL_HOST}}:{{CURL_PORT}}/v1 \\
+  --num-threads 32`,
+      aime26_pct:
+`# To install sgl-eval: pip install git+https://github.com/sgl-project/sgl-eval
+sgl-eval run aime26 \\
+  --base-url http://{{CURL_HOST}}:{{CURL_PORT}}/v1 \\
+  --model {{MODEL_NAME}} --api-key <api-key> \\
+  --n-repeats 1 --max-tokens 28672 \\
+  --temperature 0.6 --top-p 0.95 --thinking \\
+  --out-dir /sgl-workspace/logs`,
+    },
+    numPromptsByConc: { 1: 32, 16: 32, 64: 128, 256: 512, 1024: 2048 },
+  },
+
+  accuracyLabels: [
+    ["gsm8k_pct", "GSM8K (1-shot)", "%"],
+    ["aime26_pct", "AIME26",         "%"],
+  ],
+
+  multiNodeHints: {
+    gb200: [
+      "The following env vars may be needed depending on your cluster:",
+      "  GLOO_SOCKET_IFNAME=<your-nic>",
+      "  NVSHMEM_ENABLE_NIC_PE_MAPPING=1",
+      "  NVSHMEM_HCA_LIST=<your-hca-list>",
+    ],
+  },
+
+  dockerImages: {
+    // The dev image bundles the HYV3 model code + the suffix-aware `hunyuan`
+    // parser. Switch to `:latest` once a tagged release picks it up.
+    h200:  "lmsysorg/sglang:dev",
+    b200:  "lmsysorg/sglang:dev",
+    b300:  "lmsysorg/sglang:dev",
+    gb200: "lmsysorg/sglang:dev",
+    gb300: "lmsysorg/sglang:dev",
+  },
+
+  github: {
+    cookbookModel: "tencent/Hy3",
+  },
+
+  playgroundFeatures: {
+
+    // ----- Card 1: "Attention Parallelism" -----
+    // No CP knob: prefill Context Parallel needs model-side integration in
+    // SGLang (DeepSeek-family / Qwen-MoE / Mellum have it) and HYV3ForCausalLM
+    // has none — the engine's CP knob would emit --enable-prefill-cp flags
+    // that don't work on this model.
+    attention: {
+      knobs: [
+        { id: "tp", label: "TP", values: [
+          null,
+          1,
+          2,
+          4,
+          8,
+          { value: 16, disable: { nodes: ["single"] },
+            disableReason: "TP=16 requires 16 ranks — switch the Deploy panel's Nodes to Multi-Nodes first." },
+        ]},
+        { id: "dpAttn", label: "DP-Attention",
+          values: [
+            null,
+            false,
+            1,
+            2,
+            4,
+            8,
+            { value: 16, disable: { nodes: ["single"] },
+              disableReason: "DP-Attention=16 requires 16 ranks — switch the Deploy panel's Nodes to Multi-Nodes first." },
+          ],
+          labels: { "auto": "Auto", "false": "Off" } },
+      ],
+    },
+
+    // ----- Card 2: "MoE Parallelism" -----
+    moe: {
+      backend: {
+        options: [
+          { id: null,                label: "Inherited" },
+          { id: "deepep",            label: "DeepEP",
+            flags: ["--moe-a2a-backend deepep"] },
+          { id: "megamoe",           label: "MegaMoE",
+            flags: ["--moe-a2a-backend megamoe"],
+            requiresHw: ["b200", "b300", "gb200", "gb300"] },
+        ],
+      },
+      ep: { label: "EP", values: [
+        null,
+        1,
+        2,
+        4,
+        8,
+        { value: 16, disable: { nodes: ["single"] },
+          disableReason: "EP=16 requires 16 ranks — switch the Deploy panel's Nodes to Multi-Nodes first." },
+      ]},
+    },
+
+    // ----- Card 3: "Parsers" -----
+    parsers: {
+      items: [
+        { id: "reasoning", label: "Reasoning Parser", flag: "--reasoning-parser auto" },
+        { id: "toolCall",  label: "Tool Call Parser", flag: "--tool-call-parser auto" },
+      ],
+    },
+
+    // ----- Card 4: "Speculative Decoding" -----
+    speculative: {
+      options: [
+        { id: "current",    label: "Inherited from base" },
+        { id: "off",        label: "Off (greedy)" },
+        { id: "mtp-314",    label: "EAGLE / MTP 3-1-4",
+          flags: ["--speculative-algorithm EAGLE", "--speculative-num-steps 3",
+                  "--speculative-eagle-topk 1", "--speculative-num-draft-tokens 4"] },
+        { id: "mtp-112",    label: "EAGLE / MTP 1-1-2",
+          flags: ["--speculative-algorithm EAGLE", "--speculative-num-steps 1",
+                  "--speculative-eagle-topk 1", "--speculative-num-draft-tokens 2"] },
+        { id: "ngram",      label: "NGRAM",
+          flags: ["--speculative-algorithm NGRAM",
+                  "--speculative-num-draft-tokens 16",
+                  "--speculative-ngram-max-bfs-breadth 10"],
+          disable: { dpAttnOn: [true] },
+          disableReason: "NGRAM is incompatible with DP-Attention. Turn DP-Attention off in the Attention card above to use NGRAM." },
+      ],
+    },
+
+    // ----- Card 5: "PD Disaggregation" -----
+    pdDisagg: {
+      modes: [
+        { id: "off",     label: "Off" },
+        { id: "prefill", label: "Prefill role" },
+        { id: "decode",  label: "Decode role" },
+      ],
+      transferBackends: [
+        { id: "mooncake", label: "Mooncake",
+          env: [
+            "NCCL_MNNVL_ENABLE=1",
+            "NCCL_CUMEM_ENABLE=1",
+            "SGLANG_MOONCAKE_CUSTOM_MEM_POOL=True",
+            "MC_FORCE_MNNVL=1",
+          ],
+          envWhen: { hw: ["gb200", "gb300"] } },
+        { id: "nixl",     label: "NiXL" },
+      ],
+      ibDevices: [{ id: "auto", label: "Auto" }, "mlx5_0", "mlx5_7"],
+      router: {
+        port: 8000,
+        command:
+`python3 -m sglang_router.launch_router \\
+  --pd-disaggregation \\
+  --prefill http://<prefill-host>:{{PREFILL_PORT}} \\
+  --decode http://<decode-host>:{{DECODE_PORT}} \\
+  --policy round_robin \\
+  --host 0.0.0.0 --port {{ROUTER_PORT}}`,
+      },
+    },
+
+    // ----- Card 6: "Hierarchical KV Cache" -----
+    hicache: {
+      backends: [
+        { id: "null_placeholder", label: "Auto" },
+        { id: "file",      label: "File" },
+        { id: "mooncake",  label: "Mooncake" },
+        { id: "hf3fs",     label: "HF3FS" },
+        { id: "nixl",      label: "NiXL" },
+      ],
+      writePolicies: [
+        { id: "auto",                    label: "Auto" },
+        { id: "write_through",           label: "Write-through" },
+        { id: "write_back",              label: "Write-back" },
+        { id: "write_through_selective", label: "Write-through (selective)" },
+      ],
+    },
+  },
+
+  cells: [
+    // ====================================================================
+    // H200 (141GB) — TP=8 for BF16 (~590GB)
+    // ====================================================================
+    {
+      match: { hw: "h200", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 8",
+        "--speculative-algorithm EAGLE",
+        "--speculative-num-steps 3",
+        "--speculative-eagle-topk 1",
+        "--speculative-num-draft-tokens 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "default", quant: "bf16", strategy: "balanced", nodes: "single" },
+      verified: true,
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 8",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+
+    // ====================================================================
+    // B200 (180GB) — TP=4 (BF16 590GB → 148GB/GPU, fits with KV headroom)
+    // ====================================================================
+    {
+      match: { hw: "b200", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 4",
+        "--speculative-algorithm EAGLE",
+        "--speculative-num-steps 3",
+        "--speculative-eagle-topk 1",
+        "--speculative-num-draft-tokens 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b200", variant: "default", quant: "bf16", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+
+    // ====================================================================
+    // B300 (272GB) — TP=4
+    // ====================================================================
+    {
+      match: { hw: "b300", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 4",
+        "--speculative-algorithm EAGLE",
+        "--speculative-num-steps 3",
+        "--speculative-eagle-topk 1",
+        "--speculative-num-draft-tokens 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", variant: "default", quant: "bf16", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+
+    // ====================================================================
+    // GB300 — TP=4 (inferred from B300, same sm_103 + aarch64)
+    // ====================================================================
+    {
+      match: { hw: "gb300", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 4",
+        "--speculative-algorithm EAGLE",
+        "--speculative-num-steps 3",
+        "--speculative-eagle-topk 1",
+        "--speculative-num-draft-tokens 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "gb300", variant: "default", quant: "bf16", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+
+    // ====================================================================
+    // GB200 (sm_100 + aarch64) — TP=4 (single-node 4×192GB = 768GB fits BF16 590GB)
+    // ====================================================================
+    {
+      match: { hw: "gb200", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 4",
+        "--speculative-algorithm EAGLE",
+        "--speculative-num-steps 3",
+        "--speculative-eagle-topk 1",
+        "--speculative-num-draft-tokens 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "gb200", variant: "default", quant: "bf16", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+
+    // ====================================================================
+    // FP8 (~300GB) — TP=4 on H200/B200, TP=2 on B300/GB300/GB200
+    // ====================================================================
+    {
+      match: { hw: "h200", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 4",
+        "--speculative-algorithm EAGLE",
+        "--speculative-num-steps 3",
+        "--speculative-eagle-topk 1",
+        "--speculative-num-draft-tokens 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "h200", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b200", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 4",
+        "--speculative-algorithm EAGLE",
+        "--speculative-num-steps 3",
+        "--speculative-eagle-topk 1",
+        "--speculative-num-draft-tokens 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b200", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 2",
+        "--speculative-algorithm EAGLE",
+        "--speculative-num-steps 3",
+        "--speculative-eagle-topk 1",
+        "--speculative-num-draft-tokens 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "b300", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "gb300", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 2",
+        "--speculative-algorithm EAGLE",
+        "--speculative-num-steps 3",
+        "--speculative-eagle-topk 1",
+        "--speculative-num-draft-tokens 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "gb300", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "gb200", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 2",
+        "--speculative-algorithm EAGLE",
+        "--speculative-num-steps 3",
+        "--speculative-eagle-topk 1",
+        "--speculative-num-draft-tokens 4",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+    {
+      match: { hw: "gb200", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" },
+      env: [],
+      flags: [
+        "--model-path {{MODEL_NAME}}",
+        "--reasoning-parser auto",
+        "--tool-call-parser auto",
+        "--tp 2",
+        "--host {{HOST_IP}}",
+        "--port {{PORT}}",
+      ],
+    },
+  ],
+};

docs/src/snippets/configs/thinkingmachines/inkling-benchmarks.jsx

@@ -0,0 +1,56 @@
+// One entry per cell `match` tuple. Accuracy is per-cell measured (keyed to
+// config.accuracyLabels), taken at reasoning effort max (0.99) on the balanced
+// recipe for each platform. Speed is pending — fill tokens_per_sec_per_gpu /
+// ttft_ms / tpot_ms once bench_serving has been run per cell.
+//
+// Accuracy provenance: BFCL v3 / MMAU / MMMU-Pro / AIME25 (pass@1, avg of 8) /
+// NIAH single-needle / HLE (self-judge, text subset). NVIDIA cells ran on the
+// lmsysorg/sglang:inkling-cu13 image (inkling-support branch); AMD on
+// inkling-rocm700-mi35x. NIAH shows the two long-context buckets (512K / 1M) —
+// all platforms score ~1.0 below ~220K. GB300 balanced HLE not yet run.
+
+export const benchmarks = [
+  { match: { hw: "b200"   , variant: "default" , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   },
+    sglang_version: "inkling-support (inkling-cu13)",
+    accuracy: { bfcl_pct: 77.9, mmau_pct: 78.3, mmmu_pro_pct: 74.0, aime25_pct: 94.6, niah_512k_pct: 93.9, niah_1m_pct: 75.8, hle_pct: 29.5 } },
+  { match: { hw: "b300"   , variant: "default" , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   },
+    sglang_version: "inkling-support (inkling-cu13)",
+    accuracy: { bfcl_pct: 78.5, mmau_pct: 77.5, mmmu_pro_pct: 74.1, aime25_pct: 95.0, niah_512k_pct: 90.9, niah_1m_pct: 72.7, hle_pct: 29.3 } },
+  { match: { hw: "gb200"  , variant: "default" , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   } },
+  { match: { hw: "gb300"  , variant: "default" , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   },
+    sglang_version: "inkling-support (inkling-cu13)",
+    accuracy: { bfcl_pct: 77.9, mmau_pct: 78.4, mmmu_pro_pct: 74.0, aime25_pct: 96.3, niah_512k_pct: 93.9, niah_1m_pct: 81.8 } },
+  { match: { hw: "h200"   , variant: "default" , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   },
+    sglang_version: "inkling-support (inkling-cu13)",
+    accuracy: { bfcl_pct: 77.0, mmau_pct: 77.7, mmmu_pro_pct: 74.3, aime25_pct: 96.7, niah_512k_pct: 90.9, niah_1m_pct: 75.8, hle_pct: 28.8 } },
+  { match: { hw: "mi350x" , variant: "default" , quant: "bf16"  , strategy: "balanced"     , nodes: "single"   },
+    sglang_version: "inkling-rocm700-mi35x",
+    accuracy: { bfcl_pct: 77.8, mmau_pct: 76.3, mmmu_pro_pct: 74.4, aime25_pct: 95.0, hle_pct: 29.4 } },
+  { match: { hw: "mi355x" , variant: "default" , quant: "bf16"  , strategy: "balanced"     , nodes: "single"   } },
+  { match: { hw: "b200"   , variant: "default" , quant: "nvfp4" , strategy: "mtp"          , nodes: "single"   } },
+  { match: { hw: "b300"   , variant: "default" , quant: "nvfp4" , strategy: "mtp"          , nodes: "single"   } },
+  { match: { hw: "gb200"  , variant: "default" , quant: "nvfp4" , strategy: "mtp"          , nodes: "single"   } },
+  { match: { hw: "gb300"  , variant: "default" , quant: "nvfp4" , strategy: "mtp"          , nodes: "single"   } },
+  { match: { hw: "h200"   , variant: "default" , quant: "nvfp4" , strategy: "mtp"          , nodes: "single"   } },
+  { match: { hw: "b200"   , variant: "default" , quant: "nvfp4" , strategy: "dspark"       , nodes: "single"   } },
+  { match: { hw: "b200"   , variant: "default" , quant: "nvfp4" , strategy: "long_context" , nodes: "single"   } },
+  { match: { hw: "b300"   , variant: "default" , quant: "nvfp4" , strategy: "long_context" , nodes: "single"   } },
+  { match: { hw: "gb200"  , variant: "default" , quant: "nvfp4" , strategy: "long_context" , nodes: "single"   } },
+  { match: { hw: "gb300"  , variant: "default" , quant: "nvfp4" , strategy: "long_context" , nodes: "single"   } },
+  { match: { hw: "gb300"  , variant: "default" , quant: "bf16"  , strategy: "balanced"     , nodes: "multi-2"  },
+    sglang_version: "inkling-support (inkling-cu13)",
+    accuracy: { bfcl_pct: 78.3, mmau_pct: 76.9, mmmu_pro_pct: 74.7, aime25_pct: 95.0, niah_512k_pct: 90.9, niah_1m_pct: 78.8 } },
+  { match: { hw: "gb300"  , variant: "default" , quant: "bf16"  , strategy: "mtp"          , nodes: "multi-2"  } },
+  { match: { hw: "b300"   , variant: "default" , quant: "bf16"  , strategy: "balanced"     , nodes: "single"   },
+    sglang_version: "inkling-support (inkling-cu13)",
+    accuracy: { bfcl_pct: 78.1, mmau_pct: 77.3, mmmu_pro_pct: 74.7, aime25_pct: 96.3, niah_512k_pct: 90.9, niah_1m_pct: 78.8, hle_pct: 29.7 } },
+  { match: { hw: "b300"   , variant: "default" , quant: "bf16"  , strategy: "mtp"          , nodes: "single"   } },
+  { match: { hw: "b200"   , variant: "default" , quant: "bf16"  , strategy: "balanced"     , nodes: "multi-2"  } },
+  { match: { hw: "b200"   , variant: "default" , quant: "bf16"  , strategy: "mtp"          , nodes: "multi-2"  } },
+  { match: { hw: "b200"   , variant: "lora"    , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   } },
+  { match: { hw: "b300"   , variant: "lora"    , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   } },
+  { match: { hw: "gb200"  , variant: "lora"    , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   } },
+  { match: { hw: "gb300"  , variant: "lora"    , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   } },
+  { match: { hw: "h200"   , variant: "lora"    , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   } },
+  { match: { hw: "gb300"  , variant: "lora"    , quant: "bf16"  , strategy: "balanced"     , nodes: "multi-2"  } },
+];

docs/src/snippets/configs/thinkingmachines/inkling-small-benchmarks.jsx

@@ -0,0 +1,74 @@
+// One entry per cell `match` tuple. `accuracy` is keyed to
+// config.accuracyLabels in inkling-small.jsx.
+
+export const benchmarks = [
+  { match: { hw: "b200"   , variant: "default" , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   },
+    sglang_version: "dev-inkling-dspark (b7252cc)",
+    accuracy: { aime26_pct: 95.42, bfcl_pct: 76.54, mmau_pct: 76.30 } },
+  { match: { hw: "b300"   , variant: "default" , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   },
+    sglang_version: "dev (cb12a15)",
+    accuracy: { gsm8k_pct: 96.29 } },
+  { match: { hw: "gb200"  , variant: "default" , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   } },
+  { match: { hw: "gb300"  , variant: "default" , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   },
+    sglang_version: "dev (cb12a15)",
+    accuracy: { gsm8k_pct: 96.66 } },
+  { match: { hw: "h200"   , variant: "default" , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   },
+    sglang_version: "dev-inkling-dspark (b7252cc)",
+    accuracy: { aime26_pct: 95.00, bfcl_pct: 76.02, mmau_pct: 74.70 } },
+  { match: { hw: "dgx-spark", variant: "default" , quant: "nvfp4" , strategy: "balanced"   , nodes: "multi-2"  },
+    sglang_version: "dev-inkling-small-dgx-spark" },
+  { match: { hw: "mi350x" , variant: "default" , quant: "bf16"  , strategy: "balanced"     , nodes: "single"   } },
+  { match: { hw: "mi355x" , variant: "default" , quant: "bf16"  , strategy: "balanced"     , nodes: "single"   } },
+  { match: { hw: "b200"   , variant: "default" , quant: "nvfp4" , strategy: "mtp"          , nodes: "single"   },
+    sglang_version: "dev-inkling-dspark (b7252cc)",
+    accuracy: { aime26_pct: 96.25, bfcl_pct: 77.57, mmau_pct: 77.20 } },
+  { match: { hw: "b300"   , variant: "default" , quant: "nvfp4" , strategy: "mtp"          , nodes: "single"   },
+    sglang_version: "dev-cu13-inkling-dspark (86ccfef)",
+    accuracy: { gsm8k_pct: 96.06 } },
+  { match: { hw: "gb200"  , variant: "default" , quant: "nvfp4" , strategy: "mtp"          , nodes: "single"   } },
+  { match: { hw: "gb300"  , variant: "default" , quant: "nvfp4" , strategy: "mtp"          , nodes: "single"   },
+    sglang_version: "dev-cu13-inkling-dspark (86ccfef)",
+    accuracy: { gsm8k_pct: 96.44 } },
+  { match: { hw: "h200"   , variant: "default" , quant: "nvfp4" , strategy: "mtp"          , nodes: "single"   },
+    sglang_version: "dev-inkling-dspark (b7252cc)",
+    accuracy: { aime26_pct: 95.83, bfcl_pct: 76.09, mmau_pct: 76.80 } },
+  { match: { hw: "b200"   , variant: "default" , quant: "nvfp4" , strategy: "dspark"       , nodes: "single"   },
+    sglang_version: "dev-inkling-dspark (b7252cc)",
+    accuracy: { aime26_pct: 95.83, bfcl_pct: 76.31, mmau_pct: 76.80 } },
+  { match: { hw: "b300"   , variant: "default" , quant: "nvfp4" , strategy: "dspark"       , nodes: "single"   },
+    sglang_version: "dev-cu13-inkling-dspark (86ccfef)",
+    accuracy: { gsm8k_pct: 96.21 } },
+  { match: { hw: "gb300"  , variant: "default" , quant: "nvfp4" , strategy: "dspark"       , nodes: "single"   },
+    sglang_version: "dev-cu13-inkling-dspark (86ccfef)",
+    accuracy: { gsm8k_pct: 95.83 } },
+  { match: { hw: "h200"   , variant: "default" , quant: "nvfp4" , strategy: "dspark"       , nodes: "single"   },
+    sglang_version: "dev-inkling-dspark (b7252cc)",
+    accuracy: { aime26_pct: 96.25, bfcl_pct: 76.68, mmau_pct: 76.50 } },
+  { match: { hw: "b200"   , variant: "default" , quant: "nvfp4" , strategy: "long_context" , nodes: "single"   },
+    sglang_version: "dev (8fbf960)",
+    accuracy: { gsm8k_pct: 96.13 } },
+  { match: { hw: "b300"   , variant: "default" , quant: "nvfp4" , strategy: "long_context" , nodes: "single"   },
+    sglang_version: "dev (cb12a15)",
+    accuracy: { gsm8k_pct: 95.91 } },
+  { match: { hw: "gb200"  , variant: "default" , quant: "nvfp4" , strategy: "long_context" , nodes: "single"   } },
+  { match: { hw: "gb300"  , variant: "default" , quant: "nvfp4" , strategy: "long_context" , nodes: "single"   },
+    sglang_version: "dev (cb12a15)",
+    accuracy: { gsm8k_pct: 96.21 } },
+  { match: { hw: "gb300"  , variant: "default" , quant: "bf16"  , strategy: "balanced"     , nodes: "multi-2"  } },
+  { match: { hw: "gb300"  , variant: "default" , quant: "bf16"  , strategy: "mtp"          , nodes: "multi-2"  } },
+  { match: { hw: "b300"   , variant: "default" , quant: "bf16"  , strategy: "balanced"     , nodes: "single"   },
+    sglang_version: "dev (cb12a15)",
+    accuracy: { gsm8k_pct: 96.29 } },
+  { match: { hw: "b300"   , variant: "default" , quant: "bf16"  , strategy: "mtp"          , nodes: "single"   },
+    sglang_version: "dev-cu13-inkling-dspark (86ccfef)",
+    accuracy: { gsm8k_pct: 96.36 } },
+  { match: { hw: "b200"   , variant: "default" , quant: "bf16"  , strategy: "balanced"     , nodes: "multi-2"  } },
+  { match: { hw: "b200"   , variant: "default" , quant: "bf16"  , strategy: "mtp"          , nodes: "multi-2"  } },
+  { match: { hw: "b200"   , variant: "lora"    , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   } },
+  { match: { hw: "b300"   , variant: "lora"    , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   } },
+  { match: { hw: "gb200"  , variant: "lora"    , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   } },
+  { match: { hw: "gb300"  , variant: "lora"    , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   } },
+  { match: { hw: "h200"   , variant: "lora"    , quant: "nvfp4" , strategy: "balanced"     , nodes: "single"   } },
+  { match: { hw: "gb300"  , variant: "lora"    , quant: "bf16"  , strategy: "balanced"     , nodes: "single"   } },
+  { match: { hw: "h200"   , variant: "lora"    , quant: "bf16"  , strategy: "balanced"     , nodes: "single"   } },
+];

docs/src/snippets/configs/zai-org/glm-5.2-benchmarks.jsx

@@ -0,0 +1,197 @@
+// GLM-5.2 per-cell benchmark numbers, keyed by the same `match` tuple as glm-5.2.jsx cells.
+// See _deployment.jsx for the speed/accuracy schema.
+// Numbers pending: each entry is a bare `match` stub (renders "pending") until measured
+// end-to-end on the corresponding hardware, then filled with sglang_version + speed/accuracy.
+export const benchmarks = [
+  // ---- H200 + FP8 ----  (serve recipe in glm-5.2.jsx; benchmark pending re-measurement)
+  { match: { hw: "h200", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" } },
+  { match: { hw: "h200", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" } },
+  { match: { hw: "h200", variant: "default", quant: "fp8", strategy: "high-throughput", nodes: "single" } },
+  // ---- B200 + FP8 ----  (8-GPU single node, TP8; real weights, --random-range-ratio 1.0, flush-cache every run)
+  {
+    // EAGLE MTP 5-1-6, mfs 0.8, no cuda-graph-max-bs. env SGLANG_SIMULATE_ACC_LEN=3.5
+    // (match-expected: 50% accept 3 / 50% accept 4) fixes the acceptance length.
+    match: { hw: "b200", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+    sglang_version: "main @ 09ca4fc",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 757, tpot_ms: 3.22, tokens_per_sec_per_gpu: 288 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 3188, tpot_ms: 9.12, tokens_per_sec_per_gpu: 1476 },
+    ],
+  },
+  {
+    // Balanced: DP8 + deepep + mfs 0.85 + chunked-prefill 32768 + max-running 256, 1-1-2 EAGLE.
+    // env SGLANG_SIMULATE_ACC_LEN=2 (match-expected: accept 2 of 2 draft tokens).
+    match: { hw: "b200", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" },
+    sglang_version: "main @ 09ca4fc",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 5742, tpot_ms: 17.65, tokens_per_sec_per_gpu: 3078 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 18744, tpot_ms: 32.61, tokens_per_sec_per_gpu: 5022 },
+    ],
+  },
+  {
+    // HT: DP8 + deepep + mfs 0.85 + max-running 256. B200 (178GB) keeps --max-running-requests 256
+    // (clamps the decode capture list to <=32 < the default 128 DeepEP buffer); no env buffer bump.
+    // No spec, so no SIMULATE_ACC_LEN.
+    match: { hw: "b200", variant: "default", quant: "fp8", strategy: "high-throughput", nodes: "single" },
+    sglang_version: "main @ 09ca4fc",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 177620, tpot_ms: 47.99, tokens_per_sec_per_gpu: 4059 },
+    ],
+  },
+  // ---- GB300 + FP8 ----  (4-GPU single node, TP4; real weights, --random-range-ratio 1.0, flush-cache every run)
+  {
+    // EAGLE MTP 5-1-6, mfs 0.85, no cuda-graph-max-bs; mrr auto-capped 48. env
+    // SGLANG_SIMULATE_ACC_LEN=3.5 (match-expected: 50% accept 3 / 50% accept 4) fixes the
+    // acceptance length so the spec numbers are comparable across runs.
+    match: { hw: "gb300", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+    sglang_version: "main @ 09ca4fc",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 374, tpot_ms: 4.55, tokens_per_sec_per_gpu: 459 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 3719, tpot_ms: 11.5, tokens_per_sec_per_gpu: 2376 },
+    ],
+  },
+  {
+    // Balanced: DP4 + deepep + mfs 0.85 + chunked-prefill 32768 (÷dp4 = 8192) + max-running 256,
+    // 1-1-2 EAGLE. env SGLANG_SIMULATE_ACC_LEN=2 (match-expected: accept 2 of 2 draft tokens).
+    match: { hw: "gb300", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" },
+    sglang_version: "main @ 09ca4fc",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 7429, tpot_ms: 25.21, tokens_per_sec_per_gpu: 4437 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 27488, tpot_ms: 48.43, tokens_per_sec_per_gpu: 6804 },
+    ],
+  },
+  // GB300 HT: drop-flags (mfs/cgbs/mrr dropped) + env SGLANG_DEEPEP_NUM_MAX_DISPATCH_TOKENS_PER_RANK=512.
+  // DeepEP low_latency asserts x.size(0) <= num_max_dispatch_tokens_per_rank (deep_ep.cpp:1262,
+  // default 128). Decode cuda-graph capture builds a dummy batch of `bs` tokens per rank (not
+  // DP-split), so the 256/512 capture buckets trip the assert at default 128; GB300 (DP4) also
+  // hits bs/4 = 256 > 128 at c1024 runtime. Raising the buffer to 512 fixes both and lets HT
+  // drop --max-running-requests. Verified on main: with env=512 capture + serve pass; without
+  // env the assert trips at the bs=512 capture bucket. No spec, so no SIMULATE_ACC_LEN.
+  {
+    match: { hw: "gb300", variant: "default", quant: "fp8", strategy: "high-throughput", nodes: "single" },
+    sglang_version: "main @ 09ca4fc",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 231101, tpot_ms: 86.01, tokens_per_sec_per_gpu: 6039 },
+    ],
+  },
+  // ---- B300 + FP8 ----  (8-GPU single node, TP8; serve recipe in glm-5.2.jsx; benchmark pending re-measurement)
+  { match: { hw: "b300", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" } },
+  { match: { hw: "b300", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" } },
+  { match: { hw: "b300", variant: "default", quant: "fp8", strategy: "high-throughput", nodes: "single" } },
+  // ---- B300 + BF16 ----  (unquantized zai-org/GLM-5.2, TP8; serve recipe in glm-5.2.jsx; benchmark pending re-measurement)
+  { match: { hw: "b300", variant: "default", quant: "bf16", strategy: "low-latency", nodes: "single" } },
+  { match: { hw: "b300", variant: "default", quant: "bf16", strategy: "balanced", nodes: "single" } },
+  { match: { hw: "b300", variant: "default", quant: "bf16", strategy: "high-throughput", nodes: "single" } },
+  // ---- BF16 multi-node (inferred) ----  benchmarks pending
+  { match: { hw: "h200",  variant: "default", quant: "bf16", strategy: "low-latency",     nodes: "multi-2" } },
+  { match: { hw: "h200",  variant: "default", quant: "bf16", strategy: "balanced",        nodes: "multi-2" } },
+  { match: { hw: "h200",  variant: "default", quant: "bf16", strategy: "high-throughput", nodes: "multi-2" } },
+  { match: { hw: "b200",  variant: "default", quant: "bf16", strategy: "low-latency",     nodes: "multi-2" } },
+  { match: { hw: "b200",  variant: "default", quant: "bf16", strategy: "balanced",        nodes: "multi-2" } },
+  { match: { hw: "b200",  variant: "default", quant: "bf16", strategy: "high-throughput", nodes: "multi-2" } },
+  { match: { hw: "gb300", variant: "default", quant: "bf16", strategy: "low-latency",     nodes: "multi-2" } },
+  { match: { hw: "gb300", variant: "default", quant: "bf16", strategy: "balanced",        nodes: "multi-2" } },
+  { match: { hw: "gb300", variant: "default", quant: "bf16", strategy: "high-throughput", nodes: "multi-2" } },
+  // ---- B200 + NVFP4 ----  (8-GPU single node, TP8; nvidia/GLM-5.2-NVFP4 via --quantization modelopt_fp4,
+  // flush-cache every run.
+  // ttft_ms/tpot_ms are P50; tokens_per_sec_per_gpu = total (in+out) tok/s/GPU (output/GPU × (isl+osl)/osl).
+  // balanced & high-throughput add DP-Attention (dp8); low-latency uses MTP 5-1-6, balanced MTP 2-1-3.)
+  {
+    match: { hw: "b200", variant: "default", quant: "nvfp4", strategy: "low-latency", nodes: "single" },
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 295, tpot_ms: 1.85, tokens_per_sec_per_gpu: 527 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 2491, tpot_ms: 5.43, tokens_per_sec_per_gpu: 2289 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "default", quant: "nvfp4", strategy: "balanced", nodes: "single" },
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 5837, tpot_ms: 12.70, tokens_per_sec_per_gpu: 3770 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 16736, tpot_ms: 30.00, tokens_per_sec_per_gpu: 5343 },
+    ],
+  },
+  {
+    match: { hw: "b200", variant: "default", quant: "nvfp4", strategy: "high-throughput", nodes: "single" },
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 130174, tpot_ms: 67.12, tokens_per_sec_per_gpu: 5305 },
+    ],
+  },
+  // ---- B300 + NVFP4 ----  (8-GPU single node, TP8; nvidia/GLM-5.2-NVFP4 via --quantization modelopt_fp4,
+  // flush-cache every run.
+  // tokens_per_sec_per_gpu = total (in+out) tok/s/GPU (measured output/GPU 51/224/153/205/430 × (isl+osl)/osl).
+  // aime25 overrides the variant default (87.7 → 89.58, measured on this NVFP4 build); gsm8k inherits the default.)
+  {
+    match: { hw: "b300", variant: "default", quant: "nvfp4", strategy: "low-latency", nodes: "single" },
+    accuracy: { aime25_pct: 89.58 },
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 196, tpot_ms: 1.86, tokens_per_sec_per_gpu: 459 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 274, tpot_ms: 6.95, tokens_per_sec_per_gpu: 2016 },
+    ],
+  },
+  {
+    match: { hw: "b300", variant: "default", quant: "nvfp4", strategy: "balanced", nodes: "single" },
+    accuracy: { aime25_pct: 89.58 },
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 680, tpot_ms: 48.9, tokens_per_sec_per_gpu: 1377 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 3010, tpot_ms: 149, tokens_per_sec_per_gpu: 1845 },
+    ],
+  },
+  {
+    match: { hw: "b300", variant: "default", quant: "nvfp4", strategy: "high-throughput", nodes: "single" },
+    accuracy: { aime25_pct: 89.58 },
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 6370, tpot_ms: 280, tokens_per_sec_per_gpu: 3870 },
+    ],
+  },
+  // ---- MI355X + FP8 ----  gfx950, TP8, DSA tilelang, NO MTP (disabled on AMD).
+  // Measured on lmsysorg/sglang-rocm:v0.5.13.post1-rocm720-mi35x-20260618, flush-cache every run.
+  // No spec-decoding, so not directly comparable to the NVIDIA low-latency cells (EAGLE MTP).
+  {
+    match: { hw: "mi355x", variant: "default", quant: "fp8", strategy: "low-latency", nodes: "single" },
+    sglang_version: "0.5.13.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1 },
+        ttft_ms: 634, tpot_ms: 13.56, tokens_per_sec_per_gpu: 81 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 16 },
+        ttft_ms: 5411, tpot_ms: 23.60, tokens_per_sec_per_gpu: 621 },
+    ],
+  },
+  {
+    match: { hw: "mi355x", variant: "default", quant: "fp8", strategy: "balanced", nodes: "single" },
+    sglang_version: "0.5.13.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 64 },
+        ttft_ms: 19526, tpot_ms: 46.50, tokens_per_sec_per_gpu: 1098 },
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 256 },
+        ttft_ms: 117866, tpot_ms: 56.12, tokens_per_sec_per_gpu: 1044 },
+    ],
+  },
+  {
+    match: { hw: "mi355x", variant: "default", quant: "fp8", strategy: "high-throughput", nodes: "single" },
+    sglang_version: "0.5.13.post1",
+    speed: [
+      { workload: { dataset: "random", isl: 8192, osl: 1024, max_concurrency: 1024 },
+        ttft_ms: 432058, tpot_ms: 106.44, tokens_per_sec_per_gpu: 1269 },
+    ],
+  },
+];

docs/src/snippets/diffusion/flux-deployment.jsx

@@ -0,0 +1,372 @@
+export const FluxDeployment = () => {
+  const config = {
+    modelFamily: 'FLUX',
+
+    options: {
+      hardware: {
+        name: 'hardware',
+        title: 'Hardware Platform',
+        items: [
+          { id: 'b200', label: 'B200', default: true },
+          { id: 'b300', label: 'B300', default: false },
+          { id: 'h200', label: 'H200', default: false },
+          { id: 'h100', label: 'H100', default: false },
+          { id: 'mi355x', label: 'MI355X', default: false },
+          { id: 'mi325x', label: 'MI325X', default: false },
+          { id: 'mi300x', label: 'MI300X', default: false },
+          { id: 'a2', label: 'A2', default: false },
+          { id: 'a3', label: 'A3', default: false }
+        ]
+      },
+      version: {
+        name: 'version',
+        title: 'Model Version',
+        items: [
+          { id: 'flux1-dev', label: 'FLUX.1-dev', subtitle: '12B', default: true },
+          { id: 'flux2-dev', label: 'FLUX.2-dev', subtitle: '32B', default: false }
+        ]
+      }
+    },
+
+    modelConfigs: {
+      'flux1-dev': { repoId: 'black-forest-labs/FLUX.1-dev' },
+      'flux2-dev': { repoId: 'black-forest-labs/FLUX.2-dev' }
+    },
+
+    generateCommand: function(values) {
+      const { hardware, version } = values;
+      const config = this.modelConfigs[version];
+
+      if (hardware === 'a2') {
+        if (version === 'flux1-dev') {
+          return `sglang serve \\
+  --model-path ${config.repoId} \\
+  --num-gpus 1`;
+        }
+
+        return `sglang serve \\
+  --model-path ${config.repoId} \\
+  --tp-size 2 \\
+  --num-gpus 2`;
+      }
+
+      if (hardware === 'a3') {
+        return `#One A3 card has 2 npu chips
+sglang serve \\
+  --tp-size 2 \\
+  --model-path ${config.repoId} \\
+  --num-gpus 2`;
+      }
+
+      return `sglang serve \\
+  --model-path ${config.repoId} \\
+  --ulysses-degree=1 \\
+  --ring-degree=1`;
+    }
+  };
+
+  if (!config || !config.options) {
+    return <div>Error: Invalid configuration provided</div>;
+  }
+
+  const getInitialState = () => {
+    const initialState = {};
+    Object.entries(config.options).forEach(([key, option]) => {
+      if (option.type === 'checkbox') {
+        initialState[key] = (option.items || [])
+          .filter((item) => item.default)
+          .map((item) => item.id);
+        return;
+      }
+
+      if (option.type === 'text') {
+        initialState[key] = option.default || '';
+        return;
+      }
+
+      let items = option.items || [];
+      if (option.getDynamicItems) {
+        const defaultValues = {};
+        Object.entries(config.options).forEach(([innerKey, innerOption]) => {
+          if (innerOption.type === 'checkbox') {
+            defaultValues[innerKey] = (innerOption.items || [])
+              .filter((item) => item.default)
+              .map((item) => item.id);
+          } else if (innerOption.type === 'text') {
+            defaultValues[innerKey] = innerOption.default || '';
+          } else if (innerOption.items && innerOption.items.length > 0) {
+            const defaultItem = innerOption.items.find((item) => item.default);
+            defaultValues[innerKey] = defaultItem ? defaultItem.id : innerOption.items[0].id;
+          }
+        });
+        items = option.getDynamicItems(defaultValues);
+      }
+
+      const defaultItem = items && items.find((item) => item.default);
+      initialState[key] = defaultItem ? defaultItem.id : items && items[0] ? items[0].id : '';
+    });
+    return initialState;
+  };
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode =
+        html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const isAscend = values.hardware === 'a2' || values.hardware === 'a3';
+    const targetTabName = isAscend ? 'Ascend A3' : 'NVIDIA B200';
+
+    const allTabs = document.querySelectorAll('button, [role="tab"]');
+    allTabs.forEach((tab) => {
+      const text = tab.textContent.trim();
+      if (text === targetTabName && tab.getAttribute('aria-selected') !== 'true') {
+        tab.click();
+      }
+    });
+  }, [values.hardware]);
+
+  const handleRadioChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const handleCheckboxChange = (optionName, itemId, isChecked) => {
+    setValues((prev) => {
+      const currentValues = prev[optionName] || [];
+      if (isChecked) {
+        return { ...prev, [optionName]: [...currentValues, itemId] };
+      }
+      return {
+        ...prev,
+        [optionName]: currentValues.filter((id) => id !== itemId),
+      };
+    });
+  };
+
+  const handleTextChange = (optionName, value) => {
+    setValues((prev) => ({ ...prev, [optionName]: value }));
+  };
+
+  const command = config.generateCommand ? config.generateCommand.call(config, values) : '';
+
+  const containerStyle = {
+    maxWidth: '900px',
+    margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  };
+  const cardStyle = {
+    padding: '8px 12px',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    background: isDark ? '#1f2937' : '#fff',
+  };
+  const titleStyle = {
+    fontSize: '13px',
+    fontWeight: '600',
+    minWidth: '140px',
+    flexShrink: 0,
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const itemsStyle = {
+    display: 'flex',
+    rowGap: '2px',
+    columnGap: '6px',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+  };
+  const labelBaseStyle = {
+    padding: '4px 10px',
+    border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`,
+    borderRadius: '3px',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    fontSize: '13px',
+    transition: 'all 0.2s',
+    userSelect: 'none',
+    minWidth: '45px',
+    textAlign: 'center',
+    flex: 1,
+    background: isDark ? '#374151' : '#fff',
+    color: isDark ? '#e5e7eb' : 'inherit',
+  };
+  const checkedStyle = {
+    background: '#D45D44',
+    color: 'white',
+    borderColor: '#D45D44',
+  };
+  const disabledStyle = {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  };
+  const subtitleStyle = {
+    display: 'block',
+    fontSize: '9px',
+    marginTop: '1px',
+    lineHeight: '1.1',
+    opacity: 0.7,
+  };
+  const textInputStyle = {
+    flex: 1,
+    padding: '8px 10px',
+    borderRadius: '4px',
+    border: `1px solid ${isDark ? '#4b5563' : '#d1d5db'}`,
+    background: isDark ? '#111827' : '#fff',
+    color: isDark ? '#e5e7eb' : '#111827',
+    fontSize: '13px',
+  };
+  const commandDisplayStyle = {
+    flex: 1,
+    padding: '12px 16px',
+    background: isDark ? '#111827' : '#f5f5f5',
+    borderRadius: '6px',
+    fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace",
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: isDark ? '#e5e7eb' : '#374151',
+    whiteSpace: 'pre-wrap',
+    overflowX: 'auto',
+    margin: 0,
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+  };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(config.options).map(([key, option]) => {
+        if (option.condition && !option.condition(values)) {
+          return null;
+        }
+
+        const items = option.getDynamicItems ? option.getDynamicItems(values) : option.items || [];
+
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {option.type === 'text' ? (
+                <input
+                  type="text"
+                  value={values[option.name] || ''}
+                  placeholder={option.placeholder || ''}
+                  onChange={(event) => handleTextChange(option.name, event.target.value)}
+                  style={textInputStyle}
+                />
+              ) : option.type === 'checkbox' ? (
+                (option.items || []).map((item) => {
+                  const isChecked = (values[option.name] || []).includes(item.id);
+                  const isDisabled =
+                    item.required ||
+                    (typeof item.disabledWhen === 'function' && item.disabledWhen(values));
+
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={(event) =>
+                          handleCheckboxChange(option.name, item.id, event.target.checked)
+                        }
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              ) : (
+                items.map((item) => {
+                  const isChecked = values[option.name] === item.id;
+                  const isDisabled = Boolean(item.disabled);
+
+                  return (
+                    <label
+                      key={item.id}
+                      title={item.disabledReason || ''}
+                      style={{
+                        ...labelBaseStyle,
+                        ...(isChecked ? checkedStyle : {}),
+                        ...(isDisabled ? disabledStyle : {}),
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        name={option.name}
+                        value={item.id}
+                        checked={isChecked}
+                        disabled={isDisabled}
+                        onChange={() => !isDisabled && handleRadioChange(option.name, item.id)}
+                        style={{ display: 'none' }}
+                      />
+                      {item.label}
+                      {item.subtitle && (
+                        <small
+                          style={{
+                            ...subtitleStyle,
+                            color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit',
+                          }}
+                        >
+                          {item.subtitle}
+                        </small>
+                      )}
+                    </label>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        );
+      })}
+
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{command}</pre>
+      </div>
+    </div>
+  );
+};

docs/src/snippets/diffusion/ltx-deployment.jsx

@@ -0,0 +1,244 @@
+export const LTXDeployment = () => {
+  const options = {
+    hardware: {
+      name: 'hardware',
+      title: 'Deployment Target',
+      items: [
+        { id: 'h200', label: '1x H200', subtitle: 'resident', default: true },
+        { id: 'h200-2gpu', label: '2 GPUs', subtitle: 'CFG parallel', default: false },
+        { id: 'h200-4gpu', label: '4 GPUs', subtitle: 'TP2 + CFG', default: false },
+        { id: 'standard', label: 'Standard CUDA', subtitle: 'Original mode', default: false },
+        { id: 'official', label: 'Official Match', subtitle: 'Original switching', default: false },
+      ],
+    },
+    model: {
+      name: 'model',
+      title: 'Model',
+      items: [
+        { id: 'ltx23', label: 'LTX-2.3', default: true },
+        { id: 'ltx2', label: 'LTX-2', default: false },
+      ],
+    },
+    pipeline: {
+      name: 'pipeline',
+      title: 'Pipeline',
+      items: [
+        { id: 'two-stage', label: 'Two Stage', default: true, validModels: ['ltx2', 'ltx23'] },
+        { id: 'two-stage-hq', label: 'Two Stage HQ', subtitle: 'High Quality', default: false, validModels: ['ltx23'] },
+        { id: 'one-stage', label: 'One Stage', default: false, validModels: ['ltx2', 'ltx23'] },
+      ],
+    },
+  };
+
+  const modelConfigs = {
+    ltx2: {
+      repoId: 'Lightricks/LTX-2',
+      pipelines: {
+        'one-stage': 'LTX2Pipeline',
+        'two-stage': 'LTX2TwoStagePipeline',
+      },
+      supportedLoras: [],
+    },
+    ltx23: {
+      repoId: 'Lightricks/LTX-2.3',
+      pipelines: {
+        'one-stage': 'LTX2Pipeline',
+        'two-stage': 'LTX2TwoStagePipeline',
+        'two-stage-hq': 'LTX2TwoStageHQPipeline',
+      },
+      supportedLoras: [
+        {
+          id: 'transition',
+          path: 'valiantcat/LTX-2.3-Transition-LORA',
+          weightName: 'ltx2.3-transition.safetensors',
+          validPipelines: ['two-stage', 'two-stage-hq'],
+        },
+      ],
+    },
+  };
+
+  const getInitialState = () => ({
+    hardware: 'h200',
+    model: 'ltx23',
+    pipeline: 'two-stage',
+    selectedLoraPath: 'none',
+  });
+
+  const [values, setValues] = useState(getInitialState);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const html = document.documentElement;
+      const isDarkMode = html.classList.contains('dark') ||
+        html.getAttribute('data-theme') === 'dark' ||
+        html.style.colorScheme === 'dark';
+      setIsDark(isDarkMode);
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const availableLoras = (() => {
+    const config = modelConfigs[values.model];
+    return (config?.supportedLoras || []).filter((lora) => lora.validPipelines.includes(values.pipeline));
+  })();
+
+  const handleRadioChange = (optionName, itemId) => {
+    setValues((prev) => {
+      const next = { ...prev, [optionName]: itemId };
+
+      const validPipeline = options.pipeline.items.some((item) => (
+        item.id === next.pipeline && item.validModels.includes(next.model)
+      ));
+      if (!validPipeline) {
+        next.pipeline = 'two-stage';
+      }
+
+      const config = modelConfigs[next.model];
+      const nextSupported = (config?.supportedLoras || []).filter((lora) => lora.validPipelines.includes(next.pipeline));
+      const isValid = nextSupported.some((lora) => lora.path === prev.selectedLoraPath);
+      if (!isValid) {
+        next.selectedLoraPath = 'none';
+      }
+      return next;
+    });
+  };
+
+  const handleLoraToggle = (path) => {
+    setValues((prev) => ({
+      ...prev,
+      selectedLoraPath: prev.selectedLoraPath === path ? 'none' : path,
+    }));
+  };
+
+  const getDeviceMode = () => {
+    if (values.hardware.startsWith('h200')) {
+      return 'resident';
+    }
+    if (values.hardware === 'official') {
+      return 'original';
+    }
+    return 'original';
+  };
+
+  const getParallelFlags = () => {
+    const parallelFlagsMap = {
+      'h200-2gpu': ` \\\n  --num-gpus 2 \\\n  --enable-cfg-parallel`,
+      'h200-4gpu': ` \\\n  --num-gpus 4 \\\n  --tp-size 2 \\\n  --enable-cfg-parallel`,
+    };
+    return parallelFlagsMap[values.hardware] || '';
+  };
+
+  const generateCommand = () => {
+    const config = modelConfigs[values.model];
+    const pipelineClass = config.pipelines[values.pipeline];
+    if (!pipelineClass) {
+      return '# Error: Invalid configuration';
+    }
+
+    let command = `sglang serve \\\n  --model-path ${config.repoId} \\\n  --pipeline-class-name ${pipelineClass}`;
+    command += getParallelFlags();
+    if (values.model === 'ltx23' && values.pipeline !== 'one-stage') {
+      command += ` \\\n  --ltx2-two-stage-device-mode ${getDeviceMode()}`;
+    }
+
+    const selectedLora = availableLoras.find((lora) => lora.path === values.selectedLoraPath);
+    if (selectedLora) {
+      command += ` \\\n  --lora-path ${selectedLora.path} \\\n  --lora-weight-name ${selectedLora.weightName}`;
+    }
+
+    command += ` \\\n  --port 30000`;
+    return command;
+  };
+
+  const containerStyle = { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '4px' };
+  const cardStyle = { padding: '8px 12px', border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`, borderLeft: `3px solid ${isDark ? '#E85D4D' : '#D45D44'}`, borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '12px', background: isDark ? '#1f2937' : '#fff' };
+  const titleStyle = { fontSize: '13px', fontWeight: '600', minWidth: '140px', flexShrink: 0, color: isDark ? '#e5e7eb' : 'inherit' };
+  const itemsStyle = { display: 'flex', rowGap: '2px', columnGap: '6px', flexWrap: 'wrap', alignItems: 'center', flex: 1 };
+  const labelBaseStyle = { padding: '4px 10px', border: `1px solid ${isDark ? '#9ca3af' : '#d1d5db'}`, borderRadius: '3px', cursor: 'pointer', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: '500', fontSize: '13px', transition: 'all 0.2s', userSelect: 'none', minWidth: '45px', textAlign: 'center', flex: 1, background: isDark ? '#374151' : '#fff', color: isDark ? '#e5e7eb' : 'inherit' };
+  const checkedStyle = { background: '#D45D44', color: 'white', borderColor: '#D45D44' };
+  const subtitleStyle = { display: 'block', fontSize: '9px', marginTop: '1px', lineHeight: '1.1', opacity: 0.7 };
+  const commandDisplayStyle = { flex: 1, padding: '12px 16px', background: isDark ? '#111827' : '#f5f5f5', borderRadius: '6px', fontFamily: "'Menlo', 'Monaco', 'Courier New', monospace", fontSize: '12px', lineHeight: '1.5', color: isDark ? '#e5e7eb' : '#374151', whiteSpace: 'pre-wrap', overflowX: 'auto', margin: 0, border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}` };
+
+  return (
+    <div style={containerStyle} className="not-prose">
+      {Object.entries(options).map(([key, option]) => {
+        const itemsToDisplay = key === 'pipeline'
+          ? option.items.filter((item) => item.validModels.includes(values.model))
+          : option.items;
+
+        return (
+          <div key={key} style={cardStyle}>
+            <div style={titleStyle}>{option.title}</div>
+            <div style={itemsStyle}>
+              {itemsToDisplay.map((item) => {
+                const isChecked = values[option.name] === item.id;
+                return (
+                  <label key={item.id} style={{ ...labelBaseStyle, ...(isChecked ? checkedStyle : {}) }}>
+                    <input
+                      type="radio"
+                      name={option.name}
+                      checked={isChecked}
+                      onChange={() => handleRadioChange(key, item.id)}
+                      style={{ display: 'none' }}
+                    />
+                    {item.label}
+                    {item.subtitle && (
+                      <small style={{ ...subtitleStyle, color: isChecked ? 'rgba(255,255,255,0.85)' : 'inherit' }}>
+                        {item.subtitle}
+                      </small>
+                    )}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+
+      <div style={cardStyle}>
+        <div style={titleStyle}>Select LoRA Model</div>
+        <div style={itemsStyle}>
+          {availableLoras.length === 0 && (
+            <div style={{ color: isDark ? '#999' : '#666', fontSize: '12px', padding: '8px' }}>
+              No LoRA models available for this configuration.
+            </div>
+          )}
+          {availableLoras.map((lora) => {
+            const isSelected = values.selectedLoraPath === lora.path;
+            return (
+              <label
+                key={lora.id}
+                style={{ ...labelBaseStyle, ...(isSelected ? checkedStyle : {}) }}
+                onClick={(event) => {
+                  event.preventDefault();
+                  handleLoraToggle(lora.path);
+                }}
+              >
+                <input
+                  type="radio"
+                  name="loraModelSelection"
+                  checked={isSelected}
+                  readOnly
+                  style={{ display: 'none' }}
+                />
+                {lora.id}
+                <small style={{ ...subtitleStyle, color: isSelected ? 'rgba(255,255,255,0.85)' : 'inherit' }}>
+                  {lora.path}
+                </small>
+              </label>
+            );
+          })}
+        </div>
+      </div>
+
+      <div style={cardStyle}>
+        <div style={titleStyle}>Run this Command:</div>
+        <pre style={commandDisplayStyle}>{generateCommand()}</pre>
+      </div>
+    </div>
+  );
+};