diff --git a/rnd/autogpt_builder/package.json b/rnd/autogpt_builder/package.json
index 21dc50a07..a5cfe138a 100644
--- a/rnd/autogpt_builder/package.json
+++ b/rnd/autogpt_builder/package.json
@@ -11,6 +11,7 @@
"dependencies": {
"@hookform/resolvers": "^3.9.0",
"@radix-ui/react-avatar": "^1.1.0",
+ "@radix-ui/react-collapsible": "^1.1.0",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-icons": "^1.3.0",
diff --git a/rnd/autogpt_builder/src/components/edit/control/ControlPanel.tsx b/rnd/autogpt_builder/src/components/edit/control/ControlPanel.tsx
new file mode 100644
index 000000000..c797bc0ac
--- /dev/null
+++ b/rnd/autogpt_builder/src/components/edit/control/ControlPanel.tsx
@@ -0,0 +1,61 @@
+import {Card, CardContent} from "@/components/ui/card";
+import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
+import {Button} from "@/components/ui/button";
+import {Separator} from "@/components/ui/separator";
+import React from "react";
+
+/**
+ * Represents a control element for the ControlPanel Component.
+ * @type {Object} Control
+ * @property {React.ReactNode} icon - The icon of the control from lucide-react https://lucide.dev/icons/
+ * @property {string} label - The label of the control, to be leveraged by ToolTip.
+ * @property {onclick} onClick - The function to be executed when the control is clicked.
+ */
+export type Control = {
+ icon: React.ReactNode;
+ label: string;
+ onClick: () => void;
+}
+
+interface ControlPanelProps {
+ controls: Control[];
+ children?: React.ReactNode;
+}
+
+/**
+ * ControlPanel component displays a panel with controls as icons with the ability to take in children.
+ * @param {Object} ControlPanelProps - The properties of the control panel component.
+ * @param {Array} ControlPanelProps.controls - An array of control objects representing actions to be preformed.
+ * @param {Array} ControlPanelProps.children - The child components of the control panel.
+ * @returns The rendered control panel component.
+ */
+export const ControlPanel= ( {controls, children}: ControlPanelProps) => {
+ return (
+
+ );
+}
+export default ControlPanel;
\ No newline at end of file
diff --git a/rnd/autogpt_builder/src/components/edit/control/SaveControl.tsx b/rnd/autogpt_builder/src/components/edit/control/SaveControl.tsx
new file mode 100644
index 000000000..cbc72b948
--- /dev/null
+++ b/rnd/autogpt_builder/src/components/edit/control/SaveControl.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
+import {Card, CardContent, CardFooter} from "@/components/ui/card";
+import {Input} from "@/components/ui/input";
+import {Button} from "@/components/ui/button";
+import {GraphMeta} from "@/lib/autogpt-server-api";
+import {Label} from "@/components/ui/label";
+import {Save} from "lucide-react";
+
+interface SaveControlProps {
+ agentMeta: GraphMeta | null;
+ onSave: (isTemplate: boolean | undefined) => void;
+ onNameChange: (name: string) => void;
+ onDescriptionChange: (description: string) => void;
+}
+
+/**
+ * A SaveControl component to be used within the ControlPanel. It allows the user to save the agent / template.
+ * @param {Object} SaveControlProps - The properties of the SaveControl component.
+ * @param {GraphMeta | null} SaveControlProps.agentMeta - The agent's metadata, or null if creating a new agent.
+ * @param {(isTemplate: boolean | undefined) => void} SaveControlProps.onSave - Function to save the agent or template.
+ * @param {(name: string) => void} SaveControlProps.onNameChange - Function to handle name changes.
+ * @param {(description: string) => void} SaveControlProps.onDescriptionChange - Function to handle description changes.
+ * @returns The SaveControl component.
+ */
+export const SaveControl= ({
+ agentMeta,
+ onSave,
+ onNameChange,
+ onDescriptionChange
+}: SaveControlProps) => {
+
+ /**
+ * Note for improvement:
+ * At the moment we are leveraging onDescriptionChange and onNameChange to handle the changes in the description and name of the agent.
+ * We should migrate this to be handled with form controls and a form library.
+ */
+
+ // Determines if we're saving a template or an agent
+ let isTemplate = agentMeta?.is_template ? true : undefined;
+ const handleSave = () => {
+ onSave(isTemplate);
+ };
+
+ const getType = () => {
+ return agentMeta?.is_template ? 'template' : 'agent';
+ }
+
+ return (
+
+
+
+
+
+
+
+