Openapi nav updates

api-playground/mdx/configuration.mdx

@@ -3,7 +3,7 @@
 description: 'Generate docs pages for your API endpoints using `MDX`'
 ---
 
-You can manually define API endpoints in individual `MDX` files rather than using an OpenAPI specification. This method provides flexibility for custom content, but we recommend generating API documentation from an OpenAPI specification file for most projects because it is more maintainable and feature-rich. However, creating `MDX` pages for an API can be useful to document small APIs, prototyping, or when you want more control over where API endpoints are in the navigation.
+You can manually define API endpoints in individual `MDX` files rather than using an OpenAPI specification. This method provides flexibility for custom content, but we recommend generating API documentation from an OpenAPI specification file for most projects because it is more maintainable and feature-rich. However, creating `MDX` pages for an API can be useful to document small APIs or for prototyping.
 
 To generate pages for API endpoints using `MDX`, configure your API settings in `docs.json`, create individual `MDX` files for each endpoint, and use components like `<ParamFields />` to define parameters. From these definitions, Mintlify generates interactive API playgrounds, request examples, and response examples.
 
@@ -164,7 +164,7 @@
 ```mdx Page Metadata
 ---
 title: "Your page title"
 authMethod: "none"
 ---
 ```
 </CodeGroup>

api-playground/migrating-from-mdx.mdx

