@opentiny/tiny-vue-mcp 0.0.1-alpha.1

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { Business, ComponentMcpConfig } from './src/utils/defineTool';
+import { default as zhCN } from './src/lang/zh-CN';
+import { default as enUS } from './src/lang/en';
+import { i18n } from './src/utils/locale';
+export { zhCN, enUS, i18n };
+export declare const createMcpTools: (instance: any, { server, business }: {
+    server: McpServer;
+    business: Business;
+}, componentMcpConfig: ComponentMcpConfig) => void;
+export declare const getTinyVueMcpConfig: ({ t }?: {
+    t?: ((path: string) => string) | null;
+}) => {
+    name: string;
+    version: string;
+    components: {
+        Grid: import('./src/utils/defineComponentTool').RealComponentTool;
+        BaseSelect: import('./src/utils/defineComponentTool').RealComponentTool;
+    };
+};

package/dist/index.js

@@ -0,0 +1,23 @@
+import { defineTool as n } from "./src/utils/defineTool.js";
+import { default as C } from "./src/lang/zh-CN.js";
+import { default as S } from "./src/lang/en.js";
+import { getGridConfig as f } from "./src/grid/index.js";
+import { getBaseSelectConfig as m } from "./src/base-select/index.js";
+import { i18n as o } from "./src/utils/locale.js";
+const g = (e, { server: t, business: r }, i) => {
+  n({ business: r, componentMcpConfig: i, instance: e, server: t });
+}, l = ({ t: e } = {}) => (o && e && (o.t = e), {
+  name: "tiny-vue-mcp",
+  version: "0.0.1",
+  components: {
+    Grid: f(),
+    BaseSelect: m()
+  }
+});
+export {
+  g as createMcpTools,
+  S as enUS,
+  l as getTinyVueMcpConfig,
+  o as i18n,
+  C as zhCN
+};

package/dist/src/base-select/index.d.ts

@@ -0,0 +1,5 @@
+export declare const resources: {
+    zh: any;
+    en: any;
+};
+export declare const getBaseSelectConfig: () => import('../utils/defineComponentTool').RealComponentTool;

package/dist/src/base-select/index.js

@@ -0,0 +1,16 @@
+import { z as s } from "zod";
+import { defineComponentTool as n } from "../utils/defineComponentTool.js";
+import { t as e } from "../utils/locale.js";
+const a = () => n({
+  name: "base_select_component_tools",
+  description: e("ai.baseSelect.description"),
+  tools: {
+    openMenu: {
+      paramsSchema: s.boolean().describe(e("ai.baseSelect.openMenu")),
+      cb: (o, t) => (o.state.visible = t, { type: "text", text: "success" })
+    }
+  }
+});
+export {
+  a as getBaseSelectConfig
+};

package/dist/src/grid/index.d.ts

@@ -0,0 +1,5 @@
+export declare const resources: {
+    zh: any;
+    en: any;
+};
+export declare const getGridConfig: () => import('../utils/defineComponentTool').RealComponentTool;

package/dist/src/grid/index.js

@@ -0,0 +1,50 @@
+import { z as o } from "zod";
+import { defineComponentTool as s } from "../utils/defineComponentTool.js";
+import { t as r } from "../utils/locale.js";
+const m = () => s({
+  name: "grid_component_tools",
+  description: r("ai.grid.description"),
+  tools: {
+    scollToRow: {
+      paramsSchema: o.number().optional().describe(r("ai.grid.scrollToRow")),
+      cb: (t, e) => {
+        const a = t.getData()[e];
+        if (a)
+          return t.scrollToRow(a), { type: "text", text: "success" };
+      }
+    },
+    getTableData: {
+      paramsSchema: o.boolean().optional().describe(r("ai.grid.getTableData")),
+      cb: (t) => {
+        const e = t.getData();
+        return { type: "text", text: JSON.stringify(e) };
+      }
+    },
+    setSelection: {
+      paramsSchema: o.number().optional().describe(r("ai.grid.setSelection")),
+      cb: (t, e) => {
+        const a = t.getData()[e];
+        if (a)
+          return t.setSelection(a, !0), { type: "text", text: "success" };
+      }
+    },
+    setAllSelection: {
+      paramsSchema: o.boolean().optional().describe(r("ai.grid.setAllSelection")),
+      cb: (t, e) => (t.setAllSelection(e), { type: "text", text: "success" })
+    },
+    insertRow: {
+      paramsSchema: o.record(o.any()).optional().describe(r("ai.grid.insertRow")),
+      cb: (t, e) => (t.insert(e), { type: "text", text: "success" })
+    },
+    removeRow: {
+      paramsSchema: o.number().optional().describe(r("ai.grid.removeRow")),
+      cb: (t, e) => {
+        const a = t.getData()[e];
+        return a ? (t.remove(a), { type: "text", text: "success" }) : { type: "text", text: "failed" };
+      }
+    }
+  }
+});
+export {
+  m as getGridConfig
+};

