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
deleted file mode 100644
index d2b03a79e2..0000000000
--- a/examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <div>
-    <label style="font-size: 1.5em; margin-right: 8px">选择城市:</label>
-    <tiny-select
-      v-model="queryCity"
-      :options="options"
-      style="width: 200px; margin-bottom: 20px"
-      placeholder="选择城市"
-      :tiny_mcp_config="{
-        server,
-        business: {
-          id: 'city-dropdown',
-          description: '城市下拉框'
-        }
-      }"
-    ></tiny-select>
-    <tiny-grid
-      :data="tableData"
-      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
-      height="420px"
-      :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>
-  </div>
-</template>
-
-<script>
-import { TinyGrid, TinyGridColumn, TinySelect } from '@opentiny/vue'
-import { createTransportPair, createSseProxy } from '@opentiny/next'
-import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
-import { Client } from '@modelcontextprotocol/sdk/client/index.js'
-
-export default {
-  components: {
-    TinyGrid,
-    TinyGridColumn,
-    TinySelect
-  },
-  data() {
-    const _table = [
-      { company: 'GFD 科技 YX 公司', city: '广州', employees: 800, createdDate: '2014-04-30 00:56:00' },
-      { company: 'QWE 科技 YX 公司', city: '深圳', employees: 500, createdDate: '2015-05-01 01:01:01' },
-      { company: 'ASD 科技 YX 公司', city: '中山', employees: 200, createdDate: '2013-03-03 03:03:03' },
-      { company: 'ZXC 科技 YX 公司', city: '广州', employees: 1000, createdDate: '2012-02-02 02:02:02' },
-      { company: 'VBN 科技 YX 公司', city: '深圳', employees: 600, createdDate: '2011-01-01 01:01:01' },
-      { company: 'QWE 科技 YX 公司', city: '中山', employees: 700, createdDate: '2016-08-08 08:08:08' },
-      { company: 'RTY 科技 YX 公司', city: '广州', employees: 900, createdDate: '2015-09-09 09:09:09' },
-      { company: 'UIO 科技 YX 公司', city: '深圳', employees: 1100, createdDate: '2014-10-10 10:10:10' },
-      { company: 'HJK 科技 YX 公司', city: '中山', employees: 1200, createdDate: '2013-11-11 11:11:11' },
-      { company: 'WWW 科技 YX 公司', city: '深圳', employees: 300, createdDate: '2016-07-08 12:36:22' },
-      { company: 'RFV 有限责任公司', city: '中山', employees: 1300, createdDate: '2014-02-14 14:14:14' },
-      { company: 'TGB 科技 YX 公司', city: '广州', employees: 360, createdDate: '2013-01-13 13:13:13' },
-      { company: 'YHN 科技 YX 公司', city: '深圳', employees: 810, createdDate: '2012-12-12 12:12:12' },
-      { company: 'WSX 科技 YX 公司', city: '中山', employees: 800, createdDate: '2011-11-11 11:11:11' },
-      { company: 'KBG 物业 YX 公司', city: '深圳', employees: 400, createdDate: '2014-04-30 23:56:00' },
-      { company: 'SZB 有限责任公司', city: '深圳', employees: 1400, createdDate: '2016-06-03 13:53:25' }
-    ]
-    return {
-      server: new McpServer({ name: 'base-config', version: '1.0.0' }, {}),
-      sessionID: '',
-      tableData: _table,
-      queryCity: '',
-      options: Array.from(new Set(_table.map((item) => item.city))).map((city) => ({
-        label: city,
-        value: city
-      }))
-    }
-  },
-  async mounted() {
-    // 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'
-    })
-
-    this.sessionID = sessionId
-    window.$sessionId = this.sessionID
-
-    // 3、
-    await this.server.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
deleted file mode 100644
index 38306f2491..0000000000
--- a/examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <div>
-    <label style="font-size: 1.5em; margin-right: 8px">选择城市:</label>
-    <tiny-select
-      v-model="queryCity"
-      :options="options"
-      style="width: 200px; margin-bottom: 20px"
-      placeholder="选择城市"
-      :tiny_mcp_config="{
-        server,
-        business: {
-          id: 'city-dropdown',
-          description: '城市下拉框'
-        }
-      }"
-    ></tiny-select>
-    <tiny-grid
-      :data="tableData"
-      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
-      height="420px"
-      :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>
-  </div>
-</template>
-
-<script>
-import { TinyGrid, TinyGridColumn, TinyBaseSelect } from '@opentiny/vue'
-import { createTransportPair, createSseProxy } from '@opentiny/next'
-import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
-import { Client } from '@modelcontextprotocol/sdk/client/index.js'
-
-export default {
-  components: {
-    TinyGrid,
-    TinyGridColumn,
-    TinySelect: TinyBaseSelect
-  },
-  data() {
-    const _table = [
-      { company: 'GFD 科技 YX 公司', city: '广州', employees: 800, createdDate: '2014-04-30 00:56:00' },
-      { company: 'QWE 科技 YX 公司', city: '深圳', employees: 500, createdDate: '2015-05-01 01:01:01' },
-      { company: 'ASD 科技 YX 公司', city: '中山', employees: 200, createdDate: '2013-03-03 03:03:03' },
-      { company: 'ZXC 科技 YX 公司', city: '广州', employees: 1000, createdDate: '2012-02-02 02:02:02' },
-      { company: 'VBN 科技 YX 公司', city: '深圳', employees: 600, createdDate: '2011-01-01 01:01:01' },
-      { company: 'QWE 科技 YX 公司', city: '中山', employees: 700, createdDate: '2016-08-08 08:08:08' },
-      { company: 'RTY 科技 YX 公司', city: '广州', employees: 900, createdDate: '2015-09-09 09:09:09' },
-      { company: 'UIO 科技 YX 公司', city: '深圳', employees: 1100, createdDate: '2014-10-10 10:10:10' },
-      { company: 'HJK 科技 YX 公司', city: '中山', employees: 1200, createdDate: '2013-11-11 11:11:11' },
-      { company: 'WWW 科技 YX 公司', city: '深圳', employees: 300, createdDate: '2016-07-08 12:36:22' },
-      { company: 'RFV 有限责任公司', city: '中山', employees: 1300, createdDate: '2014-02-14 14:14:14' },
-      { company: 'TGB 科技 YX 公司', city: '广州', employees: 360, createdDate: '2013-01-13 13:13:13' },
-      { company: 'YHN 科技 YX 公司', city: '深圳', employees: 810, createdDate: '2012-12-12 12:12:12' },
-      { company: 'WSX 科技 YX 公司', city: '中山', employees: 800, createdDate: '2011-11-11 11:11:11' },
-      { company: 'KBG 物业 YX 公司', city: '深圳', employees: 400, createdDate: '2014-04-30 23:56:00' },
-      { company: 'SZB 有限责任公司', city: '深圳', employees: 1400, createdDate: '2016-06-03 13:53:25' }
-    ]
-    return {
-      server: new McpServer({ name: 'base-config', version: '1.0.0' }, {}),
-      sessionID: '',
-      tableData: _table,
-      queryCity: '',
-      options: Array.from(new Set(_table.map((item) => item.city))).map((city) => ({
-        label: city,
-        value: city
-      }))
-    }
-  },
-  async mounted() {
-    // 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'
-    })
-
-    this.sessionID = sessionId
-    window.$sessionId = this.sessionID
-
-    // 3、
-    await this.server.connect(transport)
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/grid/base/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/grid/base/basic-usage-composition-api.vue
index e67ee11946..3708ad4648 100644
--- a/examples/sites/demos/pc/app/grid/base/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/base/basic-usage-composition-api.vue
@@ -1,100 +1,100 @@
 <template>
