/*
 * Adding Inter Variable from Adobe Fonts
 * © 2009-2025 Adobe Systems Incorporated. All Rights Reserved.
 */

@import url('https://p.typekit.net/p.css?s=1&k=zmy3zmk&ht=tk&f=55314&a=164646275&app=typekit&e=css');

@font-face {
  font-family: 'inter-variable';
  src: url('https://use.typekit.net/af/250efc/00000000000000007750957d/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
      format('woff2'),
    url('https://use.typekit.net/af/250efc/00000000000000007750957d/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
      format('woff'),
    url('https://use.typekit.net/af/250efc/00000000000000007750957d/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
      format('opentype');
  font-display: auto;
  font-style: normal;
  font-weight: 100 900;
  font-stretch: normal;
}

body {
  font-family: 'inter-variable', sans-serif;
}

.mint-pointer-events-none {
    pointer-events: none
}
.mint-absolute {
    position: absolute
}
.mint-relative {
    position: relative
}
.mint-left-0 {
    left: 0px
}
.mint-right-0 {
    right: 0px
}
.mint-top-0 {
    top: 0px
}
.mint-mx-auto {
    margin-left: auto;
    margin-right: auto
}
.mint-mt-1 {
    margin-top: 0.25rem
}
.mint-mt-1\.5 {
    margin-top: 0.375rem
}
.mint-mt-12 {
    margin-top: 3rem
}
.mint-mt-4 {
    margin-top: 1rem
}
.mint-mt-5 {
    margin-top: 1.25rem
}
.mint-block {
    display: block
}
.mint-grid {
    display: grid
}
.mint-hidden {
    display: none
}
.mint-max-w-3xl {
    max-width: 48rem
}
.mint-max-w-xl {
    max-width: 36rem
}
.mint-cursor-pointer {
    cursor: pointer
}
.mint-gap-x-6 {
    column-gap: 1.5rem
}
.mint-gap-y-4 {
    row-gap: 1rem
}
.mint-px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}
.mint-px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}
.mint-py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem
}
.mint-pb-8 {
    padding-bottom: 2rem
}
.mint-text-center {
    text-align: center
}
.mint-text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem
}
.mint-text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}
.mint-font-medium {
    font-weight: 500
}
.mint-tracking-tight {
    letter-spacing: -0.025em
}
.mint-text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity))
}
.mint-text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity))
}
.mint-transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.mint-duration-100 {
    transition-duration: 100ms
}
.mint-group:hover .group-hover\:mint-scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.dark\:mint-block:is(.dark *) {
    display: block
}
.dark\:mint-hidden:is(.dark *) {
    display: none
}
.dark\:mint-text-zinc-50:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(250 250 250 / var(--tw-text-opacity))
}
.dark\:mint-text-zinc-500:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(113 113 122 / var(--tw-text-opacity))
}
@media (min-width: 640px) {
    .sm\:mint-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}
@media (min-width: 1024px) {
    .lg\:mint--top-16 {
        top: -4rem
    }
    .lg\:mint-mt-24 {
        margin-top: 6rem
    }
    .lg\:mint-px-0 {
        padding-left: 0px;
        padding-right: 0px
    }
    .lg\:mint-py-48 {
        padding-top: 12rem;
        padding-bottom: 12rem
    }
    .lg\:mint-pb-24 {
        padding-bottom: 6rem
    }
}

Meet the next generation of documentation. AI-native, beautiful out-of-the-box, and built for developers.

Introduction

Mintlify

Quickstart

Install the CLI to preview and develop your docs locally

Installation

CLI installation

Build your documentation using the Mintlify web editor

Web editor

Configure site-wide settings with the `docs.json` file

Global settings

Pages are the building blocks of your documentation

Pages

Structure and customize your documentation's navigation hierarchy

Navigation

Customize the appearance of your documentation

Themes

Host your documentation at your website's custom domain

Custom domain

Help users succeed with your product and find answers faster

Assistant

Make your content easier for LLMs to read and index

llms.txt

Add one-click AI integrations to your docs

Contextual menu

Markdown export

Generate MCP servers from your documentation or OpenAPI specs

Model Context Protocol

Configure Claude Code to help write, review, and update your docs

Claude Code

Configure Cursor to be your writing assistant

Cursor

Configure Windsurf to be your writing assistant

Windsurf

Learn how to format text, create headers, and style content

Headers and text

Images and embeds

Lists and tables

Code

Reusable, custom snippets to keep content in sync

Reusable snippets

A dropdown component to toggle content visibility

Accordions

Use callouts to add eye-catching context to your content

Callouts

