diff --git a/src/components/Copilot.vue b/src/components/Copilot.vue
index 25c2f733a..b6dd43beb 100644
--- a/src/components/Copilot.vue
+++ b/src/components/Copilot.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="right-panel">
-    <a @click="toggleWindow" href="javascript:;"><i class="el-icon-chat-line-square"></i></a>
     <transition name="pop">
       <el-card v-show="showCopilot" class="copilot" shadow="never">
         <div slot="header" class="clearfix">
@@ -25,7 +24,15 @@
             <span class="chat-title"><i class="el-icon-loading"></i>{{ $t('common.thinking') }}</span>
           </div>
         </div>
-        <div class="footer">
+        <div class="footer" v-click-outside="handleClickPresetOutside">
+          <transition name="el-zoom-in-bottom">
+            <el-cascader-panel
+              v-if="showPresetPrompt"
+              class="preset-prompts"
+              :options="presetPromptOptions"
+              @change="handlePresetsChange"
+            ></el-cascader-panel>
+          </transition>
           <el-input
             type="textarea"
             :autosize="{ minRows: 1, maxRows: 4 }"
@@ -34,6 +41,8 @@
             v-model="currentPublishMsg"
             :placeholder="$t('common.copiltePubMsgPlacehoder')"
             @keyup.enter="sendMessage()"
+            @focus="showPresetPrompt = true"
+            @input="showPresetPrompt = false"
           ></el-input>
           <el-button
             class="chat-pub-btn"
@@ -59,11 +68,16 @@ import Prism from 'prismjs'
 import CryptoJS from 'crypto-js'
 import { ENCRYPT_KEY, getCopilotMessageId } from '@/utils/idGenerator'
 import useServices from '@/database/useServices'