-  <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></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>
+  <div>
+    <label style="font-size: 1.5em; margin-right: 8px">选择城市:</label>
+    <tiny-select
+      v-model="queryCity"
+      :options="options"
+      style="width: 200px; margin-bottom: 20px"
+      placeholder="选择城市"
+      :tiny_mcp_config="{
+        server,
+        business: {
+          id: 'city-dropdown',
+          description: '城市下拉框'
+        }
+      }"
+    ></tiny-select>
+    <tiny-grid
+      :data="tableData"
+      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+      height="420px"
+      :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>
+  </div>
 </template>
 
-<script setup lang="jsx">
-import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
-import { reactive } from 'vue'
+<script>
+import { TinyGrid, TinyGridColumn, TinyBaseSelect } from '@opentiny/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([
-  {
-    id: '1',
-    name: 'GFD 科技 YX 公司',
-    city: '福州',
-    employees: 800,
-    createdDate: '2014-04-30 00:56:00',
-    boole: false
+export default {
+  components: {
+    TinyGrid,
+    TinyGridColumn,
+    TinySelect: TinyBaseSelect
   },
-  {
-    id: '2',
-    name: 'WWW 科技 YX 公司',
-    city: '深圳',
-    employees: 300,
-    createdDate: '2016-07-08 12:36:22',
-    boole: true
+  data() {
+    const _table = [
+      { company: 'GFD 有限责任公司', city: '广州', employees: 800, createdDate: '2014-04-30 00:56:00' },
+      { company: 'AWE 有限责任公司', city: '深圳', employees: 500, createdDate: '2015-05-01 01:01:01' },
+      { company: 'ASD 有限责任公司', city: '中山', employees: 200, createdDate: '2013-03-03 03:03:03' },
+      { company: 'ZXC 有限责任公司', city: '广州', employees: 1000, createdDate: '2012-02-02 02:02:02' },
+      { company: 'VBN 有限责任公司', city: '深圳', employees: 600, createdDate: '2011-01-01 01:01:01' },
+      { company: 'QWE 有限责任公司', city: '中山', employees: 700, createdDate: '2016-08-08 08:08:08' },
+      { company: 'RTY 有限责任公司', city: '广州', employees: 900, createdDate: '2015-09-09 09:09:09' },
+      { company: 'UIO 有限责任公司', city: '深圳', employees: 1100, createdDate: '2014-10-10 10:10:10' },
+      { company: 'HJK 有限责任公司', city: '中山', employees: 1200, createdDate: '2013-11-11 11:11:11' },
+      { company: 'WWW 有限责任公司', city: '深圳', employees: 300, createdDate: '2016-07-08 12:36:22' },
+      { company: 'RFV 有限责任公司', city: '中山', employees: 1300, createdDate: '2014-02-14 14:14:14' },
+      { company: 'TGB 有限责任公司', city: '广州', employees: 360, createdDate: '2013-01-13 13:13:13' },
+      { company: 'YHN 有限责任公司', city: '深圳', employees: 810, createdDate: '2012-12-12 12:12:12' },
+      { company: 'WSX 有限责任公司', city: '中山', employees: 800, createdDate: '2011-11-11 11:11:11' },
+      { company: 'KBG 有限责任公司', city: '深圳', employees: 400, createdDate: '2014-04-30 23:56:00' },
+      { company: 'SZB 有限责任公司', city: '深圳', employees: 1400, createdDate: '2016-06-03 13:53:25' }
+    ]
+    return {
+      server: new McpServer({ name: 'base-config', version: '1.0.0' }, {}),
+      sessionID: '',
+      tableData: _table,
+      queryCity: '',
+      options: Array.from(new Set(_table.map((item) => item.city))).map((city) => ({
+        label: city,
+        value: city
+      }))
+    }
   },
-  {
-    id: '3',
-    name: 'RFV 有限责任公司',
-    city: '中山',
-    employees: 1300,
-    createdDate: '2014-02-14 14:14:14',
-    boole: false
-  },
-  {
-    id: '4',
-    name: 'TGB 科技 YX 公司',
-    city: '龙岩',
-    employees: 360,
-    createdDate: '2013-01-13 13:13:13',
-    boole: true
-  },
-  {
-    id: '5',
-    name: 'YHN 科技 YX 公司',
-    city: '韶关',
-    employees: 810,
-    createdDate: '2012-12-12 12:12:12',
-    boole: true
-  },
-  {
-    id: '6',
-    name: 'WSX 科技 YX 公司',
-    city: '黄冈',
-    employees: 800,
-    createdDate: '2011-11-11 11:11:11',
-    boole: true
-  },
-  {
-    id: '7',
-    name: 'KBG 物业 YX 公司',
-    city: '赤壁',
-    employees: 400,
-    createdDate: '2016-04-30 23:56:00',
-    boole: false
-  },
-  {
-    id: '8',
-    name: '深圳市福德宝网络技术 YX 公司',
-    boole: true,
-    city: '厦门',
-    createdDate: '2016-06-03 13:53:25',
-    employees: 540
-  }
-])
+  async mounted() {
+    // 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'
+    })
 
