diff --git a/examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue
index e67ee11946..d01084e97a 100644
--- a/examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue
@@ -1,28 +1,36 @@
 <template>
-  <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
+  <tiny-grid
+    :data="tableData"
+    :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+    :tiny_mcp_config="{
+      server,
+      business: {
+        id: 'company-information',
+        description: '公司人员信息表'
+      }
+    }"
+  >
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+    <tiny-grid-column field="company" title="公司名称"></tiny-grid-column>
     <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
     <tiny-grid-column field="city" title="城市"></tiny-grid-column>
-    <tiny-grid-column
-      field="boole"
-      title="布尔值"
-      align="center"
-      format-text="boole"
-      :editor="checkboxEdit"
-    ></tiny-grid-column>
   </tiny-grid>
 </template>
 
-<script setup lang="jsx">
+<script setup>
+import { ref, onMounted } from 'vue'
 import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
-import { reactive } from 'vue'
+import { createTransportPair, createSseProxy } from '@opentiny/next'
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import { Client } from '@modelcontextprotocol/sdk/client/index.js'
 
-const tableData = reactive([
+// 定义响应式数据
+const tableData = ref([
   {
     id: '1',
-    name: 'GFD 科技 YX 公司',
+    company: 'GFD 科技 YX 公司',
     city: '福州',
     employees: 800,
     createdDate: '2014-04-30 00:56:00',
@@ -30,7 +38,7 @@ const tableData = reactive([
   },
   {
     id: '2',
-    name: 'WWW 科技 YX 公司',
+    company: 'WWW 科技 YX 公司',
     city: '深圳',
     employees: 300,
     createdDate: '2016-07-08 12:36:22',
@@ -38,7 +46,7 @@ const tableData = reactive([
   },
   {
     id: '3',
-    name: 'RFV 有限责任公司',
+    company: 'RFV 有限责任公司',
     city: '中山',
     employees: 1300,
     createdDate: '2014-02-14 14:14:14',
@@ -46,7 +54,7 @@ const tableData = reactive([
   },
   {
     id: '4',
-    name: 'TGB 科技 YX 公司',
+    company: 'TGB 科技 YX 公司',
     city: '龙岩',
     employees: 360,
     createdDate: '2013-01-13 13:13:13',
@@ -54,7 +62,7 @@ const tableData = reactive([
   },
   {
     id: '5',
-    name: 'YHN 科技 YX 公司',
+    company: 'YHN 科技 YX 公司',
     city: '韶关',
     employees: 810,
     createdDate: '2012-12-12 12:12:12',
@@ -62,7 +70,7 @@ const tableData = reactive([
   },
   {
     id: '6',
-    name: 'WSX 科技 YX 公司',
+    company: 'WSX 科技 YX 公司',
     city: '黄冈',
     employees: 800,
     createdDate: '2011-11-11 11:11:11',
@@ -70,7 +78,7 @@ const tableData = reactive([
   },
   {
     id: '7',
-    name: 'KBG 物业 YX 公司',
+    company: 'KBG 物业 YX 公司',
     city: '赤壁',
     employees: 400,
     createdDate: '2016-04-30 23:56:00',
@@ -78,7 +86,7 @@ const tableData = reactive([
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术 YX 公司',
+    company: '深圳市福德宝网络技术 YX 公司',
     boole: true,
     city: '厦门',
     createdDate: '2016-06-03 13:53:25',
@@ -86,15 +94,26 @@ const tableData = reactive([
   }
 ])
 
-function checkboxEdit(h, { row }) {
-  return (
-    <input
-      type="checkbox"
-      checked={row.boole}
-      onChange={(event) => {
-        row.boole = event.target.checked
-      }}
-    />
-  )
-}
+const server = ref(new McpServer({ name: 'base-config', version: '1.0.0' }, {}))
+const sessionID = ref('')
+
+// 生命周期钩子
+onMounted(async () => {
+  // 1、创建传输对
+  const [transport, clientTransport] = createTransportPair()
+
+  // 2、创建并连接客户端
+  const client = new Client({ name: 'ai-agent', version: '1.0.0' }, {})
+  await client.connect(clientTransport)
+  const { sessionId } = await createSseProxy({
+    client,
+    url: 'https://39.108.160.245/sse'
+  })
+
+  sessionID.value = sessionId
+  window.$sessionId = sessionID.value
+
+  // 3、连接服务器
+  await server.value.connect(transport)
+})
 </script>
diff --git a/examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue b/examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue
index e2a063f477..b5b056b084 100644
--- a/examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue
+++ b/examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue
@@ -12,20 +12,14 @@
   >
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+    <tiny-grid-column field="company" title="公司名称"></tiny-grid-column>
     <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
     <tiny-grid-column field="city" title="城市"></tiny-grid-column>
-    <tiny-grid-column
-      field="boole"
-      title="布尔值"
-      align="center"
-      format-text="boole"
-      :editor="checkboxEdit"
-    ></tiny-grid-column>
   </tiny-grid>
 </template>
 
-<script lang="jsx">
+<script>
 import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import { createTransportPair, createSseProxy } from '@opentiny/next'
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
@@ -40,7 +34,7 @@ export default {
     const tableData = [
       {
         id: '1',
-        name: 'GFD 科技 YX 公司',
+        company: 'GFD 科技 YX 公司',
         city: '福州',
         employees: 800,
         createdDate: '2014-04-30 00:56:00',
@@ -48,7 +42,7 @@ export default {
       },
       {
         id: '2',
-        name: 'WWW 科技 YX 公司',
+        company: 'WWW 科技 YX 公司',
         city: '深圳',
         employees: 300,
         createdDate: '2016-07-08 12:36:22',
@@ -56,7 +50,7 @@ export default {
       },
       {
         id: '3',
-        name: 'RFV 有限责任公司',
+        company: 'RFV 有限责任公司',
         city: '中山',
         employees: 1300,
         createdDate: '2014-02-14 14:14:14',
@@ -64,7 +58,7 @@ export default {
       },
       {
         id: '4',
-        name: 'TGB 科技 YX 公司',
+        company: 'TGB 科技 YX 公司',
         city: '龙岩',
         employees: 360,
         createdDate: '2013-01-13 13:13:13',
@@ -72,7 +66,7 @@ export default {
       },
       {
         id: '5',
-        name: 'YHN 科技 YX 公司',
+        company: 'YHN 科技 YX 公司',
         city: '韶关',
         employees: 810,
         createdDate: '2012-12-12 12:12:12',
@@ -80,7 +74,7 @@ export default {
       },
       {
         id: '6',
-        name: 'WSX 科技 YX 公司',
+        company: 'WSX 科技 YX 公司',
         city: '黄冈',
         employees: 800,
         createdDate: '2011-11-11 11:11:11',
@@ -88,7 +82,7 @@ export default {
       },
       {
         id: '7',
-        name: 'KBG 物业 YX 公司',
+        company: 'KBG 物业 YX 公司',
         city: '赤壁',
         employees: 400,
         createdDate: '2016-04-30 23:56:00',
@@ -96,7 +90,7 @@ export default {
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术 YX 公司',
+        company: '深圳市福德宝网络技术 YX 公司',
         boole: true,
         city: '厦门',
         createdDate: '2016-06-03 13:53:25',
@@ -107,59 +101,9 @@ export default {
     return {
       server: new McpServer({ name: 'base-config', version: '1.0.0' }, {}),
       sessionID: '',
-      op: {
-        editConfig: {
-          trigger: 'click',
-          mode: 'cell',
-          showStatus: true
-        },
-        columns: [
-          {
-            type: 'index',
-            width: 60
-          },
-          {
-            type: 'selection',
-            width: 60
-          },
-          {
-            field: 'employees',
-            title: '员工数'
-          },
-          {
-            field: 'createdDate',
-            title: '创建日期'
-          },
-          {
-            field: 'city',
-            title: '城市'
-          },
-          {
-            field: 'boole',
-            title: '布尔值',
-            align: 'center',
-            formatText: 'boole',
-            editor: this.checkboxEdit
-          }
-        ],
-        data: tableData
-      },
       tableData
     }
   },
-  methods: {
-    checkboxEdit(h, { row }) {
-      return (
-        <input
-          type="checkbox"
-          checked={row.boole}
-          onChange={(event) => {
-            row.boole = event.target.checked
-          }}
-        />
-      )
-    }
-  },
   async mounted() {
     // 1、
     const [transport, clientTransport] = createTransportPair()
@@ -169,7 +113,7 @@ export default {
     await client.connect(clientTransport)
     const { sessionId } = await createSseProxy({
       client,
-      url: 'http://39.108.160.245/sse'
+      url: 'https://39.108.160.245/sse'
     })
 
     this.sessionID = sessionId
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-ai-agent.js b/examples/sites/demos/pc/app/grid/webdoc/grid-ai-agent.js
index 19bd85545a..1fc5fe17db 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-ai-agent.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-ai-agent.js
@@ -13,7 +13,7 @@ export default {
         - 选中表格数据：用户可以通过自然语言指令，选中表格数据。<br>    
         - 选中全部数据：用户可以通过自然语言指令，选中全部数据。<br>    
 
-        通过属性 <code>tiny-mcp-config</code> 可以配置表格的业务意义以及传入<code>server</code>对象，详见示例。`,
+        通过属性 <code>tiny_mcp_config</code> 可以配置表格的业务意义以及传入<code>server</code>对象，详见示例。`,
         'en-US': ``
       },
       codeFiles: ['ai-agent/basic-usage.vue']