Logo

Getting Started

IntroductionInstallationQuick Start
Logo
DocumentationAPI ReferenceChangelog

OpenAPI

Creating API Pages

Document API endpoints using OpenAPI integration and MDX

Overview

Create API documentation pages by adding the openapi field to your MDX frontmatter. Docs Kit automatically generates comprehensive documentation from your OpenAPI specification.

Basic API Page

---
title: "Get User"
description: "Retrieve a user by their unique identifier"
openapi: "GET /api/users/{id}"
published: true
---

## Additional Context

You can add custom content above or below the auto-generated API documentation.

Use this space to provide:

- Usage examples
- Best practices
- Common pitfalls
- Related endpoints

Frontmatter Format

openapi
stringrequired

OpenAPI endpoint reference in the format: METHOD /path

Format: "METHOD /endpoint/path"

Examples:

  • "GET /api/users"
  • "POST /api/users"
  • "PUT /api/users/{id}"
  • "DELETE /api/users/{id}"

Must match an endpoint in your OpenAPI specification exactly.

Auto-Generated Content

When you add openapi frontmatter, Docs Kit automatically displays:

1. Endpoint Header

Shows method badge (GET, POST, etc.) and full endpoint path with syntax highlighting for path parameters.

2. Request Parameters

All parameters grouped by location:

  • Path parameters - URL variables like {id}
  • Query parameters - URL query string options
  • Header parameters - Required/optional headers
  • Cookie parameters - Cookie-based parameters

3. Request Body

For POST/PUT/PATCH requests:

  • JSON schema visualization
  • Required vs optional fields
  • Field types and descriptions
  • Example request body

4. Responses

Response documentation for each status code:

  • Status code with description
  • Response schema
  • Example response body
  • Headers (if specified)

5. Code Examples

Auto-generated code snippets in multiple languages:

  • cURL
  • JavaScript (fetch)
  • Python (requests)
  • PHP
  • Ruby
  • Go
  • Java

6. Try It Button

Interactive button to test the endpoint directly from documentation.

Example API Pages

Simple GET Endpoint

---
title: "List Users"
description: "Retrieve a paginated list of users"
openapi: "GET /api/users"
published: true
---

## Overview

This endpoint returns all users with support for pagination and filtering.

## Query Parameters

The endpoint supports the following filters:

- Role-based filtering
- Date range filtering
- Text search across name and email

POST Endpoint with Request Body

---
title: "Create User"
description: "Create a new user account"
openapi: "POST /api/users"
published: true
---

## Creating Users

When creating a user, ensure the email is unique and the password meets security requirements:

- Minimum 8 characters
- At least one uppercase letter
- At least one number
- At least one special character

## Email Verification

New users receive a verification email. The account remains inactive until verified.

Endpoint with Path Parameters

---
title: "Update User"
description: "Update an existing user's information"
openapi: "PUT /api/users/{id}"
published: true
---

## Partial Updates

This endpoint supports partial updates. Only include fields you want to change.

Unchanged fields retain their current values.

## Validation

All updates are validated before being saved:

- Email must be unique
- Username must be 3-20 characters
- Role must be valid enum value

DELETE Endpoint

---
title: "Delete User"
description: "Permanently delete a user account"
openapi: "DELETE /api/users/{id}"
published: true
---

## Soft vs Hard Delete

<Callout status="warning" title="Permanent Action">
  This performs a hard delete. The user and all associated data are permanently
  removed.
</Callout>

For soft deletes, use the `PATCH /api/users/{id}` endpoint with `status: "deleted"`.

## Cascade Behavior

Deleting a user also deletes:

- User sessions
- API tokens
- Uploaded files
- Activity history

Combining Auto-Generated and Custom Content

Mix generated API docs with custom content:

---
title: "Send Email"
description: "Send a transactional email"
openapi: "POST /api/emails/send"
published: true
---

## Before You Start

<Steps>
  <Step title="Get API Key">
    Generate an API key from the dashboard
  </Step>

<Step title="Verify Domain">
  Add your sending domain and verify DNS records
</Step>

  <Step title="Test in Sandbox">
    Use sandbox mode for testing before going live
  </Step>
</Steps>

## After Sending

The API returns immediately with a message ID. Email delivery is asynchronous.

Track delivery status using:

- Webhooks (recommended)
- Status API endpoint
- Dashboard logs

## Best Practices

<Tabs>
  <Tab title="Templates">
    Use email templates for consistent branding and easier maintenance.
  </Tab>

  <Tab title="Personalization">
    Include merge variables for personalized content: `{{user.name}}`
  </Tab>

  <Tab title="Testing">
    Always test emails before sending to real users:
    ```json
    {
      "to": "test@example.com",
      "sandbox": true
    }
    ```
  </Tab>
</Tabs>

## File Organization

Organize API pages by resource or feature:

```text
content/api-reference/
 users/
    list.mdx          (GET /users)
    create.mdx        (POST /users)
    get.mdx           (GET /users/{id})
    update.mdx        (PUT /users/{id})
    delete.mdx        (DELETE /users/{id})
 authentication/
    login.mdx         (POST /auth/login)
    logout.mdx        (POST /auth/logout)
    refresh.mdx       (POST /auth/refresh)
 webhooks/
    create.mdx        (POST /webhooks)
    list.mdx          (GET /webhooks)
    delete.mdx        (DELETE /webhooks/{id})
```

Add API pages to docs.config.ts:

{
  "navigation": {
    "tabs": [
      {
        "tab": "API Reference",
        "groups": [
          {
            "group": "Users",
            "pages": [
              "/api-reference/users/list",
              "/api-reference/users/create",
              "/api-reference/users/get",
              "/api-reference/users/update",
              "/api-reference/users/delete"
            ]
          },
          {
            "group": "Authentication",
            "pages": [
              "/api-reference/authentication/login",
              "/api-reference/authentication/logout"
            ]
          }
        ]
      }
    ]
  }
}

Troubleshooting

Endpoint Not Found

If you see "Endpoint not found in OpenAPI spec":

  1. Verify the openapi value exactly matches your spec
  2. Check method casing (use uppercase: GET, POST, not get, post)
  3. Ensure path matches exactly (including leading slash)
  4. Restart dev server after updating spec

Missing Documentation

If auto-generated sections are missing:

  • No parameters? Check your OpenAPI spec includes parameter definitions
  • No request body? Verify requestBody is defined for POST/PUT/PATCH
  • No responses? Ensure responses object is populated
  • No examples? Add example or examples fields to your spec

Next, explore Interactive Features like the "Try It" button.

Built with Chakra UI

On this page
OverviewBasic API PageFrontmatter FormatAuto-Generated Content1. Endpoint Header2. Request Parameters3. Request Body4. Responses5. Code Examples6. Try It ButtonExample API PagesSimple GET EndpointPOST Endpoint with Request BodyEndpoint with Path ParametersDELETE EndpointCombining Auto-Generated and Custom ContentNavigation SetupTroubleshootingEndpoint Not FoundMissing Documentation