Overview

Contributions to the documentation are welcome! This guide explains how to contribute to the LibreChat documentation by writing and formatting new documentation. Our website is built with Nextra 3 and our docs use the .mdx format (augmented markdown).

When to Write a Doc vs. a Blog Post

Getting Started

• Fork the LibreChat Documentation repository: https://github.com/LibreChat-AI/librechat.ai

• Create a branch on your fork, name it properly, and link it to the original repository.

git clone -b branch-name https://github.com/username/librechat.ai.git

Replace branch-name and username with your details

Creating New Documents

To create a new document:

• Use the .mdx file extension (see MDX documentation for more info).
• Name files using lowercase letters and underscores (e.g., documentation_guidelines.mdx).
• Place new documents in the relevant folder/sub-folder under ./docs.
• Add the document to the table of contents in the _meta.ts file of the folder where your document is located. If you don't add it, it will be alphabetically sorted after the ordered docs.

Markdown Formatting Guidelines

• Use headings and subheadings with #, ##, and ###.
  • Use # for the document title (only one main title per document is allowed).
  • Use ## for main sections.
  • Use ### for sub-sections within a section.
• Use ** to make text bold and highlight important information (do not use in place of a heading).
• Use URL paths to link to other documents (e.g., /docs/documentation points the current doc).
• You can use HTML, TS, and JS to add additional features to a document.
• Ensure any HTML has closing tags (e.g., <img src="" /> or <a href="link"></a>).
• Do not use HTML comments; instead, use Markdown comments only if the text is actually hidden.

Docs Resources

Document Metadata

Add metadata to the header of your document using the following format:

Note: The ogImage field is optional and can be omitted altogether. It is used to specify the image that will be displayed when sharing your document on social media platforms.

---
title: Document Title
description: This description will be used in social cards and search engine results.
ogImage: /images/docs/<category>/image.png (optional)
---

Assets

Whenever possible, upload assets (e.g., images) to GitHub instead of storing them in the /public folder. This helps keep your repository organized and makes it easier to manage your assets.

Images

Note: In the following example:

• I provided screenshots for both light and dark mode.
• I used Image from 'next/image' which gave me 4x improvement on the image file size for better performance.

see the following example in action here: User Guides

import Image from 'next/image'
 
<div style={{padding: "20px", display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column"}}>
  <div className="image-light-theme">
    <Image src="https://github.com/danny-avila/LibreChat/assets/32828263/cf0f3231-287a-407f-bd4d-3d5bad94e893" alt="ipad-light" width={1024} height={512} style={{borderRadius: "5px"}} />
  </div>
 
  <div className="image-dark-theme">
    <Image src="https://github.com/danny-avila/LibreChat/assets/32828263/a03ee02d-5099-4220-95b0-bfa2d3b00b4d" alt="ipad-dark" width={1024} height={512} style={{borderRadius: "5px"}} />
  </div>
</div>

How to Upload Images and Videos on GitHub

Test the Docs