package/dist/src/lang/en.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    ai: {
+        grid: {
+            description: string;
+            scrollToRow: string;
+            getTableData: string;
+            setSelection: string;
+            setAllSelection: string;
+            insertRow: string;
+            removeRow: string;
+        };
+        baseSelect: {
+            description: string;
+            openMenu: string;
+        };
+    };
+};
+export default _default;

package/dist/src/lang/en.js

@@ -0,0 +1,20 @@
+const e = {
+  ai: {
+    grid: {
+      description: "Grid component related tool set, including scrolling to the specified row, table full selection, etc.",
+      scrollToRow: "Scroll to the specified row,need to get the table data first,then scroll to the row according to the index of the data in the table data",
+      getTableData: "Get the table data",
+      setSelection: "Select the specified row,need to get the table data first,then select the data according to the index of the data in the table data,requirement:scroll to the selected row before selecting",
+      setAllSelection: "Set the table all selection status,true:all selection,false:cancel all selection,requirement:scroll to the selected row before selecting",
+      insertRow: "Insert or add a row of data,need to get the table data first,then add the corresponding data according to the format of the table data",
+      removeRow: "Remove the specified row in the table,need to get the table data first,then remove the corresponding data according to the index of the data in the table data"
+    },
+    baseSelect: {
+      description: "Base select component related tool set, including opening the drop-down panel",
+      openMenu: "Open the drop-down panel"
+    }
+  }
+};
+export {
+  e as default
+};

package/dist/src/lang/zh-CN.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    ai: {
+        grid: {
+            description: string;
+            scrollToRow: string;
+            getTableData: string;
+            setSelection: string;
+            setAllSelection: string;
+            insertRow: string;
+            removeRow: string;
+        };
+        baseSelect: {
+            description: string;
+            openMenu: string;
+        };
+    };
+};
+export default _default;

package/dist/src/lang/zh-CN.js

@@ -0,0 +1,20 @@
+const e = {
+  ai: {
+    grid: {
+      description: "表格组件相关工具集合，包含滚动到指定行、表格全选等功能",
+      scrollToRow: "滚动到指定行，要先获取表格数据，然后根据表格数据中的数组下标索引确定滚动行",
+      getTableData: "获取表格数据",
+      setSelection: "选中或者选择表格一条数据，需要先获取表格数据，然后根据表格数据中的数组下标索引选中或者选择数据，要求：选中之前先滚动到选中行",
+      setAllSelection: "用来设置表格全选状态,true:全选,false:取消全选",
+      insertRow: "插入或者新增一行数据，需要先获取表格数据，根据表格数据的格式新增对应的数据",
+      removeRow: "删除表格中指定行，需要先获取表格数据，根据表格数据中的数组下标索引删除对应的数据"
+    },
+    baseSelect: {
+      description: "下拉组件相关工具集合，包含获取下拉数据、选中下拉数据等功能",
+      openMenu: "打开下拉面板"
+    }
+  }
+};
+export {
+  e as default
+};

package/dist/src/utils/defineComponentTool.d.ts

