diff --git a/packages/components/nodes/tools/CustomTool/CustomTool.ts b/packages/components/nodes/tools/CustomTool/CustomTool.ts
index 6b0397c8..9ceda919 100644
--- a/packages/components/nodes/tools/CustomTool/CustomTool.ts
+++ b/packages/components/nodes/tools/CustomTool/CustomTool.ts
@@ -85,26 +85,29 @@ class CustomTool_Tools implements INode {
 
             // override variables defined in overrideConfig
             // nodeData.inputs.variables is an Object, check each property and override the variable
-            if (nodeData?.inputs?.envVars) {
-                for (const propertyName of Object.getOwnPropertyNames(nodeData.inputs.envVars)) {
+            if (nodeData?.inputs?.vars) {
+                for (const propertyName of Object.getOwnPropertyNames(nodeData.inputs.vars)) {
                     const foundVar = variables.find((v) => v.name === propertyName)
                     if (foundVar) {
                         // even if the variable was defined as runtime, we override it with static value
                         foundVar.type = 'static'
-                        foundVar.value = nodeData.inputs.envVars[propertyName]
+                        foundVar.value = nodeData.inputs.vars[propertyName]
                     } else {
                         // add it the variables, if not found locally in the db
-                        variables.push({ name: propertyName, type: 'static', value: nodeData.inputs.envVars[propertyName] })
+                        variables.push({ name: propertyName, type: 'static', value: nodeData.inputs.vars[propertyName] })
                     }
                 }
             }
+
             const flow = {
                 chatId: options.chatId, // id is uppercase (I)
                 chatflowId: options.chatflowid // id is lowercase (i)
             }
+
             let dynamicStructuredTool = new DynamicStructuredTool(obj)
             dynamicStructuredTool.setVariables(variables)
             dynamicStructuredTool.setFlowObject(flow)
+
             return dynamicStructuredTool
         } catch (e) {
             throw new Error(e)
diff --git a/packages/components/nodes/tools/CustomTool/core.ts b/packages/components/nodes/tools/CustomTool/core.ts
index 77aa0e6b..338b0ae9 100644
--- a/packages/components/nodes/tools/CustomTool/core.ts
+++ b/packages/components/nodes/tools/CustomTool/core.ts
@@ -102,15 +102,19 @@ export class DynamicStructuredTool<
                 sandbox[`$${item}`] = arg[item]
             }
         }
-        //inject variables
-        let env = {}
+
+        // inject variables
+        let vars = {}
         if (this.variables) {
             for (const item of this.variables) {
                 let value = item.value
+
+                // read from .env file
                 if (item.type === 'runtime') {
                     value = process.env[item.name]
                 }
-                Object.defineProperty(env, item.name, {
+
+                Object.defineProperty(vars, item.name, {
                     enumerable: true,
                     configurable: true,
                     writable: true,
@@ -118,10 +122,13 @@ export class DynamicStructuredTool<
                 })
             }
         }
-        sandbox['$env'] = env
+        sandbox['$vars'] = vars
+
+        // inject flow properties
         if (this.flowObj) {
             sandbox['$flow'] = { ...this.flowObj, sessionId: overrideSessionId }
         }
+
         const defaultAllowBuiltInDep = [
             'assert',
             'buffer',
diff --git a/packages/ui/src/assets/images/variables_empty.svg b/packages/ui/src/assets/images/variables_empty.svg
new file mode 100644
index 00000000..eb461e39
--- /dev/null
+++ b/packages/ui/src/assets/images/variables_empty.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="876" height="554" viewBox="0 0 876 554" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M516,429H179a17.01909,17.01909,0,0,1-17-17V223a17.01909,17.01909,0,0,1,17-17H516a17.01917,17.01917,0,0,1,17,17V412A17.01917,17.01917,0,0,1,516,429ZM179,208a15.017,15.017,0,0,0-15,15V412a15.017,15.017,0,0,0,15,15H516a15.017,15.017,0,0,0,15-15V223a15.017,15.017,0,0,0-15-15Z" transform="translate(-162 -173)" fill="#e6e6e6"/><path d="M430.60039,281.313h-65a4.5,4.5,0,1,0,0,9h65a4.5,4.5,0,0,0,0-9Z" transform="translate(-162 -173)" fill="#e6e6e6"/><path d="M493.96026,309.813H364.74053c-2.01025,0-3.64014,2.02-3.64014,4.5s1.62989,4.5,3.64014,4.5H493.96026c2.01025,0,3.64013-2.02,3.64013-4.5S495.97051,309.813,493.96026,309.813Z" transform="translate(-162 -173)" fill="#e6e6e6"/><path d="M493.96026,339H364.74053c-2.01025,0-3.64014,2.02-3.64014,4.5s1.62989,4.5,3.64014,4.5H493.96026c2.01025,0,3.64013-2.02,3.64013-4.5S495.97051,339,493.96026,339Z" transform="translate(-162 -173)" fill="#e6e6e6"/><path d="M316,387.5H204A10.512,10.512,0,0,1,193.5,377V252A10.512,10.512,0,0,1,204,241.5H316A10.512,10.512,0,0,1,326.5,252V377A10.512,10.512,0,0,1,316,387.5Z" transform="translate(-162 -173)" fill="#e6e6e6"/><circle cx="362" cy="36" r="36" fill="#e6e6e6"/><path d="M994,429H657a17.01909,17.01909,0,0,1-17-17V223a17.01909,17.01909,0,0,1,17-17H994a17.01917,17.01917,0,0,1,17,17V412A17.01917,17.01917,0,0,1,994,429ZM657,208a15.017,15.017,0,0,0-15,15V412a15.017,15.017,0,0,0,15,15H994a15.017,15.017,0,0,0,15-15V223a15.017,15.017,0,0,0-15-15Z" transform="translate(-162 -173)" fill="#3f3d56"/><path d="M908.60039,281.313h-65a4.5,4.5,0,0,0,0,9h65a4.5,4.5,0,0,0,0-9Z" transform="translate(-162 -173)" fill="#3f3d56"/><path d="M971.96026,309.813H842.74053c-2.01025,0-3.64014,2.02-3.64014,4.5s1.62989,4.5,3.64014,4.5H971.96026c2.01025,0,3.64013-2.02,3.64013-4.5S973.97051,309.813,971.96026,309.813Z" transform="translate(-162 -173)" fill="#3f3d56"/><path d="M971.96026,339H842.74053c-2.01025,0-3.64014,2.02-3.64014,4.5s1.62989,4.5,3.64014,4.5H971.96026c2.01025,0,3.64013-2.02,3.64013-4.5S973.97051,339,971.96026,339Z" transform="translate(-162 -173)" fill="#3f3d56"/><path d="M794,387.5H682A10.512,10.512,0,0,1,671.5,377V252A10.512,10.512,0,0,1,682,241.5H794A10.512,10.512,0,0,1,804.5,252V377A10.512,10.512,0,0,1,794,387.5Z" transform="translate(-162 -173)" fill="#673ab7"/><circle cx="840" cy="36" r="36" fill="#673ab7"/><path d="M999.97633,223.57325a4.525,4.525,0,0,1-2.72269-.9044l-.04869-.03656-10.25352-7.85045a4.55541,4.55541,0,1,1,5.5412-7.232l6.64144,5.09257,15.6948-20.4683a4.55524,4.55524,0,0,1,6.38686-.84309l-.09759.13249.10012-.13056a4.56053,4.56053,0,0,1,.8431,6.3869l-18.46083,24.07562A4.55725,4.55725,0,0,1,999.97633,223.57325Z" transform="translate(-162 -173)" fill="#fff"/><path d="M516,727H179a17.01909,17.01909,0,0,1-17-17V521a17.01909,17.01909,0,0,1,17-17H516a17.01917,17.01917,0,0,1,17,17V710A17.01917,17.01917,0,0,1,516,727ZM179,506a15.017,15.017,0,0,0-15,15V710a15.017,15.017,0,0,0,15,15H516a15.017,15.017,0,0,0,15-15V521a15.017,15.017,0,0,0-15-15Z" transform="translate(-162 -173)" fill="#3f3d56"/><path d="M430.60039,579.313h-65a4.5,4.5,0,1,0,0,9h65a4.5,4.5,0,0,0,0-9Z" transform="translate(-162 -173)" fill="#3f3d56"/><path d="M493.96026,607.813H364.74053c-2.01025,0-3.64014,2.02-3.64014,4.5s1.62989,4.5,3.64014,4.5H493.96026c2.01025,0,3.64013-2.02,3.64013-4.5S495.97051,607.813,493.96026,607.813Z" transform="translate(-162 -173)" fill="#3f3d56"/><path d="M493.96026,637H364.74053c-2.01025,0-3.64014,2.02-3.64014,4.5s1.62989,4.5,3.64014,4.5H493.96026c2.01025,0,3.64013-2.02,3.64013-4.5S495.97051,637,493.96026,637Z" transform="translate(-162 -173)" fill="#3f3d56"/><path d="M316,685.5H204A10.512,10.512,0,0,1,193.5,675V550A10.512,10.512,0,0,1,204,539.5H316A10.512,10.512,0,0,1,326.5,550V675A10.512,10.512,0,0,1,316,685.5Z" transform="translate(-162 -173)" fill="#673ab7"/><circle cx="362" cy="334" r="36" fill="#673ab7"/><path d="M521.97633,521.57325a4.525,4.525,0,0,1-2.72269-.9044l-.04869-.03656-10.25352-7.85045a4.55541,4.55541,0,1,1,5.5412-7.232l6.64144,5.09257,15.6948-20.4683a4.55524,4.55524,0,0,1,6.38686-.84309l-.09759.13249.10012-.13056a4.56053,4.56053,0,0,1,.8431,6.3869l-18.46083,24.07562A4.55725,4.55725,0,0,1,521.97633,521.57325Z" transform="translate(-162 -173)" fill="#fff"/><path d="M994,727H657a17.01909,17.01909,0,0,1-17-17V521a17.01909,17.01909,0,0,1,17-17H994a17.01917,17.01917,0,0,1,17,17V710A17.01917,17.01917,0,0,1,994,727ZM657,506a15.017,15.017,0,0,0-15,15V710a15.017,15.017,0,0,0,15,15H994a15.017,15.017,0,0,0,15-15V521a15.017,15.017,0,0,0-15-15Z" transform="translate(-162 -173)" fill="#3f3d56"/><path d="M908.60039,579.313h-65a4.5,4.5,0,0,0,0,9h65a4.5,4.5,0,0,0,0-9Z" transform="translate(-162 -173)" fill="#3f3d56"/><path d="M971.96026,607.813H842.74053c-2.01025,0-3.64014,2.02-3.64014,4.5s1.62989,4.5,3.64014,4.5H971.96026c2.01025,0,3.64013-2.02,3.64013-4.5S973.97051,607.813,971.96026,607.813Z" transform="translate(-162 -173)" fill="#3f3d56"/><path d="M971.96026,637H842.74053c-2.01025,0-3.64014,2.02-3.64014,4.5s1.62989,4.5,3.64014,4.5H971.96026c2.01025,0,3.64013-2.02,3.64013-4.5S973.97051,637,971.96026,637Z" transform="translate(-162 -173)" fill="#3f3d56"/><path d="M794,685.5H682A10.512,10.512,0,0,1,671.5,675V550A10.512,10.512,0,0,1,682,539.5H794A10.512,10.512,0,0,1,804.5,550V675A10.512,10.512,0,0,1,794,685.5Z" transform="translate(-162 -173)" fill="#673ab7"/><circle cx="840" cy="334" r="36" fill="#673ab7"/><path d="M999.97633,521.57325a4.525,4.525,0,0,1-2.72269-.9044l-.04869-.03656-10.25352-7.85045a4.55541,4.55541,0,1,1,5.5412-7.232l6.64144,5.09257,15.6948-20.4683a4.55524,4.55524,0,0,1,6.38686-.84309l-.09759.13249.10012-.13056a4.56053,4.56053,0,0,1,.8431,6.3869l-18.46083,24.07562A4.55725,4.55725,0,0,1,999.97633,521.57325Z" transform="translate(-162 -173)" fill="#fff"/><path d="M741.703,362.663c-2.52223-.0704-5.66128-.15867-8.07809-1.92421a6.20435,6.20435,0,0,1-2.44122-4.6325,4.17317,4.17317,0,0,1,1.41914-3.42716,5.38456,5.38456,0,0,1,5.09437-.73341l-2.05906-15.0477,1.51151-.20709,2.42073,17.69042-1.26214-.5792c-1.46346-.67121-3.47223-1.0124-4.72058.04209a2.68021,2.68021,0,0,0-.87923,2.208,4.689,4.689,0,0,0,1.81638,3.45435c1.88082,1.37444,4.38294,1.55174,7.221,1.63145Z" transform="translate(-162 -173)" fill="#fff"/><rect x="557.94609" y="165.19571" width="8.21703" height="1.52567" fill="#fff"/><rect x="583.88241" y="165.19571" width="8.21703" height="1.52567" fill="#fff"/><path d="M705.67028,317.1281c-6.617-.75455-11.74169-7.09452-12.30456-13.52729-.66963-7.65283,3.78715-14.92126,9.90151-19.21569,6.39421-4.491,14.36079-6.36642,22.0688-6.77927a60.65248,60.65248,0,0,1,41.45854,13.66509c5.77574,4.797,11.1699,10.90764,13.21432,18.28848,1.7755,6.41.33069,13.67159-4.82471,18.16093a12.18718,12.18718,0,0,1-9.3523,2.87948c-4.00021-.41536-7.69106-2.5187-10.88593-4.84162-6.21468-4.51858-11.31663-10.81338-18.88811-13.17464-5.55168-1.73135-12.75608-.20737-16.14872,4.81309a9.13816,9.13816,0,0,0-1.459,3.8284,1.185,1.185,0,0,0,.79919,1.40756,1.15136,1.15136,0,0,0,1.40757-.79918c.89066-6.32342,8.66589-8.683,14.122-7.2389,7.95524,2.10552,13.29551,9.20442,19.82247,13.71462a24.08826,24.08826,0,0,0,11.54351,4.60751,14.33428,14.33428,0,0,0,10.0719-3.09412c5.576-4.403,7.7084-11.976,6.47541-18.79425-1.42782-7.89562-6.7421-14.66264-12.573-19.90172a62.89317,62.89317,0,0,0-42.981-15.87789c-8.06588.18527-16.48184,1.85037-23.43056,6.11351-6.74021,4.13523-11.94982,11.05346-12.63072,19.09519-.59932,7.07828,3.19831,14.48179,9.71729,17.58279a15.2175,15.2175,0,0,0,4.87614,1.37642c1.46078.16658,1.44888-2.12328,0-2.2885Z" transform="translate(-162 -173)" fill="#fff"/><path d="M741.703,656.663c-2.52223-.0704-5.66128-.15867-8.07809-1.92421a6.20435,6.20435,0,0,1-2.44122-4.6325,4.17317,4.17317,0,0,1,1.41914-3.42716,5.38456,5.38456,0,0,1,5.09437-.73341l-2.05906-15.0477,1.51151-.20709,2.42073,17.69042-1.26214-.5792c-1.46346-.67121-3.47223-1.0124-4.72058.04209a2.68021,2.68021,0,0,0-.87923,2.208,4.689,4.689,0,0,0,1.81638,3.45435c1.88082,1.37444,4.38294,1.55174,7.221,1.63145Z" transform="translate(-162 -173)" fill="#fff"/><rect x="557.94609" y="459.19571" width="8.21703" height="1.52567" fill="#fff"/><rect x="583.88241" y="459.19571" width="8.21703" height="1.52567" fill="#fff"/><path d="M705.67028,611.1281c-6.617-.75455-11.74169-7.09452-12.30456-13.52729-.66963-7.65283,3.78715-14.92126,9.90151-19.21569,6.39421-4.491,14.36079-6.36642,22.0688-6.77927a60.65248,60.65248,0,0,1,41.45854,13.66509c5.77574,4.797,11.1699,10.90764,13.21432,18.28848,1.7755,6.40995.33069,13.67159-4.82471,18.16093a12.18718,12.18718,0,0,1-9.3523,2.87948c-4.00021-.41536-7.69106-2.5187-10.88593-4.84162-6.21468-4.51858-11.31663-10.81338-18.88811-13.17464-5.55168-1.73135-12.75608-.20737-16.14872,4.81309a9.13816,9.13816,0,0,0-1.459,3.8284,1.185,1.185,0,0,0,.79919,1.40756,1.15136,1.15136,0,0,0,1.40757-.79918c.89066-6.32342,8.66589-8.683,14.122-7.2389,7.95524,2.10552,13.29551,9.20442,19.82247,13.71462a24.08826,24.08826,0,0,0,11.54351,4.60751,14.33428,14.33428,0,0,0,10.0719-3.09412c5.576-4.403,7.7084-11.976,6.47541-18.79425-1.42782-7.89562-6.7421-14.66264-12.573-19.90172a62.89317,62.89317,0,0,0-42.981-15.87789c-8.06588.18527-16.48184,1.85037-23.43056,6.11351-6.74021,4.13523-11.94982,11.05346-12.63072,19.09519-.59932,7.07828,3.19831,14.48179,9.71729,17.58279a15.2175,15.2175,0,0,0,4.87614,1.37642c1.46078.16658,1.44888-2.12328,0-2.2885Z" transform="translate(-162 -173)" fill="#fff"/><path d="M258.703,656.663c-2.52223-.0704-5.66128-.15867-8.07809-1.92421a6.20435,6.20435,0,0,1-2.44122-4.6325,4.17317,4.17317,0,0,1,1.41914-3.42716,5.38456,5.38456,0,0,1,5.09437-.73341l-2.05906-15.0477,1.51151-.20709,2.42073,17.69042-1.26214-.5792c-1.46346-.67121-3.47223-1.0124-4.72058.04209a2.68021,2.68021,0,0,0-.87923,2.208,4.689,4.689,0,0,0,1.81638,3.45435c1.88082,1.37444,4.38294,1.55174,7.221,1.63145Z" transform="translate(-162 -173)" fill="#fff"/><rect x="74.94609" y="459.19571" width="8.21703" height="1.52567" fill="#fff"/><rect x="100.88241" y="459.19571" width="8.21703" height="1.52567" fill="#fff"/><path d="M222.67028,611.1281c-6.617-.75455-11.74169-7.09452-12.30456-13.52729-.66963-7.65283,3.78715-14.92126,9.90151-19.21569,6.39421-4.491,14.36079-6.36642,22.0688-6.77927a60.65248,60.65248,0,0,1,41.45854,13.66509c5.77574,4.797,11.1699,10.90764,13.21432,18.28848,1.7755,6.40995.33069,13.67159-4.82471,18.16093a12.18718,12.18718,0,0,1-9.3523,2.87948c-4.00021-.41536-7.69106-2.5187-10.88593-4.84162-6.21468-4.51858-11.31663-10.81338-18.88811-13.17464-5.55168-1.73135-12.75608-.20737-16.14872,4.81309a9.13816,9.13816,0,0,0-1.459,3.8284,1.185,1.185,0,0,0,.79919,1.40756,1.15136,1.15136,0,0,0,1.40757-.79918c.89066-6.32342,8.66589-8.683,14.122-7.2389,7.95524,2.10552,13.29551,9.20442,19.82247,13.71462a24.08826,24.08826,0,0,0,11.54351,4.60751,14.33428,14.33428,0,0,0,10.0719-3.09412c5.576-4.403,7.7084-11.976,6.47541-18.79425-1.42782-7.89562-6.7421-14.66264-12.573-19.90172a62.89317,62.89317,0,0,0-42.981-15.87789c-8.06588.18527-16.48184,1.85037-23.43056,6.11351-6.74021,4.13523-11.94982,11.05346-12.63072,19.09519-.59932,7.07828,3.19831,14.48179,9.71729,17.58279a15.2175,15.2175,0,0,0,4.87614,1.37642c1.46078.16658,1.44888-2.12328,0-2.2885Z" transform="translate(-162 -173)" fill="#fff"/><path d="M258.703,364.663c-2.52223-.0704-5.66128-.15867-8.07809-1.92421a6.20435,6.20435,0,0,1-2.44122-4.6325,4.17317,4.17317,0,0,1,1.41914-3.42716,5.38456,5.38456,0,0,1,5.09437-.73341l-2.05906-15.0477,1.51151-.20709,2.42073,17.69042-1.26214-.5792c-1.46346-.67121-3.47223-1.0124-4.72058.04209a2.68021,2.68021,0,0,0-.87923,2.208,4.689,4.689,0,0,0,1.81638,3.45435c1.88082,1.37444,4.38294,1.55174,7.221,1.63145Z" transform="translate(-162 -173)" fill="#3f3d56"/><rect x="74.94609" y="167.19571" width="8.21703" height="1.52567" fill="#3f3d56"/><rect x="100.88241" y="167.19571" width="8.21703" height="1.52567" fill="#3f3d56"/><path d="M222.67028,319.1281c-6.617-.75455-11.74169-7.09452-12.30456-13.52729-.66963-7.65283,3.78715-14.92126,9.90151-19.21569,6.39421-4.491,14.36079-6.36642,22.0688-6.77927a60.65248,60.65248,0,0,1,41.45854,13.66509c5.77574,4.797,11.1699,10.90764,13.21432,18.28848,1.7755,6.41.33069,13.67159-4.82471,18.16093a12.18718,12.18718,0,0,1-9.3523,2.87948c-4.00021-.41536-7.69106-2.5187-10.88593-4.84162-6.21468-4.51858-11.31663-10.81338-18.88811-13.17464-5.55168-1.73135-12.75608-.20737-16.14872,4.81309a9.13816,9.13816,0,0,0-1.459,3.8284,1.185,1.185,0,0,0,.79919,1.40756,1.15136,1.15136,0,0,0,1.40757-.79918c.89066-6.32342,8.66589-8.683,14.122-7.2389,7.95524,2.10552,13.29551,9.20442,19.82247,13.71462a24.08826,24.08826,0,0,0,11.54351,4.60751,14.33428,14.33428,0,0,0,10.0719-3.09412c5.576-4.403,7.7084-11.976,6.47541-18.79425-1.42782-7.89562-6.7421-14.66264-12.573-19.90172a62.89317,62.89317,0,0,0-42.981-15.87789c-8.06588.18527-16.48184,1.85037-23.43056,6.11351-6.74021,4.13523-11.94982,11.05346-12.63072,19.09519-.59932,7.07828,3.19831,14.48179,9.71729,17.58279a15.2175,15.2175,0,0,0,4.87614,1.37642c1.46078.16658,1.44888-2.12328,0-2.2885Z" transform="translate(-162 -173)" fill="#3f3d56"/></svg>
\ No newline at end of file
diff --git a/packages/ui/src/menu-items/dashboard.js b/packages/ui/src/menu-items/dashboard.js
index b0e5d66e..793bc290 100644
--- a/packages/ui/src/menu-items/dashboard.js
+++ b/packages/ui/src/menu-items/dashboard.js
@@ -53,7 +53,7 @@ const dashboard = {
         },
         {
             id: 'variables',
-            title: 'Environment Variables',
+            title: 'Variables',
             type: 'item',
             url: '/variables',
             icon: icons.IconVariable,
diff --git a/packages/ui/src/views/canvas/NodeInputHandler.js b/packages/ui/src/views/canvas/NodeInputHandler.js
index 33e99736..617d1066 100644
--- a/packages/ui/src/views/canvas/NodeInputHandler.js
+++ b/packages/ui/src/views/canvas/NodeInputHandler.js
@@ -369,7 +369,12 @@ const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false, isA
                                 {inputParam?.acceptVariable && (
                                     <>
                                         <Button
-                                            sx={{ borderRadius: 25, width: '100%', mb: 0, mt: 2 }}
+                                            sx={{
+                                                borderRadius: 25,
+                                                width: '100%',
+                                                mb: 0,
+                                                mt: 2
+                                            }}
                                             variant='outlined'
                                             disabled={disabled}
                                             onClick={() => onEditJSONClicked(data.inputs[inputParam.name] ?? '', inputParam)}
diff --git a/packages/ui/src/views/tools/HowToUseFunctionDialog.js b/packages/ui/src/views/tools/HowToUseFunctionDialog.js
new file mode 100644
index 00000000..00acef0d
--- /dev/null
+++ b/packages/ui/src/views/tools/HowToUseFunctionDialog.js
@@ -0,0 +1,65 @@
+import { createPortal } from 'react-dom'
+import PropTypes from 'prop-types'
+import { Dialog, DialogContent, DialogTitle } from '@mui/material'
+
+const HowToUseFunctionDialog = ({ show, onCancel }) => {
+    const portalElement = document.getElementById('portal')
+
+    const component = show ? (
+        <Dialog
+            onClose={onCancel}
+            open={show}
+            fullWidth
+            maxWidth='sm'
+            aria-labelledby='alert-dialog-title'
+            aria-describedby='alert-dialog-description'
+        >
+            <DialogTitle sx={{ fontSize: '1rem' }} id='alert-dialog-title'>
+                How To Use Function
+            </DialogTitle>
+            <DialogContent>
+                <ul>
+                    <li style={{ marginTop: 10 }}>You can use any libraries imported in Flowise</li>
+                    <li style={{ marginTop: 10 }}>
+                        You can use properties specified in Output Schema as variables with prefix $:
+                        <ul style={{ marginTop: 10 }}>
+                            <li>
+                                Property = <code>userid</code>
+                            </li>
+                            <li>
+                                Variable = <code>$userid</code>
+                            </li>
+                        </ul>
+                    </li>
+                    <li style={{ marginTop: 10 }}>
+                        You can get default flow config:
+                        <ul style={{ marginTop: 10 }}>
+                            <li>
+                                <code>$flow.sessionId</code>
+                            </li>
+                            <li>
+                                <code>$flow.chatId</code>
+                            </li>
+                            <li>
+                                <code>$flow.chatflowId</code>
+                            </li>
+                        </ul>
+                    </li>
+                    <li style={{ marginTop: 10 }}>
+                        You can get custom variables:&nbsp;<code>{`$vars.<variable-name>`}</code>
+                    </li>
+                    <li style={{ marginTop: 10 }}>Must return a string value at the end of function</li>
+                </ul>
+            </DialogContent>
+        </Dialog>
+    ) : null
+
+    return createPortal(component, portalElement)
+}
+
+HowToUseFunctionDialog.propTypes = {
+    show: PropTypes.bool,
+    onCancel: PropTypes.func
+}
+
+export default HowToUseFunctionDialog
diff --git a/packages/ui/src/views/tools/ToolDialog.js b/packages/ui/src/views/tools/ToolDialog.js
index 6272e05f..b011c07e 100644
--- a/packages/ui/src/views/tools/ToolDialog.js
+++ b/packages/ui/src/views/tools/ToolDialog.js
@@ -13,6 +13,7 @@ import { GridActionsCellItem } from '@mui/x-data-grid'
 import DeleteIcon from '@mui/icons-material/Delete'
 import ConfirmDialog from 'ui-component/dialog/ConfirmDialog'
 import { CodeEditor } from 'ui-component/editor/CodeEditor'
+import HowToUseFunctionDialog from './HowToUseFunctionDialog'
 
 // Icons
 import { IconX, IconFileExport } from '@tabler/icons'
@@ -32,6 +33,8 @@ import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
 const exampleAPIFunc = `/*
 * You can use any libraries imported in Flowise
 * You can use properties specified in Output Schema as variables. Ex: Property = userid, Variable = $userid
+* You can get default flow config: $flow.sessionId, $flow.chatId, $flow.chatflowId
+* You can get custom variables: $vars.<variable-name>
 * Must return a string value at the end of function
 */
 
@@ -74,6 +77,7 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm }) =
     const [toolIcon, setToolIcon] = useState('')
     const [toolSchema, setToolSchema] = useState([])
     const [toolFunc, setToolFunc] = useState('')
+    const [showHowToDialog, setShowHowToDialog] = useState(false)
 
     const deleteItem = useCallback(
         (id) => () => {
@@ -482,6 +486,14 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm }) =
                             />
                         </Typography>
                     </Stack>
+                    <Button
+                        style={{ marginBottom: 10, marginRight: 10 }}
+                        color='secondary'
+                        variant='outlined'
+                        onClick={() => setShowHowToDialog(true)}
+                    >
+                        How to use Function
+                    </Button>
                     {dialogProps.type !== 'TEMPLATE' && (
                         <Button style={{ marginBottom: 10 }} variant='outlined' onClick={() => setToolFunc(exampleAPIFunc)}>
                             See Example
@@ -519,6 +531,7 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm }) =
                 )}
             </DialogActions>
             <ConfirmDialog />
+            <HowToUseFunctionDialog show={showHowToDialog} onCancel={() => setShowHowToDialog(false)} />
         </Dialog>
     ) : null
 
diff --git a/packages/ui/src/views/variables/AddEditVariableDialog.js b/packages/ui/src/views/variables/AddEditVariableDialog.js
index 86a121f6..b84d0525 100644
--- a/packages/ui/src/views/variables/AddEditVariableDialog.js
+++ b/packages/ui/src/views/variables/AddEditVariableDialog.js
@@ -24,17 +24,18 @@ import useNotifier from 'utils/useNotifier'
 
 // const
 import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
-import { TooltipWithParser } from '../../ui-component/tooltip/TooltipWithParser'
 import { Dropdown } from '../../ui-component/dropdown/Dropdown'
 
 const variableTypes = [
     {
-        label: 'Static Variable',
-        name: 'static'
+        label: 'Static',
+        name: 'static',
+        description: 'Variable value will be read from the value entered below'
     },
     {
-        label: 'Runtime Variable',
-        name: 'runtime'
+        label: 'Runtime',
+        name: 'runtime',
+        description: 'Variable value will be read from .env file'
     }
 ]
 
@@ -208,6 +209,8 @@ const AddEditVariableDialog = ({ show, dialogProps, onCancel, onConfirm }) => {
                         <div style={{ flexGrow: 1 }}></div>
                     </div>
                     <OutlinedInput
+                        size='small'
+                        sx={{ mt: 1 }}
                         type='string'
                         fullWidth
                         key='variableName'
@@ -215,23 +218,6 @@ const AddEditVariableDialog = ({ show, dialogProps, onCancel, onConfirm }) => {
                         value={variableName ?? ''}
                     />
                 </Box>
-                <Box sx={{ p: 2 }}>
-                    <div style={{ display: 'flex', flexDirection: 'row' }}>
-                        <Typography>
-                            Value
-                            <TooltipWithParser style={{ marginLeft: 10 }} title='Value is mandatory for static variables.' />
-                        </Typography>
-                        <div style={{ flexGrow: 1 }}></div>
-                    </div>
-                    <OutlinedInput
-                        type='string'
-                        fullWidth
-                        key='variableValue'
-                        onChange={(e) => setVariableValue(e.target.value)}
-                        value={variableValue ?? ''}
-                    />
-                    <Typography variant='subtitle2'>Leave the value empty for runtime variables. Will be populated at runtime.</Typography>
-                </Box>
                 <Box sx={{ p: 2 }}>
                     <div style={{ display: 'flex', flexDirection: 'row' }}>
                         <Typography>
@@ -245,14 +231,30 @@ const AddEditVariableDialog = ({ show, dialogProps, onCancel, onConfirm }) => {
                         onSelect={(newValue) => setVariableType(newValue)}
                         value={variableType}
                     />
-                    <Typography variant='subtitle2'>
-                        Runtime: Value would be populated from env. Static: Value would be used as is.
-                    </Typography>
                 </Box>
+                {variableType === 'static' && (
+                    <Box sx={{ p: 2 }}>
+                        <div style={{ display: 'flex', flexDirection: 'row' }}>
+                            <Typography>
+                                Value<span style={{ color: 'red' }}>&nbsp;*</span>
+                            </Typography>
+                            <div style={{ flexGrow: 1 }}></div>
+                        </div>
+                        <OutlinedInput
+                            size='small'
+                            sx={{ mt: 1 }}
+                            type='string'
+                            fullWidth
+                            key='variableValue'
+                            onChange={(e) => setVariableValue(e.target.value)}
+                            value={variableValue ?? ''}
+                        />
+                    </Box>
+                )}
             </DialogContent>
             <DialogActions>
                 <StyledButton
-                    disabled={!variableName || (variableType === 'static' && !variableValue)}
+                    disabled={!variableName || !variableType || (variableType === 'static' && !variableValue)}
                     variant='contained'
                     onClick={() => (dialogType === 'ADD' ? addNewVariable() : saveVariable())}
                 >
diff --git a/packages/ui/src/views/variables/HowToUseVariablesDialog.js b/packages/ui/src/views/variables/HowToUseVariablesDialog.js
new file mode 100644
index 00000000..f328f226
--- /dev/null
+++ b/packages/ui/src/views/variables/HowToUseVariablesDialog.js
@@ -0,0 +1,72 @@
+import { createPortal } from 'react-dom'
+import PropTypes from 'prop-types'
+import { Dialog, DialogContent, DialogTitle } from '@mui/material'
+import { CodeEditor } from 'ui-component/editor/CodeEditor'
+
+const overrideConfig = `{
+    overrideConfig: {
+        vars: {
+            var1: 'abc'
+        }
+    }
+}`
+
+const HowToUseVariablesDialog = ({ show, onCancel }) => {
+    const portalElement = document.getElementById('portal')
+
+    const component = show ? (
+        <Dialog
+            onClose={onCancel}
+            open={show}
+            fullWidth
+            maxWidth='sm'
+            aria-labelledby='alert-dialog-title'
+            aria-describedby='alert-dialog-description'
+        >
+            <DialogTitle sx={{ fontSize: '1rem' }} id='alert-dialog-title'>
+                How To Use Variables
+            </DialogTitle>
+            <DialogContent>
+                <p style={{ marginBottom: '10px' }}>Variables can be used in Custom Tool Function with the $ prefix.</p>
+                <CodeEditor
+                    disabled={true}
+                    value={`$vars.<variable-name>`}
+                    height={'50px'}
+                    theme={'dark'}
+                    lang={'js'}
+                    basicSetup={{ highlightActiveLine: false, highlightActiveLineGutter: false }}
+                />
+                <p style={{ marginBottom: '10px' }}>
+                    If variable type is Static, the value will be retrieved as it is. If variable type is Runtime, the value will be
+                    retrieved from .env file.
+                </p>
+                <p style={{ marginBottom: '10px' }}>
+                    You can also override variable values in API overrideConfig using <b>vars</b>:
+                </p>
+                <CodeEditor
+                    disabled={true}
+                    value={overrideConfig}
+                    height={'170px'}
+                    theme={'dark'}
+                    lang={'js'}
+                    basicSetup={{ highlightActiveLine: false, highlightActiveLineGutter: false }}
+                />
+                <p>
+                    Read more from{' '}
+                    <a target='_blank' rel='noreferrer' href='https://docs.flowiseai.com/using-flowise/variables'>
+                        docs
+                    </a>
+                </p>
+            </DialogContent>
+        </Dialog>
+    ) : null
+
+    return createPortal(component, portalElement)
+}
+
+HowToUseVariablesDialog.propTypes = {
+    show: PropTypes.bool,
+    onCancel: PropTypes.func
+}
+
+export default HowToUseVariablesDialog
diff --git a/packages/ui/src/views/variables/index.js b/packages/ui/src/views/variables/index.js
index 9399eb20..ca8a3dee 100644
--- a/packages/ui/src/views/variables/index.js
+++ b/packages/ui/src/views/variables/index.js
@@ -19,7 +19,8 @@ import {
     Toolbar,
     TextField,
     InputAdornment,
-    ButtonGroup
+    ButtonGroup,
+    Chip
 } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 
@@ -40,10 +41,11 @@ import useNotifier from 'utils/useNotifier'
 
 // Icons
 import { IconTrash, IconEdit, IconX, IconPlus, IconSearch, IconVariable } from '@tabler/icons'
-import CredentialEmptySVG from 'assets/images/credential_empty.svg'
+import VariablesEmptySVG from 'assets/images/variables_empty.svg'
 
 // const
 import AddEditVariableDialog from './AddEditVariableDialog'
+import HowToUseVariablesDialog from './HowToUseVariablesDialog'
 
 // ==============================|| Credentials ||============================== //
 
@@ -60,6 +62,7 @@ const Variables = () => {
     const [showVariableDialog, setShowVariableDialog] = useState(false)
     const [variableDialogProps, setVariableDialogProps] = useState({})
     const [variables, setVariables] = useState([])
+    const [showHowToDialog, setShowHowToDialog] = useState(false)
 
     const { confirm } = useConfirm()
 
@@ -173,7 +176,7 @@ const Variables = () => {
                                 width: '100%'
                             }}
                         >
-                            <h1>Environment Variables&nbsp;</h1>
+                            <h1>Variables&nbsp;</h1>
                             <TextField
                                 size='small'
                                 sx={{ display: { xs: 'none', sm: 'block' }, ml: 3 }}
@@ -189,6 +192,9 @@ const Variables = () => {
                                 }}
                             />
                             <Box sx={{ flexGrow: 1 }} />
+                            <Button variant='outlined' sx={{ mr: 2 }} onClick={() => setShowHowToDialog(true)}>
+                                How To Use
+                            </Button>
                             <ButtonGroup
                                 sx={{ maxHeight: 40 }}
                                 disableElevation
@@ -214,8 +220,8 @@ const Variables = () => {
                         <Box sx={{ p: 2, height: 'auto' }}>
                             <img
                                 style={{ objectFit: 'cover', height: '30vh', width: 'auto' }}
-                                src={CredentialEmptySVG}
-                                alt='CredentialEmptySVG'
+                                src={VariablesEmptySVG}
+                                alt='VariablesEmptySVG'
                             />
                         </Box>
                         <div>No Variables Yet</div>
@@ -267,7 +273,13 @@ const Variables = () => {
                                             </div>
                                         </TableCell>
                                         <TableCell>{variable.value}</TableCell>
-                                        <TableCell>{variable.type === 'static' ? 'Static Variable' : 'Runtime Variable'}</TableCell>
+                                        <TableCell>
+                                            <Chip
+                                                color={variable.type === 'static' ? 'info' : 'secondary'}
+                                                size='small'
+                                                label={variable.type}
+                                            />
+                                        </TableCell>
                                         <TableCell>{moment(variable.updatedDate).format('DD-MMM-YY')}</TableCell>
                                         <TableCell>{moment(variable.createdDate).format('DD-MMM-YY')}</TableCell>
                                         <TableCell>
@@ -293,6 +305,7 @@ const Variables = () => {
                 onCancel={() => setShowVariableDialog(false)}
                 onConfirm={onConfirm}
             ></AddEditVariableDialog>
+            <HowToUseVariablesDialog show={showHowToDialog} onCancel={() => setShowHowToDialog(false)}></HowToUseVariablesDialog>
             <ConfirmDialog />
         </>
     )