Highlight main points or links with customizable layouts and icons

Cards

Columns

Display multiple code examples in one component

Code groups

Display code blocks in the right sidebar on desktop devices

Examples

Expandables

Set parameters for your API or SDK references

Fields

Use the Frame component to wrap images or other components in a container.

Frames

Icons

Mermaid

Specify the content of the right side panel

Panel

Sequence content using the Steps component

Steps

Tabs

Show a definition when you hover over text

Tooltips

Update

Playground

Reference OpenAPI endpoints in your docs pages

OpenAPI setup

Troubleshooting

Control who sees your documentation and customize their experience

Overview

Guarantee privacy of your docs by authenticating users

Authentication setup

Partial authentication setup

Let users log in for customized documentation experiences

Personalization setup

User data format for personalizing your documentation

Sending data

How to migrate documentation from your existing provider

Migrations

See information about your docs' performance in your dashboard

Analytics

Build interactive and reusable elements with React components

React

Fully customize your documentation with custom CSS and JS

Custom scripts

Post product updates in your docs with a subscribable RSS feed

Changelogs

Hidden pages

Redirects and broken links

Deploy your docs from a repo that contains multiple projects

Monorepo setup

Deployments

We're here to help you get the most out of Mintlify

Contact support

GitHub

GitLab

Add checks for broken links, linting, and grammar to the updating process

CI checks

Preview changes to your docs in a live deployment

Preview deployments

Trigger updates, embed AI assistant, and more

Trigger an update after updating your OpenAPI document by calling this endpoint in a CI check

Trigger Update

Get the status of an update from the status ID

Get Update Status

Generates a response message from the assistant for the specified domain. For best results, use the [useChat hook from ai-sdk](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat#usechat) to send requests and handle responses. You can set `fp`, `threadId`, and `filter` in the `body` field of the options parameter passed to the hook.

Generate Assistant Message

Product updates

Start building modern documentation in under five minutes

Preview changes locally to update your docs

Local Development

Edit your docs directly from the dashboard with live previews.

Web Editor

Configure your documentation using the `docs.json` file

Global Settings

Organize your docs directory to guide your users to the information they need 

Migration

Setting the title and metadata for navigation and SEO

Page Titles and Metadata

Text, title, and styling in standard markdown

Headers and Text

Add image, video, and other HTML elements

Images, Videos, and Embeds

Lists and Tables

Code Blocks

Reusable Snippets

Interactive Playground

OpenAPI Setup

Use OpenAPI features to enhance your Mintlify docs

Writing OpenAPI

Advanced Features

Generate docs pages for your API endpoints using MDX

MDX Setup

You can set authentication parameters to let users use their real API keys.

Authentication

Custom Domain

Mintlify automatically generates most meta tags. If you want to customize them, you can set default values in mint.json or change them per page.

Redirects and Broken Links

Versioning & Localization

Allow more members of your team to update your docs

Editor Permissions

Preview Deployments

Fully customize your documentation with custom CSS

Custom CSS

Custom JS

Host documentation at a /docs subpath using Cloudflare Workers

Cloudflare

Host documentation at a /docs subdirectory using AWS services

AWS Route 53 and Cloudfront

Host documentation at a /docs subpath using Vercel

Vercel

Authenticate users to view only certain pages

Partial Authentication

A list of features unlocked with Personalization

Personalization

How to determine which product is best for you

Auth vs Personalization

The shape of user data you can use to personalize your docs

Sending Data

Integrate the Mintlify widget into your products to offer users quick access to AI-powered chat with your docs content as the knowledge base.

Chat Widget

Integrate with an analytics platform to track events

Analytics Integrations

Amplitude

Clearbit

Fathom

Google Analytics 4

Google Tag Manager

Heap

HotJar

Koala

LogRocket

Mixpanel

Pirsch

Plausible

PostHog

Automate your SDK usage snippets in the API playground

Speakeasy

Automate your SDK example snippets in the API playground

Stainless

Support Integrations

Intercom

Front

Privacy Integrations

Osano

Group multiple accordions into a single display.

Accordion Groups

Callout Boxes

Highlight main points or links with customizable icons

Card Groups

Display code with optional syntax highlighting

The CodeGroup component lets you combine code blocks in a display separated by tabs

Code Groups

Use [Font Awesome](https://fontawesome.com/icons) icons anywhere in the doc

Mermaid Diagrams

Show a definition when you hover over text.

Getting started

Core configuration

AI optimization

Components

API pages

Authentication and personalization

Guides

Integrations

Version control and CI/CD

Documentation

Quickstart

CLI installation

Web editor

Components