@@ -0,0 +1,23 @@
+export interface ComponentTool {
+    /** 组件的工具名 */
+    name: string;
+    /** 组件具有的功能描述 */
+    description: string;
+    /** 组件的工具集合 */
+    tools: Record<string, {
+        paramsSchema: any;
+        cb: (instance: any, value: any) => any;
+    }>;
+}
+export interface RealComponentTool {
+    /** 组件的工具名 */
+    name: string;
+    /** 组件具有的功能描述 */
+    description: string;
+    /** 每个功能都应该有一个 zod schema描述  */
+    paramsSchema: any;
+    /** 汇总所有功能到一起的tool */
+    cb: (instance: any, params: Record<string, any>) => void;
+}
+export declare const getParamsSchema: (tools: any) => {};
+export declare const defineComponentTool: (componentMcpConfig: ComponentTool) => RealComponentTool;

package/dist/src/utils/defineComponentTool.js

@@ -0,0 +1,13 @@
+const a = (t) => Object.keys(t).reduce((r, e) => (r[e] = t[e].paramsSchema, r), {}), u = (t) => ({
+  name: t.name,
+  description: t.description,
+  paramsSchema: a(t.tools),
+  cb: (e, n) => !n || !Object.keys(n).length ? { content: [{ type: "text", text: "no tools" }] } : { content: Object.entries(n).map(([o, l]) => {
+    const s = t.tools[o];
+    return s ? s.cb(e, l) : { content: [{ type: "text", text: `tool ${o} not found` }] };
+  }) }
+});
+export {
+  u as defineComponentTool,
+  a as getParamsSchema
+};

package/dist/src/utils/defineTool.d.ts

@@ -0,0 +1,28 @@
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+/** 开发人员传入的业务信息 id要保证唯一性 */
+export interface Business {
+    id: string;
+    description: string;
+}
+/** 组件所有的功能行为都集中在tool里面 */
+export interface ComponentMcpConfig {
+    name: string;
+    description: string;
+    paramsSchema?: Record<string, any>;
+    cb: (instance: any, args: Record<string, any>) => any;
+}
+export interface DefineToolOptions {
+    componentMcpConfig: ComponentMcpConfig;
+    /** tool 可操纵的上下文的变量和方法集合 */
+    instance: any;
+    server: McpServer;
+    business: Business;
+}
+/**
+ * 快速定义一个业务tool的方法
+ * @param componentMcpConfig 组件的可用工具集
+ * @param instance 工具可操作的上下文实例, Vue中是传入实例,其它场景可能传入 {数据, 方法等}
+ * @param server MCP 服务器实例
+ * @param business 业务信息
+ */
+export declare const defineTool: ({ componentMcpConfig, instance, server, business }: DefineToolOptions) => void;

package/dist/src/utils/defineTool.js

@@ -0,0 +1,7 @@
+const $ = ({ componentMcpConfig: a, instance: t, server: e, business: r }) => {
+  const s = `${r.id}_${a.name}`, c = `${r.description}-${a.description}`, d = a.paramsSchema || {}, i = (o) => a.cb(t, o);
+  e.tool(s, c, d, i);
+};
+export {
+  $ as defineTool
+};

package/dist/src/utils/locale.d.ts

@@ -0,0 +1,4 @@
+export declare const i18n: {
+    t: ((path: string) => string) | null;
+};
+export declare const t: (path: string) => string;

package/dist/src/utils/locale.js

@@ -0,0 +1,18 @@
+import s from "../lang/zh-CN.js";
+const l = {
+  t: null
+}, p = (e) => {
+  if (l.t)
+    return l.t(e);
+  const n = e.split(".");
+  let t = "", o = s;
+  for (let r = 0, c = n.length; r < c; r++) {
+    const i = n[r];
+    t = o[i] || "", o = t;
+  }
+  return t;
+};
+export {
+  l as i18n,
+  p as t
+};

package/index.ts

