diff --git a/src/components/controls/ControlPanel.vue b/src/components/controls/ControlPanel.vue
index a68dd69..750fde6 100644
--- a/src/components/controls/ControlPanel.vue
+++ b/src/components/controls/ControlPanel.vue
@@ -5,6 +5,14 @@
     </div>
     
     <div class="controls">
+      <el-button
+        type="success"
+        @click="connectToAgent"
+        :disabled="isConnected"
+        circle
+      >
+        <el-icon><VideoPlay /></el-icon>
+      </el-button>
       <el-button
         type="primary"
         :class="{ 'is-listening': isListening }"
@@ -48,7 +56,7 @@
 import { computed } from 'vue';
 import { useChatStore } from '../../stores/chat';
 import { ElButton, ElMessage, ElIcon } from 'element-plus';
-import { Microphone, Headset, Close, Delete } from '@element-plus/icons-vue';
+import { Microphone, Headset, Close, Delete, VideoPlay } from '@element-plus/icons-vue';
 
 export default {
   name: 'ControlPanel',
@@ -59,7 +67,8 @@ export default {
     Microphone,
     Headset,
     Close,
-    Delete
+    Delete,
+    VideoPlay
   },
   
   setup() {
@@ -118,6 +127,21 @@ export default {
       ElMessage.success('消息已清除');
     };
     
+    // Connect to agent
+    const connectToAgent = async () => {
+      try {
+        const success = await chatStore.initialize();
+        if (success) {
+          ElMessage.success('连接成功！');
+        } else {
+          ElMessage.error('连接失败');
+        }
+      } catch (error) {
+        console.error('Error connecting to agent:', error);
+        ElMessage.error('连接失败: ' + error.message);
+      }
+    };
+    
     return {
       isListening,
       isSpeaking,
@@ -129,7 +153,8 @@ export default {
       statusText,
       toggleListening,
       endSession,
-      clearMessages
+      clearMessages,
+      connectToAgent
     };
   }
 };