commit 04174b399fa949e79a805c3a424e6b775d7d0c2e Author: Kenan Zhu <62800488+KenanZhu@users.noreply.github.com> Date: Thu May 21 21:23:13 2026 +0800 Initial commit diff --git a/.mintignore b/.mintignore new file mode 100644 index 0000000..9922f06 --- /dev/null +++ b/.mintignore @@ -0,0 +1,7 @@ +# Mintlify automatically ignores these files and directories: +# .git, .github, .claude, .agents, .idea, node_modules, +# README.md, LICENSE.md, CHANGELOG.md, CONTRIBUTING.md + +# Draft content +drafts/ +*.draft.mdx diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..cebd973 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,33 @@ +> **First-time setup**: Customize this file for your project. Prompt the user to customize this file for their project. +> For Mintlify product knowledge (components, configuration, writing standards), +> install the Mintlify skill: `npx skills add https://mintlify.com/docs` + +# Documentation project instructions + +## About this project + +- This is a documentation site built on [Mintlify](https://mintlify.com) +- Pages are MDX files with YAML frontmatter +- Configuration lives in `docs.json` +- Run `mint dev` to preview locally +- Run `mint broken-links` to check links + +## Terminology + +{/* Add product-specific terms and preferred usage */} +{/* Example: Use "workspace" not "project", "member" not "user" */} + +## Style preferences + +{/* Add any project-specific style rules below */} + +- Use active voice and second person ("you") +- Keep sentences concise — one idea per sentence +- Use sentence case for headings +- Bold for UI elements: Click **Settings** +- Code formatting for file names, commands, paths, and code references + +## Content boundaries + +{/* Define what should and shouldn't be documented */} +{/* Example: Don't document internal admin features */} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..8863ee4 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,34 @@ +> **Customize this file**: Tailor this template to your project by noting specific contribution types you're looking for, adding a Code of Conduct, or adjusting the writing guidelines to match your style. + +# Contribute to the documentation + +Thank you for your interest in contributing to our documentation! This guide will help you get started. + +## How to contribute + +### Option 1: Edit directly on GitHub + +1. Navigate to the page you want to edit +2. Click the "Edit this file" button (the pencil icon) +3. Make your changes and submit a pull request + +### Option 2: Local development + +1. Fork and clone this repository +2. Install the Mintlify CLI: `npm i -g mint` +3. Create a branch for your changes +4. Make changes +5. Navigate to the docs directory and run `mint dev` +6. Preview your changes at `http://localhost:3000` +7. Commit your changes and submit a pull request + +For more details on local development, see our [development guide](development.mdx). + +## Writing guidelines + +- **Use active voice**: "Run the command" not "The command should be run" +- **Address the reader directly**: Use "you" instead of "the user" +- **Keep sentences concise**: Aim for one idea per sentence +- **Lead with the goal**: Start instructions with what the user wants to accomplish +- **Use consistent terminology**: Don't alternate between synonyms for the same concept +- **Include examples**: Show, don't just tell diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..5411374 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 Mintlify + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..4552fbc --- /dev/null +++ b/README.md @@ -0,0 +1,55 @@ +# Mintlify Starter Kit + +Use the starter kit to get your docs deployed and ready to customize. + +Click the green **Use this template** button at the top of this repo to copy the Mintlify starter kit. The starter kit contains examples with + +- Guide pages +- Navigation +- Customizations +- API reference pages +- Use of popular components + +**[Follow the full quickstart guide](https://starter.mintlify.com/quickstart)** + +## AI-assisted writing + +Set up your AI coding tool to work with Mintlify: + +```bash +npx skills add https://mintlify.com/docs +``` + +This command installs Mintlify's documentation skill for your configured AI tools like Claude Code, Cursor, Windsurf, and others. The skill includes component reference, writing standards, and workflow guidance. + +See the [AI tools guides](/ai-tools) for tool-specific setup. + +## Development + +Install the [Mintlify CLI](https://www.npmjs.com/package/mint) to preview your documentation changes locally. To install, use the following command: + +``` +npm i -g mint +``` + +Run the following command at the root of your documentation, where your `docs.json` is located: + +``` +mint dev +``` + +View your local preview at `http://localhost:3000`. + +## Publishing changes + +Install our GitHub app from your [dashboard](https://dashboard.mintlify.com/settings/organization/github-app) to propagate changes from your repo to your deployment. Changes are deployed to production automatically after pushing to the default branch. + +## Need help? + +### Troubleshooting + +- If your dev environment isn't running: Run `mint update` to ensure you have the most recent version of the CLI. +- If a page loads as a 404: Make sure you are running in a folder with a valid `docs.json`. + +### Resources +- [Mintlify documentation](https://mintlify.com/docs) diff --git a/agent-ready/contextual.mdx b/agent-ready/contextual.mdx new file mode 100644 index 0000000..6d96e7c --- /dev/null +++ b/agent-ready/contextual.mdx @@ -0,0 +1,91 @@ +--- +title: 'Contextual menu' +description: 'Give readers one-click access to AI tools and integrations' +icon: 'bolt' +--- + +The contextual toolbar is a floating action bar that appears on every page of your docs. It lets readers instantly copy page content, open it in an AI assistant, or add your docs as an MCP server — without leaving the page. + +Configure it in `docs.json` under `contextual.options`: + +```json docs.json +{ + "contextual": { + "options": ["copy", "view", "claude", "chatgpt", "mcp", "cursor", "vscode"] + } +} +``` + +## Available options + +### Content actions + +| Option | Description | +|--------|-------------| +| `copy` | Copies the page as Markdown to the clipboard | +| `view` | Opens the raw Markdown version of the page (`.md` URL) | + +### AI assistants + +| Option | Description | +|--------|-------------| +| `claude` | Opens the page in Claude | +| `chatgpt` | Opens the page in ChatGPT | +| `perplexity` | Opens the page in Perplexity | +| `grok` | Opens the page in Grok | +| `aistudio` | Opens the page in Google AI Studio | + +### Editor integrations + +| Option | Description | +|--------|-------------| +| `cursor` | Adds the page to Cursor's context | +| `vscode` | Adds the page to VS Code Copilot | +| `windsurf` | Adds the page to Windsurf's Cascade | +| `devin` | Opens the page in Devin | + +### MCP + +| Option | Description | +|--------|-------------| +| `mcp` | Shows instructions for using your docs as an MCP server | +| `add-mcp` | Provides a one-click prompt to add your docs MCP server to an AI tool | + + + The `mcp` and `add-mcp` options are especially powerful — they let developers connect your entire docs site to any MCP-compatible AI assistant, so it can answer questions about your product directly. + + +## Custom options + +You can add custom entries to the toolbar with a title, description, icon, and link. The `href` supports dynamic placeholders: + +| Placeholder | Resolves to | +|-------------|-------------| +| `$page` | The current page's full URL | +| `$path` | The current page's path | +| `$mcp` | Your docs MCP server URL | + +```json docs.json +{ + "contextual": { + "options": [ + "copy", + "claude", + { + "title": "Open issue", + "description": "Report a problem with this page", + "icon": "github", + "href": "https://github.com/your-org/docs/issues/new?title=Issue+on+$path" + } + ] + } +} +``` + + + The contextual toolbar is only visible on preview and production deployments, not in `mint dev` local preview. + + +## Pairing with Visibility + +The toolbar's `copy` and `view` options expose your page's Markdown content directly. If you use the [`Visibility`](/agent-ready/visibility) component, the `for="agents"` blocks will be included in that Markdown — giving AI assistants structured context that human readers don't see. diff --git a/agent-ready/prompt.mdx b/agent-ready/prompt.mdx new file mode 100644 index 0000000..9ecce01 --- /dev/null +++ b/agent-ready/prompt.mdx @@ -0,0 +1,75 @@ +--- +title: 'Prompt component' +description: 'Embed shareable AI prompts readers can copy or open in Cursor' +icon: 'robot' +--- + +The `Prompt` component displays a pre-built AI prompt with one-click actions to copy it to the clipboard or open it directly in Cursor. It's ideal for any docs page where you want to hand readers a ready-to-use prompt. + +## Basic usage + + +You are a technical writer. Given the following API endpoint documentation, write a one-paragraph summary that explains what the endpoint does, what inputs it requires, and what it returns. Be concise and use plain language. + + +```mdx + +You are a technical writer. Given the following API endpoint documentation, +write a one-paragraph summary that explains what the endpoint does, what +inputs it requires, and what it returns. Be concise and use plain language. + +``` + +## With Cursor integration + +Add `actions={["copy", "cursor"]}` to also surface an "Open in Cursor" button. This is especially useful for prompts readers will use in their editor. + + +You are an expert TypeScript developer. Given the following OpenAPI specification, generate a fully-typed API client using native fetch. Include: +- A base client class with configurable baseUrl and auth headers +- One method per endpoint, with typed request parameters and response types +- JSDoc comments on each method +Do not use any third-party HTTP libraries. + + +```mdx + +You are an expert TypeScript developer. Given the following OpenAPI +specification, generate a fully-typed API client using native fetch... + +``` + +## Props + + + Heading text shown above the prompt content. Supports Markdown. + + + + The prompt text that gets copied or sent to Cursor. + + + + Which action buttons to show. Options: `"copy"`, `"cursor"`. Defaults to `["copy"]`. + + + + An icon displayed alongside the description. Supports Font Awesome, Lucide, and Tabler icon names, image URLs, or inline SVG. + + +## When to use it + +The `Prompt` component works well anywhere you're teaching readers to work with AI: + +- **Quickstart guides** — give readers a prompt to generate their first integration +- **API reference pages** — include a prompt for generating client code from the spec +- **Troubleshooting guides** — embed a debugging prompt readers can run against their own error logs +- **Conceptual pages** — add a prompt for exploring the topic further with an AI assistant diff --git a/agent-ready/visibility.mdx b/agent-ready/visibility.mdx new file mode 100644 index 0000000..45e0f39 --- /dev/null +++ b/agent-ready/visibility.mdx @@ -0,0 +1,85 @@ +--- +title: 'Visibility' +description: 'Show different content to humans and AI agents' +icon: 'eye' +--- + +The `Visibility` component lets a single page serve two audiences: humans reading on the web and AI agents processing the Markdown output. Content marked `for="humans"` appears on the rendered page but is excluded from Markdown exports. Content marked `for="agents"` is hidden on the web but included in Markdown. + +This means you can write conversational, UI-centric instructions for humans and structured, machine-readable instructions for AI — without maintaining two separate pages. + +## How it works + +Mintlify serves every page at two URLs: + +- `https://docs.example.com/page` — the rendered site, for humans +- `https://docs.example.com/page.md` — the raw Markdown, for AI agents + +`Visibility` controls what appears at each URL. + +## Example + +```mdx + + + + Navigate to [dashboard.example.com](https://dashboard.example.com) and sign in. + + + Go to **Settings → API Keys** and click **New key**. + + + + + + To authenticate, send a POST request to `/v1/auth/token` with the user's + email and password in the request body. The response includes a bearer token + valid for 24 hours. Pass this token as `Authorization: Bearer ` on + all subsequent requests. + +``` + +Human readers see the step-by-step UI walkthrough. AI agents processing the Markdown get the direct API instructions instead. + +## Props + + + - `"humans"` — visible on the rendered web page, excluded from `.md` export + - `"agents"` — hidden on the rendered web page, included in `.md` export + + +## When to use it + + + + Show UI screenshots and button clicks to humans. Give agents the equivalent API calls. + + + Show a visual settings panel to humans. Give agents the equivalent JSON or CLI flags. + + + Show a friendly explanation to humans. Give agents structured error codes and remediation steps. + + + Include rich diagrams and narrative for humans. Provide a concise structured summary for agents. + + + +## Combining with Prompt + +`Visibility` and `Prompt` complement each other well. Use `Visibility` to give agents structured context, then use `Prompt` to give human readers a prompt they can use to ask an AI about that same content. + +```mdx + + ## Authentication schema + - Method: Bearer token + - Header: `Authorization: Bearer ` + - Token TTL: 86400 seconds + - Refresh endpoint: POST /v1/auth/refresh + + + + Explain how authentication works in this API and show me example code for + getting a token and making an authenticated request. + +``` diff --git a/ai-tools/claude-code.mdx b/ai-tools/claude-code.mdx new file mode 100644 index 0000000..a59ca25 --- /dev/null +++ b/ai-tools/claude-code.mdx @@ -0,0 +1,43 @@ +--- +title: "Claude Code setup" +description: "Configure Claude Code for your documentation workflow" +icon: "asterisk" +--- + +Set up Claude Code to help you write and maintain your Mintlify documentation. + +## Prerequisites + +- Active Claude subscription (Pro, Max, or API access) + +## Setup + + + + ```bash + npm install -g @anthropic-ai/claude-code + ``` + + + + In your docs directory, run: + + ```bash + npx skills add https://mintlify.com/docs + ``` + + This gives Claude Code Mintlify's component reference, writing standards, + and workflow guidance. + + + + Edit `AGENTS.md` in your project root to add project-specific terminology, + style preferences, and content boundaries. + + + + ```bash + claude + ``` + + diff --git a/ai-tools/cursor.mdx b/ai-tools/cursor.mdx new file mode 100644 index 0000000..80bab56 --- /dev/null +++ b/ai-tools/cursor.mdx @@ -0,0 +1,39 @@ +--- +title: "Cursor setup" +description: "Configure Cursor for your documentation workflow" +icon: "arrow-pointer" +--- + +Set up Cursor to help you write and maintain your Mintlify documentation. + +## Prerequisites + +- Cursor editor installed + +## Setup + + + + Open the root of your documentation repository where `docs.json` is located. + + + + In the integrated terminal, run: + + ```bash + npx skills add https://mintlify.com/docs + ``` + + This gives Cursor Mintlify's component reference, writing standards, + and workflow guidance. + + + + Edit `AGENTS.md` in your project root to add project-specific terminology, + style preferences, and content boundaries. + + + + Open a file and use Cursor's AI features to draft and edit documentation. + + diff --git a/ai-tools/windsurf.mdx b/ai-tools/windsurf.mdx new file mode 100644 index 0000000..0776cca --- /dev/null +++ b/ai-tools/windsurf.mdx @@ -0,0 +1,39 @@ +--- +title: "Windsurf setup" +description: "Configure Windsurf for your documentation workflow" +icon: "water" +--- + +Set up Windsurf's Cascade AI assistant to help you write and maintain your Mintlify documentation. + +## Prerequisites + +- Windsurf editor installed + +## Setup + + + + Open the root of your documentation repository where `docs.json` is located. + + + + In the integrated terminal, run: + + ```bash + npx skills add https://mintlify.com/docs + ``` + + This gives Windsurf Mintlify's component reference, writing standards, + and workflow guidance. + + + + Edit `AGENTS.md` in your project root to add project-specific terminology, + style preferences, and content boundaries. + + + + Open a file and use Cascade to draft and edit documentation. + + diff --git a/api-reference/endpoint/create.mdx b/api-reference/endpoint/create.mdx new file mode 100644 index 0000000..5689f1b --- /dev/null +++ b/api-reference/endpoint/create.mdx @@ -0,0 +1,4 @@ +--- +title: 'Create Plant' +openapi: 'POST /plants' +--- diff --git a/api-reference/endpoint/delete.mdx b/api-reference/endpoint/delete.mdx new file mode 100644 index 0000000..657dfc8 --- /dev/null +++ b/api-reference/endpoint/delete.mdx @@ -0,0 +1,4 @@ +--- +title: 'Delete Plant' +openapi: 'DELETE /plants/{id}' +--- diff --git a/api-reference/endpoint/get.mdx b/api-reference/endpoint/get.mdx new file mode 100644 index 0000000..56aa09e --- /dev/null +++ b/api-reference/endpoint/get.mdx @@ -0,0 +1,4 @@ +--- +title: 'Get Plants' +openapi: 'GET /plants' +--- diff --git a/api-reference/endpoint/webhook.mdx b/api-reference/endpoint/webhook.mdx new file mode 100644 index 0000000..3291340 --- /dev/null +++ b/api-reference/endpoint/webhook.mdx @@ -0,0 +1,4 @@ +--- +title: 'New Plant' +openapi: 'WEBHOOK /plant/webhook' +--- diff --git a/api-reference/introduction.mdx b/api-reference/introduction.mdx new file mode 100644 index 0000000..c835b78 --- /dev/null +++ b/api-reference/introduction.mdx @@ -0,0 +1,33 @@ +--- +title: 'Introduction' +description: 'Example section for showcasing API endpoints' +--- + + + If you're not looking to build API reference documentation, you can delete + this section by removing the api-reference folder. + + +## Welcome + +There are two ways to build API documentation: [OpenAPI](https://mintlify.com/docs/api-playground/openapi/setup) and [MDX components](https://mintlify.com/docs/api-playground/mdx/configuration). For the starter kit, we are using the following OpenAPI specification. + + + View the OpenAPI specification file + + +## Authentication + +All API endpoints are authenticated using Bearer tokens and picked up from the specification file. + +```json +"security": [ + { + "bearerAuth": [] + } +] +``` diff --git a/api-reference/openapi.json b/api-reference/openapi.json new file mode 100644 index 0000000..da5326e --- /dev/null +++ b/api-reference/openapi.json @@ -0,0 +1,217 @@ +{ + "openapi": "3.1.0", + "info": { + "title": "OpenAPI Plant Store", + "description": "A sample API that uses a plant store as an example to demonstrate features in the OpenAPI specification", + "license": { + "name": "MIT" + }, + "version": "1.0.0" + }, + "servers": [ + { + "url": "http://sandbox.mintlify.com" + } + ], + "security": [ + { + "bearerAuth": [] + } + ], + "paths": { + "/plants": { + "get": { + "description": "Returns all plants from the system that the user has access to", + "parameters": [ + { + "name": "limit", + "in": "query", + "description": "The maximum number of results to return", + "schema": { + "type": "integer", + "format": "int32" + } + } + ], + "responses": { + "200": { + "description": "Plant response", + "content": { + "application/json": { + "schema": { + "type": "array", + "items": { + "$ref": "#/components/schemas/Plant" + } + } + } + } + }, + "400": { + "description": "Unexpected error", + "content": { + "application/json": { + "schema": { + "$ref": "#/components/schemas/Error" + } + } + } + } + } + }, + "post": { + "description": "Creates a new plant in the store", + "requestBody": { + "description": "Plant to add to the store", + "content": { + "application/json": { + "schema": { + "$ref": "#/components/schemas/NewPlant" + } + } + }, + "required": true + }, + "responses": { + "200": { + "description": "plant response", + "content": { + "application/json": { + "schema": { + "$ref": "#/components/schemas/Plant" + } + } + } + }, + "400": { + "description": "unexpected error", + "content": { + "application/json": { + "schema": { + "$ref": "#/components/schemas/Error" + } + } + } + } + } + } + }, + "/plants/{id}": { + "delete": { + "description": "Deletes a single plant based on the ID supplied", + "parameters": [ + { + "name": "id", + "in": "path", + "description": "ID of plant to delete", + "required": true, + "schema": { + "type": "integer", + "format": "int64" + } + } + ], + "responses": { + "204": { + "description": "Plant deleted", + "content": {} + }, + "400": { + "description": "unexpected error", + "content": { + "application/json": { + "schema": { + "$ref": "#/components/schemas/Error" + } + } + } + } + } + } + } + }, + "webhooks": { + "/plant/webhook": { + "post": { + "description": "Information about a new plant added to the store", + "requestBody": { + "description": "Plant added to the store", + "content": { + "application/json": { + "schema": { + "$ref": "#/components/schemas/NewPlant" + } + } + } + }, + "responses": { + "200": { + "description": "Return a 200 status to indicate that the data was received successfully" + } + } + } + } + }, + "components": { + "schemas": { + "Plant": { + "required": [ + "name" + ], + "type": "object", + "properties": { + "name": { + "description": "The name of the plant", + "type": "string" + }, + "tag": { + "description": "Tag to specify the type", + "type": "string" + } + } + }, + "NewPlant": { + "allOf": [ + { + "$ref": "#/components/schemas/Plant" + }, + { + "required": [ + "id" + ], + "type": "object", + "properties": { + "id": { + "description": "Identification number of the plant", + "type": "integer", + "format": "int64" + } + } + } + ] + }, + "Error": { + "required": [ + "error", + "message" + ], + "type": "object", + "properties": { + "error": { + "type": "integer", + "format": "int32" + }, + "message": { + "type": "string" + } + } + } + }, + "securitySchemes": { + "bearerAuth": { + "type": "http", + "scheme": "bearer" + } + } + } +} \ No newline at end of file diff --git a/development.mdx b/development.mdx new file mode 100644 index 0000000..8e25d7b --- /dev/null +++ b/development.mdx @@ -0,0 +1,95 @@ +--- +title: 'Development' +description: 'Preview changes locally to update your docs' +icon: 'terminal' +--- + + + **Prerequisites**: + - Node.js version 19 or higher + - A docs repository with a `docs.json` file + + +Follow these steps to install and run Mintlify on your operating system. + + + + +```bash +npm i -g mint +``` + + + + +Navigate to your docs directory where your `docs.json` file is located, and run the following command: + +```bash +mint dev +``` + +A local preview of your documentation will be available at `http://localhost:3000`. + + + + +## Custom ports + +By default, Mintlify uses port 3000. You can customize the port Mintlify runs on by using the `--port` flag. For example, to run Mintlify on port 3333, use this command: + +```bash +mint dev --port 3333 +``` + +If you attempt to run Mintlify on a port that's already in use, it will use the next available port: + +```md +Port 3000 is already in use. Trying 3001 instead. +``` + +## Mintlify versions + +Please note that each CLI release is associated with a specific version of Mintlify. If your local preview does not align with the production version, please update the CLI: + +```bash +npm mint update +``` + +## Validating links + +The CLI can assist with validating links in your documentation. To identify any broken links, use the following command: + +```bash +mint broken-links +``` + +## Deployment + +If the deployment is successful, you should see the following: + + + Screenshot of a deployment confirmation message that says All checks have passed. + + +## Code formatting + +We suggest using extensions on your IDE to recognize and format MDX. If you're a VSCode user, consider the [MDX VSCode extension](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx) for syntax highlighting, and [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) for code formatting. + +## Troubleshooting + + + + + This may be due to an outdated version of node. Try the following: + 1. Remove the currently-installed version of the CLI: `npm remove -g mint` + 2. Upgrade to Node v19 or higher. + 3. Reinstall the CLI: `npm i -g mint` + + + + + Solution: Go to the root of your device and delete the `~/.mintlify` folder. Then run `mint dev` again. + + + +Curious about what changed in the latest CLI version? Check out the [CLI changelog](https://www.npmjs.com/package/mintlify?activeTab=versions). diff --git a/docs.json b/docs.json new file mode 100644 index 0000000..66b3f40 --- /dev/null +++ b/docs.json @@ -0,0 +1,126 @@ +{ + "$schema": "https://mintlify.com/docs.json", + "theme": "mint", + "name": "Mintlify Starter Kit", + "colors": { + "primary": "#16A34A", + "light": "#07C983", + "dark": "#15803D" + }, + "favicon": "/favicon.svg", + "navigation": { + "tabs": [ + { + "tab": "Guides", + "groups": [ + { + "group": "Getting started", + "pages": [ + "index", + "quickstart", + "development" + ] + }, + { + "group": "Customization", + "pages": [ + "essentials/settings", + "essentials/navigation" + ] + }, + { + "group": "Writing content", + "pages": [ + "essentials/markdown", + "essentials/code", + "essentials/images", + "essentials/components", + "essentials/reusable-snippets" + ] + }, + { + "group": "Agent ready", + "pages": [ + "agent-ready/prompt", + "agent-ready/visibility", + "agent-ready/contextual", + "ai-tools/cursor", + "ai-tools/claude-code", + "ai-tools/windsurf" + ] + } + ] + }, + { + "tab": "API reference", + "groups": [ + { + "group": "API documentation", + "pages": [ + "api-reference/introduction" + ] + }, + { + "group": "Endpoint examples", + "pages": [ + "api-reference/endpoint/get", + "api-reference/endpoint/create", + "api-reference/endpoint/delete", + "api-reference/endpoint/webhook" + ] + } + ] + } + ], + "global": { + "anchors": [ + { + "anchor": "Documentation", + "href": "https://mintlify.com/docs", + "icon": "book-open-cover" + }, + { + "anchor": "Blog", + "href": "https://mintlify.com/blog", + "icon": "newspaper" + } + ] + } + }, + "logo": { + "light": "/logo/light.svg", + "dark": "/logo/dark.svg" + }, + "navbar": { + "links": [ + { + "label": "Support", + "href": "mailto:hi@mintlify.com" + } + ], + "primary": { + "type": "button", + "label": "Dashboard", + "href": "https://dashboard.mintlify.com" + } + }, + "contextual": { + "options": [ + "copy", + "view", + "chatgpt", + "claude", + "perplexity", + "mcp", + "cursor", + "vscode" + ] + }, + "footer": { + "socials": { + "x": "https://x.com/mintlify", + "github": "https://github.com/mintlify", + "linkedin": "https://linkedin.com/company/mintlify" + } + } +} diff --git a/essentials/code.mdx b/essentials/code.mdx new file mode 100644 index 0000000..60b682d --- /dev/null +++ b/essentials/code.mdx @@ -0,0 +1,39 @@ +--- +title: 'Code blocks' +description: 'Display inline code and code blocks' +icon: 'code' +--- + +## Inline code + +To denote a `word` or `phrase` as code, enclose it in backticks (`). + +``` +To denote a `word` or `phrase` as code, enclose it in backticks (`). +``` + +## Code blocks + +Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks and follow the leading ticks with the programming language of your snippet to get syntax highlighting. Optionally, you can also write the name of your code after the programming language. + +```java HelloWorld.java +class HelloWorld { + public static void main(String[] args) { + System.out.println("Hello, World!"); + } +} +``` + +````md +```java HelloWorld.java +class HelloWorld { + public static void main(String[] args) { + System.out.println("Hello, World!"); + } +} +``` +```` + +## Code groups + +To display the same snippet in multiple languages as tabs, use the `CodeGroup` component. See [Components](/essentials/components#code-groups) for usage. diff --git a/essentials/components.mdx b/essentials/components.mdx new file mode 100644 index 0000000..c84d73c --- /dev/null +++ b/essentials/components.mdx @@ -0,0 +1,207 @@ +--- +title: 'Components' +description: 'Callouts, cards, steps, tabs, and more' +icon: 'puzzle-piece' +--- + +Mintlify components let you build rich, interactive documentation pages using MDX. Here are some commonly used ones. + +See the [components overview](https://mintlify.com/docs/components) in the Mintlify documentation for a complete list. + +## Callouts + +Use callouts to draw attention to important information. + +A **Note** is for general information that helps the reader. + +A **Tip** highlights a helpful shortcut or best practice. + +A **Warning** flags something that could cause problems. + +An **Info** callout provides supplementary context. + +```mdx +A **Note** is for general information that helps the reader. + +A **Tip** highlights a helpful shortcut or best practice. + +A **Warning** flags something that could cause problems. + +An **Info** callout provides supplementary context. +``` + +## Cards + +Cards link readers to other pages or resources. + + + + Auto-generated docs from your OpenAPI spec. + + + Get your docs running in three steps. + + + +```mdx + + + Auto-generated docs from your OpenAPI spec. + + + Get your docs running in three steps. + + +``` + +Use `` to control the grid width. Cards without `href` render as informational panels. + +## Steps + +Steps present numbered procedures clearly. + + + + ```bash + npm install my-package + ``` + + + Run the init command in your project root. + ```bash + npx my-package init + ``` + + + Start using the package in your code. + + + +````mdx + + + ```bash + npm install my-package + ``` + + + Run the init command in your project root. + + + Start using the package in your code. + + +```` + +## Tabs + +Tabs let readers switch between alternative content — different languages, environments, or platforms. + + + + ```bash + npm install my-package + ``` + + + ```bash + yarn add my-package + ``` + + + ```bash + pnpm add my-package + ``` + + + +````mdx + + + ```bash + npm install my-package + ``` + + + ```bash + yarn add my-package + ``` + + + ```bash + pnpm add my-package + ``` + + +```` + +## Accordions + +Accordions collapse content behind a toggle — useful for FAQs or optional detail. + + + + A brief answer to the first question. Keep it concise. + + + Another answer here. Use as much space as you need. + + + +```mdx + + + A brief answer to the first question. + + + Another answer here. + + +``` + +## Frames + +Wrap images or other content in a `Frame` to add a styled border and rounded corners. + + + Big Bend landscape + + +```mdx + + App screenshot + +``` + +## Code groups + +`CodeGroup` displays multiple code snippets as tabs — ideal for showing the same example in multiple languages. + + + ```typescript TypeScript + const response = await fetch('https://api.example.com/users'); + const users = await response.json(); + ``` + + ```python Python + import requests + response = requests.get('https://api.example.com/users') + users = response.json() + ``` + + ```bash curl + curl https://api.example.com/users + ``` + + +````mdx + + ```typescript TypeScript + const response = await fetch('https://api.example.com/users'); + ``` + + ```python Python + response = requests.get('https://api.example.com/users') + ``` + +```` diff --git a/essentials/images.mdx b/essentials/images.mdx new file mode 100644 index 0000000..1144eb2 --- /dev/null +++ b/essentials/images.mdx @@ -0,0 +1,59 @@ +--- +title: 'Images and embeds' +description: 'Add image, video, and other HTML elements' +icon: 'image' +--- + + + +## Image + +### Using Markdown + +The [markdown syntax](https://www.markdownguide.org/basic-syntax/#images) lets you add images using the following code + +```md +![title](/path/image.jpg) +``` + +Note that the image file size must be less than 5MB. Otherwise, we recommend hosting on a service like [Cloudinary](https://cloudinary.com/) or [S3](https://aws.amazon.com/s3/). You can then use that URL and embed. + +### Using embeds + +To get more customizability with images, you can also use [embeds](/writing-content/embed) to add images + +```html + +``` + +## Embeds and HTML elements + + + +
+ + + +Mintlify supports [HTML tags in Markdown](https://www.markdownguide.org/basic-syntax/#html). This is helpful if you prefer HTML tags to Markdown syntax, and lets you create documentation with infinite flexibility. + + + +### iFrames + +Loads another HTML page within the document. Most commonly used for embedding videos. + +```html + +``` diff --git a/essentials/markdown.mdx b/essentials/markdown.mdx new file mode 100644 index 0000000..a45c1d5 --- /dev/null +++ b/essentials/markdown.mdx @@ -0,0 +1,88 @@ +--- +title: 'Markdown syntax' +description: 'Text, title, and styling in standard markdown' +icon: 'text-size' +--- + +## Titles + +Best used for section headers. + +```md +## Titles +``` + +### Subtitles + +Best used for subsection headers. + +```md +### Subtitles +``` + + + +Each **title** and **subtitle** creates an anchor and also shows up on the table of contents on the right. + + + +## Text formatting + +We support most markdown formatting. Simply add `**`, `_`, or `~` around text to format it. + +| Style | How to write it | Result | +| ------------- | ----------------- | --------------- | +| Bold | `**bold**` | **bold** | +| Italic | `_italic_` | _italic_ | +| Strikethrough | `~strikethrough~` | ~strikethrough~ | + +You can combine these. For example, write `**_bold and italic_**` to get **_bold and italic_** text. + +You need to use HTML to write superscript and subscript text. That is, add `` or `` around your text. + +| Text Size | How to write it | Result | +| ----------- | ------------------------ | ---------------------- | +| Superscript | `superscript` | superscript | +| Subscript | `subscript` | subscript | + +## Linking to pages + +You can add a link by wrapping text in `[]()`. You would write `[link to google](https://google.com)` to [link to google](https://google.com). + +Links to pages in your docs need to be root-relative. Basically, you should include the entire folder path. For example, `[link to text](/writing-content/text)` links to the page "Text" in our components section. + +Relative links like `[link to text](../text)` will open slower because we cannot optimize them as easily. + +## Blockquotes + +### Singleline + +To create a blockquote, add a `>` in front of a paragraph. + +> Dorothy followed her through many of the beautiful rooms in her castle. + +```md +> Dorothy followed her through many of the beautiful rooms in her castle. +``` + +### Multiline + +> Dorothy followed her through many of the beautiful rooms in her castle. +> +> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood. + +```md +> Dorothy followed her through many of the beautiful rooms in her castle. +> +> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood. +``` + +### LaTeX + +Mintlify supports [LaTeX](https://www.latex-project.org) through the Latex component. + +8 x (vk x H1 - H2) = (0,1) + +```md +8 x (vk x H1 - H2) = (0,1) +``` diff --git a/essentials/navigation.mdx b/essentials/navigation.mdx new file mode 100644 index 0000000..60adeff --- /dev/null +++ b/essentials/navigation.mdx @@ -0,0 +1,87 @@ +--- +title: 'Navigation' +description: 'The navigation field in docs.json defines the pages that go in the navigation menu' +icon: 'map' +--- + +The navigation menu is the list of links on every website. + +You will likely update `docs.json` every time you add a new page. Pages do not show up automatically. + +## Navigation syntax + +Our navigation syntax is recursive which means you can make nested navigation groups. You don't need to include `.mdx` in page names. + + + +```json Regular Navigation +"navigation": { + "tabs": [ + { + "tab": "Docs", + "groups": [ + { + "group": "Getting Started", + "pages": ["quickstart"] + } + ] + } + ] +} +``` + +```json Nested Navigation +"navigation": { + "tabs": [ + { + "tab": "Docs", + "groups": [ + { + "group": "Getting Started", + "pages": [ + "quickstart", + { + "group": "Nested Reference Pages", + "pages": ["nested-reference-page"] + } + ] + } + ] + } + ] +} +``` + + + +## Folders + +Simply put your MDX files in folders and update the paths in `docs.json`. + +For example, to have a page at `https://yoursite.com/your-folder/your-page` you would make a folder called `your-folder` containing an MDX file called `your-page.mdx`. + + + +You cannot use `api` for the name of a folder unless you nest it inside another folder. Mintlify uses Next.js which reserves the top-level `api` folder for internal server calls. A folder name such as `api-reference` would be accepted. + + + +```json Navigation With Folder +"navigation": { + "tabs": [ + { + "tab": "Docs", + "groups": [ + { + "group": "Group Name", + "pages": ["your-folder/your-page"] + } + ] + } + ] +} +``` + +## Hidden pages + +MDX files not included in `docs.json` will not show up in the sidebar but are accessible through the search bar and by linking directly to them. diff --git a/essentials/reusable-snippets.mdx b/essentials/reusable-snippets.mdx new file mode 100644 index 0000000..f775cd3 --- /dev/null +++ b/essentials/reusable-snippets.mdx @@ -0,0 +1,100 @@ +--- +title: "Reusable snippets" +description: "Write once, reuse everywhere. Use snippets to keep content in sync across pages" +icon: "recycle" +--- + +Any content you find yourself repeating across pages is a good candidate for a snippet. Create the file once in the `snippets/` directory, import it wherever you need it, and updates propagate everywhere automatically. + + + Files inside `snippets/` are not rendered as standalone pages. They only appear where you import them. + + +## Content snippets + +The simplest pattern: write MDX content in a snippet file and import it as a component. + +```mdx snippets/prerequisites.mdx +Before you begin, make sure you have: +- Node.js 18 or higher +- An API key from your [dashboard](https://dashboard.example.com) +``` + +Import it into any page using a root-relative path: + +```mdx your-page.mdx +--- +title: Install the SDK +--- + +import Prerequisites from '/snippets/prerequisites.mdx'; + + + +## Installation +... +``` + +You can also use relative imports, which enables CMD+click navigation to the snippet in your editor: + +```mdx +import Prerequisites from '../snippets/prerequisites.mdx'; +``` + +## Variable snippets + +Export named constants from a snippet file to reuse values like product names, version numbers, or URLs. + +```mdx snippets/vars.mdx +export const sdkVersion = '3.2.0'; +export const baseUrl = 'https://api.example.com/v1'; +``` + +Import and use them inline: + +```mdx your-page.mdx +import { sdkVersion, baseUrl } from '/snippets/vars.mdx'; + +The current SDK version is **{sdkVersion}**. + +All requests go to `{baseUrl}`. +``` + +## Component snippets + +For snippets that need to vary based on where they're used, export an arrow function component that accepts props. + +```mdx snippets/endpoint-note.mdx +export const EndpointNote = ({ method, path }) => ( + + This guide covers the {method} {path} endpoint. + See the API reference for full details. + +); +``` + +* Use arrow function syntax (`const Foo = () => ...`). +* The `function` keyword is not supported in snippet files. +* MDX syntax doesn't compile inside arrow function bodies. Use plain HTML tags there, or use a default export instead. + +Pass props when you render it: + +```mdx your-page.mdx +import { EndpointNote } from '/snippets/endpoint-note.mdx'; + + +``` + +## Snippets importing snippets + +Snippets can import other snippets, which is useful for composing larger shared sections from smaller pieces. + +```mdx snippets/auth-intro.mdx +import AuthNote from '/snippets/auth-note.mdx'; + +## Authentication + +All endpoints require a bearer token. + + +``` diff --git a/essentials/settings.mdx b/essentials/settings.mdx new file mode 100644 index 0000000..d4aac16 --- /dev/null +++ b/essentials/settings.mdx @@ -0,0 +1,174 @@ +--- +title: 'Configuration' +description: 'Customize your site with the `docs.json` file' +icon: 'gear' +--- + +Every Mintlify site is configured through a `docs.json` file in your project root. Changes take effect immediately in local preview. + +## Identity + +Set the name, theme, and visual identity of your site. + +```json docs.json +{ + "name": "Acme Docs", + "theme": "mint", + "favicon": "/favicon.svg", + "logo": { + "light": "/logo/light.svg", + "dark": "/logo/dark.svg" + } +} +``` + + + Your project name. Appears in the browser tab title and site metadata. + + + + The visual theme. Options: `mint`, `maple`, `willow`, `sequoia`, `prism`. + + + + Path to your favicon. SVG recommended for crisp rendering at all sizes. + + + + + Logo shown in light mode. + Logo shown in dark mode. + URL the logo links to. + + + +## Colors + +```json docs.json +{ + "colors": { + "primary": "#16A34A", + "light": "#07C983", + "dark": "#15803D" + } +} +``` + + + Primary brand color. Used for highlights, active states, and accents in light mode. + + + + Primary color for dark mode. + + + + Used for buttons and important interactive elements. + + + + Override the default page background color. + + Background hex color in light mode. + Background hex color in dark mode. + + + +## Navbar + +Configure the top navigation bar links and primary call-to-action. + +```json docs.json +{ + "navbar": { + "links": [ + { "label": "Support", "href": "mailto:support@example.com" } + ], + "primary": { + "type": "button", + "label": "Dashboard", + "href": "https://dashboard.example.com" + } + } +} +``` + + + Text links displayed in the top navigation bar. + + Display text for the link. + URL the link points to. + + + + + The prominent call-to-action in the top-right corner. + + + `button` renders a CTA button. `github` renders a star count badge. + + Button label. Required when type is `button`. + URL the button or badge links to. + + + +## Navigation + +Organize your pages into tabs and groups. See the [Navigation](/essentials/navigation) guide for full details. + +```json docs.json +{ + "navigation": { + "tabs": [ + { + "tab": "Guides", + "groups": [ + { + "group": "Getting started", + "pages": ["index", "quickstart"] + } + ] + } + ], + "global": { + "anchors": [ + { + "anchor": "Blog", + "href": "https://example.com/blog", + "icon": "newspaper" + } + ] + } + } +} +``` + +## Contextual toolbar + +The contextual toolbar floats on every page and gives readers one-click access to AI tools and integrations. See [Contextual toolbar](/agent-ready/contextual) for the full list of options. + +```json docs.json +{ + "contextual": { + "options": ["copy", "view", "claude", "mcp", "cursor", "vscode"] + } +} +``` + +## Footer + +```json docs.json +{ + "footer": { + "socials": { + "x": "https://x.com/yourhandle", + "github": "https://github.com/yourorg", + "linkedin": "https://linkedin.com/company/yourco" + } + } +} +``` + + + Social links shown in the footer. Supported keys: `x`, `github`, `linkedin`, `discord`, `slack`, `facebook`, `instagram`, `website`. + diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..d50ceed --- /dev/null +++ b/favicon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/checks-passed.png b/images/checks-passed.png new file mode 100644 index 0000000..3303c77 Binary files /dev/null and b/images/checks-passed.png differ diff --git a/images/hero-dark.png b/images/hero-dark.png new file mode 100644 index 0000000..a61cbb1 Binary files /dev/null and b/images/hero-dark.png differ diff --git a/images/hero-light.png b/images/hero-light.png new file mode 100644 index 0000000..68c712d Binary files /dev/null and b/images/hero-light.png differ diff --git a/index.mdx b/index.mdx new file mode 100644 index 0000000..4122083 --- /dev/null +++ b/index.mdx @@ -0,0 +1,133 @@ +--- +title: "Introduction" +description: "Welcome to the new home for your documentation" +icon: 'star' +--- + +## Setting up + +Get your documentation site up and running in minutes. + + + Follow our three step quickstart guide. + + +## Make it yours + +Design a docs site that looks great and empowers your users. + + + + Edit your docs locally and preview them in real time. + + + Customize the design and colors of your site to match your brand. + + + Organize your docs to help users find what they need and succeed with your product. + + + Auto-generate API documentation from OpenAPI specifications. + + + +## Create beautiful pages + +Everything you need to create world-class documentation. + + + + Use MDX to style your docs pages. + + + Add sample code to demonstrate how to use your product. + + + Display images and other media. + + + Write once and reuse across your docs. + + + +## Make your content agent ready + +Make your docs work for humans and AI agents alike. + + + + Embed shareable AI prompts readers can copy or open in Cursor. + + + Show different content to humans and agents reading your docs. + + + Give readers one-click access to Claude, ChatGPT, Cursor, and more. + + + Set up Claude Code, Cursor, or Windsurf with Mintlify's skill. + + + +## Need inspiration? + + + Browse our showcase of exceptional documentation sites. + diff --git a/logo/dark.svg b/logo/dark.svg new file mode 100644 index 0000000..ed69d09 --- /dev/null +++ b/logo/dark.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + +Starter Kit + diff --git a/logo/light.svg b/logo/light.svg new file mode 100644 index 0000000..dda682c --- /dev/null +++ b/logo/light.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + +Starter Kit + diff --git a/quickstart.mdx b/quickstart.mdx new file mode 100644 index 0000000..0ed099d --- /dev/null +++ b/quickstart.mdx @@ -0,0 +1,81 @@ +--- +title: "Quickstart" +description: "Start building awesome documentation in minutes" +icon: 'rocket' +--- + +## Get started in three steps + +Get your documentation site running locally and make your first customization. + +### Step 1: Set up your local environment + + + + During the onboarding process, you created a GitHub repository with your docs content if you didn't already have one. You can find a link to this repository in your [dashboard](https://dashboard.mintlify.com). + + To clone the repository locally so that you can make and preview changes to your docs, follow the [Cloning a repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) guide in the GitHub docs. + + + 1. Install the Mintlify CLI: `npm i -g mint` + 2. Navigate to your docs directory and run: `mint dev` + 3. Open `http://localhost:3000` to see your docs live! + + Your preview updates automatically as you edit files. + + + +### Step 2: Deploy your changes + + + + Install the Mintlify GitHub app from your [dashboard](https://dashboard.mintlify.com/settings/organization/github-app). + + Our GitHub app automatically deploys your changes to your docs site, so you don't need to manage deployments yourself. + + + For a first change, let's update the name and colors of your docs site. + + 1. Open `docs.json` in your editor. + 2. Change the `"name"` field to your project name. + 3. Update the `"colors"` to match your brand. + 4. Save and see your changes instantly at `http://localhost:3000`. + + Try changing the primary color to see an immediate difference! + + + +### Step 3: Go live + + + 1. Commit and push your changes. + 2. Your docs will update and be live in moments! + + +## Next steps + +Now that you have your docs running, explore these key features: + + + + + Learn MDX syntax and start writing your documentation. + + + + Make your docs match your brand perfectly. + + + + Include syntax-highlighted code blocks. + + + + Auto-generate API docs from OpenAPI specs. + + + + + + **Need help?** See our [full documentation](https://mintlify.com/docs) or join our [community](https://mintlify.com/community). + diff --git a/snippets/snippet-intro.mdx b/snippets/snippet-intro.mdx new file mode 100644 index 0000000..e20fbb6 --- /dev/null +++ b/snippets/snippet-intro.mdx @@ -0,0 +1,4 @@ +One of the core principles of software development is DRY (Don't Repeat +Yourself). This is a principle that applies to documentation as +well. If you find yourself repeating the same content in multiple places, you +should consider creating a custom snippet to keep your content in sync.