diff --git a/smartassist/src/frontend.js b/smartassist/src/frontend.js
new file mode 100644
index 0000000..f35f6ad
--- /dev/null
+++ b/smartassist/src/frontend.js
@@ -0,0 +1,50 @@
+
+// Get the user input element from the DOM
+const chatbox = document.getElementById('chatbox');
+const userInput = document.getElementById('userInput');
+
+// Define a function to send the user's message to the AI
+function sendMessage() {
+  // Get the user's input message and trim any whitespace
+    const message = userInput.value.trim();
+
+    // Check if the message is not empty
+    if (message !== '') {
+        // Send a POST request to the /api/chat endpoint with the message
+        fetch('/api/chat', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message }),
+        })
+        .then(response => response.json())
+        .then(data => {
+            // Get the AI's response from the API data
+            const aiResponse = data.response;
+
+            // Render the user's original message in the chatbox
+            renderMessage(message, 'user-message');
+
+            // Render the AI's response in the chatbox
+            renderMessage(aiResponse, 'ai-response');
+
+            // Clear the user input field for the next message
+            userInput.value = '';
+        })
+        .catch(error => console.error('Error sending message:', error));
+    }
+}
+
+// Define a function to render a message in the chatbox with a specific class name
+function renderMessage(text, className) {
+    // Create a new div element to hold the message
+    const messageElement = document.createElement('div');
+
+    // Add the specified class name to the element
+    messageElement.className = className;
+
+    // Set the text content of the element to the message text
+    messageElement.textContent = text;
+
+    // Append the message element to the chatbox
+    chatbox.appendChild(messageElement);
+}