## 1. Project Overview & Quickstart (Tracer-Cloud/README) # README :memo:The missing online resume maker ### Repository Details - **Repository:** [Tracer-Cloud/README](https://github.com/Tracer-Cloud/README) - **Primary Language:** JavaScript *Note: High-volume repository documentation is actively indexed and synchronized by YakaAI.* ## 2. Official Technical Reference & Guides (Tracer-Cloud/docs) ## File: README.md # 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) --- ## File: AGENTS.md > **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 */} --- ## File: CONTRIBUTING.md > **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 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 --- ## File: development.mdx --- title: 'Development' 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: ## 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 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). --- ## File: docs.json { "$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" } } } --- ## File: index.mdx --- title: "Introduction" 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. --- ## File: quickstart.mdx --- title: "Quickstart" 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 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). --- ## File: agent-ready/contextual.mdx --- title: 'Contextual menu' 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. --- ## File: agent-ready/prompt.mdx --- title: 'Prompt component' 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 --- ## File: agent-ready/visibility.mdx --- title: 'Visibility' 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. ``` --- ## File: ai-tools/claude-code.mdx --- title: "Claude Code setup" 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 ``` --- ## File: ai-tools/cursor.mdx --- title: "Cursor setup" 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. --- ## File: ai-tools/windsurf.mdx --- title: "Windsurf setup" 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. --- ## File: api-reference/introduction.mdx --- title: 'Introduction' --- 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": [] } ] ``` --- ## File: api-reference/openapi.json { "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" } } } } --- ## File: api-reference/endpoint/create.mdx --- title: 'Create Plant' openapi: 'POST /plants' --- --- ## File: api-reference/endpoint/delete.mdx --- title: 'Delete Plant' openapi: 'DELETE /plants/{id}' --- --- ## File: api-reference/endpoint/get.mdx --- title: 'Get Plants' openapi: 'GET /plants' --- --- ## File: api-reference/endpoint/webhook.mdx --- title: 'New Plant' openapi: 'WEBHOOK /plant/webhook' --- --- ## File: essentials/code.mdx --- title: '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. --- ## File: essentials/components.mdx --- title: 'Components' 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. ```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') ``` ```` --- ## File: essentials/images.mdx --- title: 'Images and embeds' 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 ``` --- ## File: essentials/markdown.mdx --- title: 'Markdown syntax' 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) ``` --- ## File: essentials/navigation.mdx --- title: 'Navigation' 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. --- ## File: essentials/reusable-snippets.mdx --- title: "Reusable snippets" 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. ``` --- ## File: essentials/settings.mdx --- title: 'Configuration' 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`. --- ## File: snippets/snippet-intro.mdx 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.