diff --git a/src/api/recording.ts b/src/api/recording.ts
new file mode 100644
index 00000000..9105de6f
--- /dev/null
+++ b/src/api/recording.ts
@@ -0,0 +1,93 @@
+import { AxiosResponse } from "axios";
+
+const axios = require('axios').default;
+
+
+export const startRecording = async() : Promise<string> => {
+  try {
+    const response = await axios.get('http://localhost:8080/record/start')
+    if (response.status === 200) {
+        return response.data;
+    } else {
+        throw new Error('Couldn\'t start recording');
+    }
+  } catch(error: any) {
+    return '';
+  }
+};
+
+export const stopRecording = async (id: string): Promise<void> => {
+    await axios.get(`http://localhost:8080/record/stop/${id}`)
+        .then((response : AxiosResponse<boolean>)  => {
+        })
+        .catch((error: any) => {
+        });
+};
+
+export const getActiveBrowserId = async(): Promise<string> => {
+    try {
+        const response = await axios.get('http://localhost:8080/record/active');
+        if (response.status === 200) {
+            return response.data;
+        } else {
+            throw new Error('Couldn\'t get active browser');
+        }
+    } catch(error: any) {
+        return '';
+    }
+};
+
+export const interpretCurrentRecording = async(): Promise<boolean> => {
+    try {
+        const response = await axios.get('http://localhost:8080/record/interpret');
+        if (response.status === 200) {
+            return true;
+        } else {
+            throw new Error('Couldn\'t interpret current recording');
+        }
+    } catch(error: any) {
+        console.log(error);
+        return false;
+    }
+};
+
+export const stopCurrentInterpretation = async(): Promise<void> => {
+  try {
+    const response = await axios.get('http://localhost:8080/record/interpret/stop');
+    if (response.status === 200) {
+      return;
+    } else {
+      throw new Error('Couldn\'t interpret current recording');
+    }
+  } catch(error: any) {
+    console.log(error);
+  }
+};
+
+export const getCurrentUrl = async (): Promise<string | null> => {
+  try {
+    const response = await axios.get('http://localhost:8080/record/active/url');
+    if (response.status === 200) {
+      return response.data;
+    } else {
+      throw new Error('Couldn\'t retrieve stored recordings');
+    }
+  } catch(error: any) {
+    console.log(error);
+    return null;
+  }
+};
+
+export const getCurrentTabs = async (): Promise<string[] | null> => {
+  try {
+    const response = await axios.get('http://localhost:8080/record/active/tabs');
+    if (response.status === 200) {
+      return response.data;
+    } else {
+      throw new Error('Couldn\'t retrieve stored recordings');
+    }
+  } catch(error: any) {
+    console.log(error);
+    return null;
+  }
+};
diff --git a/src/api/workflow.ts b/src/api/workflow.ts
new file mode 100644
index 00000000..212737cb
--- /dev/null
+++ b/src/api/workflow.ts
@@ -0,0 +1,78 @@
+import { WhereWhatPair, WorkflowFile } from "@wbr-project/wbr-interpret";
+import { emptyWorkflow } from "../shared/constants";
+
+const axios = require('axios').default;
+
+export const getActiveWorkflow = async(id: string) : Promise<WorkflowFile> => {
+  try {
+    const response = await axios.get(`http://localhost:8080/workflow/${id}`)
+    if (response.status === 200) {
+      return response.data;
+    } else {
+      throw new Error('Something went wrong when fetching a recorded workflow');
+    }
+  } catch(error: any) {
+    console.log(error);
+    return emptyWorkflow;
+  }
+};
+
+export const getParamsOfActiveWorkflow = async(id: string) : Promise<string[]|null> => {
+  try {
+    const response = await axios.get(`http://localhost:8080/workflow/params/${id}`)
+    if (response.status === 200) {
+      return response.data;
+    } else {
+      throw new Error('Something went wrong when fetching the parameters of the recorded workflow');
+    }
+  } catch(error: any) {
+    console.log(error);
+    return null;
+  }
+};
+
+export const deletePair = async(index: number): Promise<WorkflowFile> => {
+  try {
+   const response = await axios.delete(`http://localhost:8080/workflow/pair/${index}`);
+    if (response.status === 200) {
+      return response.data;
+    } else {
+      throw new Error('Something went wrong when fetching an updated workflow');
+    }
+  } catch (error: any) {
+    console.log(error);
+    return emptyWorkflow;
+  }
+};
+
+export const AddPair = async(index: number, pair: WhereWhatPair): Promise<WorkflowFile> => {
+  try {
+    const response = await axios.post(`http://localhost:8080/workflow/pair/${index}`, {
+      pair,
+    }, {headers: {'Content-Type': 'application/json'}});
+    if (response.status === 200) {
+      return response.data;
+    } else {
+      throw new Error('Something went wrong when fetching an updated workflow');
+    }
+  } catch (error: any) {
+    console.log(error);
+    return emptyWorkflow;
+  }
+};
+
+export const UpdatePair = async(index: number, pair: WhereWhatPair): Promise<WorkflowFile> => {
+  try {
+    const response = await axios.put(`http://localhost:8080/workflow/pair/${index}`, {
+      pair,
+    }, {headers: {'Content-Type': 'application/json'}});
+    if (response.status === 200) {
+      return response.data;
+    } else {
+      throw new Error('Something went wrong when fetching an updated workflow');
+    }
+  } catch (error: any) {
+    console.log(error);
+    return emptyWorkflow;
+  }
+};