diff --git a/frontend/package.json b/frontend/package.json
index 36b74b6..37cc923 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -51,8 +51,6 @@
 		"vue-tsc": "^2.2.8"
 	},
 	"msw": {
-		"workerDirectory": [
-			"public"
-		]
+		"workerDirectory": ["public"]
 	}
 }
diff --git a/frontend/src/api/mocks/aiHandlers.ts b/frontend/src/api/mocks/aiHandlers.ts
new file mode 100644
index 0000000..d5b0ae9
--- /dev/null
+++ b/frontend/src/api/mocks/aiHandlers.ts
@@ -0,0 +1,11 @@
+import { faker } from "@faker-js/faker";
+import { http, HttpResponse } from "msw";
+
+export default [
+	http.post("/ai/chat", () => {
+		const response = HttpResponse.json({
+			message: faker.lorem.sentence(1000),
+		});
+		return response;
+	}),
+];
diff --git a/frontend/src/api/mocks/setup.ts b/frontend/src/api/mocks/setup.ts
index 0209acb..4a5881f 100644
--- a/frontend/src/api/mocks/setup.ts
+++ b/frontend/src/api/mocks/setup.ts
@@ -6,6 +6,7 @@ import roleHandlers from "./roleHandlers";
 import userHandlers from "./userHandlers";
 import departmentHandlers from "./departmentHandlers";
 import positionHandlers from "./positionHandlers";
+import aiHandlers from "./aiHandlers";
 export const worker = setupWorker(
 	...userHandlers,
 	...authHandlers,
@@ -14,4 +15,5 @@ export const worker = setupWorker(
 	...jobHandlers,
 	...departmentHandlers,
 	...positionHandlers,
+	...aiHandlers,
 );
diff --git a/frontend/src/api/schema/openapi.json b/frontend/src/api/schema/openapi.json
index 9678d32..49aa550 100644
--- a/frontend/src/api/schema/openapi.json
+++ b/frontend/src/api/schema/openapi.json
@@ -691,6 +691,39 @@
         }
       }
     },
