> ## Documentation Index
> Fetch the complete documentation index at: https://lmsysorg-dsv4-1.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# SGLang Cookbook

export const PopularModels = ({models = [], variant = "strip", 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";
  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]);
  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;
  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 ? <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} →
            </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 →
      </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)"
  }} />

        {}
        <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>;
};

export const popularModels = [{
  name: "DeepSeek-V4.1-Flash",
  vendor: "DeepSeek",
  href: "/cookbook/autoregressive/DeepSeek/DeepSeek-V4_1",
  logo: "/cards/logos/deepseek.png",
  badge: "New",
  tags: ["5 platforms", "Engram + DSpark", "FP8 dense / FP4 MoE"],
  hero: {
    eyebrow: "Featured model \u00b7 New",
    headline: "Meet DeepSeek-V4.1 Flash on SGLang",
    blurb: "DeepSeek's sparse-attention Mixture-of-Experts model, served through SGLang's `dsv4` backend \u2014 pairing multi-ratio compressed KV pools behind FlashMLA with a learned sparse index that picks a top-512 candidate set per query, an mHC mixing stage, and Engram, an n-gram hash memory whose two fp8 tables are roughly 40% of the checkpoint. It ships DSpark, its own three-stage speculative draft. Recipes cover GB300, H200, B200, B300 and AMD MI350X.",
    tags: ["384 experts / top-6", "Sparse index + Engram", "NVIDIA + AMD"],
    cta: "Open the DeepSeek-V4.1 Flash cookbook",
    caption: "DeepSeek-V4.1 Flash deployment guide"
  }
}, {
  name: "Qwen3.8-Flash-Next",
  vendor: "Qwen",
  href: "/cookbook/autoregressive/Qwen/Qwen3.8-Flash-Next",
  logo: "/cards/logos/qwen.png",
  badge: "New",
  tags: ["6 platforms", "GDN + QSA hybrid", "BF16 / FP8 / NVFP4"],
  hero: {
    eyebrow: "Featured model \u00b7 New",
    headline: "Meet Qwen3.8-Flash-Next on SGLang",
    blurb: "Qwen's early preview of the Qwen4 architecture \u2014 176B total parameters with 6B active, three of every four layers Gated DeltaNet and the fourth global attention running Qwen Sparse Attention, over an ultra-sparse MoE with an in-checkpoint MTP head. The cookbook covers single-node TP4 serving on H200 / B200 / B300 / GB300 and TP8 on MI350X / MI355X.",
    tags: ["176B / 6B active", "262K context", "Single-node"],
    cta: "Open the Qwen3.8-Flash-Next cookbook",
    caption: "Qwen3.8-Flash-Next deployment guide"
  }
}, {
  name: "GLM-5.3-Flash",
  vendor: "Z.ai",
  href: "/cookbook/autoregressive/GLM/GLM-5.3-Flash",
  logo: "/cards/logos/glm.png",
  badge: "New",
  tags: ["9 platforms", "MLA + DSA + KDA hybrid", "Multimodal"],
  hero: {
    eyebrow: "Featured model · New",
    headline: "Meet GLM-5.3-Flash on SGLang",
    blurb: "Z.ai's natively multimodal Mixture-of-Experts model — 320B total parameters with 18B active, 45 text layers combining MLA, DSA sparse, and KDA linear attention, a 24-layer vision encoder for image and video input, and a native MTP draft layer for speculative decoding. Recipes cover H100 / H200 / B200 / B300 / GB200 / GB300 and AMD MI300X / MI325X / MI355X.",
    tags: ["320B / 18B active", "1M context", "Text + image + video"],
    cta: "Open the GLM-5.3-Flash cookbook",
    caption: "GLM-5.3-Flash deployment guide"
  }
}, {
  name: "MiniMax-H3",
  vendor: "MiniMax",
  href: "/cookbook/diffusion/MiniMax/MiniMax-H3",
  logo: "/cards/logos/minimax.png",
  badge: "New",
  tags: ["7 platforms", "Video + audio", "BF16 / FP8"],
  hero: {
    eyebrow: "Featured model · New",
    headline: "Meet MiniMax-H3 on SGLang",
    blurb: "MiniMax's video-and-audio diffusion model — one request returns an MP4 carrying 24 fps video and a synchronized stereo audio track. SGLang Diffusion serves all three task profiles — text, first/last frame, and image / video / audio reference conditioning — with Ulysses × Ring sequence parallelism and recipes across B200, B300, H200, H100, AMD MI300X / MI355X, and 2× RTX 5090.",
    tags: ["Video + synced audio", "4–15 s at 24 fps", "8× B200 → 2× RTX 5090"],
    cta: "Open the MiniMax-H3 cookbook",
    caption: "MiniMax-H3 deployment guide"
  }
}, {
  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"
  }
}];

A community-maintained repository of practical guides and recipes for deploying and using SGLang in production environments. Our mission is simple: answer the question **"How do I use SGLang (and related models) on hardware Y for task Z?"** with clear, actionable solutions.

<PopularModels models={popularModels} />

## Guides

<CardGroup cols={3}>
  <Card title="Autoregressive Models" mode="card" href="./autoregressive/intro" img="https://mintcdn.com/lmsysorg-dsv4-1/1iE8gvaaCaXWzYpe/cards/Autoregressive-card.png?fit=max&auto=format&n=1iE8gvaaCaXWzYpe&q=85&s=53f6a014caa490d577a7a11bbc367455" width="940" height="525" data-path="cards/Autoregressive-card.png" />

  <Card title="Diffusion Models" mode="card" href="./diffusion/intro" img="https://mintcdn.com/lmsysorg-dsv4-1/1iE8gvaaCaXWzYpe/cards/Diffusion-card.png?fit=max&auto=format&n=1iE8gvaaCaXWzYpe&q=85&s=1b14807051adf500f07fe07969f475f0" width="940" height="525" data-path="cards/Diffusion-card.png" />

  <Card title="VLA (Vision-Language-Action) Models" mode="card" href="./vla/intro" img="https://mintcdn.com/lmsysorg-dsv4-1/1iE8gvaaCaXWzYpe/cards/VLA-card.png?fit=max&auto=format&n=1iE8gvaaCaXWzYpe&q=85&s=64b9f4369461033282e0cc05825e33a5" width="940" height="525" data-path="cards/VLA-card.png" />
</CardGroup>

## Benchmarks

<CardGroup cols={2}>
  <Card title="Autoregressive Model Benchmark" mode="card" href="./base/benchmarks/autoregressive_model_benchmark" img="https://mintcdn.com/lmsysorg-dsv4-1/1iE8gvaaCaXWzYpe/cards/Autoregressive-benchmark-card.png?fit=max&auto=format&n=1iE8gvaaCaXWzYpe&q=85&s=6ea3fb93a9021b6c009b79c025ce49cb" width="940" height="525" data-path="cards/Autoregressive-benchmark-card.png" />

  <Card title="Diffusion Model Benchmark" mode="card" href="./base/benchmarks/diffusion_model_benchmark" img="https://mintcdn.com/lmsysorg-dsv4-1/1iE8gvaaCaXWzYpe/cards/Diffusion-benchmark-card.png?fit=max&auto=format&n=1iE8gvaaCaXWzYpe&q=85&s=d26b9999e318eb485f3c8b9e642ae18d" width="940" height="525" data-path="cards/Diffusion-benchmark-card.png" />
</CardGroup>