-function checkboxEdit(h, { row }) {
-  return (
-    <input
-      type="checkbox"
-      checked={row.boole}
-      onChange={(event) => {
-        row.boole = event.target.checked
-      }}
-    />
-  )
+    this.sessionID = sessionId
+    window.$sessionId = this.sessionID
+
+    // 3、
+    await this.server.connect(transport)
+  }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/base/basic-usage.spec.js b/examples/sites/demos/pc/app/grid/base/basic-usage.spec.js
index d59f65d12a..4fde3edf38 100644
--- a/examples/sites/demos/pc/app/grid/base/basic-usage.spec.js
+++ b/examples/sites/demos/pc/app/grid/base/basic-usage.spec.js
@@ -4,5 +4,5 @@ test('标签式表格', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid#base-basic-usage')
 
-  await expect(page.getByRole('row', { name: '1 800 2014-04-30 00:56:00 福州' })).toBeVisible()
+  // await expect(page.getByRole('row', { name: '1 800 2014-04-30 00:56:00 福州' })).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/grid/base/basic-usage.vue b/examples/sites/demos/pc/app/grid/base/basic-usage.vue
index 147603e4b5..3708ad4648 100644
--- a/examples/sites/demos/pc/app/grid/base/basic-usage.vue
+++ b/examples/sites/demos/pc/app/grid/base/basic-usage.vue
@@ -1,149 +1,100 @@
 <template>
-  <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></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>
+  <div>
+    <label style="font-size: 1.5em; margin-right: 8px">选择城市:</label>
+    <tiny-select
+      v-model="queryCity"
+      :options="options"
+      style="width: 200px; margin-bottom: 20px"
+      placeholder="选择城市"
+      :tiny_mcp_config="{
+        server,
+        business: {
+          id: 'city-dropdown',
+          description: '城市下拉框'
+        }
+      }"
+    ></tiny-select>
+    <tiny-grid
+      :data="tableData"
+      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+      height="420px"
+      :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>
+  </div>
 </template>
 