+import ClickOutside from 'vue-click-outside'
+import VueI18n from 'vue-i18n'
 
 @Component({
   components: {
     VueMarkdown,
   },
+  directives: {
+    ClickOutside,
+  },
 })
 export default class Copilot extends Vue {
   @Prop({}) public record?: ConnectionModel
@@ -73,6 +87,7 @@ export default class Copilot extends Vue {
   @Getter('model') private model!: AIModel
 
   public showCopilot = false
+  public showPresetPrompt = false
   private page = 1
   private hasMore = true
   private isLoading = false
@@ -92,11 +107,144 @@ export default class Copilot extends Vue {
     assistant: 'MQTTX Copilot',
   }
 
+  private currPresetPrompt = ''
+  get presetPromptsMap(): Record<string, string | VueI18n.TranslateResult> {
+    return {
+      javascript: this.$t('common.promptProgrammingLanguage', ['JavaScript', '@connection']),
+      python: this.$t('common.promptProgrammingLanguage', ['Python', '@connection']),
+      java: this.$t('common.promptProgrammingLanguage', ['Java', '@connection']),
+      go: this.$t('common.promptProgrammingLanguage', ['Go', '@connection']),
+      c: this.$t('common.promptProgrammingLanguage', ['C', '@connection']),
+      cpp: this.$t('common.promptProgrammingLanguage', ['C++', '@connection']),
+      csharp: this.$t('common.promptProgrammingLanguage', ['C#', '@connection']),
+      php: this.$t('common.promptProgrammingLanguage', ['PHP', '@connection']),
+      swift: this.$t('common.promptProgrammingLanguage', ['Swift', '@connection']),
+      kotlin: this.$t('common.promptProgrammingLanguage', ['Kotlin', '@connection']),
+      rust: this.$t('common.promptProgrammingLanguage', ['Rust', '@connection']),
+      dart: this.$t('common.promptProgrammingLanguage', ['Dart', '@connection']),
+      erlang: this.$t('common.promptProgrammingLanguage', ['Erlang', '@connection']),
+      autoFillPayload: this.$t('common.promptAutoFillPayload'),
+      mqttProtocol: this.$t('common.mqttProtocol'),
+      installEMQX: this.$t('common.installEMQX'),
+      emqxRule: this.$t('common.promptEmqxRule'),
+      connectionInfo: this.$t('common.promptCurrentConnectionInfo', ['@connection']),
+    }
+  }
+  private presetPromptOptions = [
+    {
+      value: 'clientCodegen',
+      label: this.$tc('common.promptCodegen'),
+      children: [
+        {
+          value: 'javascript',
+          label: 'JavaScript',
+        },
+        {
+          value: 'python',
+          label: 'Python',
+        },
+        {
+          value: 'java',
+          label: 'Java',
+        },
+        {
+          value: 'go',
+          label: 'Go',
+        },
+        {
+          value: 'c',
+          label: 'C',
+        },
+        {
+          value: 'cpp',
+          label: 'C++',
+        },
+        {
+          value: 'csharp',
+          label: 'C#',
+        },
+        {
+          value: 'php',
+          label: 'PHP',
+        },
+        {
+          value: 'swift',
+          label: 'Swift',
+        },
+        {
+          value: 'kotlin',
+          label: 'Kotlin',
+        },
+        {
+          value: 'rust',
+          label: 'Rust',
+        },
+        {
+          value: 'dart',
+          label: 'Dart',
+        },
+        {
+          value: 'erlang',
+          label: 'Erlang',
+        },
+      ],
+    },
+    {
+      value: 'payload',
+      label: 'Payload',
+      children: [
+        {
+          value: 'autoFillPayload',
+          label: this.$tc('common.genPayload'),
+        },
+      ],
+    },
+    {
+      value: 'emqx',
+      label: 'EMQX',
+      children: [
+        {
+          value: 'installEMQX',
+          label: this.$t('common.installEMQX'),
+        },
+        {
+          value: 'emqxRule',
+          label: this.$t('common.emqxRule'),
+        },
+      ],
+    },
+    {
+      value: 'mqtt',
+      label: 'MQTT FAQs',
+      children: [
+        {
+          value: 'mqttProtocol',
+          label: this.$tc('common.mqttProtocol'),
+        },
+      ],
+    },
+    {
+      value: 'explain',
+      label: this.$t('common.explainer'),
+      children: [
+        {
+          value: 'connectionInfo',
+          label: this.$t('common.currentConnectionInfo'),
+        },
+      ],
+    },
+  ]
+
   @Watch('showCopilot')
   private handleShowCopilotChange(newValue: boolean, oldValue: boolean) {
     if (newValue === true && oldValue === false && this.isSending === false) {
       this.loadMessages({ reset: true })
     }
+    this.$nextTick(() => {
+      setTimeout(() => {
+        Prism.highlightAll()
+      }, 100)
+    })
   }
 
   private getChatBodyRef() {
@@ -147,7 +295,12 @@ export default class Copilot extends Vue {
 
     const userMessages = [
       ...this.systemMessages.map(({ role, content }) => ({ role, content })),
-      ...this.messages.slice(-20).map(({ role, content }) => ({ role, content })),
+      ...this.messages.slice(-20).map(({ role, content }) => {
+        if (content.includes('@connection')) {
+          return { role, content: content.replace('@connection', JSON.stringify(this.record)) }
+        }
+        return { role, content }
+      }),
     ]
 
     this.currentPublishMsg = ''
@@ -185,11 +338,19 @@ export default class Copilot extends Vue {
       this.$nextTick(() => {
         Prism.highlightAll()
       })
-    } catch (error) {
-      const err = error as unknown as Error
-      this.$message.error(`API Error: ${String(err)}`)
+      if (this.currPresetPrompt === 'autoFillPayload') {
+        this.$emit('autoFillPayload', responseMessage.content)
+      }
+    } catch (err) {
+      const error = err as unknown as any
+      if (error.response.data) {
+        this.$message.error(`API Error: ${error.response.data.error.message}`)
+      } else {
+        this.$message.error(`API Error: ${error}`)
+      }
     } finally {
       this.isSending = false
+      this.currPresetPrompt = ''
       this.scrollToBottom()
     }
   }
@@ -239,6 +400,17 @@ export default class Copilot extends Vue {
     })
   }
 
+  private handlePresetsChange(prompts: string[]) {
+    this.currPresetPrompt = prompts[prompts.length - 1]
+    const sendMessage = this.presetPromptsMap[this.currPresetPrompt]
+    this.sendMessage(sendMessage as string)
+    this.showPresetPrompt = false
+  }
+
+  private handleClickPresetOutside() {
+    this.showPresetPrompt = false
+  }
+
   private created() {
     this.loadMessages({ reset: true })
   }
@@ -288,7 +460,9 @@ body.night {
         .el-button--text {
           padding: 0;
           i {
-            font-size: 16px !important;
+            font-size: 16px;
+            color: var(--color-text-title);
+            font-weight: 400;
           }
         }
       }
@@ -382,6 +556,44 @@ body.night {
       padding: 12px 16px;
       display: flex;
       align-items: center;
+      .preset-prompts.el-cascader-panel.is-bordered {
+        box-shadow: #0000001a 0px 4px 12px;
+        background: var(--color-bg-normal);
+        position: absolute;
+        bottom: 68px;
+        border: 1px solid var(--color-border-default);
+        .el-cascader-node.in-active-path,
+        .el-cascader-node.is-selectable.in-checked-path,
+        .el-cascader-node.is-active {
+          font-weight: normal;
+        }
+        .el-cascader-node {
+          padding: 0 12px 0 12px;
+          .el-cascader-node__label {
+            padding: 0;
+            padding-right: 30px;
+          }
+        }
+        .el-cascader-menu {
+          min-width: auto;
+          border-right: 1px solid var(--color-border-default);
+          &:last-child {
+            border-right: none;
+          }
+        }
+        .el-cascader-menu,
+        i {
+          color: var(--color-text-default);
+        }
+        .el-icon-check.el-cascader-node__prefix {
+          display: none;
+        }
+        .el-cascader-node:not(.is-disabled):hover,
+        .el-cascader-node:not(.is-disabled):focus {
+          background-color: transparent;
+          color: var(--color-main-green);
+        }
+      }
       .chat-msg-input {
         flex-grow: 1;
         textarea {
diff --git a/src/components/MsgPublish.vue b/src/components/MsgPublish.vue
index 43d296169..2d802fc38 100644
--- a/src/components/MsgPublish.vue
+++ b/src/components/MsgPublish.vue
@@ -594,7 +594,6 @@ export default class MsgPublish extends Vue {
     position: absolute;
     transform: translate(0, -100%);
     width: 100%;
-    z-index: 11;
     .el-card.meta-card {
       padding: 10px;
       padding-bottom: 0px;
diff --git a/src/lang/common.ts b/src/lang/common.ts
index 362f9ca31..86a6561a5 100644
--- a/src/lang/common.ts
+++ b/src/lang/common.ts
@@ -314,4 +314,81 @@ export default {
     ja: '以下のエラーメッセージを分析し、解決してください：',
     hu: 'Kérjük, segítsen elemezni és megoldani az alábbi hibaüzenetet: ',
   },
+  promptCodegen: {
+    zh: '客户端代码生成',
+    en: 'Client Codegen',
+    tr: 'Kod Oluşturucu',
+    ja: 'コード生成',
+    hu: 'Kódgenerálás',
+  },
+  promptProgrammingLanguage: {
+    zh: '使用当前连接创建 {0} MQTT Client 代码 {1}，如果使用了 MQTT5 的，注意配置属性',
+    en: 'Create {0} MQTT Client code with the current connection {1}, if you use MQTT5, pay attention to the configuration properties',
+    tr: 'Mevcut bağlantı ile {0} MQTT Client kodu oluştur {1}, MQTT5 kullanıyorsanız, yapılandırma özelliklerine dikkat edin',
+    ja: '現在の接続で {0} MQTTクライアントコードを作成する {1}，MQTT5を使用する場合は、構成プロパティに注意してください',
+    hu: 'Hozzon létre {0} MQTT ügyfélkódot az aktuális kapcsolattal {1}, ha MQTT5-öt használ, figyeljen a konfigurációs tulajdonságokra',
+  },
+  genPayload: {
+    zh: '生成测试数据',
+    en: 'Generate Test Data',
+    tr: 'Test Verisi Oluştur',
+    ja: 'テストデータを生成する',
+    hu: 'Tesztadatok generálása',
+  },
+  promptAutoFillPayload: {
+    zh: '给我一份 MQTT 测试数据，中等复杂结构，包含各种常见的测试场景数据。每次返回一个 JSON payload，不包含任何额外信息。',
+    en: 'Give me a piece of MQTT test data, medium complex structure, containing various common test scenario data. Return a JSON payload each time, without any additional information.',
+    tr: 'Bana bir MQTT test verisi ver, orta karmaşık yapı, çeşitli ortak test senaryo verileri içerir. Her seferinde bir JSON veri döndürün, herhangi bir ek bilgi içermez.',
+    ja: '私にMQTTテストデータを1つ与えてください。中程度の複雑な構造で、さまざまな一般的なテストシナリオデータを含みます。毎回JSONペイロードを返しますが、追加情報は含まれません。',
+    hu: 'Adj nekem egy MQTT tesztadatot, közepesen összetett szerkezetet, amely különféle gyakori teszteset-adatokat tartalmaz. Minden alkalommal visszaad egy JSON payloadot, bármilyen további információ nélkül.',
+  },
+  mqttProtocol: {
+    zh: 'MQTT 协议是什么',
+    en: 'What is MQTT Protocol',
+    tr: 'MQTT Protokolü Nedir',
+    ja: 'MQTTプロトコルとは何ですか',
+    hu: 'Mi az MQTT protokoll',
+  },
+  installEMQX: {
+    zh: '如何安装 EMQX',
+    en: 'How to install EMQX',
+    tr: 'EMQX Nasıl Kurulur',
+    ja: 'EMQXのインストール方法',
+    hu: 'Hogyan telepíthető az EMQX',
+  },
+  emqxRule: {
+    zh: 'EMQX 规则引擎 SQL 示例',
+    en: 'EMQX Rule Engine SQL Example',
+    tr: 'EMQX Kural Motoru SQL Örneği',
+    ja: 'EMQXルールエンジンSQLの例',
+    hu: 'EMQX szabálymotor SQL példa',
+  },
+  promptEmqxRule: {
+    zh: '请帮我编辑一段 EMQX 规则引擎的 SQL 示例，包含解释和简单教程',
+    en: 'Please help me edit an EMQX Rule Engine SQL example, including explanation and simple tutorial',
+    tr: 'Lütfen bana bir EMQX Kural Motoru SQL örneği düzenleme konusunda yardımcı olun, açıklama ve basit bir öğretici içerir',
+    ja: 'EMQXルールエンジンSQLの例を編集してください。説明と簡単なチュートリアルが含まれています',
+    hu: 'Segítsen szerkeszteni egy EMQX szabálymotor SQL példát, beleértve a magyarázatot és az egyszerű útmutatót',
+  },
+  currentConnectionInfo: {
+    zh: '当前连接信息',
+    en: 'Current Connection Info',
+    tr: 'Mevcut Bağlantı Bilgisi',
+    ja: '現在の接続情報',
+    hu: 'Jelenlegi kapcsolat információ',
+  },
+  promptCurrentConnectionInfo: {
+    zh: '请帮我解释当前连接的信息，包含连接的基本信息 {0}',
+    en: 'Please help me explain the information of the current connection, including the basic information of the connection {0}',
+    tr: 'Lütfen bana mevcut bağlantının bilgisini açıklama konusunda yardımcı olun, bağlantının temel bilgilerini içerir {0}',
+    ja: '現在の接続の情報を説明してください。接続の基本情報を含みます {0}',
+    hu: 'Segítsen elmagyarázni a jelenlegi kapcsolat adatait, beleértve a kapcsolat alapadatait {0}',
+  },
+  explainer: {
+    zh: '解释器',
+    en: 'Explainer',
+    tr: 'Açıklayıcı',
+    ja: '解説者',
+    hu: 'Magyarázó',
+  },
 }
diff --git a/src/utils/element.ts b/src/utils/element.ts
index ae639aa86..aec2a7b8f 100644
--- a/src/utils/element.ts
+++ b/src/utils/element.ts
@@ -62,6 +62,7 @@ import {
   // Collapse,
   // CollapseItem,
   // Cascader,
+  CascaderPanel,
   ColorPicker,
   // Transfer,
   // Container,
@@ -135,6 +136,7 @@ export default (Vue: typeof _Vue) => {
   // Vue.use(Collapse)
   // Vue.use(CollapseItem)
   // Vue.use(Cascader)
+  Vue.use(CascaderPanel)
   Vue.use(ColorPicker)
   // Vue.use(Transfer)
   // Vue.use(Container)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a2c4aa37d..f93a5099b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -75,7 +75,7 @@ export default class Home extends Vue {
     position: fixed;
     left: 341px;
     right: 0;
-    z-index: 3;
+    z-index: 2;
     background: var(--color-bg-normal);
   }
   .rightbar {
diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue
index 8e3d1ebe8..83a98da00 100644
--- a/src/views/connections/ConnectionsDetail.vue
+++ b/src/views/connections/ConnectionsDetail.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="connections-detail">
+    <copilot ref="copilot" :record="record" mode="connections" />
     <div ref="connectionTopbar" class="connections-topbar right-topbar">
       <div class="connections-info">
         <div class="topbar">
@@ -86,7 +87,9 @@
                 <i class="iconfont icon-a-stopscrip"></i>
               </a>
             </el-tooltip>
-            <copilot ref="copilot" style="margin-right: 12px" :record="record" mode="connections" />
+            <a href="javascript:;" @click="showCopilotPanel" style="margin-right: 12px"
+              ><i class="el-icon-chat-line-square"></i
+            ></a>
             <template v-if="!isNewWindow">
               <el-tooltip
                 placement="bottom"
@@ -1806,9 +1809,14 @@ export default class ConnectionsDetail extends Vue {
    * @param askMsg The question to ask Copilot.
    */
   private askCopilot(askMsg: string) {
+    const copilotRef = this.showCopilotPanel()
+    copilotRef.sendMessage(askMsg)
+  }
+
+  private showCopilotPanel() {
     const copilotRef: Copilot = this.$refs.copilot as Copilot
     copilotRef.showCopilot = true
-    copilotRef.sendMessage(askMsg)
+    return copilotRef
   }
 
   private created() {
@@ -2000,7 +2008,7 @@ export default class ConnectionsDetail extends Vue {
       bottom: 0;
       left: 0;
       right: 0;
-      z-index: 2;
+      z-index: 3;
     }
   }
 }