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
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
andusername
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
- 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 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
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>