Docs
Documentation
Contributing to the Docs

Contributing to the Documentation

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

ℹ️
Blog vs Docs

Consider publishing a blog post when a document is an extension of an existing one, relates to a specific situation, or requires external maintenance (features not actively used by the team).

See: Contributing to Blog

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

🔥
Docs Resources

See some integrated components examples:

For more information, refer to:

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.

metadata example:
---
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 followng example:

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

see the following example in action here: User Guides

Example
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

🅰️
Method A
  • Go to the LibreChat repository
  • Find a random conversation or PR
  • Paste an image from your clipboard into the text input box. It will automatically be converted into a URL.
  • Copy and paste the resulting URL in your document. (Then exit the page without actually posting the comment.😉)

image

🅱️
Method B
  • Upload directly from the web UI:

image

Test the Docs

⚠️
Before you submit

Review carefully before submitting your PR

Before submitting a PR for your blog post, always test to ensure everything looks and functions as intended.

Check the following:

  • Your new document(s) for layout, accuracy and completeness
  • The document’s position in the Table of Contents (ToC)
  • The image and link in your document

To test:

  1. Prepare the environment by running pnpm install
  2. Start the dev server with pnpm dev
  3. Test the build by running pnpm build followed by pnpm start