@@ -0,0 +1,33 @@
+import { defineTool } from './src/utils/defineTool'
+import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import type { Business, ComponentMcpConfig } from './src/utils/defineTool'
+import zhCN from './src/lang/zh-CN'
+import enUS from './src/lang/en'
+import { getGridConfig } from './src/grid'
+import { getBaseSelectConfig } from './src/base-select'
+import { i18n } from './src/utils/locale'
+
+export { zhCN, enUS, i18n }
+
+export const createMcpTools = (
+  instance: any,
+  { server, business }: { server: McpServer; business: Business },
+  componentMcpConfig: ComponentMcpConfig
+) => {
+  defineTool({ business, componentMcpConfig, instance, server })
+}
+
+export const getTinyVueMcpConfig = ({ t }: { t?: ((path: string) => string) | null } = {}) => {
+  if (i18n && t) {
+    i18n.t = t
+  }
+
+  return {
+    name: 'tiny-vue-mcp',
+    version: '0.0.1',
+    components: {
+      Grid: getGridConfig(),
+      BaseSelect: getBaseSelectConfig()
+    }
+  }
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@opentiny/tiny-vue-mcp",
+  "version": "0.0.1-alpha.1",
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "keywords": [],
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "zod": "^3.25.23",
+    "@modelcontextprotocol/sdk": "^1.11.0"
+  },
+  "devDependencies": {
+    "vite": "^6.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}

package/src/base-select/index.ts

@@ -0,0 +1,25 @@
+import { z } from 'zod'
+import { defineComponentTool } from '../utils/defineComponentTool'
+import resourcesZh from './resouces.zh.md?raw'
+import resourcesEn from './resouces.en.md?raw'
+import { t } from '../utils/locale'
+
+export const resources = {
+  zh: resourcesZh,
+  en: resourcesEn
+}
+
+export const getBaseSelectConfig = () =>
+  defineComponentTool({
+    name: 'base_select_component_tools',
+    description: t('ai.baseSelect.description'),
+    tools: {
+      openMenu: {
+        paramsSchema: z.boolean().describe(t('ai.baseSelect.openMenu')),
+        cb: (instance, value) => {
+          instance.state.visible = value
+          return { type: 'text', text: 'success' }
+        }
+      }
+    }
+  })

package/src/base-select/resouces.en.md

@@ -0,0 +1,3 @@
+# BaseSelect Component
+
+BaseSelect is the basic version of the Select component, which is the same as the Select component, but does not include the drop-down tree and drop-down table functions. The package volume of the BaseSelect component is smaller, if you do not need the drop-down tree and drop-down table functions, it is recommended to use the BaseSelect component, rather than the Select component.

package/src/base-select/resouces.zh.md

@@ -0,0 +1,3 @@
+# BaseSelect 基础选择器组件
+
+BaseSelect 基础选择器是 Select 组件的基础版本，用法和 Select 一样，但是不包含下拉树和下拉表格功能。BaseSelect 组件的包体积更小，如果你不需要下拉树和下拉表格功能，推荐使用 BaseSelect 组件，而不是 Select 组件。

package/src/grid/index.ts

@@ -0,0 +1,73 @@
+import { z } from 'zod'
+import { defineComponentTool } from '../utils/defineComponentTool'
+import resourcesZh from './resouces.zh.md?raw'
+import resourcesEn from './resouces.en.md?raw'
+import { t } from '../utils/locale'
+
+export const resources = {
+  zh: resourcesZh,
+  en: resourcesEn
+}
+
+export const getGridConfig = () =>
+  defineComponentTool({
+    name: 'grid_component_tools',
+    description: t('ai.grid.description'),
+    tools: {
+      scollToRow: {
+        paramsSchema: z.number().optional().describe(t('ai.grid.scrollToRow')),
+        cb: (instance, value) => {
+          const tableData = instance.getData()
+          const targetRow = tableData[value]
+          if (targetRow) {
+            instance.scrollToRow(targetRow)
+            return { type: 'text', text: 'success' }
+          }
+        }
+      },
+      getTableData: {
+        paramsSchema: z.boolean().optional().describe(t('ai.grid.getTableData')),
+        cb: (instance) => {
+          const tableData = instance.getData()
+          return { type: 'text', text: JSON.stringify(tableData) }
+        }
+      },
+      setSelection: {
+        paramsSchema: z.number().optional().describe(t('ai.grid.setSelection')),
+        cb: (instance, value) => {
+          const tableData = instance.getData()
+          const targetRow = tableData[value]
+          if (targetRow) {
+            instance.setSelection(targetRow, true)
+            return { type: 'text', text: 'success' }
+          }
+        }
+      },
+      setAllSelection: {
+        paramsSchema: z.boolean().optional().describe(t('ai.grid.setAllSelection')),
+        cb: (instance, value) => {
+          instance.setAllSelection(value)
+          return { type: 'text', text: 'success' }
+        }
+      },
+      insertRow: {
+        paramsSchema: z.record(z.any()).optional().describe(t('ai.grid.insertRow')),
+        cb: (instance, value) => {
+          instance.insert(value)
+          return { type: 'text', text: 'success' }
+        }
+      },
+      removeRow: {
+        paramsSchema: z.number().optional().describe(t('ai.grid.removeRow')),
+        cb: (instance, value) => {
+          const tableData = instance.getData()
+          const targetRow = tableData[value]
+          if (targetRow) {
+            instance.remove(targetRow)
+            return { type: 'text', text: 'success' }
+          }
+          return { type: 'text', text: 'failed' }
+        }
+      }
+    }
+  })

package/src/grid/resouces.en.md

@@ -0,0 +1,3 @@
+# Grid Component
+
+Grid is a powerful data table component that provides a wide range of features for displaying and interacting with data. It allows you to create tables that can display data lists, select and edit data, and more.

package/src/grid/resouces.zh.md

@@ -0,0 +1,3 @@
+# Grid 表格
+
+表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。

package/src/lang/en.ts

@@ -0,0 +1,23 @@
+export default {
+  ai: {
+    grid: {
+      description:
+        'Grid component related tool set, including scrolling to the specified row, table full selection, etc.',
+      scrollToRow:
+        'Scroll to the specified row,need to get the table data first,then scroll to the row according to the index of the data in the table data',
+      getTableData: 'Get the table data',
+      setSelection:
+        'Select the specified row,need to get the table data first,then select the data according to the index of the data in the table data,requirement:scroll to the selected row before selecting',
+      setAllSelection:
+        'Set the table all selection status,true:all selection,false:cancel all selection,requirement:scroll to the selected row before selecting',
+      insertRow:
+        'Insert or add a row of data,need to get the table data first,then add the corresponding data according to the format of the table data',
+      removeRow:
+        'Remove the specified row in the table,need to get the table data first,then remove the corresponding data according to the index of the data in the table data'
+    },
+    baseSelect: {
+      description: 'Base select component related tool set, including opening the drop-down panel',
+      openMenu: 'Open the drop-down panel'
+    }
+  }
+}

package/src/lang/zh-CN.ts

@@ -0,0 +1,18 @@
+export default {
+  ai: {
+    grid: {
+      description: '表格组件相关工具集合，包含滚动到指定行、表格全选等功能',
+      scrollToRow: '滚动到指定行，要先获取表格数据，然后根据表格数据中的数组下标索引确定滚动行',
+      getTableData: '获取表格数据',
+      setSelection:
+        '选中或者选择表格一条数据，需要先获取表格数据，然后根据表格数据中的数组下标索引选中或者选择数据，要求：选中之前先滚动到选中行',
+      setAllSelection: '用来设置表格全选状态,true:全选,false:取消全选',
+      insertRow: '插入或者新增一行数据，需要先获取表格数据，根据表格数据的格式新增对应的数据',
+      removeRow: '删除表格中指定行，需要先获取表格数据，根据表格数据中的数组下标索引删除对应的数据'
+    },
+    baseSelect: {
+      description: '下拉组件相关工具集合，包含获取下拉数据、选中下拉数据等功能',
+      openMenu: '打开下拉面板'
+    }
+  }
+}

package/src/utils/defineComponentTool.ts

@@ -0,0 +1,56 @@
+export interface ComponentTool {
+  /** 组件的工具名 */
+  name: string
+  /** 组件具有的功能描述 */
+  description: string
+  /** 组件的工具集合 */
+  tools: Record<
+    string,
+    {
+      paramsSchema: any
+      cb: (instance: any, value: any) => any
+    }
+  >
+}
+
+export interface RealComponentTool {
+  /** 组件的工具名 */
+  name: string
+  /** 组件具有的功能描述 */
+  description: string
+  /** 每个功能都应该有一个 zod schema描述  */
+  paramsSchema: any
+  /** 汇总所有功能到一起的tool */
+  cb: (instance: any, params: Record<string, any>) => void
+}
+
+export const getParamsSchema = (tools: any) => {
+  return Object.keys(tools).reduce((acc, key) => {
+    acc[key] = tools[key].paramsSchema
+    return acc
+  }, {})
+}
+
+export const defineComponentTool = (componentMcpConfig: ComponentTool): RealComponentTool => {
+  const realTool: RealComponentTool = {
+    name: componentMcpConfig.name,
+    description: componentMcpConfig.description,
+    paramsSchema: getParamsSchema(componentMcpConfig.tools),
+    cb: (instance: any, args) => {
+      if (!args || !Object.keys(args).length) {
+        return { content: [{ type: 'text', text: 'no tools' }] }
+      }
+
+      const results = Object.entries(args).map(([key, value]) => {
+        const tool = componentMcpConfig.tools[key]
+        if (!tool) {
+          return { content: [{ type: 'text', text: `tool ${key} not found` }] }
+        }
+        return tool.cb(instance, value)
+      })
+
+      return { content: results }
+    }
+  }
+  return realTool
+}

package/src/utils/defineTool.ts

@@ -0,0 +1,41 @@
+import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+
+/** 开发人员传入的业务信息 id要保证唯一性 */
+export interface Business {
+  id: string
+  description: string
+}
+
+/** 组件所有的功能行为都集中在tool里面 */
+export interface ComponentMcpConfig {
+  name: string
+  description: string
+  paramsSchema?: Record<string, any>
+  cb: (instance: any, args: Record<string, any>) => any
+}
+
+export interface DefineToolOptions {
+  componentMcpConfig: ComponentMcpConfig
+  /** tool 可操纵的上下文的变量和方法集合 */
+  instance: any
+  server: McpServer
+  business: Business
+}
+
+/**
+ * 快速定义一个业务tool的方法
+ * @param componentMcpConfig 组件的可用工具集
+ * @param instance 工具可操作的上下文实例, Vue中是传入实例,其它场景可能传入 {数据, 方法等}
+ * @param server MCP 服务器实例
+ * @param business 业务信息
+ */
+export const defineTool = ({ componentMcpConfig, instance, server, business }: DefineToolOptions) => {
+  const name = `${business.id}_${componentMcpConfig.name}`
+  const description = `${business.description}-${componentMcpConfig.description}`
+  const paramsSchema = componentMcpConfig.paramsSchema || {}
+  const cb = (args: Record<string, any>) => {
+    return componentMcpConfig.cb(instance, args)
+  }
+
+  server.tool(name, description, paramsSchema, cb)
+}

package/src/utils/locale.ts

@@ -0,0 +1,22 @@
+import zhCN from '../lang/zh-CN'
+
+export const i18n: { t: ((path: string) => string) | null } = {
+  t: null
+}
+
+export const t = (path: string): string => {
+  if (i18n.t) {
+    return i18n.t(path)
+  }
+  const array = path.split('.')
+  let value = ''
+  let current: any = zhCN
+
+  for (let i = 0, j = array.length; i < j; i++) {
+    const property = array[i]
+
+    value = current[property] || ''
+    current = value
+  }
+  return value
+}

package/vite.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+
+// https://vite.dev/config/
+export default defineConfig(() => {
+  return {
+    plugins: [
+      // 生成类型声明文件
+      dts()
+    ],
+    // 库模式配置
+    build: {
+      lib: {
+        entry: './index.ts'
+      },
+      rollupOptions: {
+        external: ['zod'],
+        input: ['index.ts'],
+        output: [
+          {
+            format: 'es',
+            entryFileNames: '[name].js',
+            preserveModules: true
+          }
+        ]
+      }
+    }
+  }
+})