feat: add next-sdk web skills (#195)

* feat: add next-sdk skills

* feat: add next-sdk web skills

Author: kagol

pnpm-lock.yaml

@@ -29,8 +29,8 @@
     "@babel/core": "^7.25.2",
     "@gaonengwww/mock-server": "^1.0.5",
     "@opentiny/icons": "^0.1.3",
-    "@opentiny/next-remoter": "^0.0.10",
-    "@opentiny/next-sdk": "^0.1.15",
+    "@opentiny/next-remoter": "0.2.7",
+    "@opentiny/next-sdk": "0.2.7",
     "@opentiny/vue": "^3.28.0",
     "@opentiny/vue-huicharts": "~3.28.0",
     "@opentiny/vue-icon": "~3.28.0",

template/tinyvue/package.json

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { TinyRemoter } from '@opentiny/next-remoter'
-import { createMessageChannelPairTransport, WebMcpClient, WebMcpServer, z } from '@opentiny/next-sdk'
 import { TinyConfigProvider } from '@opentiny/vue'
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
-import { onMounted, provide, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { onMounted } from 'vue'
 import GlobalSetting from '@/components/global-setting/index.vue'
 import { useTheme } from './hooks/useTheme'
+import { clientTransport, createMcpServer } from './mcp-servers'
+import { skills } from './skills'
 import '@opentiny/next-remoter/dist/style.css'
 
 const theme = new TinyThemeTool()
@@ -25,51 +25,18 @@ const design = {
   },
 }
 
-const sessionId = ref('')
-const [serverTransport, clientTransport] = createMessageChannelPairTransport()
-provide('serverTransport', serverTransport)
-
-const AGENT_URL = 'https://agent.opentiny.design/api/v1/webmcp-trial/'
+// 将本地 MCP Server 注册到 TinyRemoter
+// key 为服务器名称（自定义），type: 'local' 表示浏览器本地运行
+const mcpServers = {
+  'my-mcp-server': {
+    type: 'local',
+    transport: clientTransport,
+  },
+}
 
+// 启动 MCP Server（注册工具 + 建立通信通道）
 onMounted(async () => {
-  const server = new WebMcpServer()
-  const $router = useRouter()
-  const $route = useRoute()
-
-  // TODO: 参数需要优化，用户不会知道具体的路由路径，用户的语言可能是：帮我打开菜单管理页面，这时应该根据名称获取路由路径，再做路由跳转
-  // 进一步优化：用户可能在任意页面直接提需求：帮我创建 xx 菜单，这时 AI 应该先跳转菜单管理页面，然后调佣创建菜单的工具
-  server.registerTool(
-    'switch-router',
-    {
-      title: '切换路由',
-      description: '切换路由',
-      inputSchema: {
-        routerPath: z.string().describe('路由路径'),
-      },
-    },
-    async ({ routerPath }) => {
-      if ($route.path === routerPath) {
-        return { content: [{ type: 'text', text: routerPath }] }
-      }
-
-      $router.push(import.meta.env.VITE_CONTEXT + routerPath)
-      return { content: [{ type: 'text', text: routerPath }] }
-    },
-  )
-  await server.connect(serverTransport)
-
-  // 创建 WebMcpClient ，并与 WebAgent 连接
-  const client = new WebMcpClient()
-  await client.connect(clientTransport)
-  const { sessionId: sessionID } = await client.connect({
-    agent: true,
-
-    // sessionId 为可选参数。若传入该参数，系统将使用指定值作为会话标识；若未传入，WebAgent 服务将自动生成一个随机的字符串作为 sessionId。为便于通过 MCP Inspector 工具进行调试，此处采用了固定的 sessionId。用户亦可通过浏览器原生提供的 crypto.randomUUID() 方法生成随机字符串作为会话标识。
-    sessionId: 'd299a869-c674-4125-a84b-bb4e24079b99',
-
-    url: `${AGENT_URL}mcp`,
-  })
-  sessionId.value = sessionID
+  await createMcpServer()
 })
 </script>
 
@@ -82,22 +49,8 @@ onMounted(async () => {
     <GlobalSetting />
   </div>
   <TinyRemoter
-    :agent-root="AGENT_URL"
-    :session-id="sessionId"
-    :menu-items="[
-      {
-        action: 'qr-code',
-        show: false,
-      },
-      {
-        action: 'remote-control',
-        show: false,
-      },
-      {
-        action: 'remote-url',
-        show: false,
-      },
-    ]"
+    :skills="skills"
+    :mcp-servers="mcpServers"
   />
 </template>
 

template/tinyvue/src/App.vue

@@ -1,5 +1,6 @@
 import TinySearchBox from '@opentiny/vue-search-box'
 import { createApp } from 'vue'
+import { setNavigator } from '@opentiny/next-sdk'
 import globalComponents from '@/components'
 import App from './App.vue'
 import directive from './directive'
@@ -22,3 +23,6 @@ app.use(directive)
 app.use(TinySearchBox)
 
 app.mount('#app')
+
+// 必须在 router 注册后调用，让 SDK 持有 router.push 的引用
+setNavigator((route) => router.push(route))

template/tinyvue/src/main.ts

@@ -0,0 +1,25 @@
+import { createMessageChannelPairTransport, WebMcpServer, withPageTools } from '@opentiny/next-sdk'
+import registerLocaleManagementTools from './locale/tools'
+import registerMenuManagementTools from './menu/tools'
+import registerPermissionManagementTools from './permission/tools'
+import registerRoleManagementTools from './role/tools'
+import registerUserManagementTools from './user/tools'
+
+const rawServer = new WebMcpServer()
+const [serverTransport, clientTransport] = createMessageChannelPairTransport()
+
+// withPageTools 包装后，registerTool 第三个参数支持路由配置对象
+export const server = withPageTools(rawServer)
+
+// clientTransport 导出给 TinyRemoter 使用
+export { clientTransport }
+
+export async function createMcpServer() {
+  registerLocaleManagementTools(server)
+  registerUserManagementTools(server)
+  registerRoleManagementTools(server)
+  registerPermissionManagementTools(server)
+  registerMenuManagementTools(server)
+  // 最后建立连接，确保所有工具已注册完毕
+  await rawServer.connect(serverTransport)
+}

template/tinyvue/src/mcp-servers/index.ts

@@ -0,0 +1,22 @@
+import type { PageAwareServer } from '@opentiny/next-sdk'
+import { z } from '@opentiny/next-sdk'
+
+function registerLocaleManagementTools(server: PageAwareServer) {
+  server.registerTool(
+    'add-i18n-entry',
+    {
+      title: '添加国际化词条',
+      description: '添加国际化词条',
+      inputSchema: {
+        key: z.string().describe('词条关键字，请自行创建，不要询问用户'),
+        content: z.string().describe('词条内容'),
+        lang: z.union([z.literal(1), z.literal(2)]).describe('词条语言ID，英文 enUS 为：1，中文 zhCN 为：2'),
+      },
+    },
+    // 第三个参数传路由配置：工具被调用时自动跳转到 /locale
+    // 页面加载完成后，通过 postMessage 把 input 转发给页面内的处理器
+    { route: '/vue-pro/locale' },
+  )
+}
+
+export default registerLocaleManagementTools

template/tinyvue/src/mcp-servers/locale/tools.ts

@@ -0,0 +1,24 @@
+import type { PageAwareServer } from '@opentiny/next-sdk'
+import { z } from '@opentiny/next-sdk'
+
+function registerMenuManagementTools(server: PageAwareServer) {
+  server.registerTool(
+    'add-menu',
+    {
+      title: '添加菜单',
+      description: '添加菜单',
+      inputSchema: {
+        name: z.string().describe('名称'),
+        order: z.number().describe('优先级').default(0),
+        parentMenu: z.string().describe('父菜单').optional(),
+        icon: z.string().describe('图标').optional().default(''),
+        component: z.string().describe('组件'),
+        path: z.string().describe('路径'),
+        locale: z.string().describe('国际化'),
+      },
+    },
+    { route: '/vue-pro/menu/allMenu' },
+  )
+}
+
+export default registerMenuManagementTools

template/tinyvue/src/mcp-servers/menu/tools.ts

@@ -0,0 +1,19 @@
+import type { PageAwareServer } from '@opentiny/next-sdk'
+import { z } from '@opentiny/next-sdk'
+
+function registerPermissionManagementTools(server: PageAwareServer) {
+  server.registerTool(
+    'add-permission',
+    {
+      title: '添加权限',
+      description: '添加权限',
+      inputSchema: {
+        name: z.string().describe('权限名称'),
+        desc: z.string().describe('权限描述'),
+      },
+    },
+    { route: '/vue-pro/permission/allPermission' },
+  )
+}
+
+export default registerPermissionManagementTools

template/tinyvue/src/mcp-servers/permission/tools.ts

@@ -0,0 +1,33 @@
+import type { PageAwareServer } from '@opentiny/next-sdk'
+import { z } from '@opentiny/next-sdk'
+
+function registerRoleManagementTools(server: PageAwareServer) {
+  server.registerTool(
+    'add-role',
+    {
+      title: '添加角色',
+      description: '添加角色，不需要生成角色卡片',
+      inputSchema: {
+        name: z.string().describe('角色名称'),
+        // TODO: 用户的语言可能是添加用户和删除用户的权限，而不是 user::add 和 user::remove 权限或者权限 ID 为 2 和 3，需要做下转换
+        permissions: z.array(z.number()).describe('角色拥有的权限'),
+      },
+    },
+    { route: '/vue-pro/role/allRole' },
+  )
+
+  server.registerTool(
+    'bind-menu-for-role',
+    {
+      title: '绑定菜单',
+      description: '给某个角色绑定菜单',
+      inputSchema: {
+        role: z.string().describe('需要绑定菜单的角色名称'),
+        menu: z.string().describe('需要绑定的菜单名称'),
+      },
+    },
+    { route: '/vue-pro/role/allRole' },
+  )
+}
+
+export default registerRoleManagementTools

template/tinyvue/src/mcp-servers/role/tools.ts

@@ -0,0 +1,29 @@
+import type { PageAwareServer } from '@opentiny/next-sdk'
+import { z } from '@opentiny/next-sdk'
+
+function registerUserManagementTools(server: PageAwareServer) {
+  server.registerTool(
+    'add-user',
+    {
+      title: '添加用户',
+      description: '添加用户，可选参数不需要用户提供，也不用创建表单卡片，直接根据用户提供的信息添加用户即可',
+      inputSchema: {
+        email: z.string().describe('邮箱'),
+        password: z.string().describe('密码'),
+        name: z.string().describe('用户名'),
+        address: z.string().describe('地址').optional(),
+        department: z.string().describe('所属部门').optional(),
+        roleIds: z.array(z.number()).describe('职位').optional(),
+        employeeType: z.string().describe('招聘类型').optional(),
+        probationDate: z.array(z.date()).describe('试用期起止时间').optional(),
+        probationDuration: z.string().describe('试用期时长').optional(),
+        protocolStart: z.date().describe('劳动合同开始日期').optional(),
+        protocolEnd: z.date().describe('劳动合同结束日期').optional(),
+        status: z.string().describe('状态').optional(),
+      },
+    },
+    { route: '/vue-pro/userManager/allInfo' },
+  )
+}
+
+export default registerUserManagementTools