⚡ docs: quick start guides

2026-03-27 10:48:32 +07:00 · 2024-06-01 09:28:34 -04:00
parent 44e0494e23
commit 8b9f981df6
9 changed files with 262 additions and 0 deletions
--- a/components/CardIcons/CustomEndpoints.tsx
+++ b/components/CardIcons/CustomEndpoints.tsx
@@ -0,0 +1,34 @@
+// import Image from 'next/image'
+
+export function CustomEndpoints() {
+  return (
+    <>
+      <div className="flex gap-2 items-center">
+        {/* Text */}
+        <span className="ml-2 text-lg font-bold text-gray-600 dark:text-gray-300">
+          🤖 Custom Endpoints
+        </span>
+        {/* CSS for hover effect */}
+        <style jsx>{`
+          div {
+            padding: 0.5rem 0.5rem 0.5rem 0;
+            mask-image: linear-gradient(
+              60deg,
+              #bba0ff 25%,
+              rgba(187, 160, 255, 0.2) 50%,
+              #bba0ff 75%
+            );
+            mask-size: 400%;
+            mask-position: 0%;
+          }
+          div:hover {
+            mask-position: 100%;
+            transition:
+              mask-position 1s ease,
+              -webkit-mask-position 1s ease;
+          }
+        `}</style>
+      </div>
+    </>
+  )
+}
--- a/components/CardIcons/QuickStartLocal.tsx
+++ b/components/CardIcons/QuickStartLocal.tsx
@@ -0,0 +1,34 @@
+// import Image from 'next/image'
+
+export function QuickStartLocal() {
+  return (
+    <>
+      <div className="flex gap-2 items-center">
+        {/* Text */}
+        <span className="ml-2 text-lg font-bold text-gray-600 dark:text-gray-300">
+          ⚡ Quick Start (Local Setup)
+        </span>
+        {/* CSS for hover effect */}
+        <style jsx>{`
+          div {
+            padding: 0.5rem 0.5rem 0.5rem 0;
+            mask-image: linear-gradient(
+              60deg,
+              #bba0ff 25%,
+              rgba(187, 160, 255, 0.2) 50%,
+              #bba0ff 75%
+            );
+            mask-size: 400%;
+            mask-position: 0%;
+          }
+          div:hover {
+            mask-position: 100%;
+            transition:
+              mask-position 1s ease,
+              -webkit-mask-position 1s ease;
+          }
+        `}</style>
+      </div>
+    </>
+  )
+}
--- a/components/repeated/AdditionalLinks.mdx
+++ b/components/repeated/AdditionalLinks.mdx
@@ -0,0 +1,17 @@
+**Explore more about LibreChat and how to configure it to your needs.**
+
+## Additional Links
+
+- **[Updating LibreChat](./docs/local/docker#update-librechat)**
+      - Instructions on how to update this setup with the latest changes to LibreChat.
+- **[Configuring a Custom Endpoint](./custom_endpoints)**
+      - Configure services such as OpenRouter, Ollama, Mistral AI, Databricks, groq, and others.
+      - **[Click here](/docs/configuration/librechat_yaml/ai_endpoints)** for a list of known, compatible services.
+- **[Environment Configuration](/docs/configuration/dotenv)**
+      - Read for a comprehensive look at the `.env` file.
+- **[librechat.yaml File Configuration](/docs/configuration/librechat_yaml)**
+      - Configure custom rate limiters, file outputs, and much more with the `librechat.yaml` file.
+- **[Ubuntu Docker Deployment Guide](/docs/remote/docker_linux)**
+      - Read for advanced Docker setup on a remote/headless server.
+- **[Setup the Azure OpenAI endpoint](/docs/configuration/azure)**
+      - Configure multiple Azure regions and deployments for seamless use with LibreChat.
--- a/pages/docs/_meta.ts
+++ b/pages/docs/_meta.ts
@@ -1,5 +1,11 @@
 export default {
  index: 'Get Started',
+  quick_start: {
+    title: 'Quick Start',
+    children: {
+      index: 'Quick Start Overview',
+    },
+  },
  local: 'Local Installation',
  remote: 'Remote Hosting',
  configuration: 'Configuration',
--- a/pages/docs/index.mdx
+++ b/pages/docs/index.mdx
@@ -2,6 +2,8 @@
 title: Get Started
 ---

+import { QuickStartLocal } from '@/components/CardIcons/QuickStartLocal'
+import { CustomEndpoints } from '@/components/CardIcons/CustomEndpoints'
 import { Logo } from '@/components/CardIcons/AboutLogo'
 import { ToolKit } from '@/components/CardIcons/ToolKit'
 import { Changelog } from '@/components/CardIcons/Changelog'
@@ -11,6 +13,17 @@ import { OurAuthors } from '@/components/CardIcons/OurAuthors'

 # Get Started

+### Quick Start Guides
+
+<div>
+  <Cards num={2}>
+    <Cards.Card title="" href="/docs/quick_start/local_setup" icon={<QuickStartLocal />} image />
+    <Cards.Card title="" href="/docs/quick_start/custom_endpoints" icon={<CustomEndpoints />} image />
+  </Cards>
+</div>
+
+### Explore our Documentation
+
 <Cards num={6}>
  <Cards.Card href="/docs/local" title="Local Installation" image arrow>
    ![Local Installation](/images/cards/local.svg)
--- a/pages/docs/quick_start/_meta.ts
+++ b/pages/docs/quick_start/_meta.ts
@@ -0,0 +1,5 @@
+export default {
+  index: 'Overview',
+  local_setup: 'Local Setup',
+  custom_endpoints: 'Custom Endpoints',
+}
--- a/pages/docs/quick_start/custom_endpoints.mdx
+++ b/pages/docs/quick_start/custom_endpoints.mdx
@@ -0,0 +1,87 @@
+import AdditionalLinks from '@/components/repeated/AdditionalLinks.mdx';
+
+# Custom Endpoints
+
+LibreChat supports OpenAI API compatible services using the `librechat.yaml` configuration file.
+
+This guide assumes you have already set up LibreChat using Docker, as shown in the **[Local Setup Guide](/docs/quick_start/local_setup).**
+
+## Step 1. Create or Edit a Docker Override File
+
+- Create a file named `docker-compose.override.yml` file at the project root (if it doesn't already exist).
+- Add the following content to the file:
+
+```yaml
+services:
+  api:
+    volumes:
+    - type: bind
+      source: ./librechat.yaml
+      target: /app/librechat.yaml
+```
+
+> Learn more about the [Docker Compose Override File here](/docs/configuration/docker_override).
+
+## Step 2. Configure `librechat.yaml`
+
+- **Create a file named `librechat.yaml`** at the project root (if it doesn't already exist).
+- **Add your custom endpoints:** you can view compatible endpoints in the [AI Endpoints section](/docs/configuration/librechat_yaml/ai_endpoints).
+  - The list is not exhaustive and generally every OpenAI API-compatible service should work.
+  - There are many options for Custom Endpoints. View them all here: [Custom Endpoint Object Structure](/docs/configuration/librechat_yaml/object_structure/custom_endpoint).
+- As an example, here is a configuration for both **OpenRouter** and **Ollama**:
+
+   ```yaml
+   version: 1.1.14
+   cache: true
+   endpoints:
+     custom:
+       - name: "OpenRouter"
+         apiKey: "${OPENROUTER_KEY}"
+         baseURL: "https://openrouter.ai/api/v1"
+         models:
+           default: ["gpt-3.5-turbo"]
+           fetch: true
+         titleConvo: true
+         titleModel: "current_model"
+         summarize: false
+         summaryModel: "current_model"
+         forcePrompt: false
+         modelDisplayLabel: "OpenRouter"
+       - name: "Ollama"
+         apiKey: "ollama"
+         baseURL: "http://localhost:11434/v1/"
+         models:
+           default: [
+             "llama3:latest",
+             "command-r",
+             "mixtral",
+             "phi3"
+             ]
+           fetch: true # fetching list of models is not supported
+         titleConvo: true
+         titleModel: "current_model"
+   ```
+
+## Step 3. Run the App
+
+- Now that your files are configured, you can run the app:
+
+```bash
+docker compose up
+```
+
+Or, if you were running the app before, you can restart the app with:
+
+```bash
+docker compose restart
+```
+
+> Note: Make sure your Docker Desktop or Docker Engine is running before executing the command.
+
+---
+
+**That's it!** You have now configured **Custom Endpoints** for your LibreChat instance. 
+
+---
+
+<AdditionalLinks />
--- a/pages/docs/quick_start/index.mdx
+++ b/pages/docs/quick_start/index.mdx
@@ -0,0 +1,11 @@
+# Quick Start
+
+Follow the guides below to get up and running with LibreChat as quickly as possible.
+
+#### [Local Setup](./quick_start/local_setup)
+
+Use this easy setup guide and start using LibreChat as quickly as possible.
+
+#### [Custom Endpoints](./quick_start/custom_endpoints)
+
+Configure custom endpoints for services like OpenRouter, Ollama, Mistral AI, Databricks, groq, and others.
--- a/pages/docs/quick_start/local_setup.mdx
+++ b/pages/docs/quick_start/local_setup.mdx
@@ -0,0 +1,55 @@
+import AdditionalLinks from '@/components/repeated/AdditionalLinks.mdx';
+
+# Local Setup Guide
+
+This is a condensed version of our [Local Installation Guide](/docs/local/)
+
+## Step 1. Download the Project
+
+### Manual Download
+
+1. **Go to the Project Page**: Visit [https://github.com/danny-avila/LibreChat](https://github.com/danny-avila/LibreChat).
+
+2. **Download the ZIP File**: Click the green "Code" button, then click "Download ZIP."
+
+3. **Extract the ZIP File**: Find the downloaded ZIP file, right-click, and select "Extract All...".
+
+### Using Git
+
+Run the following [git](https://git-scm.com/) command in your terminal, from the desired parent directory:
+
+```bash
+git clone https://github.com/danny-avila/LibreChat.git
+```
+
+## Step 2. Install Docker
+
+1. **Download**: Go to [Docker Desktop Download Page](https://www.docker.com/products/docker-desktop) and download Docker Desktop.
+2. **Install**: Open the installer and follow the instructions.
+3. **Run**: Open Docker Desktop to ensure it is running.
+
+> Note: Docker Desktop is recommended for most users. If you are looking for an advanced docker/container setup, especially for a remote server installation, see our [Ubuntu Docker Deployment Guide](/docs/remote/docker_linux).
+
+## Step 3. Run the App
+
+1. **Navigate to the Project Directory**
+
+2. **Create and Configure .env File**:
+   - Copy the contents of `.env.example` to a new file named `.env`.
+   - Fill in any necessary values.
+      - For an in-depth environment configuration, see the [.env File Configuration Guide](/docs/configuration/dotenv).
+
+3. **Start the Application**:
+   - Run the following command:
+
+   ```bash
+   docker compose up
+   ```
+
+---
+
+**That's it!** You should now have **LibreChat** running locally on your machine. Enjoy!
+
+---
+
+<AdditionalLinks />