-<script lang="jsx">
-import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
+<script>
+import { TinyGrid, TinyGridColumn, TinyBaseSelect } from '@opentiny/vue'
+import { createTransportPair, createSseProxy } from '@opentiny/next'
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import { Client } from '@modelcontextprotocol/sdk/client/index.js'
 
 export default {
   components: {
     TinyGrid,
-    TinyGridColumn
+    TinyGridColumn,
+    TinySelect: TinyBaseSelect
   },
   data() {
-    const tableData = [
-      {
-        id: '1',
-        name: 'GFD 科技 YX 公司',
-        city: '福州',
-        employees: 800,
-        createdDate: '2014-04-30 00:56:00',
-        boole: false
-      },
-      {
-        id: '2',
-        name: 'WWW 科技 YX 公司',
-        city: '深圳',
-        employees: 300,
-        createdDate: '2016-07-08 12:36:22',
-        boole: true
-      },
-      {
-        id: '3',
-        name: 'RFV 有限责任公司',
-        city: '中山',
-        employees: 1300,
-        createdDate: '2014-02-14 14:14:14',
-        boole: false
-      },
-      {
-        id: '4',
-        name: 'TGB 科技 YX 公司',
-        city: '龙岩',
-        employees: 360,
-        createdDate: '2013-01-13 13:13:13',
-        boole: true
-      },
-      {
-        id: '5',
-        name: 'YHN 科技 YX 公司',
-        city: '韶关',
-        employees: 810,
-        createdDate: '2012-12-12 12:12:12',
-        boole: true
-      },
-      {
-        id: '6',
-        name: 'WSX 科技 YX 公司',
-        city: '黄冈',
-        employees: 800,
-        createdDate: '2011-11-11 11:11:11',
-        boole: true
-      },
-      {
-        id: '7',
-        name: 'KBG 物业 YX 公司',
-        city: '赤壁',
-        employees: 400,
-        createdDate: '2016-04-30 23:56:00',
-        boole: false
-      },
-      {
-        id: '8',
-        name: '深圳市福德宝网络技术 YX 公司',
-        boole: true,
-        city: '厦门',
-        createdDate: '2016-06-03 13:53:25',
-        employees: 540
-      }
+    const _table = [
+      { company: 'GFD 有限责任公司', city: '广州', employees: 800, createdDate: '2014-04-30 00:56:00' },
+      { company: 'AWE 有限责任公司', city: '深圳', employees: 500, createdDate: '2015-05-01 01:01:01' },
+      { company: 'ASD 有限责任公司', city: '中山', employees: 200, createdDate: '2013-03-03 03:03:03' },
+      { company: 'ZXC 有限责任公司', city: '广州', employees: 1000, createdDate: '2012-02-02 02:02:02' },
+      { company: 'VBN 有限责任公司', city: '深圳', employees: 600, createdDate: '2011-01-01 01:01:01' },
+      { company: 'QWE 有限责任公司', city: '中山', employees: 700, createdDate: '2016-08-08 08:08:08' },
+      { company: 'RTY 有限责任公司', city: '广州', employees: 900, createdDate: '2015-09-09 09:09:09' },
+      { company: 'UIO 有限责任公司', city: '深圳', employees: 1100, createdDate: '2014-10-10 10:10:10' },
+      { company: 'HJK 有限责任公司', city: '中山', employees: 1200, createdDate: '2013-11-11 11:11:11' },
+      { company: 'WWW 有限责任公司', city: '深圳', employees: 300, createdDate: '2016-07-08 12:36:22' },
+      { company: 'RFV 有限责任公司', city: '中山', employees: 1300, createdDate: '2014-02-14 14:14:14' },
+      { company: 'TGB 有限责任公司', city: '广州', employees: 360, createdDate: '2013-01-13 13:13:13' },
+      { company: 'YHN 有限责任公司', city: '深圳', employees: 810, createdDate: '2012-12-12 12:12:12' },
+      { company: 'WSX 有限责任公司', city: '中山', employees: 800, createdDate: '2011-11-11 11:11:11' },
+      { company: 'KBG 有限责任公司', city: '深圳', employees: 400, createdDate: '2014-04-30 23:56:00' },
+      { company: 'SZB 有限责任公司', city: '深圳', employees: 1400, createdDate: '2016-06-03 13:53:25' }
     ]
-
     return {
-      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
+      server: new McpServer({ name: 'base-config', version: '1.0.0' }, {}),
+      sessionID: '',
+      tableData: _table,
+      queryCity: '',
+      options: Array.from(new Set(_table.map((item) => item.city))).map((city) => ({
+        label: city,
+        value: city
+      }))
     }
   },
-  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()
+
+    // 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'
+    })
+
+    this.sessionID = sessionId
+    window.$sessionId = this.sessionID
+
+    // 3、
+    await this.server.connect(transport)
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-ai-agent.cn.md b/examples/sites/demos/pc/app/grid/webdoc/grid-ai-agent.cn.md
deleted file mode 100644
index 50af58c043..0000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-ai-agent.cn.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid 表格
----
-
-# Grid 表格
-
-<div>表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。</div>
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-ai-agent.en.md b/examples/sites/demos/pc/app/grid/webdoc/grid-ai-agent.en.md
deleted file mode 100644
index f01c63ec0b..0000000000
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-ai-agent.en.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Grid Table
----
-
-# Grid Table
-
-<div>Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.</div>
diff --git a/examples/sites/demos/pc/menus.js b/examples/sites/demos/pc/menus.js
index 635e81b316..1f95d26254 100644
--- a/examples/sites/demos/pc/menus.js
+++ b/examples/sites/demos/pc/menus.js
@@ -175,7 +175,6 @@ export const cmpMenus = [
     'key': 'cmp-table-components',
     'children': [
       { 'nameCn': '基本用法', 'name': '', 'key': 'grid' },
-      { 'nameCn': 'AI智能体', 'name': '', 'key': 'grid-ai-agent' },
       { 'nameCn': '序号列', 'name': '', 'key': 'grid-serial-column' },
       { 'nameCn': '选中行', 'name': '', 'key': 'grid-operation-column' },
       { 'nameCn': '空数据', 'name': '', 'key': 'grid-empty' },
diff --git a/examples/sites/package.json b/examples/sites/package.json
index 9c6b8f1c79..a371447a49 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -56,6 +56,7 @@
     "@opentiny/vue-vite-import": "~1.2.0",
     "@unocss/reset": "0.38.2",
     "@vue/repl": "^2.5.5",
+    "@vue/shared": "^3.4.31",
     "@vueuse/core": "^12.7.0",
     "@vueuse/head": "0.7.13",
     "github-markdown-css": "~5.1.0",
diff --git a/examples/sites/src/router.js b/examples/sites/src/router.js
index 7cf86242cd..d16aa59e1e 100644
--- a/examples/sites/src/router.js
+++ b/examples/sites/src/router.js
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Layout from '@/views/layout/layout.vue'
 import { LANG_PATH_MAP, ZH_CN_LANG, DEFAULT_THEME } from './const'
+import { appData } from './tools/appData.js'
 
 const Components = () => import('@/views/components-doc/index.vue')
 const Docs = () => import('@/views/docs/docs.vue')
@@ -57,5 +58,7 @@ router.afterEach((to, from) => {
   if (to.meta.title) {
     document.title = to.meta.title
   }
+  // tiny-robot 通过路由,确定浮动区，是否显示AI按钮
+  appData.hasFloatRobot = to.path.endsWith('components/grid')
 })
 export { router }
diff --git a/examples/sites/src/tools/appData.js b/examples/sites/src/tools/appData.js
index 3163236e9b..24cda49855 100644
--- a/examples/sites/src/tools/appData.js
+++ b/examples/sites/src/tools/appData.js
@@ -9,7 +9,8 @@ const appData = reactive({
   lang: useAutoStore('local', LANG_KEY, ZH_CN_LANG),
   theme: useAutoStore('local', '_theme', 'light'),
   bpState: useMediaQuery([640, 1024, 1280]).matches, // 3点4区间， bp0,bp1,bp2,bp3
-  showTinyRobot: false
+  showTinyRobot: false,
+  hasFloatRobot: false
 })
 const isZhCn = computed(() => appData.lang === ZH_CN_LANG)
 const appFn = {
diff --git a/examples/sites/src/views/components-doc/common.vue b/examples/sites/src/views/components-doc/common.vue
index b85ef176f3..855dd35a12 100644
--- a/examples/sites/src/views/components-doc/common.vue
+++ b/examples/sites/src/views/components-doc/common.vue
@@ -9,13 +9,7 @@
       <slot name="header-right" />
     </template>
   </ComponentHeader>
-  <div
-    class="docs-content"
-    :class="{ 'docs-on-robot-show': show }"
-    id="doc-layout-scroller"
-    ref="scrollRef"
-    @scroll="onDocLayoutScroll"
-  >
+  <div class="docs-content" id="doc-layout-scroller" ref="scrollRef" @scroll="onDocLayoutScroll">
     <div class="ti-rel cmp-container">
       <div class="flex-horizontal docs-content-main">
         <div class="docs-tabs-wrap">
@@ -68,7 +62,11 @@
                 @jump-to-demo="jumpToDemo"
               ></api-docs>
             </tiny-tab-item>
+            <tiny-tab-item v-if="appData.hasFloatRobot" title="MCP" name="MCP">
+              <McpDocs :name="state.cmpId" />
+            </tiny-tab-item>
           </tiny-tabs>
+
           <slot name="main-right" />
         </div>
 
@@ -90,7 +88,7 @@
     </div>
     <div id="footer"></div>
   </div>
-  <robotChat v-show="appData.showTinyRobot"></robotChat>
+  <robotChat v-if="appData.showTinyRobot && appData.hasFloatRobot"></robotChat>
 </template>
 
 <script setup lang="ts">
@@ -106,6 +104,7 @@ import AsideAnchor from './components/anchor.vue'
 import ComponentHeader from './components/header.vue'
 import ComponentContributor from './components/contributor.vue'
 import ApiDocs from './components/api-docs.vue'
+import McpDocs from './components/mcp-docs.vue'
 import useTasksFinish from './composition/useTasksFinish'
 import { appData } from '../../tools/appData'
 
@@ -176,8 +175,10 @@ watch(
 onMounted(() => {
   loadPage()
   // 加载公共尾部
-  const common = new window.TDCommon(['#footer'], { allowDarkTheme: true })
-  common.renderFooter()
+  nextTick(() => {
+    const common = new window.TDCommon(['#footer'], { allowDarkTheme: true })
+    common.renderFooter()
+  })
   setScrollListener()
 })
 
@@ -445,12 +446,6 @@ const handleAnchorClick = (e, data) => {
 }
 
 defineExpose({ loadPage })
-
-onMounted(() => {
-  // tiny-robot 通过路由参数存在 mcp-robot, 则弹出对话容器
-  const hasRobot = router.currentRoute.value.fullPath.includes('grid-ai-agent')
-  appData.showTinyRobot = !!hasRobot
-})
 </script>
 
 <style lang="less" scoped>
diff --git a/examples/sites/src/views/components-doc/components/float-settings.vue b/examples/sites/src/views/components-doc/components/float-settings.vue
index c48662934f..d3284f589b 100644
--- a/examples/sites/src/views/components-doc/components/float-settings.vue
+++ b/examples/sites/src/views/components-doc/components/float-settings.vue
@@ -59,12 +59,21 @@
         </tiny-radio-group>
       </div>
       <template #reference>
-        <div
-          class="settings-btn style-settings-btn"
-          @click="demoStyleVisible = !demoStyleVisible"
-          @blur="demoStyleVisible = false"
-        >
-          <style-settings-icon class="settings-icon style-settings-icon"></style-settings-icon>
+        <div>
+          <div
+            v-if="appData.hasFloatRobot"
+            class="settings-btn style-settings-btn"
+            @click="appData.showTinyRobot = true"
+          >
+            <IconAi class="settings-icon style-settings-icon"></IconAi>
+          </div>
+          <div
+            class="settings-btn style-settings-btn"
+            @click="demoStyleVisible = !demoStyleVisible"
+            @blur="demoStyleVisible = false"
+          >
+            <style-settings-icon class="settings-icon style-settings-icon"></style-settings-icon>
+          </div>
         </div>
       </template>
     </tiny-popover>
@@ -92,8 +101,10 @@ import { iconUpWard } from '@opentiny/vue-icon'
 import { debounce } from '@opentiny/utils'
 import { i18nByKey, useApiMode, useTemplateMode } from '@/tools'
 import useTheme from '@/tools/useTheme'
+import { appData } from '@/tools/appData.js'
 import { router } from '@/router'
 import useStyleSettings from '@/tools/useStyleSettings'
+import { IconAi } from '@opentiny/tiny-robot-svgs'
 
 // import ThemeSettingsIcon from '@/assets/images/theme-settings.svg'
 import StyleSettingsIcon from '@/assets/images/style-settings.svg'
@@ -106,6 +117,7 @@ export default defineComponent({
     TinyRadioGroup: RadioGroup,
     IconUpWard: iconUpWard(),
     TinyPopover: Popover,
+    IconAi,
     // ThemeSettingsIcon,
     StyleSettingsIcon
   },
@@ -249,7 +261,8 @@ export default defineComponent({
       i18nByKey,
       apiModeState,
       currentThemeKey,
-      floatSettings
+      floatSettings,
+      appData
     }
   }
 })
diff --git a/examples/sites/src/views/components-doc/components/mcp-docs.vue b/examples/sites/src/views/components-doc/components/mcp-docs.vue
new file mode 100644
index 0000000000..4c08ff8f5a
--- /dev/null
+++ b/examples/sites/src/views/components-doc/components/mcp-docs.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="mcp-list">
+    <div class="mcp-title">
+      <h2>{{ capName }} 组件的 MCP 工具</h2>
+    </div>
+    <tiny-grid :data="mcpInfo" row-id="name">
+      <tiny-grid-column field="name" title="名称" width="180"> </tiny-grid-column>
+      <tiny-grid-column field="param" title="参数类型" width="150"> </tiny-grid-column>
+      <tiny-grid-column field="desc" title="工具描述"> </tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
+import { camelize, capitalize } from '@vue/shared'
+import { onMounted, computed } from 'vue'
+
+const props = defineProps({
+  name: String
+})
+
+const mcpTools = getTinyVueMcpConfig({ t: null })
+const capName = computed(() => capitalize(camelize(props.name)))
+
+const mcpInfo = computed(() => {
+  const schema = mcpTools.components[capName.value]?.paramsSchema
+  if (schema) {
+    return Object.keys(schema).map((name) => {
+      const item = schema[name]
+      return {
+        name,
+        param: item._def?.innerType?._def?.typeName || '',
+        desc: item._def?.description || ''
+      }
+    })
+  }
+  return null
+})
+
+onMounted(() => {})
+</script>
+
+<style scoped lang="less">
+.mcp-list {
+  padding-bottom: 150px;
+}
+.mcp-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 26px;
+  margin-bottom: 26px;
+}
+</style>
diff --git a/examples/sites/src/views/components-doc/tiny-robot-chat.vue b/examples/sites/src/views/components-doc/tiny-robot-chat.vue
index 5d0749003e..6ef89550b6 100644
--- a/examples/sites/src/views/components-doc/tiny-robot-chat.vue
+++ b/examples/sites/src/views/components-doc/tiny-robot-chat.vue
@@ -4,9 +4,7 @@
     <div v-if="messages.length === 0">
       <tr-welcome title="智能助手" description="您好，我是Opentiny AI智能助手" :icon="welcomeIcon">
         <template #footer>
-          <div class="welcome-footer">
-            <!-- <span>根据相关法律法规要求，您需要先 <a>登录</a>，若没有帐号，您可前往 <a>注册</a></span> -->
-          </div>
+          <div class="welcome-footer"></div>
         </template>
       </tr-welcome>
       <tr-prompts
@@ -39,13 +37,6 @@
       </div>
     </template>
   </tr-container>
-  <div class="tr-toggle" v-if="!appData.showTinyRobot" title="AI智能助手" @click="appData.showTinyRobot = true">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xml:space="preserve" class="tiny-svg" isSvg="true">
-      <path
-        d="m5.84 8.78-.09-.1a1.06 1.06 0 0 1 .09-1.46L9.6 3.65l.07-.06c.21-.13.49-.12.67.06.21.2.21.51 0 .71L6.58 7.93l-.02.03c-.02.04-.01.08.02.11l3.76 3.57.06.07c.14.19.12.46-.06.64-.21.2-.54.2-.74 0L5.84 8.78z"
-      ></path>
-    </svg>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -130,29 +121,4 @@ const {
   height: 600px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
 }
-
-.tr-toggle {
-  position: absolute;
-  cursor: pointer;
-  right: 30px;
-  top: 50%;
-  transform: translateX(50%) translateY(-50%);
-  z-index: 9;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  font-size: 18px;
-  line-height: 18px;
-  background-color: var(--tv-TreeMenu-toggle-button-background-color);
-  box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.12);
-  border: 1px solid var(--tv-TreeMenu-border-color);
-  transform: translateX(100%) translateY(-50%);
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-
-  svg {
-    margin-top: 2px;
-    fill: #808080;
-  }
-}
 </style>