Mintplex-Labs · tonytrill · Feb 24, 2025 · Feb 24, 2025 · Feb 25, 2025 · Mar 27, 2025
diff --git a/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx
@@ -1,9 +1,13 @@
+import { useState } from "react";
+
 export default function ChromaDBOptions({ settings }) {
+  const [isCloud, setIsCloud] = useState(settings?.ChromaCloud === "true");
+
   return (
-    <div className="w-full flex flex-col gap-y-7">
+    <div className="flex flex-col w-full gap-y-7">
       <div className="w-full flex items-center gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-3">
+          <label className="block mb-3 text-sm font-semibold text-white">
             Chroma Endpoint
           </label>
           <input
@@ -19,7 +23,7 @@ export default function ChromaDBOptions({ settings }) {
         </div>
 
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-3">
+          <label className="block mb-3 text-sm font-semibold text-white">
             API Header
           </label>
           <input
@@ -33,7 +37,7 @@ export default function ChromaDBOptions({ settings }) {
         </div>
 
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-3">
+          <label className="block mb-3 text-sm font-semibold text-white">
             API Key
           </label>
           <input
@@ -46,6 +50,77 @@ export default function ChromaDBOptions({ settings }) {
           />
         </div>
       </div>
+      <div className="relative w-full max-h-full">
+        <div className="relative rounded-lg">
+          <div className="flex items-start justify-between px-6 py-4"></div>
+          <div className="flex w-full h-full space-y-6">
+            <div className="flex flex-col w-full gap-y-4">
+              <div className="">
+                <label className="block mb-3 text-sm font-semibold text-white">
+                  Using Chroma Cloud?
+                </label>
+                <label className="relative inline-flex items-center cursor-pointer">
+                  <input
+                    name="ChromaCloudController"
+                    type="checkbox"
+                    onChange={(e) => {
+                      setIsCloud(e.target.checked);
+                    }}
+                    checked={isCloud}
+                    className="sr-only peer"
+                  />
+                  <input
+                    name="ChromaCloud"
+                    type="hidden"
+                    value={isCloud.toString()}
+                  />
+                  <div className="peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent" />
+                </label>
+              </div>
+              <div
+                className={`w-full flex items-center gap-[36px] mt-1.5 ${
+                  !isCloud ? "hidden" : ""
+                }`}
+              >
+                <div className="flex flex-col w-60">
+                  <label className="block mb-3 text-sm font-semibold text-white">
+                    Tenant ID
+                  </label>
+                  <input
+                    name="ChromaTenantId"
+                    type="text"
+                    className="border-none bg-theme-settings-input-bg text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                    placeholder="Your Chroma Cloud Tenant ID"
+                    defaultValue={settings?.ChromaTenantId}
+                    required={isCloud}
+                    autoComplete="off"
+                  />
+                </div>
+                <div className="flex flex-col w-60">
+                  <label className="block mb-3 text-sm font-semibold text-white">
+                    Database Name
+                  </label>
+                  <input
+                    name="ChromaDatabaseName"
+                    type="text"
+                    className="border-none bg-theme-settings-input-bg text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                    placeholder="Your Chroma Cloud Database"
+                    defaultValue={settings?.ChromaDatabaseName}
+                    required={isCloud}
+                    autoComplete="off"
+                  />
+                </div>
+              </div>
+              {!isCloud && (
+                <>
+                  <input type="hidden" name="ChromaTenantId" value="" />
+                  <input type="hidden" name="ChromaDatabaseName" value="" />
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/server/.env.example b/server/.env.example
@@ -181,6 +181,9 @@ SIG_SALT='salt' # Please generate random string at least 32 chars long.
 # CHROMA_ENDPOINT='http://localhost:8000'
 # CHROMA_API_HEADER="X-Api-Key"
 # CHROMA_API_KEY="sk-123abc"
+# CHROMA_CLOUD="false"
+# CHROMA_TENANT_ID="your-tenant-id"
+# CHROMA_DATABASE_NAME="your-database-name"
 
 # Enable all below if you are using vector database: Pinecone.
 # VECTOR_DB="pinecone"

diff --git a/server/models/systemSettings.js b/server/models/systemSettings.js
@@ -406,6 +406,9 @@ const SystemSettings = {
       ChromaEndpoint: process.env.CHROMA_ENDPOINT,
       ChromaApiHeader: process.env.CHROMA_API_HEADER,
       ChromaApiKey: !!process.env.CHROMA_API_KEY,
+      ChromaCloud: process.env.CHROMA_CLOUD,
+      ChromaTenantId: process.env.CHROMA_TENANT_ID,
+      ChromaDatabaseName: process.env.CHROMA_DATABASE_NAME,
 
       // Weaviate DB Keys
       WeaviateEndpoint: process.env.WEAVIATE_ENDPOINT,

diff --git a/server/utils/helpers/updateENV.js b/server/utils/helpers/updateENV.js
@@ -305,6 +305,19 @@ const KEY_MAPPING = {
     envKey: "CHROMA_API_KEY",
     checks: [],
   },
+  // Chroma Cloud Options
+  ChromaCloud: {
+    envKey: "CHROMA_CLOUD",
+    checks: [],
+  },
+  ChromaTenantId: {
+    envKey: "CHROMA_TENANT_ID",
+    checks: [],
+  },
+  ChromaDatabaseName: {
+    envKey: "CHROMA_DATABASE_NAME",
+    checks: [],
+  },
 
   // Weaviate Options
   WeaviateEndpoint: {

diff --git a/server/utils/vectorDbProviders/chroma/CHROMA_SETUP.md b/server/utils/vectorDbProviders/chroma/CHROMA_SETUP.md
@@ -26,3 +26,29 @@ CHROMA_ENDPOINT='http://localhost:8000'
 # CHROMA_API_HEADER="X-Api-Key" // If you have an Auth middleware on your instance.
 # CHROMA_API_KEY="sk-123abc" // If you have an Auth middleware on your instance.
 ```
+
+# How to setup a connection to Chroma Cloud
+
+### How to get started
+
+**Requirements**
+
+- A Chroma Cloud Account
+- Sign up for an account [here](https://trychroma.com/signup)
+
+**Instructions**
+
+- Go to trychroma.com and login to Chroma Cloud.
+- Create a new database.
+- Click "Connection String"
+- Capture your host, tenant id, database name, API Header, and API key.
+
+```
+VECTOR_DB="chroma"
+CHROMA_ENDPOINT='https://api.trychroma.com'
+CHROMA_API_HEADER="X-CHROMA-TOKEN"
+CHROMA_API_KEY="sk-123abc"
+CHROMA_CLOUD="true"
+CHROMA_TENANT_ID="your-tenant-id"
+CHROMA_DATABASE_NAME="your-database-name"
+```
diff --git a/server/utils/vectorDbProviders/chroma/index.js b/server/utils/vectorDbProviders/chroma/index.js
@@ -4,7 +4,6 @@ const { SystemSettings } = require("../../../models/systemSettings");
 const { storeVectorResult, cachedVectorInformation } = require("../../files");
 const { v4: uuidv4 } = require("uuid");
 const { toChunks, getEmbeddingEngineSelection } = require("../../helpers");
-const { parseAuthHeader } = require("../../http");
 const { sourceIdentifier } = require("../../chats");
 const COLLECTION_REGEX = new RegExp(
   /^(?!\d+\.\d+\.\d+\.\d+$)(?!.*\.\.)(?=^[a-zA-Z0-9][a-zA-Z0-9_-]{1,61}[a-zA-Z0-9]$).{3,63}$/
@@ -60,17 +59,24 @@ const Chroma = {
       throw new Error("Chroma::Invalid ENV settings");
 
     const client = new ChromaClient({
-      path: process.env.CHROMA_ENDPOINT, // if not set will fallback to localhost:8000
-      ...(!!process.env.CHROMA_API_HEADER && !!process.env.CHROMA_API_KEY
+      path: process.env.CHROMA_ENDPOINT,
+      ...(process.env.CHROMA_API_KEY && process.env.CHROMA_API_HEADER
         ? {
-            fetchOptions: {
-              headers: parseAuthHeader(
-                process.env.CHROMA_API_HEADER || "X-Api-Key",
-                process.env.CHROMA_API_KEY
-              ),
+            auth: {
+              provider: "token",
+              credentials: process.env.CHROMA_API_KEY,
+              tokenHeaderType: process.env.CHROMA_API_HEADER || "X-Api-Key",
             },
           }
         : {}),
+      ...(process.env.CHROMA_CLOUD === "true" &&
+      process.env.CHROMA_TENANT_ID &&
+      process.env.CHROMA_DATABASE_NAME
+        ? {
+            tenant: process.env.CHROMA_TENANT_ID,
+            database: process.env.CHROMA_DATABASE_NAME,
+          }
+        : {}),
     });
 
     const isAlive = await client.heartbeat();
@@ -296,7 +302,6 @@ const Chroma = {
         name: this.normalize(namespace),
         metadata: { "hnsw:space": "cosine" },
       });
-
       if (vectors.length > 0) {
         const chunks = [];
         console.log("Inserting vectorized chunks into Chroma collection.");
@@ -420,7 +425,7 @@ const Chroma = {
       if (Object.keys(metadata).length > 0) {
         documents.push({
           ...metadata,
-          ...(source.hasOwnProperty("pageContent")
+          ...(Object.prototype.hasOwnProperty.call(source, "pageContent")
             ? { text: source.pageContent }
             : {}),
         });