diff --git a/api-playground/mdx/configuration.mdx b/api-playground/mdx/configuration.mdx index 76f14c396..c7eb6a46d 100644 --- a/api-playground/mdx/configuration.mdx +++ b/api-playground/mdx/configuration.mdx @@ -3,7 +3,7 @@ title: 'MDX setup' 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 `` to define parameters. From these definitions, Mintlify generates interactive API playgrounds, request examples, and response examples. diff --git a/api-playground/migrating-from-mdx.mdx b/api-playground/migrating-from-mdx.mdx new file mode 100644 index 000000000..ddab2c6f0 --- /dev/null +++ b/api-playground/migrating-from-mdx.mdx @@ -0,0 +1,110 @@ +--- +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 + + + + 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. + + + Validate your OpenAPI file using the [Swagger Editor](https://editor.swagger.io/) or [Mint CLI](https://www.npmjs.com/package/mint). + + + + + 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" + ] + } + ] + } + ``` + + + + + After verifying your new navigation works correctly, remove the `MDX` endpoint files that you no longer need. + + + +## 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. diff --git a/api-playground/openapi-setup.mdx b/api-playground/openapi-setup.mdx index f78a734b3..e47497e1e 100644 --- a/api-playground/openapi-setup.mdx +++ b/api-playground/openapi-setup.mdx @@ -181,6 +181,8 @@ Change the URL of the endpoint page in your docs using `x-mint: href`: } ``` +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 @@ Expose endpoints as MCP tools by using `x-mint: mcp`: ## 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 @@ Generated endpoint pages have these default metadata values: 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,82 @@ You can use multiple OpenAPI specifications in different navigation sections: 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. +### 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 {12, 15-16} +"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 {5-6} +"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. diff --git a/api-playground/overview.mdx b/api-playground/overview.mdx index 9d22a05e7..cbabdc303 100644 --- a/api-playground/overview.mdx +++ b/api-playground/overview.mdx @@ -38,11 +38,30 @@ We recommend generating your API playground from an OpenAPI specification. See [ This example generates a page for each endpoint specified in `openapi.json` and organize them under the "API reference" group in your navigation. ```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" + "openapi": "openapi.json", + "pages": [ + "GET /users", + "POST /users" + ] } ] } diff --git a/api-playground/troubleshooting.mdx b/api-playground/troubleshooting.mdx index 8af5a94ac..1eb0f19c2 100644 --- a/api-playground/troubleshooting.mdx +++ b/api-playground/troubleshooting.mdx @@ -71,4 +71,40 @@ 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. + + 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 {5} + "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 ` to verify your OpenAPI document is valid. + + + + 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. + + + 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. + diff --git a/docs.json b/docs.json index a8b8b7ff3..b8b2ba87d 100644 --- a/docs.json +++ b/docs.json @@ -83,6 +83,7 @@ "pages": [ "api-playground/overview", "api-playground/openapi-setup", + "api-playground/migrating-from-mdx", { "group": "Customization", "icon": "wrench", diff --git a/navigation.mdx b/navigation.mdx index aed43ef50..ed74329f6 100644 --- a/navigation.mdx +++ b/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.