feat: add @opentiny/next-sdk (#165)

* feat: add @opentiny/next-sdk

* fix: remove useless log

Author: kagol

package.json

@@ -33,6 +33,7 @@
   "homepage": "https://opentiny.design/pro/",
   "pnpm": {
     "overrides": {
+      "@modelcontextprotocol/sdk": "1.16.0",
       "@opentiny/tiny-engine-common>@opentiny/vue-renderless": "~3.20.0",
       "@opentiny/tiny-engine-plugin-datasource>@opentiny/vue-renderless": "~3.20.0",
       "@opentiny/tiny-engine-plugin-block>@opentiny/vue-renderless": "~3.20.0",

pnpm-lock.yaml

@@ -39,6 +39,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/vue": "^3.28.0",
     "@opentiny/vue-huicharts": "~3.28.0",
     "@opentiny/vue-icon": "~3.28.0",

template/tinyvue/package.json

@@ -6,14 +6,35 @@
 
     <global-setting />
   </div>
+  <tiny-remoter
+    agent-root="https://agent.opentiny.design/api/v1/webmcp-trial/"
+    :session-id="sessionId"
+    :menuItems="[
+      {
+        action: 'qr-code',
+        show: false
+      },
+      {
+        action: 'remote-control',
+        show: false
+      },
+      {
+        action: 'remote-url',
+        show: false
+      }
+    ]"
+  />
 </template>
 
 <script lang="ts" setup>
-  import { provide } from 'vue';
+  import { onMounted, provide, ref } from 'vue';
   import { TinyConfigProvider } from '@opentiny/vue';
   import GlobalSetting from '@/components/global-setting/index.vue';
+  import { createMessageChannelPairTransport, WebMcpClient } from '@opentiny/next-sdk'
+  import { TinyRemoter } from '@opentiny/next-remoter'
   import TinyThemeTool from '@opentiny/vue-theme/theme-tool';
   import { useTheme } from './hooks/useTheme';
+  import '@opentiny/next-remoter/dist/style.css'
 
   const theme = new TinyThemeTool();
   useTheme(theme);
@@ -30,6 +51,26 @@
       },
     },
   };
+
+  const sessionId = ref('')
+  const [serverTransport, clientTransport] = createMessageChannelPairTransport()
+  provide('serverTransport', serverTransport)
+
+  onMounted(async () => {
+
+    // 创建 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: 'https://agent.opentiny.design/api/v1/webmcp-trial/mcp'
+    })
+    sessionId.value = sessionID
+  })
 </script>
 
 <style lang="less" scoped>

template/tinyvue/src/App.vue

@@ -38,4 +38,8 @@ body {
 
 .tiny-button {
   --tv-Button-min-width: unset;
+}
+
+.tr-container {
+  z-index: 999 !important;
 }

template/tinyvue/src/assets/style/global.less

@@ -9,6 +9,10 @@ export function isCommonError(error: unknown): error is CommonError {
   );
 }
 
+export const sleep = (ms: number): Promise<void> => {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
 export default class BaseUtils {
   public static getErrorMessage(error: unknown): string {
     return this.convertToCommonError(error).message;

template/tinyvue/src/utils/base-utils.ts

@@ -101,8 +101,10 @@
     Option as TinyOption,
     Popover as TinyPopover,
   } from '@opentiny/vue';
-  import { computed, reactive, ref, watch } from 'vue';
+  import { WebMcpServer, z } from '@opentiny/next-sdk'
+  import { computed, reactive, ref, watch, onMounted, inject } from 'vue';
   import { useI18n } from 'vue-i18n';
+  import { sleep } from '@/utils/base-utils';
   import langTable from './lang-table.vue';
 
   const emits = defineEmits<{
@@ -216,6 +218,39 @@
       setLangTableClose()
     }
   })
+
+  onMounted(async () => {
+    const server = new WebMcpServer({
+      name: 'i18n-management-mcp-server',
+      version: '1.0.0'
+    })
+    const serverTransport = inject<any>('serverTransport')
+
+    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'),
+        }
+      },
+      async ({ key, content, lang }) => {
+        onOpen()
+        await sleep(1000)
+        locale.key = key
+        locale.content = content
+        locale.lang = lang
+        await sleep(1000)
+        addLocale()
+        return { content: [{ type: 'text', text: `收到: ${key}` }] }
+      }
+    )
+
+    await server.connect(serverTransport)
+  });
 </script>
 
 <style scoped lang="less">

template/tinyvue/src/views/locale/components/add-locale.vue

@@ -171,6 +171,16 @@
             : Number(menuInfo.parentId),
       };
     },
+    setMenuInfo: (data: Omit<CreateMenuDto, 'id'>) => {
+      menuInfo.name = data.name;
+      menuInfo.path = data.path;
+      menuInfo.component = data.component;
+      menuInfo.icon = data.icon;
+      menuInfo.menuType = data.menuType;
+      menuInfo.parentId = data.parentId;
+      menuInfo.order = data.order;
+      menuInfo.locale = data.locale;
+    },
     valid: async () => {
       return menuForm.value.validate();
     },

template/tinyvue/src/views/menu/info/components/add-menu.vue

@@ -7,6 +7,7 @@
     Modal as TinyModal,
     Loading,
   } from '@opentiny/vue';
+  import { WebMcpServer, z } from '@opentiny/next-sdk'
   import { getAllLocalItems } from '@/api/local';
   import useLoading from '@/hooks/loading';
   import {
@@ -26,6 +27,7 @@
   import menuTree, { Node } from './menu-tree.vue';
   import UpdateForm from './update-form.vue';
   import AddMenu from './add-menu.vue';
+import { sleep } from '@/utils/base-utils';
 
   const { modalSize } = useResponsiveSize()
 
@@ -241,10 +243,52 @@
     fetchLocalItems();
   });
 
-  onMounted(() => {
+  onMounted(async () => {
     Promise.all([fetchMenu(), fetchLocalItems()]).finally(() => {
       treeLoading.value = false;
     });
+
+    const server = new WebMcpServer({
+      name: 'menu-management-mcp-server',
+      version: '1.0.0'
+    })
+    const serverTransport = inject<any>('serverTransport')
+
+    server.registerTool(
+      'add-menu',
+      {
+        title: '添加菜单',
+        description: '添加菜单',
+        inputSchema: {
+          name: z.string().describe('名称'),
+          order: z.number().describe('优先级').default(0),
+          parentId: z.number().describe('父菜单ID').optional(),
+          icon: z.string().describe('图标').optional().default(''),
+          component: z.string().describe('组件'),
+          path: z.string().describe('路径'),
+          locale: z.string().describe('国际化'),
+        }
+      },
+      async ({ name, order, parentId, icon, component, path, locale }) => {
+        handleAddMenu()
+        await sleep(1000)
+        addMenu.value.setMenuInfo({
+          name,
+          order,
+          parentId,
+          icon,
+          component,
+          menuType: "/",
+          path,
+          locale,
+        })
+        await sleep(1000)
+        onClickAdd()
+        return { content: [{ type: 'text', text: `收到: ${name}` }] }
+      }
+    )
+
+    await server.connect(serverTransport)
   });
 </script>