diff --git a/web/main.js b/web/main.js
new file mode 100644
index 0000000..b85cb40
--- /dev/null
+++ b/web/main.js
@@ -0,0 +1,63 @@
+const messagesEl = document.getElementById("messages");
+const inputEl = document.getElementById("input");
+const sendBtn = document.getElementById("send");
+const quickActionsEl = document.getElementById("quick-actions");
+
+function addMessage(role, text) {
+  const div = document.createElement("div");
+  div.className = "message " + role;
+  div.innerText = text;
+  messagesEl.appendChild(div);
+  messagesEl.scrollTop = messagesEl.scrollHeight;
+}
+
+async function sendMessage(text) {
+  const res = await fetch("http://localhost:5000/api/conversation", {
+    method: "POST",
+    headers: {"Content-Type": "application/json"},
+    body: JSON.stringify({message: text})
+  });
+
+  const data = await res.json();
+
+  addMessage("assistant", data.reply);
+
+  renderQuickActions(data.quick_actions);
+  renderSuggestions(data.suggestions);
+}
+
+function renderQuickActions(actions) {
+  quickActionsEl.innerHTML = "";
+  actions.forEach(a => {
+    const btn = document.createElement("button");
+    btn.innerText = a.label;
+    btn.onclick = () => handleQuickAction(a);
+    quickActionsEl.appendChild(btn);
+  });
+}
+
+function renderSuggestions(suggestions) {
+  if (!suggestions || !suggestions.length) return;
+  suggestions.forEach(s => addMessage("assistant", "Sugestão: " + s));
+}
+
+function handleQuickAction(action) {
+  addMessage("user", `[Ação rápida] ${action.label}`);
+  sendMessage(action.label);
+}
+
+sendBtn.onclick = () => {
+  const text = inputEl.value.trim();
+  if (!text) return;
+  addMessage("user", text);
+  inputEl.value = "";
+  sendMessage(text);
+};
+
+window.onload = () => {
+  addMessage("assistant",
+    "{user.name}, como você quer trabalhar hoje?\n\n" +
+    "- Modo Advogado\n- Modo Corporativo\n- Apenas Conversar\n\n" +
+    "Me diga qual modo você prefere agora."
+  );
+};