diff --git a/js/src/lib/interfaces/Libraries.ts b/js/src/lib/interfaces/Libraries.ts
index 7ceda88d4..8cbbb85a0 100644
--- a/js/src/lib/interfaces/Libraries.ts
+++ b/js/src/lib/interfaces/Libraries.ts
@@ -32,6 +32,7 @@ export enum ModelLibrary {
 	"stable-baselines3"      = "Stable-Baselines3",
 	"ml-agents"              = "ML-Agents",
 	"pythae"                 = "Pythae",
+	"tdc"			 = "TDC"
 }
 
 export type ModelLibraryKey = keyof typeof ModelLibrary;
@@ -416,6 +417,16 @@ const pythae = (model: ModelData) =>
 
 model = AutoModel.load_from_hf_hub("${model.id}")`;
 
+const tdc = (model: ModelData) =>
+	`from tdc import tdc_hf_interface
+	 # initialize an interface object with HF repo name
+         tdc_hf = tdc_hf_interface("${model.id}")
+         # upload folder/files to this repo
+         tdc_hf.upload('UPLOAD FOLDER PATH')
+         # load deeppurpose model from this repo
+         dp_model = tdc_hf.load_deeppurpose('SAVED FOLDER PATH')
+         dp_model.predict('YOUR SMILES STRING')`;
+
 //#endregion
 
 
@@ -572,5 +583,11 @@ export const MODEL_LIBRARIES_UI_ELEMENTS: Partial<Record<ModelLibraryKey, Librar
 		repoUrl:  "https://github.com/clementchadebec/benchmark_VAE",
 		snippet:  pythae,
 	},
+	"tdc": {
+		btnLabel: "tdc",
+		repoName: "tdc",
+		repoUrl:  "https://github.com/mims-harvard/TDC",
+		snippet:  tdc,
+	},
 } as const;