@@ -0,0 +1,116 @@
+---
+title: "Migrating MDX API pages to OpenAPI navigation"
+sidebarTitle: "Migrating from MDX"
+description: "Update from individual MDX endpoint pages to automated OpenAPI generation with flexible navigation"
+icon: "arrow-big-right-dash"
+---
+
+If you are currently using individual `MDX` pages for your API endpoints, you can migrate to autogenerating pages from your OpenAPI specification while retaining the customizability of individual pages. This can help you reduce the number of files you need to maintain and improve the consistency of your API documentation.
+
+You can define metadata and content for each endpoint in your OpenAPI specification and organize endpoints where you want them in your navigation.
+
+## Migration steps
+
+<Steps>
+  <Step title="Prepare your OpenAPI specification.">
+    Ensure your OpenAPI specification is valid and includes all endpoints you want to document.
+
+    For any endpoints that you want to customize the metadata or content, add the `x-mint` extension to the endpoint. See [x-mint extension](/api-playground/openapi-setup#x-mint-extension) for more details.
+
+    For any endpoints that you want to exclude from your documentation, add the `x-hidden` extension to the endpoint.
+
+    <Info>
+      Validate your OpenAPI file using the [Swagger Editor](https://editor.swagger.io/) or [Mint CLI](https://www.npmjs.com/package/mint).
+    </Info>
+  </Step>
+
+  <Step title="Update your navigation structure.">
+    Replace `MDX` page references with OpenAPI endpoints in your `docs.json`.
+
+    ```json
+    {
+      "navigation": {
+        "groups": [
+          {
+            "group": "API Reference",
+            "openapi": "/path/to/openapi.json",
+            "pages": [
+              "overview",
+              "authentication",
+              "introduction",
+              "GET /health",
+              "quickstart", 
+              "POST /users",
+              "GET /users/{id}",
+              "advanced-features"
+            ]
+          }
+        ]
+      }
+    }
+    ```
+
+  </Step>
+
+  <Step title="Remove old MDX files.">
+    After verifying your new navigation works correctly, remove the `MDX` endpoint files that you no longer need.
+  </Step>
+</Steps>
+
+## Navigation patterns
+
+You can customize how your API documentation appears in your navigation.
+
+### Mixed content navigation
+
+Combine automatically generated API pages with other pages:
+
+```json
+{
+  "navigation": {
+    "groups": [
+      {
+        "group": "API Reference",
+        "openapi": "openapi.json",
+        "pages": [
+          "api/overview",
+          "GET /users",
+          "POST /users", 
+          "api/authentication"
+        ]
+      }
+    ]
+  }
+}
+```
+
+### Multiple API versions
+
+Organize different API versions using tabs or groups:
+
+```json
+{
+  "navigation": {
+    "tabs": [
+      {
+        "tab": "API v1",
+        "openapi": "specs/v1.json"
+      },
+      {
+        "tab": "API v2", 
+        "openapi": "specs/v2.json"
+      }
+    ]
+  }
+}
+```
+
+## When to use individual `MDX` pages
+
+Consider keeping individual `MDX` pages when you need:
+
+- Extensive custom content per endpoint like React components or lengthy examples.
+- Unique page layouts.
+- Experimental documentation approaches for specific endpoints.
+
+For most use cases, OpenAPI navigation provides better maintainability and consistency.

api-playground/openapi-setup.mdx

@@ -27,7 +27,7 @@
 
 ### Specifying the URL for your API
 
 To enable Mintlify features like the API playground, add a `servers` field to your OpenAPI document with your API's base URL.
 
 ```json
 {
@@ -181,6 +181,8 @@
 }
 ```
 
+When `x-mint: href` is present, the navigation entry will link directly to the specified URL instead of generating an API page.
+
 ### MCP
 
 Expose endpoints as MCP tools by using `x-mint: mcp`:
@@ -209,7 +211,9 @@
 
 ## Auto-populate API pages
 
-Add an `openapi` field to any navigation element in your `docs.json` to automatically generate pages for OpenAPI endpoints. The `openapi` field accepts either a file path in your docs repo or a URL to a hosted OpenAPI document.
+Add an `openapi` field to any navigation element in your `docs.json` to automatically generate pages for OpenAPI endpoints. You can control where these pages appear in your navigation structure, as dedicated API sections or with other pages.
+
+The `openapi` field accepts either a file path in your docs repo or a URL to a hosted OpenAPI document.
 
 Generated endpoint pages have these default metadata values:
 
@@ -224,12 +228,12 @@
 
 There are two approaches for adding endpoint pages into your documentation:
 
-1. **Dedicated API sections**: Reference OpenAPI specs at the navigation level for dedicated API sections.
+1. **Dedicated API sections**: Reference OpenAPI specs in navigation elements for dedicated API sections.
 2. **Selective endpoints**: Reference specific endpoints in your navigation alongside other pages.
 
 ### Dedicated API sections
 
-Generate complete API sections by adding an `openapi` field to any navigation element. All endpoints in the specification will be included:
+Generate dedicated API sections by adding an `openapi` field to a navigation element and no other pages. All endpoints in the specification will be included:
 
 ```json {5}
 "navigation": {
@@ -274,6 +278,86 @@
   The `directory` field is optional and specifies where generated API pages are stored in your docs repo. If not specified, defaults to the `api-reference` directory of your repo.
 </Note>
 
+### Selective endpoints
+
+When you want more control over where endpoints appear in your documentation, you can reference specific endpoints in your navigation. This approach allows you to generate pages for API endpoints alongside other content.
+
+#### Set a default OpenAPI spec
+
+Configure a default OpenAPI specification for a navigation element. Then reference specific endpoints in the `pages` field:
+
+```json {13, 16-17}
+{
+  "navigation": {
+    "tabs": [
+      {
+        "tab": "Getting started",
+        "pages": [
+          "quickstart",
+          "installation"
+        ]
+      },
+      {
+        "tab": "API reference",
+        "openapi": "/path/to/openapi.json",
+        "pages": [
+          "api-overview",
+          "GET /users",
+          "POST /users",
+          "guides/authentication"
+        ]
+      }
+    ]
+  }
+}
+```
+
+Any page entry matching the format `METHOD /path` will generate an API page for that endpoint using the default OpenAPI spec.
+
+#### OpenAPI spec inheritance
+
+OpenAPI specifications are inherited down the navigation hierarchy. Child navigation elements inherit their parent's OpenAPI specification unless they define their own:
+
+```json {5, 12-13, 18, 20-21}
+{
+  "group": "API reference",
+  "openapi": "/path/to/openapi-v1.json",
+  "pages": [
+    "overview",
+    "authentication",
+    "GET /users",
+    "POST /users",
+    {
+      "group": "Orders",
+      "openapi": "/path/to/openapi-v2.json",
+      "pages": [
+        "GET /orders",
+        "POST /orders"
+      ]
+    }
+  ]
+},
+```
+
+#### Individual endpoints
+
+Reference specific endpoints without setting a default OpenAPI specification by including the file path:
+
+```json {6-7}
+{
+  "navigation": {
+    "pages": [
+      "introduction",
+      "user-guides",
+      "/path/to/openapi-v1.json POST /users",
+      "/path/to/openapi-v2.json GET /orders"
+    ]
+  }
+}
+```
+
+This approach is useful when you need individual endpoints from different specs or only want to include select endpoints.
+
 ## Create `MDX` files for API pages
 
 For control over individual endpoint pages, create `MDX` pages for each operation. This lets you customize page metadata, add content, omit certain operations, or reorder pages in your navigation at the page level.
@@ -324,10 +408,10 @@
 
 ### Autogenerate `MDX` files
 
 Use our Mintlify [scraper](https://www.npmjs.com/package/@mintlify/scraping) to autogenerate `MDX` pages for large OpenAPI documents.
 
 <Note>
   Your OpenAPI document must be valid or the files will not autogenerate.
 </Note>
 
 The scraper generates:
@@ -339,12 +423,12 @@
 <Steps>
   <Step title="Generate `MDX` files.">
     ```bash
     npx @mintlify/scraping@latest openapi-file <path-to-openapi-file>
     ```
   </Step>
   <Step title="Specify an output folder.">
     ```bash
     npx @mintlify/scraping@latest openapi-file <path-to-openapi-file> -o api-reference
     ```
 
     Add the `-o` flag to specify a folder to populate the files into. If a folder is not specified, the files will populate in the working directory.

api-playground/overview.mdx

@@ -39,12 +39,35 @@
 
     ```json
     {
-        "navigation": [
+      "navigation": {
+        "groups": [
           {
             "group": "API reference",
             "openapi": "openapi.json"
           }
-      ]
+        ]
+      }
+    }
+    ```
+
+    To generate pages for only specific endpoints, list the endpoints in the `pages` property of the navigation element.
+
+    This example generates pages for only the `GET /users` and `POST /users` endpoints. To genereate other endpoint pages, add additional endpoints to the `pages` array.
+
+    ```json
+    {
+      "navigation": {
+        "groups": [
+            {
+              "group": "API reference",
+              "openapi": "openapi.json",
+              "pages": [
+                "GET /users",
+                "POST /users"
+              ]
+            }
+        ]
+      }
     }
     ```
 
@@ -73,10 +96,10 @@
 </ResponseField>
 
 <ResponseField name="examples" type="object">
     Configurations for the autogenerated API examples.
     <Expandable title="examples" defaultOpen="True">
     <ResponseField name="languages" type="array of string">
         Example languages for the autogenerated API snippets.
 
         Languages display in the order specified.
     </ResponseField>
@@ -90,7 +113,7 @@
 
 ```json
 {
  "api": {
    "playground": {
      "display": "interactive"
    },

api-playground/troubleshooting.mdx

@@ -71,4 +71,42 @@ If your API pages aren't displaying correctly, check these common configuration
 
     Alternatively, if your reverse proxy prevents you from accepting `POST` requests, you can configure Mintlify to send requests directly to your backend with the `api.playground.proxy` setting in the `docs.json`, as described in the [settings documentation](/settings#param-proxy). When using this configuration, you will need to configure CORS on your server since requests will come directly from users' browsers rather than through your proxy.
   </Accordion>
+  <Accordion title="OpenAPI navigation entries are not generating pages">
+    If you are using an OpenAPI navigation configuration, but the pages aren't generating, check these common issues:
+
+    1. **Missing default OpenAPI spec**: Ensure you have an `openapi` field set for the navigation element:
+      ```json {6}
+       {
+         "navigation": {
+            "groups": [
+              {
+                "group": "API reference",
+                "openapi": "/path/to/openapi.json",
+                "pages": [
+                  "GET /users",
+                  "POST /users"
+                ]
+              }
+            ]
+          }
+        }
+      ```
+
+    2. **OpenAPI spec inheritance**: If using nested navigation, ensure child groups inherit the correct OpenAPI spec or specify their own.
+
+    3. **Validation issues**: Use `mint openapi-check <path-to-openapi-file>` to verify your OpenAPI document is valid.
+  </Accordion>
+  <Accordion title="Some OpenAPI operations appear in navigation but others don't">
+
+    1. **Hidden operations**: Operations marked with `x-hidden: true` in your OpenAPI spec won't appear in auto-generated navigation.
+    2. **Invalid operations**: Operations with validation errors in the OpenAPI spec may be skipped. Check your OpenAPI document for syntax errors.
+    3. **Manual vs automatic inclusion**: If you reference any endpoints from an OpenAPI spec, only the explicitly referenced operations will appear in navigation. No other pages will be automatically added. This includes operations that are referenced in child navigation elements.
+  </Accordion>
+  <Accordion title="Mixed navigation (OpenAPI and MDX pages) not working correctly">
+    When combining OpenAPI operations with regular documentation pages in navigation:
+
+    1. **File conflicts**: You cannot have both an `MDX` file and a navigation entry for the same operation. For example, if you have `get-users.mdx`, do not also include `"GET /users"` in your navigation.  If you need to have a file that shares a name with an operation, use the `x-mint` extension for the endpoint to have the href point to a different location.
+    2. **Path resolution**: Navigation entries that don't match OpenAPI operations will be treated as file paths. Ensure your `MDX` files exist at the expected locations.
+    3. **Case sensitivity**: OpenAPI operation matching is case-sensitive. Ensure HTTP methods are uppercase in navigation entries.
+  </Accordion>
 </AccordionGroup>

docs.json

@@ -83,6 +83,7 @@
             "pages": [
               "api-playground/overview",
               "api-playground/openapi-setup",
+              "api-playground/migrating-from-mdx",
               {
                 "group": "Customization",
                 "icon": "wrench",

navigation.mdx

@@ -296,6 +296,45 @@ While not required, we also recommend that you set an icon for each dropdown ite
 }
 ```
 
+---
+
+## OpenAPI
+
+Integrate OpenAPI specifications directly into your navigation structure to automatically generate API documentation. Create dedicated API sections or place endpoint pages within other navigation components.
+
+Set a default OpenAPI specification at any level of your navigation hierarchy. Child elements will inherit this specification unless they define their own specification.
+
+```json
+{
+  "navigation": {
+    "groups": [
+      {
+        "group": "API reference",
+        "openapi": "/path/to/openapi-v1.json",
+        "pages": [
+          "overview",
+          "authentication",
+          "GET /users",
+          "POST /users",
+          {
+            "group": "Products",
+            "openapi": "/path/to/openapi-v2.json",
+            "pages": [
+              "GET /products",
+              "POST /products"
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+For more information about referencing OpenAPI endpoints in your docs, see the [OpenAPI setup](/api-playground/openapi-setup).
+
+---
+
 ## Versions
 
 Partition your navigation into different versions.