+    "/ai/chat": {
+      "post": {
+        "tags": [
+          "ai-controller"
+        ],
+        "operationId": "chat",
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "string"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "text/event-stream": {
+                "schema": {
+                  "type": "array",
+                  "items": {
+                    "type": "string"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
     "/scheduler/page-query": {
       "get": {
         "tags": [
diff --git a/frontend/src/api/types/schema.d.ts b/frontend/src/api/types/schema.d.ts
index a254da5..ca1b349 100644
--- a/frontend/src/api/types/schema.d.ts
+++ b/frontend/src/api/types/schema.d.ts
@@ -340,6 +340,22 @@ export interface paths {
 		patch?: never;
 		trace?: never;
 	};
+	"/ai/chat": {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		get?: never;
+		put?: never;
+		post: operations["chat"];
+		delete?: never;
+		options?: never;
+		head?: never;
+		patch?: never;
+		trace?: never;
+	};
 	"/scheduler/page-query": {
 		parameters: {
 			query?: never;
@@ -1333,6 +1349,30 @@ export interface operations {
 			};
 		};
 	};
+	chat: {
+		parameters: {
+			query?: never;
+			header?: never;
+			path?: never;
+			cookie?: never;
+		};
+		requestBody: {
+			content: {
+				"application/json": string;
+			};
+		};
+		responses: {
+			/** @description OK */
+			200: {
+				headers: {
+					[name: string]: unknown;
+				};
+				content: {
+					"text/event-stream": string[];
+				};
+			};
+		};
+	};
 	pageQuery: {
 		parameters: {
 			query: {
diff --git a/frontend/src/components/Button.vue b/frontend/src/components/Button.vue
new file mode 100644
index 0000000..8be4c36
--- /dev/null
+++ b/frontend/src/components/Button.vue
@@ -0,0 +1,28 @@
+<template>
+  <button 
+    :disabled="disabled" 
+    @click="handleClick"
+    type="button" 
+    :class="[
+      'text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 dark:bg-blue-600 inline-flex items-center',
+      disabled ? `${disabledStyle} cursor-not-allowed` : 'bg-blue-700 hover:bg-blue-800 '
+    ]"
+  >
+    <LoadingIcon v-if="isLoading" />
+    {{isLoading ? loadingContent : submitContent}}
+  </button>
+</template>
+
+<script setup lang="ts">
+import LoadingIcon from "./icons/LoadingIcon.vue";
+
+const { loadingContent, submitContent, isLoading, disabledStyle, disabled } =
+	defineProps<{
+		loadingContent: string;
+		submitContent: string;
+		isLoading: boolean;
+		disabledStyle: string;
+		disabled: boolean;
+		handleClick: (event: Event) => void;
+	}>();
+</script>
diff --git a/frontend/src/components/icons/LoadingIcon.vue b/frontend/src/components/icons/LoadingIcon.vue
new file mode 100644
index 0000000..2a0f62f
--- /dev/null
+++ b/frontend/src/components/icons/LoadingIcon.vue
@@ -0,0 +1,6 @@
+<template>
+<svg aria-hidden="true" role="status" class="inline w-4 h-4 me-3 text-white animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB"/>
+<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"/>
+</svg>
+</template>
diff --git a/frontend/src/composables/ai/useAiChat.ts b/frontend/src/composables/ai/useAiChat.ts
new file mode 100644
index 0000000..b085a18
--- /dev/null
+++ b/frontend/src/composables/ai/useAiChat.ts
@@ -0,0 +1,31 @@
+import { ref } from "vue";
+import client from "../../api/client";
+
+export const useAiChat = () => {
+	const messages = ref<string[]>([]);
+	const isLoading = ref(false);
+
+	const chat = async (message: string) => {
+		isLoading.value = true;
+		try {
+			const { response } = await client.POST("/ai/chat", {
+				body: message,
+				parseAs: "stream",
+			});
+			const reader = response.body?.getReader();
+			if (reader) {
+				const decoder = new TextDecoder();
+				while (true) {
+					const { done, value } = await reader.read();
+					if (done) break;
+					messages.value.push(decoder.decode(value, { stream: true }));
+					console.log(decoder.decode(value));
+				}
+				return;
+			}
+		} finally {
+			isLoading.value = false;
+		}
+	};
+	return { messages, chat, isLoading };
+};
diff --git a/frontend/src/views/AiChatView.vue b/frontend/src/views/AiChatView.vue
index 9228370..aa62ac0 100644
--- a/frontend/src/views/AiChatView.vue
+++ b/frontend/src/views/AiChatView.vue
@@ -1,50 +1,30 @@
 <template>
-  <div class="flex flex-col w-1/2 mx-auto box-border pt-14 min-h-screen">
+  <div class="flex flex-col px-80 box-border pt-14 min-h-screen max-h-screen overflow-auto" ref="chatContainer">
     <div class="flex flex-col gap-y-5 flex-1 pt-14">
-      <div class="flex items-start gap-2.5 ">
+      <li v-for="chatElement in chatElements" :key="chatElement.content" :dir="chatElement.isUser ? 'rtl' : 'ltr'"
+        class="flex items-start gap-2.5">
         <img class="w-8 h-8 rounded-full" src="/trump.jpg" alt="Jese image">
         <div
           class="flex flex-col leading-1.5 p-4 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl dark:bg-gray-700">
           <div class="flex items-center space-x-2 rtl:space-x-reverse">
-            <span class="text-sm font-semibold text-gray-900 dark:text-white">Bonnie Green</span>
-            <span class="text-sm font-normal text-gray-500 dark:text-gray-400">11:46</span>
+            <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ user.username }}</span>
           </div>
-          <p class="text-sm font-normal py-2.5 text-gray-900 dark:text-white">That's awesome. I think our users will
-            really
-            appreciate the improvements.</p>
-          <span class="text-sm font-normal text-gray-500 dark:text-gray-400">Delivered</span>
+          <p class="text-base font-normal py-2.5 text-gray-900 dark:text-white">{{ chatElement.content }}</p>
         </div>
-      </div>
-      <div dir="rtl" class="flex items-start gap-2.5">
-        <img class="w-8 h-8 rounded-full" src="/trump.jpg" alt="Jese image">
-        <div
-          class="flex flex-col  leading-1.5 p-4 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl dark:bg-gray-700">
-          <div class="flex items-center space-x-2">
-            <span class="text-sm font-semibold text-gray-900 dark:text-white">Bonnie Green</span>
-            <span class="text-sm font-normal text-gray-500 dark:text-gray-400">11:46</span>
-          </div>
-          <p dir="ltr" class="text-sm font-normal py-2.5 text-gray-900 dark:text-white">That's awesome. I think our
-            users
-            will
-            really appreciate the improvements.</p>
-          <span class="text-sm font-normal text-gray-500 dark:text-gray-400">Delivered</span>
-        </div>
-      </div>
+      </li>
     </div>
 
-    <form class="flex-none pb-2">
-      <div class="w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
+    <form class="sticky bottom-4 mt-14">
+      <div class="w-full border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
         <div class="px-4 py-2 bg-white rounded-t-lg dark:bg-gray-800">
-          <label for="comment" class="sr-only">Your comment</label>
-          <textarea id="comment" rows="4"
-            class="w-full px-0 text-sm text-gray-900 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400"
+          <label for="comment" class="sr-only"></label>
+          <textarea id="comment" rows="3" v-model="inputMessage"
+            class="w-full px-0  text-gray-900 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400"
             placeholder="给知路智能体发送消息" required></textarea>
         </div>
         <div class="flex items-center justify-between px-3 py-2 border-t dark:border-gray-600 border-gray-200">
-          <button type="submit"
-            class="inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900 hover:bg-blue-800">
-            Post comment
-          </button>
+          <Button :disabled="inputMessage === ''" :isLoading="isLoading" :loadingContent="'发送中...'"
+            :submitContent="'发送'" :disabledStyle="'bg-blue-400'" :handleClick="handleSendClick" />
           <div class="flex ps-0 space-x-1 rtl:space-x-reverse sm:ps-2">
             <button type="button"
               class="inline-flex justify-center items-center p-2 text-gray-500 rounded-sm cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
@@ -79,3 +59,47 @@
     </form>
   </div>
 </template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from "vue";
+import Button from "../components/Button.vue";
+import { useAiChat } from "../composables/ai/useAiChat";
+import useUserStore from "../composables/store/useUserStore";
+
+const { messages, chat, isLoading } = useAiChat();
+const { user } = useUserStore();
+const inputMessage = ref("");
+const chatContainer = ref<HTMLElement | null>(null);
+
+const chatElements = computed(() => {
+	return messages.value.map((message, index) => {
+		return {
+			content: message,
+			username: index % 2 === 0 ? user.username : "DeepSeek",
+			isUser: index % 2 === 0,
+		};
+	});
+});
+
+watch(
+	chatElements,
+	async () => {
+		await nextTick();
+		scrollToBottom();
+	},
+	{ deep: true },
+);
+
+// 滚动到底部的函数
+const scrollToBottom = () => {
+	if (chatContainer.value) {
+		chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
+	}
+};
+
+const handleSendClick = async (event: Event) => {
+	await chat(inputMessage.value);
+	inputMessage.value = "";
+	scrollToBottom();
+};
+</script>