diff --git a/src/components/CodeEditor/CodeEditorHelper.tsx b/src/components/CodeEditor/CodeEditorHelper.tsx
index 4c79f215..eb5e589a 100644
--- a/src/components/CodeEditor/CodeEditorHelper.tsx
+++ b/src/components/CodeEditor/CodeEditorHelper.tsx
@@ -1,5 +1,15 @@
-import { Stack, Typography, Grid, Tooltip, Button } from "@mui/material";
-import InlineOpenInNewIcon from "@src/components/InlineOpenInNewIcon";
+import {
+  Stack,
+  Typography,
+  Grid,
+  Tooltip,
+  Button,
+  IconButton,
+} from "@mui/material";
+import SecretsIcon from "@mui/icons-material/VpnKeyOutlined";
+import FunctionsIcon from "@mui/icons-material/CloudOutlined";
+import DocsIcon from "@mui/icons-material/DescriptionOutlined";
+import { useAppContext } from "@src/contexts/AppContext";
 
 export interface ICodeEditorHelperProps {
   docLink: string;
@@ -13,6 +23,7 @@ export default function CodeEditorHelper({
   docLink,
   additionalVariables,
 }: ICodeEditorHelperProps) {
+  const { projectId } = useAppContext();
   const availableVariables = [
     {
       key: "row",
@@ -34,16 +45,14 @@ export default function CodeEditorHelper({
       key: "storage",
       description: `firebase Storage can be accessed through this, storage.bucket() returns default storage bucket of the firebase project.`,
     },
-    {
-      key: "utilFns",
-      description: `utilFns provides a set of functions that are commonly used, such as easy access to GCP Secret Manager`,
-    },
   ];
 
   return (
     <Stack
       direction="row"
       alignItems="baseline"
+      justifyItems="space-between"
+      spacing={1}
       justifyContent="space-between"
       sx={{ my: 1 }}
     >
@@ -60,8 +69,46 @@ export default function CodeEditorHelper({
           </Grid>
         ))}
       </Grid>
-
-      <Button
+      <Grid container spacing={1} direction="row" justifyContent={"flex-end"}>
+        <Tooltip title="Open Secret Manager">
+          <IconButton
+            size="small"
+            color="primary"
+            target="_blank"
+            rel="noopener noreferrer"
+            href={`https://console.cloud.google.com/security/secret-manager?project=${projectId}`}
+            aria-label="secret manager"
+          >
+            <SecretsIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Configure Cloud function">
+          <IconButton
+            size="small"
+            color="primary"
+            target="_blank"
+            rel="noopener noreferrer"
+            //href={`https://console.cloud.google.com/functions/list?project=${projectId}`}
+            href={`https://console.cloud.google.com/functions/edit/us-central1/R-lwj?env=gen1&project=${projectId}`}
+            aria-label="Cloud function"
+          >
+            <FunctionsIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Examples & documentation">
+          <IconButton
+            size="small"
+            color="primary"
+            target="_blank"
+            rel="noopener noreferrer"
+            href={docLink}
+            aria-label="documentation"
+          >
+            <DocsIcon />
+          </IconButton>
+        </Tooltip>
+      </Grid>
+      {/* <Button
         size="small"
         color="primary"
         target="_blank"
@@ -71,7 +118,7 @@ export default function CodeEditorHelper({
       >
         Examples & docs
         <InlineOpenInNewIcon />
-      </Button>
+      </Button> */}
     </Stack>
   );
 }
diff --git a/src/components/CodeEditor/derivative.d.ts b/src/components/CodeEditor/derivative.d.ts
new file mode 100644
index 00000000..07a363a6
--- /dev/null
+++ b/src/components/CodeEditor/derivative.d.ts
@@ -0,0 +1,10 @@
+type DerivativeContext = {
+  row: Row;
+  ref: FirebaseFirestore.DocumentReference;
+  storage: firebasestorage.Storage;
+  db: FirebaseFirestore.Firestore;
+  auth: firebaseauth.BaseAuth;
+  change: any;
+};
+
+type Derivative = (context: DerivativeContext) => Promise<any>;
diff --git a/src/components/CodeEditor/rowy.d.ts b/src/components/CodeEditor/rowy.d.ts
index de9d706e..cd2bbdc2 100644
--- a/src/components/CodeEditor/rowy.d.ts
+++ b/src/components/CodeEditor/rowy.d.ts
@@ -48,7 +48,7 @@ interface Rowy {
     /**
      * Get an existing secret from the secret manager.
      */
-    get: (name: string, version?: string) => Promise<string | undefined>;
+    get: (name: SecretNames, version?: string) => Promise<string | undefined>;
   };
   /**
    * Gives access to the Cloud Storage.
@@ -60,14 +60,14 @@ interface Rowy {
        */
       url: (
         url: string,
-        options: uploadOptions
+        options?: uploadOptions
       ) => Promise<RowyFile | undefined>;
       /**
        * uploads a file to storage bucket from a buffer or string
        */
       data: (
         data: Buffer | string,
-        options: uploadOptions
+        options?: uploadOptions
       ) => Promise<RowyFile | undefined>;
     };
   };
