diff --git a/designer-demo/public/mock/bundle.json b/designer-demo/public/mock/bundle.json
index abb90ede46..21027e21f3 100644
--- a/designer-demo/public/mock/bundle.json
+++ b/designer-demo/public/mock/bundle.json
@@ -10970,6 +10970,38 @@
                     "labelPosition": "top"
                   }
                 ]
+              },
+              {
+                "label": {
+                  "zh_CN": "MCP 配置"
+                },
+                "description": {
+                  "zh_CN": "MCP 配置"
+                },
+                "content": [
+                  {
+                    "property": "tiny_mcp_config",
+                    "label": {
+                      "text": {
+                        "zh_CN": "组件MCP化配置"
+                      }
+                    },
+                    "required": true,
+                    "readOnly": false,
+                    "disabled": false,
+                    "cols": 12,
+                    "widget": {
+                      "component": "CodeConfigurator",
+                      "props": {
+                        "language": "json"
+                      }
+                    },
+                    "description": {
+                      "zh_CN": "设置表格的基础 mcp 信息"
+                    },
+                    "labelPosition": "top"
+                  }
+                ]
               }
             ],
             "events": {
diff --git a/mockServer/src/mock/get/app-center/v1/apps/schema/1.json b/mockServer/src/mock/get/app-center/v1/apps/schema/1.json
index 870bd4326c..71211ce19a 100644
--- a/mockServer/src/mock/get/app-center/v1/apps/schema/1.json
+++ b/mockServer/src/mock/get/app-center/v1/apps/schema/1.json
@@ -1726,7 +1726,7 @@
         "package": "@opentiny/vue",
         "exportName": "CarouselItem",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyCheckboxButton",
@@ -1740,14 +1740,14 @@
         "package": "@opentiny/vue",
         "exportName": "Tree",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyPopover",
         "package": "@opentiny/vue",
         "exportName": "Popover",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyTooltip",
@@ -1761,21 +1761,21 @@
         "package": "@opentiny/vue",
         "exportName": "Col",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyDropdownItem",
         "package": "@opentiny/vue",
         "exportName": "DropdownItem",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyPager",
         "package": "@opentiny/vue",
         "exportName": "Pager",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyPlusAccessdeclined",
@@ -1817,14 +1817,14 @@
         "package": "@opentiny/vue",
         "exportName": "Row",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyFormItem",
         "package": "@opentiny/vue",
         "exportName": "FormItem",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyAlert",
@@ -1838,21 +1838,21 @@
         "package": "@opentiny/vue",
         "exportName": "Input",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyTabs",
         "package": "@opentiny/vue",
         "exportName": "Tabs",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyDropdownMenu",
         "package": "@opentiny/vue",
         "exportName": "DropdownMenu",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyDialogBox",
@@ -1866,56 +1866,56 @@
         "package": "@opentiny/vue",
         "exportName": "Switch",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyTimeLine",
         "package": "@opentiny/vue",
         "exportName": "TimeLine",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyTabItem",
         "package": "@opentiny/vue",
         "exportName": "TabItem",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyRadio",
         "package": "@opentiny/vue",
         "exportName": "Radio",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyForm",
         "package": "@opentiny/vue",
         "exportName": "Form",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyGrid",
         "package": "@opentiny/vue",
         "exportName": "Grid",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyGridColumn",
         "package": "@opentiny/vue",
         "exportName": "TinyGridColumn",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyNumeric",
         "package": "@opentiny/vue",
         "exportName": "Numeric",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyCheckboxGroup",
@@ -1929,49 +1929,49 @@
         "package": "@opentiny/vue",
         "exportName": "Checkbox",
         "destructuring": true,
-        "version": "3.20.0"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinySelect",
         "package": "@opentiny/vue",
         "exportName": "Select",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyButton",
         "package": "@opentiny/vue",
         "exportName": "Button",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyButtonGroup",
         "package": "@opentiny/vue",
         "exportName": "ButtonGroup",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyCarousel",
         "package": "@opentiny/vue",
         "exportName": "Carousel",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyPopeditor",
         "package": "@opentiny/vue",
         "exportName": "Popeditor",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyDatePicker",
         "package": "@opentiny/vue",
         "exportName": "DatePicker",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyDropdown",
@@ -1985,35 +1985,35 @@
         "package": "@opentiny/vue",
         "exportName": "ChartHistogram",
         "destructuring": true,
-        "version": "0.1.16"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyCollapse",
         "package": "@opentiny/vue",
         "exportName": "Collapse",
         "destructuring": true,
-        "version": "3.20.0"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyCollapseItem",
         "package": "@opentiny/vue",
         "exportName": "CollapseItem",
         "destructuring": true,
-        "version": "3.20.0"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyBreadcrumb",
         "package": "@opentiny/vue",
         "exportName": "Breadcrumb",
         "destructuring": true,
-        "version": "3.20.0"
+        "version": "3.26.0"
       },
       {
         "componentName": "TinyBreadcrumbItem",
         "package": "@opentiny/vue",
         "exportName": "BreadcrumbItem",
         "destructuring": true,
-        "version": "3.20.0"
+        "version": "3.26.0"
       },
       {
         "componentName": "ElInput",
diff --git a/packages/toolbars/generate-code/src/FileSelector.vue b/packages/toolbars/generate-code/src/FileSelector.vue
index 9158c85ce6..b4c72d0164 100644
--- a/packages/toolbars/generate-code/src/FileSelector.vue
+++ b/packages/toolbars/generate-code/src/FileSelector.vue
@@ -9,6 +9,11 @@
     @close="$emit('cancel')"
     @open="openDialog"
   >
+    <div class="mcp-switch-container">
+      <span class="mcp-switch-label">启用 MCP 集成：</span>
+      <tiny-switch v-model="mcpEnabled" @change="handleMcpChange"></tiny-switch>
+      <span class="mcp-switch-tip">（开启后将生成 MCP 相关配置和工具代码）</span>
+    </div>
     <div class="dialog-grid">
       <tiny-grid
         :data="tableData"
@@ -35,8 +40,8 @@
 
 <script lang="ts">
 /* metaService: engine.toolbars.generate-code.FileSelector */
-import { DialogBox, Button, Grid, GridColumn } from '@opentiny/vue'
-import { reactive, computed, ref, nextTick } from 'vue'
+import { DialogBox, Button, Grid, GridColumn, Switch } from '@opentiny/vue'
+import { computed, ref, nextTick, watch, reactive } from 'vue'
 import { useNotify } from '@opentiny/tiny-engine-meta-register'
 
 export default {
@@ -44,16 +49,18 @@ export default {
     TinyDialogBox: DialogBox,
     TinyButton: Button,
     TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGridColumn: GridColumn,
+    TinySwitch: Switch
   },
   props: {
     visible: { type: Boolean, default: false },
     data: {
       type: Array,
       default: () => []
-    }
+    },
+    enableMcp: { type: Boolean, default: false }
   },
-  emits: ['cancel', 'confirm'],
+  emits: ['cancel', 'confirm', 'update:enableMcp'],
   setup(props, { emit }) {
     const getTableTreeData = (data: any[]) => {
       const res: any[] = []
@@ -86,6 +93,33 @@ export default {
     const gridRef = ref<any>(null)
 
     const state = reactive({})
+    const mcpEnabled = ref(props.enableMcp)
+
+    // 监听 props.enableMcp 的变化，同步到本地状态
+    watch(
+      () => props.enableMcp,
+      (newVal) => {
+        mcpEnabled.value = newVal
+      }
+    )
+
+    // 监听 props.data 的变化，重新选中所有项
+    watch(
+      () => props.data,
+      () => {
+        nextTick(() => {
+          if (gridRef.value) {
+            gridRef.value.setAllTreeExpansion(true)
+            gridRef.value.setAllSelection(true)
+          }
+        })
+      },
+      { deep: true }
+    )
+
+    const handleMcpChange = (value: boolean) => {
+      emit('update:enableMcp', value)
+    }
 
     const confirm = () => {
       const selectedData = gridRef.value.getSelectRecords().filter((item: { children: any }) => !item.children)
@@ -102,9 +136,14 @@ export default {
     }
 
     const openDialog = () => {
+      // 同步 props 到本地状态
+      mcpEnabled.value = props.enableMcp
+
       nextTick(() => {
-        gridRef.value.setAllTreeExpansion(true)
-        gridRef.value.setAllSelection(true)
+        if (gridRef.value) {
+          gridRef.value.setAllTreeExpansion(true)
+          gridRef.value.setAllSelection(true)
+        }
       })
     }
 
@@ -112,14 +151,36 @@ export default {
       state,
       tableData,
       gridRef,
+      mcpEnabled,
       confirm,
-      openDialog
+      openDialog,
+      handleMcpChange
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
+.mcp-switch-container {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  margin-bottom: 12px;
+  border-bottom: 1px solid var(--te-toolbars-generate-code-border-color, #ddd);
+
+  .mcp-switch-label {
+    font-size: 14px;
+    color: var(--te-toolbars-generate-code-text-color);
+    margin-right: 8px;
+  }
+
+  .mcp-switch-tip {
+    font-size: 12px;
+    color: var(--te-toolbars-generate-code-text-color-secondary, #999);
+    margin-left: 8px;
+  }
+}
+
 .dialog-box {
   :deep(.tiny-dialog-box__content) {
     background-color: var(--te-toolbars-generate-code-bg-color);
diff --git a/packages/toolbars/generate-code/src/Main.vue b/packages/toolbars/generate-code/src/Main.vue
index a5d34345ce..ee5f6b84c5 100644
--- a/packages/toolbars/generate-code/src/Main.vue
+++ b/packages/toolbars/generate-code/src/Main.vue
@@ -5,6 +5,8 @@
         <generate-file-selector
           :visible="state.showDialogbox"
           :data="state.saveFilesInfo"
+          :enable-mcp="state.enableMcp"
+          @update:enable-mcp="handleMcpToggle"
           @confirm="confirm"
           @cancel="cancel"
         ></generate-file-selector>
@@ -50,7 +52,9 @@ export default {
       dirHandle: null,
       generating: false,
       showDialogbox: false,
-      saveFilesInfo: []
+      saveFilesInfo: [],
+      enableMcp: false, // MCP 开关状态
+      appSchemaCache: null // 缓存应用 schema，用于重新生成代码
     })
 
     const getParams = () => {
@@ -181,7 +185,19 @@ export default {
         }
       }
 
-      const res = await generateAppCode(appSchema)
+      // 缓存 appSchema，用于后续根据 MCP 开关重新生成
+      state.appSchemaCache = appSchema
+
+      // 根据 MCP 开关状态配置出码选项
+      const codeGenOptions = {
+        pluginConfig: {
+          mcp: {
+            enabled: state.enableMcp
+          }
+        }
+      }
+
+      const res = await generateAppCode(appSchema, codeGenOptions)
 
       const { genResult = [] } = res || {}
       const fileRes = genResult.map(({ fileContent, fileName, path, fileType }) => {
@@ -279,11 +295,76 @@ export default {
       state.saveFilesInfo = []
     }
 
+    // 当 MCP 开关切换时重新生成代码
+    const handleMcpToggle = async (enabled) => {
+      state.enableMcp = enabled
+
+      // 如果没有缓存的 schema，说明还没有生成过代码
+      if (!state.appSchemaCache) {
+        return
+      }
+
+      try {
+        useNotify({ type: 'info', title: '正在重新生成代码...' })
+
+        // 深拷贝 schema，避免生成过程修改原始缓存
+        const schemaForGeneration = JSON.parse(JSON.stringify(state.appSchemaCache))
+
+        // 根据新的 MCP 开关状态重新生成代码
+        const codeGenOptions = {
+          pluginConfig: {
+            mcp: {
+              enabled: state.enableMcp
+            }
+          }
+        }
+
+        const res = await generateAppCode(schemaForGeneration, codeGenOptions)
+        const { genResult = [] } = res || {}
+
+        const fileRes = genResult.map(({ fileContent, fileName, path, fileType }) => {
+          const slash = path.endsWith('/') || path === '.' ? '' : '/'
+          let filePath = `${path}${slash}`
+          if (filePath.startsWith('./')) {
+            filePath = filePath.slice(2)
+          }
+          if (filePath.startsWith('.')) {
+            filePath = filePath.slice(1)
+          }
+          if (filePath.startsWith('/')) {
+            filePath = filePath.slice(1)
+          }
+
+          return {
+            fileContent,
+            filePath: `${filePath}${fileName}`,
+            fileType
+          }
+        })
+
+        // 更新文件列表
+        state.saveFilesInfo = fileRes
+
+        useNotify({
+          type: 'success',
+          title: '代码重新生成完成',
+          message: `已${enabled ? '启用' : '禁用'} MCP 集成，共 ${fileRes.length} 个文件`
+        })
+      } catch (error) {
+        useNotify({
+          type: 'error',
+          title: '代码重新生成失败',
+          message: error?.message || error
+        })
+      }
+    }
+
     return {
       state,
       generate,
       confirm,
-      cancel
+      cancel,
+      handleMcpToggle
     }
   }
 }
diff --git a/packages/vue-generator/src/generator/generateApp.js b/packages/vue-generator/src/generator/generateApp.js
index e4b360190c..906169d663 100644
--- a/packages/vue-generator/src/generator/generateApp.js
+++ b/packages/vue-generator/src/generator/generateApp.js
@@ -10,7 +10,8 @@ import {
   formatCodePlugin,
   parseSchemaPlugin,
   genGlobalState,
-  appendElePlusStylePlugin
+  appendElePlusStylePlugin,
+  genMcpPlugin
 } from '../plugins'
 import CodeGenerator from './codeGenerator'
 
@@ -32,7 +33,8 @@ export function generateApp(config = {}) {
     router: genRouterPlugin(config.pluginConfig?.router || {}),
     utils: genUtilsPlugin(config.pluginConfig?.utils || {}),
     formatCode: formatCodePlugin(config.pluginConfig?.formatCode || {}),
-    parseSchema: parseSchemaPlugin(config.pluginConfig?.parseSchema || {})
+    parseSchema: parseSchemaPlugin(config.pluginConfig?.parseSchema || {}),
+    mcp: genMcpPlugin(config.pluginConfig?.mcp || {})
   }
 
   const { customPlugins = {} } = config
@@ -48,6 +50,7 @@ export function generateApp(config = {}) {
     formatCode,
     parseSchema,
     globalState,
+    mcp,
     transformStart = [],
     transform = [],
     transformEnd = []
@@ -61,7 +64,8 @@ export function generateApp(config = {}) {
     i18n: i18n || defaultPlugins.i18n,
     router: router || defaultPlugins.router,
     utils: utils || defaultPlugins.utils,
-    globalState: globalState || defaultPlugins.globalState
+    globalState: globalState || defaultPlugins.globalState,
+    mcp: mcp || defaultPlugins.mcp
   }
 
   // 默认支持 element-plus 注入样式
@@ -75,7 +79,10 @@ export function generateApp(config = {}) {
       transform: [...Object.values(mergeWithDefaultPlugin), ...transform],
       transformEnd: [formatCode || defaultPlugins.formatCode, ...transformEnd]
     },
-    context: config?.customContext || {}
+    context: {
+      ...(config?.customContext || {}),
+      pluginConfig: config?.pluginConfig || {}
+    }
   })
 
   return codeGenInstance
diff --git a/packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js b/packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js
index 075bb67ab6..79860ce111 100644
--- a/packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js
+++ b/packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js
@@ -24,6 +24,7 @@ import {
   handleJsxModelValueUpdate,
   handleJSFunctionAttrHook
 } from './generateAttribute'
+import { handleTinyMcpConfigAttrHook } from '@/plugins/genMcpPlugin'
 import {
   GEN_SCRIPT_HOOKS,
   genScriptByHook,
@@ -227,6 +228,7 @@ export const genSFCWithDefaultPlugin = (schema, componentsMap, config = {}, next
     handleSlotBindAttrHook,
     handleAttrKeyHook,
     handlePrimitiveAttributeHook,
+    handleTinyMcpConfigAttrHook,
     handleExpressionAttrHook,
     handleJSFunctionAttrHook,
     handleI18nAttrHook,
diff --git a/packages/vue-generator/src/plugins/genBlockPlugin.js b/packages/vue-generator/src/plugins/genBlockPlugin.js
index 8798470174..ae4f8df7e5 100644
--- a/packages/vue-generator/src/plugins/genBlockPlugin.js
+++ b/packages/vue-generator/src/plugins/genBlockPlugin.js
@@ -18,7 +18,7 @@ function genBlockPlugin(options = {}) {
      * @param {import('@opentiny/tiny-engine-dsl-vue').IAppSchema} schema
      * @returns
      */
-    run(schema) {
+    run(schema, context) {
       const blocks = schema?.blockSchema || []
       const componentsMap = schema?.componentsMap
 
@@ -28,8 +28,16 @@ function genBlockPlugin(options = {}) {
 
       const resBlocks = []
 
+      // 从上下文中获取 MCP 配置
+      const mcpEnabled = context?.pluginConfig?.mcp?.enabled || false
+
       for (const block of blocks) {
-        const res = genSFCWithDefaultPlugin(block, componentsMap, { blockRelativePath: './', ...sfcConfig })
+        // 将 MCP 配置传递给 SFC 生成器
+        const res = genSFCWithDefaultPlugin(block, componentsMap, {
+          blockRelativePath: './',
+          ...sfcConfig,
+          mcpEnabled
+        })
 
         resBlocks.push({
           fileType: 'vue',
diff --git a/packages/vue-generator/src/plugins/genDependenciesPlugin.js b/packages/vue-generator/src/plugins/genDependenciesPlugin.js
index 008727bdbc..d132ef1f61 100644
--- a/packages/vue-generator/src/plugins/genDependenciesPlugin.js
+++ b/packages/vue-generator/src/plugins/genDependenciesPlugin.js
@@ -21,7 +21,7 @@ const getComponentsSet = (schema) => {
   return new Set(allComponents)
 }
 
-const parseSchema = (schema) => {
+const parseSchema = (schema, mcpConfig) => {
   const { utils = [], componentsMap = [], packages = [] } = schema
   const resDeps = {}
   const componentsSet = getComponentsSet(schema)
@@ -54,6 +54,15 @@ const parseSchema = (schema) => {
   // 处理内置 Icon，如果使用了 tinyvue 组件，则默认添加 @opentiny/vue-icon 依赖，且依赖与 @opentiny/vue 依赖版本一致
   if (resDeps['@opentiny/vue']) {
     resDeps['@opentiny/vue-icon'] = resDeps['@opentiny/vue']
+    resDeps['@opentiny/vue-common'] = resDeps['@opentiny/vue']
+  }
+
+  // 只有在 MCP 明确启用时才添加相关依赖
+  if (mcpConfig && mcpConfig.enabled === true) {
+    resDeps['@opentiny/next-remoter'] = '0.0.2'
+    resDeps['@opentiny/next-sdk'] = '^0.1.0'
+    resDeps['@opentiny/tiny-robot'] = '^0.3.0-alpha.16'
+    resDeps['@opentiny/tiny-vue-mcp'] = '~0.0.3'
   }
 
   return resDeps
@@ -72,8 +81,10 @@ function genDependenciesPlugin(options = {}) {
      * @param {import('@opentiny/tiny-engine-dsl-vue').IAppSchema} schema
      * @returns
      */
-    run(schema) {
-      const dependencies = parseSchema(schema)
+    run(schema, context) {
+      // 从上下文中获取 MCP 配置
+      const mcpConfig = context?.pluginConfig?.mcp
+      const dependencies = parseSchema(schema, mcpConfig)
       const originPackageItem = this.getFile(path, fileName)
 
       if (!originPackageItem) {
diff --git a/packages/vue-generator/src/plugins/genMcpPlugin.js b/packages/vue-generator/src/plugins/genMcpPlugin.js
new file mode 100644
index 0000000000..bd247a0d40
--- /dev/null
+++ b/packages/vue-generator/src/plugins/genMcpPlugin.js
@@ -0,0 +1,838 @@
+import { mergeOptions } from '../utils/mergeOptions'
+import { INSERT_POSITION, JS_EXPRESSION } from '../constant'
+import mcpBaseTemplate from '../templates/vue-template/templateFiles/src/mcp/base.ts'
+import mcpServerTemplate from '../templates/vue-template/templateFiles/src/mcp/server.ts'
+import mcpNavigationToolsTemplate from '../templates/vue-template/templateFiles/src/mcp/tools/navigationTools.ts'
+import mcpImportsTemplate from '../templates/vue-template/templateFiles/src/mcp/App.vue.mcp-imports.ts'
+import mcpSetupTemplate from '../templates/vue-template/templateFiles/src/mcp/App.vue.mcp-setup.ts'
+import mcpTemplateTemplate from '../templates/vue-template/templateFiles/src/mcp/App.vue.mcp-template.ts'
+import mcpStyleTemplate from '../templates/vue-template/templateFiles/src/mcp/App.vue.mcp-style.ts'
+import mcpOnMountedTemplate from '../templates/vue-template/templateFiles/src/mcp/App.vue.mcp-onMounted.ts'
+
+const defaultOption = {
+  enabled: false, // 默认禁用 MCP，用户需要显式启用
+  agentRoot: 'https://agent.opentiny.design/api/v1/webmcp-trial/',
+  sessionId: '78b66563-95c0-4839-8007-e8af634dd658',
+  capabilities: {
+    prompts: { listChanged: true },
+    resources: { subscribe: true, listChanged: true },
+    tools: { listChanged: true },
+    completions: {},
+    logging: {}
+  },
+  tools: {
+    navigation: true,
+    application: true
+  },
+  customTools: []
+}
+
+/**
+ * 提取路由信息
+ * @param {Array} pageSchema 页面模式数组
+ * @returns {Array} 路由列表
+ */
+function extractRoutes(pageSchema) {
+  const routes = pageSchema
+    .filter((page) => page.meta && (page.meta.route || page.meta.router))
+    .map((page) => {
+      const routeField = page.meta.route || page.meta.router
+      const routePath = routeField.startsWith('/') ? routeField.slice(1) : routeField
+      return routePath || 'home'
+    })
+
+  // 如果没有路由，添加默认的 home 路由
+  if (routes.length === 0) {
+    routes.push('home')
+  }
+
+  return routes
+}
+
+/**
+ * 生成导航工具代码（使用模板）
+ * @param {Array} pageSchema 页面模式数组
+ * @returns {string} 导航工具代码
+ */
+function generateNavigationTools(pageSchema) {
+  const routes = extractRoutes(pageSchema)
+  return mcpNavigationToolsTemplate(null, { routes })
+}
+
+/**
+ * 生成应用程序特定工具代码
+ * @param {Object} schema 应用程序模式
+ * @returns {string} 应用程序工具代码
+ */
+function generateApplicationTools(schema) {
+  // 基于全局状态和数据源生成自定义工具
+  const globalStates = schema.globalState || []
+
+  let toolsCode = `import { z } from "@opentiny/next-sdk"
+import type { WebMcpServer } from "@opentiny/next-sdk"`
+
+  // 为每个全局状态生成工具
+  globalStates.forEach((state) => {
+    if (state.id && state.state) {
+      toolsCode += `
+import { use${state.id.charAt(0).toUpperCase() + state.id.slice(1)}Store } from '../../stores/${state.id}'`
+    }
+  })
+
+  toolsCode += `
+
+export function registerApplicationTools(server: WebMcpServer) {`
+
+  // 为每个全局状态生成管理工具
+  globalStates.forEach((state) => {
+    if (state.id && state.state) {
+      const storeName = state.id.charAt(0).toUpperCase() + state.id.slice(1)
+      const stateKeys = Object.keys(state.state)
+
+      toolsCode += `
+  const ${state.id}Store = use${storeName}Store()
+
+  server.registerTool(
+    "get-${state.id}-state",
+    {
+      title: "获取${storeName}状态",
+      description: "获取当前${storeName}的状态信息",
+      inputSchema: {},
+    },
+    async () => {
+      try {
+        return {
+          content: [{
+            type: "text",
+            text: \`${storeName}状态：\${JSON.stringify(${state.id}Store.$state, null, 2)}\`
+          }],
+        }
+      } catch (error) {
+        return {
+          content: [{
+            type: "text",
+            text: \`获取${storeName}状态失败：\${error}\`
+          }],
+        }
+      }
+    }
+  )`
+
+      // 为状态中的每个属性生成更新工具
+      stateKeys.forEach((key) => {
+        toolsCode += `
+
+  server.registerTool(
+    "update-${state.id}-${key}",
+    {
+      title: "更新${storeName}的${key}",
+      description: "更新${storeName}状态中的${key}属性",
+      inputSchema: {
+        value: z.any().describe("新的${key}值"),
+      },
+    },
+    async ({ value }: { value: any }) => {
+      try {
+        ${state.id}Store.${key} = value
+        return {
+          content: [{
+            type: "text",
+            text: \`${storeName}的${key}已更新为：\${JSON.stringify(value)}\`
+          }],
+        }
+      } catch (error) {
+        return {
+          content: [{
+            type: "text",
+            text: \`更新${storeName}的${key}失败：\${error}\`
+          }],
+        }
+      }
+    }
+  )`
+      })
+    }
+  })
+
+  toolsCode += `
+}`
+
+  return toolsCode
+}
+
+/**
+ * 工具生成器注册表（配置驱动）
+ * 新增工具只需在此添加对应的生成函数
+ */
+const toolGenerators = {
+  navigation: generateNavigationTools,
+  application: generateApplicationTools
+}
+
+/**
+ * 生成 MCP 服务器文件（使用模板）
+ * @param {Array} enabledTools 启用的工具类别
+ * @returns {string} MCP 服务器代码
+ */
+function generateMcpServer(enabledTools) {
+  return mcpServerTemplate(null, { enabledTools })
+}
+
+/**
+ * 生成基础配置文件（使用模板）
+ * @param {Object} config MCP 配置
+ * @returns {string} 基础配置代码
+ */
+function generateBaseConfig(config) {
+  return mcpBaseTemplate(null, {
+    agentRoot: config.agentRoot,
+    sessionId: config.sessionId
+  })
+}
+
+/**
+ * 修改 main.ts/main.js 文件以包含 MCP 样式
+ * @param {string} originalContent 原始 main.ts/main.js 内容
+ * @returns {string} 修改后的内容
+ */
+function modifyMainTs(originalContent) {
+  // 检查是否已经包含两个样式导入
+  const hasTinyRobot = originalContent.includes('@opentiny/tiny-robot/dist/style.css')
+  const hasNextRemoter = originalContent.includes('@opentiny/next-remoter/dist/style.css')
+
+  // 如果两个都已存在，直接返回
+  if (hasTinyRobot && hasNextRemoter) {
+    return originalContent
+  }
+
+  // 查找第一个 import 语句的位置
+  const lines = originalContent.split('\n')
+  let insertIndex = 0
+
+  // 找到第一个非注释的 import 语句后插入
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].trim()
+    if (line.startsWith('import ') && !line.includes('//')) {
+      insertIndex = i + 1
+      break
+    }
+  }
+
+  // 只插入缺失的样式导入
+  if (!hasTinyRobot) {
+    lines.splice(insertIndex, 0, "import '@opentiny/tiny-robot/dist/style.css'")
+    insertIndex++ // 更新插入位置
+  }
+
+  if (!hasNextRemoter) {
+    lines.splice(insertIndex, 0, "import '@opentiny/next-remoter/dist/style.css'")
+  }
+
+  return lines.join('\n')
+}
+
+/**
+ * 辅助函数：添加必要的 imports
+ * @param {string} newScript 新脚本内容
+ * @param {string} existingScript 现有脚本内容
+ * @returns {string} 修改后的脚本
+ */
+function addRequiredImports(newScript, existingScript) {
+  if (!existingScript.includes('provide')) {
+    newScript = `import { provide, onMounted } from "vue";\n${newScript}`
+  } else if (!existingScript.includes('onMounted')) {
+    newScript = newScript.replace('import { provide', 'import { provide, onMounted')
+  }
+
+  if (!existingScript.includes('useRouter')) {
+    newScript = `import { useRouter } from "vue-router";\n${newScript}`
+  }
+
+  return newScript
+}
+
+/**
+ * 辅助函数：添加或修改 onMounted
+ * @param {string} newScript 新脚本内容
+ * @param {string} existingScript 现有脚本内容
+ * @param {string} mcpOnMountedCode MCP onMounted 代码
+ * @returns {string} 修改后的脚本
+ */
+function addOrModifyOnMounted(newScript, existingScript, mcpOnMountedCode) {
+  if (existingScript.includes('onMounted(')) {
+    // 已有 onMounted，在其中添加 MCP 初始化
+    newScript = newScript.replace(/onMounted\(\(\) => \{([\s\S]*?)\}\)/, (_, content) => {
+      return `onMounted(() => {${content}\n${mcpOnMountedCode}\n})`
+    })
+  } else {
+    // 没有 onMounted，添加新的
+    newScript += `\n\nonMounted(() => {\n${mcpOnMountedCode}\n});`
+  }
+  return newScript
+}
+
+/**
+ * 辅助函数：添加 MCP 模板
+ * @param {string} content 内容
+ * @param {string} mcpTemplate MCP 模板代码
+ * @returns {string} 修改后的内容
+ */
+function addMcpTemplate(content, mcpTemplate) {
+  if (!content.includes('<TinyRemoter')) {
+    content = content.replace('</template>', `${mcpTemplate}\n  </template>`)
+  }
+  return content
+}
+
+/**
+ * 辅助函数：添加 MCP 样式
+ * @param {string} content 内容
+ * @param {string} mcpStyle MCP 样式代码
+ * @returns {string} 修改后的内容
+ */
+function addMcpStyle(content, mcpStyle) {
+  if (content.includes('<style')) {
+    content = content.replace(/<\/style>/, `${mcpStyle}\n</style>`)
+  } else {
+    content += `\n\n<style scoped>${mcpStyle}\n</style>`
+  }
+  return content
+}
+
+/**
+ * 辅助函数：创建新的 script setup
+ * @param {string} originalContent 原始内容
+ * @param {string} mcpImports MCP imports
+ * @param {string} mcpSetup MCP setup 代码
+ * @param {string} mcpTemplate MCP 模板
+ * @param {string} mcpStyle MCP 样式
+ * @param {string} mcpOnMountedCode MCP onMounted 代码
+ * @returns {string} 修改后的内容
+ */
+function createNewScriptSetup(originalContent, mcpImports, mcpSetup, mcpTemplate, mcpStyle, mcpOnMountedCode) {
+  const mcpScript = `<script setup lang="ts">
+${mcpImports}
+import { useRouter } from "vue-router";
+import { I18nInjectionKey } from 'vue-i18n'
+import { provide, onMounted } from 'vue'
+import i18n from './i18n'
+
+provide(I18nInjectionKey, i18n)
+
+const router = useRouter();
+${mcpSetup}
+
+onMounted(() => {
+${mcpOnMountedCode}
+});
+</script>`
+
+  let modifiedContent = originalContent.replace(/<template>/, `${mcpScript}\n\n<template>`)
+  modifiedContent = addMcpTemplate(modifiedContent, mcpTemplate)
+  modifiedContent = addMcpStyle(modifiedContent, mcpStyle)
+
+  return modifiedContent
+}
+
+/**
+ * 辅助函数：修改已有的 script setup
+ * @param {string} originalContent 原始内容
+ * @param {Object} scriptSetupMatch script setup 匹配结果
+ * @param {string} mcpImports MCP imports
+ * @param {string} mcpSetup MCP setup 代码
+ * @param {string} mcpTemplate MCP 模板
+ * @param {string} mcpStyle MCP 样式
+ * @param {string} mcpOnMountedCode MCP onMounted 代码
+ * @returns {string} 修改后的内容
+ */
+function modifyExistingScriptSetup(
+  originalContent,
+  scriptSetupMatch,
+  mcpImports,
+  mcpSetup,
+  mcpTemplate,
+  mcpStyle,
+  mcpOnMountedCode
+) {
+  const existingScript = scriptSetupMatch[1]
+  let newScript = existingScript
+
+  // 添加必要的 imports
+  newScript = addRequiredImports(newScript, existingScript)
+  newScript = `${mcpImports}\n${newScript}`
+
+  // 添加 router 变量（如果不存在）
+  if (!existingScript.includes('const router')) {
+    newScript += `\nconst router = useRouter();`
+  }
+
+  // 添加 MCP 设置代码
+  newScript += mcpSetup
+
+  // 修改或添加 onMounted
+  newScript = addOrModifyOnMounted(newScript, existingScript, mcpOnMountedCode)
+
+  // 替换原始脚本
+  let modifiedContent = originalContent.replace(
+    scriptSetupMatch[0],
+    `<script setup lang="ts">\n${newScript}\n</script>`
+  )
+
+  // 添加模板和样式
+  modifiedContent = addMcpTemplate(modifiedContent, mcpTemplate)
+  modifiedContent = addMcpStyle(modifiedContent, mcpStyle)
+
+  return modifiedContent
+}
+
+/**
+ * 修改 App.vue 文件以包含 MCP 集成
+ * @param {string} originalContent 原始 App.vue 内容
+ * @param {Object} config MCP 配置
+ * @returns {string} 修改后的 App.vue 内容
+ */
+function modifyAppVue(originalContent, config) {
+  // 如果已经包含 MCP 集成，则不重复添加
+  if (originalContent.includes('TinyRemoter') || originalContent.includes('mcpServerManager')) {
+    return originalContent
+  }
+
+  // 获取模板内容
+  const mcpImports = mcpImportsTemplate()
+  const mcpSetup = mcpSetupTemplate(null, { capabilities: config.capabilities })
+  const mcpTemplate = mcpTemplateTemplate()
+  const mcpStyle = mcpStyleTemplate()
+  const mcpOnMountedCode = mcpOnMountedTemplate()
+
+  // 提取 script setup 部分
+  const scriptSetupMatch = originalContent.match(/<script setup[^>]*>([\s\S]*?)<\/script>/)
+
+  if (!scriptSetupMatch) {
+    // 没有 script setup，创建完整的新 script
+    return createNewScriptSetup(originalContent, mcpImports, mcpSetup, mcpTemplate, mcpStyle, mcpOnMountedCode)
+  }
+
+  // 已有 script setup，修改它
+  return modifyExistingScriptSetup(
+    originalContent,
+    scriptSetupMatch,
+    mcpImports,
+    mcpSetup,
+    mcpTemplate,
+    mcpStyle,
+    mcpOnMountedCode
+  )
+}
+
+/**
+ * 检测组件是否包含 tiny_mcp_config 配置
+ * @param {Object} schema 组件 schema
+ * @returns {boolean} 是否包含 MCP 配置
+ */
+function hasTinyMcpConfig(schema) {
+  if (!schema || typeof schema !== 'object') {
+    return false
+  }
+
+  // 检查当前组件的 props
+  if (schema.props && schema.props.tiny_mcp_config) {
+    return true
+  }
+
+  // 递归检查子组件
+  if (Array.isArray(schema.children)) {
+    return schema.children.some((child) => hasTinyMcpConfig(child))
+  }
+
+  return false
+}
+
+/**
+ * 检测页面 schema 是否包含 tiny_mcp_config 配置
+ * @param {Object} pageSchema 页面 schema
+ * @returns {boolean} 是否包含 MCP 配置
+ */
+function pageHasTinyMcpConfig(pageSchema) {
+  if (!pageSchema || typeof pageSchema !== 'object') {
+    return false
+  }
+
+  return hasTinyMcpConfig(pageSchema)
+}
+
+/**
+ * 转换 tiny_mcp_config 配置格式
+ * @param {Object} schema 组件 schema
+ * @returns {Object} 转换后的 schema
+ */
+function transformTinyMcpConfig(schema) {
+  if (!schema || typeof schema !== 'object') {
+    return schema
+  }
+
+  // 处理当前组件的 tiny_mcp_config
+  if (schema.props && schema.props.tiny_mcp_config) {
+    const mcpConfig = schema.props.tiny_mcp_config
+
+    // 检查是否是简单格式（只有 id 和 description）
+    if (
+      mcpConfig &&
+      typeof mcpConfig === 'object' &&
+      mcpConfig.id &&
+      mcpConfig.description &&
+      !mcpConfig.server &&
+      !mcpConfig.business
+    ) {
+      // 转换为完整格式
+      schema.props.tiny_mcp_config = {
+        type: JS_EXPRESSION,
+        value: `{
+          server,
+          business: {
+            id: ${JSON.stringify(mcpConfig.id)},
+            description: ${JSON.stringify(mcpConfig.description)}
+          }
+        }`
+      }
+    }
+  }
+
+  // 递归处理子组件
+  if (Array.isArray(schema.children)) {
+    schema.children = schema.children.map((child) => transformTinyMcpConfig(child))
+  }
+
+  return schema
+}
+
+/**
+ * 验证 MCP 插件配置
+ * @param {Object} config MCP 配置
+ * @returns {Object} 验证结果
+ */
+function validateMcpConfig(config) {
+  const errors = []
+  const warnings = []
+
+  // 验证必需的配置项
+  if (config.enabled && typeof config.enabled !== 'boolean') {
+    errors.push('enabled 必须是布尔值')
+  }
+
+  if (config.agentRoot && typeof config.agentRoot !== 'string') {
+    errors.push('agentRoot 必须是字符串')
+  }
+
+  if (config.sessionId && typeof config.sessionId !== 'string') {
+    errors.push('sessionId 必须是字符串')
+  }
+
+  // 验证 URL 格式
+  if (config.agentRoot && config.agentRoot !== '') {
+    try {
+      new URL(config.agentRoot)
+    } catch (e) {
+      errors.push('agentRoot 必须是有效的 URL')
+    }
+  }
+
+  // 验证工具配置
+  if (config.tools && typeof config.tools !== 'object') {
+    errors.push('tools 必须是对象')
+  } else if (config.tools) {
+    const validTools = ['navigation', 'application']
+    Object.keys(config.tools).forEach((tool) => {
+      if (!validTools.includes(tool)) {
+        warnings.push(`未知的工具类型: ${tool}`)
+      }
+      if (typeof config.tools[tool] !== 'boolean') {
+        errors.push(`工具 ${tool} 的值必须是布尔值`)
+      }
+    })
+  }
+
+  // 验证自定义工具
+  if (config.customTools && !Array.isArray(config.customTools)) {
+    errors.push('customTools 必须是数组')
+  } else if (config.customTools) {
+    config.customTools.forEach((tool, index) => {
+      if (!tool.name || typeof tool.name !== 'string') {
+        errors.push(`自定义工具 ${index} 必须有有效的 name 属性`)
+      }
+      if (!tool.implementation || typeof tool.implementation !== 'string') {
+        errors.push(`自定义工具 ${index} 必须有有效的 implementation 属性`)
+      }
+    })
+  }
+
+  // 验证能力配置
+  if (config.capabilities && typeof config.capabilities !== 'object') {
+    errors.push('capabilities 必须是对象')
+  }
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+    warnings
+  }
+}
+
+function genMcpPlugin(options = {}) {
+  // 验证配置
+  const validation = validateMcpConfig(options)
+  if (!validation.isValid) {
+    throw new Error(`MCP 插件配置无效: ${validation.errors.join(', ')}`)
+  }
+
+  // 输出警告
+  if (validation.warnings.length > 0) {
+    validation.warnings.forEach((warning) => {
+      // eslint-disable-next-line no-console
+      console.warn('MCP 插件配置警告:', warning)
+    })
+  }
+
+  const realOptions = mergeOptions(defaultOption, options)
+
+  return {
+    name: 'tinyEngine-generateCode-plugin-mcp',
+    description: 'generate MCP (Model Context Protocol) integration files',
+
+    /**
+     * 生成 MCP 集成文件
+     * @param {import('@opentiny/tiny-engine-dsl-vue').IAppSchema} schema
+     * @returns
+     */
+    run(schema) {
+      // 如果 MCP 未启用，直接返回空数组，不生成任何文件
+      if (!realOptions.enabled) {
+        return []
+      }
+
+      try {
+        const files = []
+        const { tools } = realOptions
+
+        // 确定启用的工具类别
+        const enabledTools = Object.keys(tools).filter((tool) => tools[tool])
+
+        // 生成基础配置文件
+        files.push({
+          fileType: 'ts',
+          fileName: 'base.ts',
+          path: './src',
+          fileContent: generateBaseConfig(realOptions)
+        })
+
+        // 生成 MCP 服务器文件
+        files.push({
+          fileType: 'ts',
+          fileName: 'server.ts',
+          path: './src/mcp',
+          fileContent: generateMcpServer(enabledTools)
+        })
+
+        // 使用配置驱动的方式生成工具文件
+        Object.entries(tools).forEach(([toolName, enabled]) => {
+          if (enabled && toolGenerators[toolName]) {
+            try {
+              const generator = toolGenerators[toolName]
+              const toolFileName = `${toolName}Tools.ts`
+
+              files.push({
+                fileType: 'ts',
+                fileName: toolFileName,
+                path: './src/mcp/tools',
+                fileContent: generator(toolName === 'navigation' ? schema.pageSchema || [] : schema)
+              })
+            } catch (error) {
+              if (this.addLog) {
+                this.addLog({
+                  type: 'warning',
+                  message: `${toolName} 工具生成失败: ${error.message}`,
+                  plugin: 'genMcpPlugin'
+                })
+              }
+            }
+          } else if (enabled && !toolGenerators[toolName]) {
+            // 工具已启用但未找到对应的生成器
+            if (this.addLog) {
+              this.addLog({
+                type: 'warning',
+                message: `未找到 ${toolName} 工具的生成器，请检查 toolGenerators 配置`,
+                plugin: 'genMcpPlugin'
+              })
+            }
+          }
+        })
+
+        // 检查并处理页面中的 tiny_mcp_config 配置
+        let hasPageMcpConfig = false
+        const pagesWithMcpConfig = []
+
+        if (schema.pageSchema && Array.isArray(schema.pageSchema)) {
+          schema.pageSchema.forEach((page) => {
+            if (pageHasTinyMcpConfig(page)) {
+              hasPageMcpConfig = true
+              pagesWithMcpConfig.push({
+                fileName: page.fileName || page.id || 'unknown-page',
+                schema: page
+              })
+              // 转换页面中的 tiny_mcp_config 配置
+              transformTinyMcpConfig(page)
+            }
+          })
+        }
+
+        // 只有在 MCP 启用时才修改 App.vue 和 main.ts 文件
+        if (realOptions.enabled) {
+          // 修改 App.vue 文件
+          const existingAppVue = this.getFile('./src', 'App.vue')
+          if (existingAppVue) {
+            const modifiedAppVue = modifyAppVue(existingAppVue.fileContent, realOptions)
+            this.replaceFile({
+              fileType: 'vue',
+              fileName: 'App.vue',
+              path: './src',
+              fileContent: modifiedAppVue
+            })
+          }
+
+          // 修改 main.ts 文件以包含 MCP 样式
+          const existingMainTs = this.getFile('./src', 'main.ts') || this.getFile('./src', 'main.js')
+          if (existingMainTs && existingMainTs.fileName) {
+            const modifiedMainTs = modifyMainTs(existingMainTs.fileContent)
+            this.replaceFile({
+              fileType: existingMainTs.fileName.endsWith('.ts') ? 'ts' : 'js',
+              fileName: existingMainTs.fileName,
+              path: './src',
+              fileContent: modifiedMainTs
+            })
+          }
+        }
+
+        // 如果检测到页面使用了 tiny_mcp_config，添加日志信息
+        if (hasPageMcpConfig && this.addLog) {
+          this.addLog({
+            type: 'info',
+            message: '检测到页面使用了 tiny_mcp_config，已自动转换为完整格式',
+            plugin: 'genMcpPlugin'
+          })
+        }
+
+        return files
+      } catch (error) {
+        // 记录错误但不中断整个生成过程
+        // eslint-disable-next-line no-console
+        console.error('MCP 插件生成失败:', error)
+
+        // 添加错误日志到上下文
+        if (this.addLog) {
+          this.addLog({
+            type: 'error',
+            message: `MCP 插件生成失败: ${error.message}`,
+            plugin: 'genMcpPlugin',
+            stack: error.stack
+          })
+        }
+
+        // 优雅降级：返回空数组，让其他插件继续工作
+        return []
+      }
+    }
+  }
+}
+
+// 导出属性转换钩子，供其他生成器使用
+export const handleTinyMcpConfigAttrHook = (schemaData, globalHooks, config) => {
+  // 早期返回：如果 MCP 未启用，直接返回，不处理任何 tiny_mcp_config
+  if (config?.mcpEnabled === false) {
+    return
+  }
+
+  const { schema: { props = {} } = {} } = schemaData || {}
+
+  // 检查是否有 tiny_mcp_config 属性
+  if (props.tiny_mcp_config) {
+    const mcpConfig = props.tiny_mcp_config
+
+    // 检查是否是简单格式（只有 id 和 description，且不是 JSExpression）
+    if (
+      mcpConfig &&
+      typeof mcpConfig === 'object' &&
+      !mcpConfig.type && // 不是 JSExpression 或其他特殊类型
+      mcpConfig.id &&
+      mcpConfig.description &&
+      !mcpConfig.server &&
+      !mcpConfig.business
+    ) {
+      // 转换为完整格式的 JSExpression
+      const transformedConfig = {
+        type: 'JSExpression',
+        value: `{ server, business: { id: ${JSON.stringify(mcpConfig.id)}, description: ${JSON.stringify(
+          mcpConfig.description
+        )} } }`
+      }
+
+      // 更新 props
+      props.tiny_mcp_config = transformedConfig
+
+      // 确保页面中有 server 变量的导入
+      if (globalHooks && globalHooks.addImport) {
+        globalHooks.addImport('../mcp/server', {
+          destructuring: true,
+          componentName: 'usePageMcpServer',
+          exportName: 'usePageMcpServer'
+        })
+      }
+
+      // 添加页面级别的 MCP 服务器初始化代码
+      if (globalHooks && globalHooks.addStatement) {
+        const pageId = config?.pageId || config?.fileName || 'current-page'
+
+        // 使用 JSON.stringify 来转义 pageId，防止特殊字符破坏生成的代码
+        const pageIdLiteral = JSON.stringify(pageId)
+        const descriptionLiteral = JSON.stringify(`${pageId}页面`)
+
+        // 添加必要的导入
+        globalHooks.addImport('vue', {
+          destructuring: true,
+          componentName: 'onMounted',
+          exportName: 'onMounted'
+        })
+
+        globalHooks.addImport('vue', {
+          destructuring: true,
+          componentName: 'onUnmounted',
+          exportName: 'onUnmounted'
+        })
+
+        // 添加 MCP 服务器初始化代码
+        globalHooks.addStatement({
+          position: INSERT_POSITION.AFTER_METHODS,
+          value: `
+// 使用统一管理的页面服务器
+const { server, connect, disconnect } = usePageMcpServer(${pageIdLiteral}, {
+  business: {
+    id: ${pageIdLiteral},
+    description: ${descriptionLiteral}
+  }
+})
+
+// 连接服务器
+onMounted(async () => {
+  await connect()
+})
+
+// 组件卸载时清理资源（自动断开连接）
+onUnmounted(() => {
+  disconnect()
+})`,
+          key: 'mcpServerInit'
+        })
+      }
+    }
+  }
+}
+
+export default genMcpPlugin
diff --git a/packages/vue-generator/src/plugins/genPagePlugin.js b/packages/vue-generator/src/plugins/genPagePlugin.js
index 68b9c7115c..fa59be9607 100644
--- a/packages/vue-generator/src/plugins/genPagePlugin.js
+++ b/packages/vue-generator/src/plugins/genPagePlugin.js
@@ -18,13 +18,20 @@ function genPagePlugin(options = {}) {
      * @param {import('@opentiny/tiny-engine-dsl-vue').IAppSchema} schema
      * @returns
      */
-    run(schema) {
+    run(schema, context) {
       const pages = schema.pageSchema
 
       const resPage = []
 
+      // 从上下文中获取 MCP 配置
+      const mcpEnabled = context?.pluginConfig?.mcp?.enabled || false
+
       for (const page of pages) {
-        const res = genSFCWithDefaultPlugin(page, schema.componentsMap, sfcConfig)
+        // 将 MCP 配置传递给 SFC 生成器
+        const res = genSFCWithDefaultPlugin(page, schema.componentsMap, {
+          ...sfcConfig,
+          mcpEnabled
+        })
 
         resPage.push({
           fileType: 'vue',
diff --git a/packages/vue-generator/src/plugins/index.js b/packages/vue-generator/src/plugins/index.js
index cfdfeab5a4..30c43a01a5 100644
--- a/packages/vue-generator/src/plugins/index.js
+++ b/packages/vue-generator/src/plugins/index.js
@@ -10,3 +10,4 @@ export { default as formatCodePlugin } from './formatCodePlugin'
 export { default as genGlobalState } from './genGlobalState'
 export { default as parseSchemaPlugin } from './parseSchemaPlugin'
 export { default as appendElePlusStylePlugin } from './appendElePlusStylePlugin'
+export { default as genMcpPlugin } from './genMcpPlugin'
diff --git a/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/App.vue.mcp-imports.ts b/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/App.vue.mcp-imports.ts
new file mode 100644
index 0000000000..939464c946
--- /dev/null
+++ b/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/App.vue.mcp-imports.ts
@@ -0,0 +1,10 @@
+export default () => {
+  return `import { TinyRemoter } from "@opentiny/next-remoter";
+import {
+  WebMcpClient,
+  createMessageChannelPairTransport,
+} from "@opentiny/next-sdk";
+import type { Transport } from "@opentiny/next-sdk";
+import { AGENT_ROOT, SESSION_ID } from "./base";
+import { mcpServerManager } from "./mcp/server";`
+}
diff --git a/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/App.vue.mcp-onMounted.ts b/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/App.vue.mcp-onMounted.ts
new file mode 100644
index 0000000000..e09a12ad6e
--- /dev/null
+++ b/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/App.vue.mcp-onMounted.ts
@@ -0,0 +1,4 @@
+export default () => {
+  return `  createProxyTransport();
+  initMcpServer();`
+}
diff --git a/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/App.vue.mcp-setup.ts b/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/App.vue.mcp-setup.ts
new file mode 100644
index 0000000000..e4478af708
--- /dev/null
+++ b/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/App.vue.mcp-setup.ts
@@ -0,0 +1,64 @@
+export default (schema, options) => {
+  const { capabilities } = options
+
+  return `
+
+const [serverTransport, clientTransport] = createMessageChannelPairTransport();
+
+// 定义 MCP Server 的能力
+const capabilities = ${JSON.stringify(capabilities, null, 2)};
+
+const mcpServer: {
+  transport: Transport | null;
+  capabilities: Record<string, any>;
+} = {
+  transport: serverTransport,
+  capabilities,
+};
+
+provide("mcpServer", mcpServer);
+
+serverTransport.onerror = (error) => {
+  console.error(\`ServerTransport error:\`, error);
+};
+
+const createProxyTransport = async () => {
+  const client = new WebMcpClient(
+    { name: "mcp-web-client", version: "1.0.0" },
+    {
+      capabilities: {
+        roots: { listChanged: true },
+        sampling: {},
+        elicitation: {},
+      },
+    }
+  );
+  // @ts-expect-error client
+  window.client = client;
+  await client.connect(clientTransport);
+
+  await client.connect({
+    url: AGENT_ROOT + "mcp",
+    sessionId: SESSION_ID,
+    agent: true,
+    onError: (error: Error) => {
+      console.error("Connect proxy error:", error);
+    },
+  });
+
+  window.addEventListener("pagehide", client.onPagehide);
+};
+
+// 初始化MCP服务器管理器
+const initMcpServer = async () => {
+  try {
+    // 初始化管理器
+    mcpServerManager.init(router, mcpServer);
+    // 连接所有服务器
+    await mcpServerManager.connectAll(mcpServer.transport as Transport);
+    console.log('MCP 服务器管理器初始化成功');
+  } catch (error) {
+    console.error('MCP 服务器管理器初始化失败:', error);
+  }
+};`
+}
diff --git a/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/App.vue.mcp-style.ts b/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/App.vue.mcp-style.ts
new file mode 100644
index 0000000000..af9a0962de
--- /dev/null
+++ b/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/App.vue.mcp-style.ts
@@ -0,0 +1,6 @@
+export default () => {
+  return `
+:deep(.next-sdk-trigger-btn) {
+  font-size: 30px;
+}`
+}
diff --git a/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/App.vue.mcp-template.ts b/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/App.vue.mcp-template.ts
new file mode 100644
index 0000000000..1cd8656b28
--- /dev/null
+++ b/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/App.vue.mcp-template.ts
@@ -0,0 +1,3 @@
+export default () => {
+  return `    <TinyRemoter :sessionId="SESSION_ID" class="remoter" />`
+}
diff --git a/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/base.ts b/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/base.ts
new file mode 100644
index 0000000000..46724bdbff
--- /dev/null
+++ b/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/base.ts
@@ -0,0 +1,10 @@
+export default (schema, options) => {
+  const { agentRoot, sessionId } = options
+
+  // 转义单引号以防止生成的代码出现语法错误
+  const escapedAgentRoot = (agentRoot || '').replace(/'/g, "\\'")
+  const escapedSessionId = (sessionId || '').replace(/'/g, "\\'")
+
+  return `export const AGENT_ROOT = '${escapedAgentRoot}'
+export const SESSION_ID = '${escapedSessionId}'`
+}
diff --git a/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/server.ts b/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/server.ts
new file mode 100644
index 0000000000..74c25a7f11
--- /dev/null
+++ b/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/server.ts
@@ -0,0 +1,214 @@
+export default (schema, options) => {
+  const { enabledTools } = options
+
+  // 构建导入语句
+  let toolImports = ''
+  let registrations = ''
+
+  if (enabledTools.includes('navigation')) {
+    toolImports += `
+import { registerNavigationTools } from './tools/navigationTools'`
+    registrations += `
+      registerNavigationTools(server, this.router!);`
+  }
+
+  if (enabledTools.includes('application')) {
+    toolImports += `
+import { registerApplicationTools } from './tools/applicationTools'`
+    registrations += `
+      registerApplicationTools(server);`
+  }
+
+  return `import type { Router } from 'vue-router'
+import { WebMcpServer } from "@opentiny/next-sdk"
+import { registerMcpConfig } from '@opentiny/vue-common'
+import { createMcpTools, getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'${toolImports}
+
+// 配置接口
+interface PageServerConfig {
+  name: string
+  business: {
+    id: string
+    description: string
+  }
+}
+
+// MCP 服务器管理器
+export class McpServerManager {
+  private servers = new Map<string, WebMcpServer>()
+  private mainServer: WebMcpServer | null = null
+  private router: Router | null = null
+  private capabilities: any = null
+
+  /**
+   * 注册服务器 tools
+   * @param mode 模式：page 页面服务器，main 应用级别服务器
+   * @param server 服务器实例
+   */
+  registerServerToolsByMode(mode: 'page' | 'main', server: WebMcpServer) {
+    const commonRegistrations = () => {${registrations}
+    };
+
+    if (mode === 'main') {
+      registerMcpConfig(getTinyVueMcpConfig(), createMcpTools);
+    }
+
+    commonRegistrations();
+  }
+
+  // 初始化管理器
+  init(router: Router, config: any) {
+    this.router = router
+    this.capabilities = config.capabilities
+
+    // 创建主服务器
+    this.mainServer = new WebMcpServer(
+      { name: "business-app", version: "1.0.0" },
+      { capabilities: this.capabilities }
+    )
+
+    // 注册主服务器 tools
+    this.registerServerToolsByMode('main', this.mainServer)
+  }
+
+  // 获取或创建页面服务器
+  getPageServer(pageId: string, config?: PageServerConfig): WebMcpServer {
+    // 返回缓存的服务器
+    if (this.servers.has(pageId)) {
+      return this.servers.get(pageId)!
+    }
+
+    // 创建新服务器
+    const serverConfig = config || {
+      name: pageId,
+      business: { id: pageId, description: \`\${pageId} 页面\` }
+    }
+
+    const server = new WebMcpServer(
+      { name: serverConfig.name, version: "1.0.0" },
+      { capabilities: this.capabilities }
+    )
+
+    // 注册页面服务器 tools
+    this.registerServerToolsByMode('page', server)
+
+    // 缓存并返回
+    this.servers.set(pageId, server)
+    console.log(\`页面服务器 \${pageId} 创建完成\`)
+
+    return server
+  }
+
+  // 连接所有服务器
+  async connectAll(transport: any) {
+    const results = []
+
+    // 连接主服务器
+    if (this.mainServer) {
+      try {
+        await this.mainServer.connect(transport)
+        this.mainServer.transport = transport
+        results.push({ name: 'main', success: true })
+      } catch (error) {
+        console.error('主服务器连接失败:', error)
+        results.push({ name: 'main', success: false })
+      }
+    }
+
+    // 连接页面服务器
+    for (const [pageId, server] of this.servers.entries()) {
+      try {
+        await server.connect(transport)
+        server.transport = transport
+        results.push({ name: pageId, success: true })
+      } catch (error) {
+        console.error(\`页面服务器 \${pageId} 连接失败:\`, error)
+        results.push({ name: pageId, success: false })
+      }
+    }
+
+    console.log(\`服务器连接完成: \${results.filter(r => r.success).length}/\${results.length} 成功\`)
+    return results
+  }
+
+  // 获取主服务器
+  getMainServer() {
+    return this.mainServer
+  }
+
+  // 清理页面服务器
+  removePageServer(pageId: string) {
+    const server = this.servers.get(pageId)
+    if (server) {
+      server.transport = null
+      this.servers.delete(pageId)
+      console.log(\`页面服务器 \${pageId} 已清理\`)
+    }
+  }
+
+  // 清理所有资源
+  dispose() {
+    // 清理所有服务器
+    this.servers.forEach(server => {
+      server.transport = null
+    })
+    this.servers.clear()
+
+    if (this.mainServer) {
+      this.mainServer.transport = null
+    }
+
+    this.mainServer = null
+    this.router = null
+    this.capabilities = null
+
+    console.log('所有服务器资源已清理')
+  }
+}
+
+// 全局实例
+export const mcpServerManager = new McpServerManager()
+
+// 页面级服务器 composable
+export function usePageMcpServer(pageId: string, config?: PageServerConfig) {
+  const server = mcpServerManager.getPageServer(pageId, config)
+
+  // 连接服务器
+  const connect = async (): Promise<boolean> => {
+    // 已连接直接返回
+    if (server?.transport) {
+      console.log(\`页面服务器 \${pageId} 已经连接\`)
+      return true
+    }
+
+    // 获取主服务器传输层并连接
+    const transport = mcpServerManager.getMainServer()?.transport
+    if (!transport) {
+      console.warn(\`无法连接页面服务器 \${pageId}: 主服务器未连接\`)
+      return false
+    }
+
+    try {
+      await server!.connect(transport)
+      server!.transport = transport
+      console.log(\`页面服务器 \${pageId} 已连接\`)
+      return true
+    } catch (error) {
+      console.error(\`页面服务器 \${pageId} 连接失败:\`, error)
+      return false
+    }
+  }
+
+  // 断开连接并清理页面服务器
+  const disconnect = () => {
+    if (server?.transport) {
+      server.transport = null
+      console.log(\`页面服务器 \${pageId} 已断开连接\`)
+    }
+
+    mcpServerManager.removePageServer(pageId)
+  }
+
+  return { server, connect, disconnect }
+}`
+}
diff --git a/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/tools/navigationTools.ts b/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/tools/navigationTools.ts
new file mode 100644
index 0000000000..8c12fad4ca
--- /dev/null
+++ b/packages/vue-generator/src/templates/vue-template/templateFiles/src/mcp/tools/navigationTools.ts
@@ -0,0 +1,102 @@
+export default (schema, options) => {
+  const { routes } = options
+
+  // 生成路由枚举，使用 JSON.stringify 来正确转义特殊字符
+  const routeEnum = routes.map((route) => JSON.stringify(route)).join(', ')
+
+  return `import { z } from "@opentiny/next-sdk"
+import type { WebMcpServer } from "@opentiny/next-sdk"
+import type { Router } from 'vue-router'
+
+export function registerNavigationTools(server: WebMcpServer, router: Router) {
+  server.registerTool(
+    "navigate-to-page",
+    {
+      title: "页面导航",
+      description: "导航到指定页面",
+      inputSchema: {
+        path: z.enum([${routeEnum}])
+          .describe("目标页面路径"),
+      },
+    },
+    async ({ path }: { path: string }) => {
+      try {
+        await router.push(\`/\${path}\`)
+        return {
+          content: [{ type: "text", text: \`已导航到 \${path} 页面\` }],
+        }
+      } catch (error) {
+        return {
+          content: [{ type: "text", text: \`导航失败：\${error}\` }],
+        }
+      }
+    }
+  )
+
+  server.registerTool(
+    "go-back",
+    {
+      title: "返回上一页",
+      description: "返回到上一个页面",
+      inputSchema: {},
+    },
+    async () => {
+      try {
+        router.back()
+        return {
+          content: [{ type: "text", text: "已返回上一页" }],
+        }
+      } catch (error) {
+        return {
+          content: [{ type: "text", text: \`返回上一页失败：\${error}\` }],
+        }
+      }
+    }
+  )
+
+  server.registerTool(
+    "go-forward",
+    {
+      title: "前进到下一页",
+      description: "前进到下一个页面",
+      inputSchema: {},
+    },
+    async () => {
+      try {
+        router.forward()
+        return {
+          content: [{ type: "text", text: "已前进到下一页" }],
+        }
+      } catch (error) {
+        return {
+          content: [{ type: "text", text: \`前进到下一页失败：\${error}\` }],
+        }
+      }
+    }
+  )
+
+  server.registerTool(
+    "get-current-route",
+    {
+      title: "获取当前路由",
+      description: "获取当前页面的路由信息",
+      inputSchema: {},
+    },
+    async () => {
+      try {
+        const currentRoute = router.currentRoute.value
+        return {
+          content: [{ 
+            type: "text", 
+            text: \`当前路由：\${currentRoute.path}，页面名称：\${String(currentRoute.name)}\` 
+          }],
+        }
+      } catch (error) {
+        return {
+          content: [{ type: "text", text: \`获取当前路由失败：\${error}\` }],
+        }
+      }
+    }
+  )
+}`
+}