Reflected New OpenAPI setup (#518)

* Reflected New OpenAPI setup

* Added CLI ref

Author: ruhanponnada

api-playground/openapi/setup.mdx

@@ -8,48 +8,47 @@ description: "Reference OpenAPI endpoints in your docs pages"
 To describe your endpoints with OpenAPI, make sure you have a valid OpenAPI
 document in either JSON or YAML format that follows the
 [OpenAPI specification](https://swagger.io/specification/). Your document must
-follow OpenAPI specification 3.0+.
+follow OpenAPI specification 3.0+. 
+<Tip>To validate your OpenAPI spec, use our [CLI](https://www.npmjs.com/package/mintlify) and run this command: <br/>`mintlify openapi-check <openapiFilenameOrUrl>`</Tip>
 
 ## Auto-populate API pages
 
-The fastest way to get started with OpenAPI is to add an `openapi` field to a tab or anchor in the `docs.json`. This field can contain either the path to an OpenAPI document in your docs repo, or the URL of a hosted OpenAPI document. Mintlify will automatically generate a page for each OpenAPI operation and place them in the tab/anchor.
+The fastest way to get started with OpenAPI is to add an `openapi` field to a tab in the `docs.json`. This field can contain either the path to an OpenAPI document in your docs repo, or the URL of a hosted OpenAPI document. Mintlify will automatically generate a page for each OpenAPI operation and place them in the tab.
 
-**Example with Anchors:**
 
+**Example with Tabs:**
 ```json {5}
-{
-  "anchors": [
+"navigation": {
+  "tabs": [
     {
-      "name": "API Reference",
-      "openapi": "/path/to/openapi.json",
-      "url": "api-reference",
-      "icon": "square-terminal"
+        "tab": "API Reference",
+        "openapi": "https://petstore3.swagger.io/api/v3/openapi.json"
     }
   ]
 }
 ```
+![](/images/autogeneration-with-tabs.png)
 
-![](/images/anchors-autogeneration-anchors.png)
-
-**Example with Tabs:**
-
-```json {6}
-{
+**Example with Groups:**
+```json {8-11}
+"navigation": {
   "tabs": [
     {
-      "name": "API Reference",
-      "url": "api-reference",
-      "openapi": "https://petstore3.swagger.io/api/v3/openapi.json"
+      "tab": "API Reference",
+      "groups": [
+        {
+          "group": "Endpoints",
+          "openapi": {
+            "source": "/path/to/openapi-1.json",
+            "directory": "api-reference"
+          }
+        }
+      ]
     }
   ]
 }
 ```
 
-![](/images/autogeneration-with-tabs.png)
-
-<Tip>To validate your OpenAPI spec, you can use this command: <br/>`mintlify openapi-check <openapiFilenameOrUrl>`</Tip>
-
-
 When using this option, the metadata for the generated pages will have the following default values:
 
 * `title`: The `summary` field from the OpenAPI operation, if present. Otherwise a title generated from the HTTP method and endpoint.
@@ -62,39 +61,9 @@ There are some scenarios in which the default behavior isn't sufficient. If you
 
 ## Create MDX files for API pages
 
-If you want to customize the page metadata, add additional content, omit certain OpenAPI operations, or reorder OpenAPI pages in your navigation, you'll need an MDX page for each operation. Here is [an example MDX OpenAPI page](https://github.com/elevenlabs/elevenlabs-docs/blob/e5e267c97b8d1e4c21db1dcdb8b005eb1dfed7da/api-reference/speech-to-speech.mdx?plain=1#L2) from [Elevenlabs](https://elevenlabs.io/docs/api-reference/speech-to-speech).&#x20;
-
-![](/images/elevenlabs-mdx-autogeneration-example.png)
-
-### Autogenerate files
-
-For large OpenAPI documents, creating one MDX page for each OpenAPI operation can be a lot of work. To make it easier, we created a local OpenAPI page scraper.
-
-Our Mintlify [scraper](https://www.npmjs.com/package/@mintlify/scraping)
-autogenerates MDX files for your OpenAPI endpoints. Use the relative path to the
-OpenAPI document in your codebase.
-
-```bash
-npx @mintlify/scraping@latest openapi-file <path-to-openapi-file>
-```
-
-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.
-
-```bash
-npx @mintlify/scraping@latest openapi-file <path-to-openapi-file> -o api-reference
-```
-
-Learn more about our scraping package [here](https://www.npmjs.com/package/@mintlify/scraping).
-
-The scraper will output an array of
-[Navigation entries](/settings/global#structure) containing your OpenAPI MDX
-files. You can either append these entries to your existing Navigation, or
-reorder and add the files to your navigation manually.
+If you want to customize the page metadata, add additional content, omit certain OpenAPI operations, or reorder OpenAPI pages in your navigation, you'll need an MDX page for each operation. Here is [an example MDX OpenAPI page](https://github.com/mindsdb/mindsdb/blob/main/docs/rest/databases/create-databases.mdx) from [MindsDB](https://docs.mindsdb.com/rest/databases/create-databases).&#x20;
 
-<Note>
-  If your OpenAPI document is invalid, the files will not autogenerate.
-</Note>
+![](/images/mindsdb.png)
 
 ### Manually specify files
 
@@ -132,6 +101,38 @@ only one OpenAPI file - it will automatically detect your OpenAPI file.
   the page will be empty.
 </Note>
 
+### Autogenerate files
+
+For large OpenAPI documents, creating one MDX page for each OpenAPI operation can be a lot of work. To make it easier, we created a local OpenAPI page scraper.
+
+Our Mintlify [scraper](https://www.npmjs.com/package/@mintlify/scraping)
+autogenerates MDX files for your OpenAPI endpoints. Use the relative path to the
+OpenAPI document in your codebase.
+
+```bash
+npx @mintlify/scraping@latest openapi-file <path-to-openapi-file>
+```
+
+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.
+
+```bash
+npx @mintlify/scraping@latest openapi-file <path-to-openapi-file> -o api-reference
+```
+
+Learn more about our scraping package [here](https://www.npmjs.com/package/@mintlify/scraping).
+
+The scraper will output an array of
+[Navigation entries](/settings/global#structure) containing your OpenAPI MDX
+files. You can either append these entries to your existing Navigation, or
+reorder and add the files to your navigation manually.
+
+<Note>
+  If your OpenAPI document is invalid, the files will not autogenerate.
+</Note>
+
+
+
 ## Create MDX files for OpenAPI schemas
 
 Mintlify also allows you to create individual pages for any OpenAPI schema