@@ -76,7 +76,10 @@ interface Rowy {
    * use rowy.secrets.get instead.
    * Get an existing secret from the secret manager.
    */
-  getSecret: (name: string, version?: string) => Promise<string | undefined>;
+  getSecret: (
+    name: SecretNames,
+    version?: string
+  ) => Promise<string | undefined>;
   /**
    * @deprecated will be removed in version 2.0.
    * use rowy.metadata.serviceAccountUser instead.
@@ -93,3 +96,9 @@ interface Rowy {
 }
 
 declare const rowy: Rowy;
+type SecretNames = "sendgrid" | "unsplash" | "twilio";
+enum secrets {
+  sendgrid = "sendgrid",
+  unsplash = "unsplash",
+  twilio = "twilio",
+}
diff --git a/src/components/CodeEditor/useMonacoCustomizations.ts b/src/components/CodeEditor/useMonacoCustomizations.ts
index edb6c2a8..4db51e03 100644
--- a/src/components/CodeEditor/useMonacoCustomizations.ts
+++ b/src/components/CodeEditor/useMonacoCustomizations.ts
@@ -23,6 +23,7 @@ import firebaseStorageDefs from "!!raw-loader!./firebaseStorage.d.ts";
 import utilsDefs from "!!raw-loader!./utils.d.ts";
 import rowyUtilsDefs from "!!raw-loader!./rowy.d.ts";
 import extensionsDefs from "!!raw-loader!./extensions.d.ts";
+import derivativeDefs from "!!raw-loader!./derivative.d.ts";
 
 export interface IUseMonacoCustomizationsProps {
   minHeight?: number;
@@ -103,6 +104,9 @@ export default function useMonacoCustomizations({
         "ts:filename/utils.d.ts"
       );
       monaco.languages.typescript.javascriptDefaults.addExtraLib(rowyUtilsDefs);
+      monaco.languages.typescript.javascriptDefaults.addExtraLib(
+        derivativeDefs
+      );
     } catch (error) {
       console.error(
         "An error occurred during initialization of Monaco: ",
diff --git a/src/components/CodeEditor/utils.d.ts b/src/components/CodeEditor/utils.d.ts
index 38a02852..b93b7c93 100644
--- a/src/components/CodeEditor/utils.d.ts
+++ b/src/components/CodeEditor/utils.d.ts
@@ -2,15 +2,6 @@
  * utility functions
  */
 declare namespace utilFns {
-  /**
-   * Sends out an email through sendGrid
-   */
-  function sendEmail(msg: {
-    from: string;
-    templateId: string;
-    personalizations: { to: string; dynamic_template_data: any }[];
-  }): void {}
-
   /**
    * Gets the secret defined in Google Cloud Secret
    */
diff --git a/src/components/fields/Derivative/Settings.tsx b/src/components/fields/Derivative/Settings.tsx
index b57cb47f..4dfa2151 100644
--- a/src/components/fields/Derivative/Settings.tsx
+++ b/src/components/fields/Derivative/Settings.tsx
@@ -15,6 +15,11 @@ const CodeEditor = lazy(
   () =>
     import("@src/components/CodeEditor" /* webpackChunkName: "CodeEditor" */)
 );
+const diagnosticsOptions = {
+  noSemanticValidation: false,
+  noSyntaxValidation: false,
+  noSuggestionDiagnostics: true,
+};
 
 export default function Settings({
   config,
@@ -30,6 +35,20 @@ export default function Settings({
     .filter((column) => column.fieldName !== fieldName)
     .filter((column) => column.type !== FieldType.subTable)
     .map((c) => ({ label: c.name, value: c.key }));
+  console.log({ config });
+  const code = config.code
+    ? config.code
+    : config?.script
+    ? `const derivative:Derivative = async ({row,ref,db,storage,auth})=>{
+    ${config.script.replace(/utilFns.getSecret/g, "rowy.secrets.getSecret")}
+  }`
+    : `const derivative:Derivative = async ({row,ref,db,storage,auth})=>{
+    // Write your derivative code here
+    // for example:
+    // const sum = row.a + row.b;
+    // return sum;
+    // checkout the documentation for more info: https://docs.rowy.io/field-types/derivative
+  }`;
 
   return (
     <>
@@ -92,7 +111,11 @@ export default function Settings({
         <InputLabel>Derivative script</InputLabel>
         <CodeEditorHelper docLink={WIKI_LINKS.fieldTypesDerivative} />
         <Suspense fallback={<FieldSkeleton height={200} />}>
-          <CodeEditor value={config.script} onChange={onChange("script")} />
+          <CodeEditor
+            diagnosticsOptions={diagnosticsOptions}
+            value={code}
+            onChange={onChange("code")}
+          />
         </Suspense>
       </div>
     </>