feat: 实现大模型动态切换路由功能

Author: zzcr

examples/sites/package.json

@@ -27,7 +27,7 @@
     "@docsearch/css": "^3.8.0",
     "@docsearch/js": "^3.8.0",
     "@docsearch/react": "npm:@docsearch/css",
-    "@opentiny/next-sdk": "0.0.1-alpha.2",
+    "@opentiny/next-sdk": "0.0.1-alpha.4",
     "@opentiny/tiny-robot": "0.3.0-alpha.3",
     "@opentiny/tiny-robot-kit": "0.3.0-alpha.3",
     "@opentiny/tiny-robot-svgs": "0.3.0-alpha.3",
@@ -66,7 +66,8 @@
     "tailwindcss": "^3.2.4",
     "vue": "^3.4.31",
     "vue-i18n": "~9.14.3",
-    "vue-router": "4.1.5"
+    "vue-router": "4.1.5",
+    "zod": "^3.24.4"
   },
   "devDependencies": {
     "@opentiny-internal/unplugin-virtual-template": "workspace:~",

examples/sites/src/App.vue

@@ -14,7 +14,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { onMounted, provide, ref } from 'vue'
 import { TinyConfigProvider, TinyModal } from '@opentiny/vue'
 import useTheme from './tools/useTheme'
@@ -23,9 +23,10 @@ import { IconAi } from '@opentiny/tiny-robot-svgs'
 import { showTinyRobot } from './composable/utils'
 import { createServer, createInMemoryTransport } from '@opentiny/next-sdk'
 
+import { createGlobalMcpTool } from './tools/globalMcpTool'
+
 const previewUrl = ref(import.meta.env.VITE_PLAYGROUND_URL)
 const modalSHow = ref(false)
-
 const server = createServer(
   {
     name: 'comprehensive-config',
@@ -41,26 +42,7 @@ const server = createServer(
 
 server.use(createInMemoryTransport())
 
-// 长任务示例
-server.registerTool(
-  'long-task',
-  {
-    title: 'long-task',
-    description: '可以帮用户订机票'
-  },
-  async () => {
-    // 执行一个长任务
-    await new Promise((resolve) => setTimeout(resolve, 10000))
-    return {
-      content: [
-        {
-          type: 'text',
-          text: '执行一个长任务，执行完成'
-        }
-      ]
-    }
-  }
-)
+createGlobalMcpTool(server)
 
 onMounted(() => {
   server.connectTransport()

examples/sites/src/menus.jsx renamed to examples/sites/src/menus.js

@@ -50,7 +50,6 @@ function genMenus() {
       type: 'components'
     }))
   }))
-
   return [...standaloneOptions, ...docOptions, ...cmpOptions]
 }
 

examples/sites/src/router.js

@@ -57,7 +57,5 @@ router.afterEach((to, from) => {
   if (to.meta.title) {
     document.title = to.meta.title
   }
-  // tiny-robot 通过路由,确定浮动区，是否显示AI按钮
-  appData.hasFloatRobot = to.path.endsWith('components/grid')
 })
 export { router }

examples/sites/src/tools/globalMcpTool.ts

@@ -0,0 +1,74 @@
+import { genMenus } from '../menus'
+import { z } from 'zod'
+import { useRouter } from 'vue-router'
+
+export const createGlobalMcpTool = (server) => {
+  const router = useRouter()
+  server.registerResource(
+    'site-menus',
+    'site-menus://app',
+    {
+      title: 'TinyVue官网的菜单数据',
+      description: 'TinyVue官网的菜单数据，其中"key"为路由路径，"name"为菜单名称，"children"为子菜单',
+      mimeType: 'text/plain'
+    },
+    async (uri) => ({
+      contents: [
+        {
+          uri: uri.href,
+          text: JSON.stringify(genMenus())
+        }
+      ]
+    })
+  )
+  // 帮我查看button组件的API
+  server.registerTool(
+    'swtich-router',
+    {
+      title: 'router',
+      description: '可以帮用户跳转页面，比如：跳转到组件文档页面和API文档页面',
+      inputSchema: {
+        key: z.string().describe('跳转页面路径'),
+        type: z.enum(['components', 'docs', 'overview', 'features']).describe('跳转页面类型'),
+        isOpenApi: z.boolean().describe('是否打开API文档')
+      }
+    },
+    async ({ key, type, isOpenApi }) => {
+      const { params, fullPath } = router.currentRoute.value
+      const { theme } = params
+      const themeIndex = fullPath.indexOf(theme)
+      const linkUrl =
+        fullPath.slice(0, themeIndex) + `${theme}/${type}/${key === 'overview' ? '' : key}${isOpenApi ? '#api' : ''}`
+      router.push(linkUrl)
+      return {
+        content: [
+          {
+            type: 'text',
+            text: `跳转页面成功: ${key}`
+          }
+        ]
+      }
+    }
+  )
+
+  // 长任务示例
+  server.registerTool(
+    'long-task',
+    {
+      title: 'long-task',
+      description: '可以帮用户订机票'
+    },
+    async () => {
+      // 执行一个长任务
+      await new Promise((resolve) => setTimeout(resolve, 10000))
+      return {
+        content: [
+          {
+            type: 'text',
+            text: '执行一个长任务，执行完成'
+          }
+        ]
+      }
+    }
+  )
+}

examples/sites/src/tools/useAllTaskFinish.ts

@@ -22,15 +22,16 @@ export function useBulletin() {
     onMounted(() => {
       Modal.confirm({
         title: '公告',
-        message: (<div style="font-size:16px;line-height:1.5;">
-          <div>尊敬的 TinyVue 用户：</div>
-          <p style="text-indent: 2em;" v-html={lastBulletin.content}> 
-          </p>
-          <div style="text-align:right;margin-top:20px">TinyVue 团队</div>
-          <div style="text-align:right;">{ lastBulletin.time }</div>
-        </div>),
+        message: (
+          <div style="font-size:16px;line-height:1.5;">
+            <div>尊敬的 TinyVue 用户：</div>
+            <p style="text-indent: 2em;" v-html={lastBulletin.content}></p>
+            <div style="text-align:right;margin-top:20px">TinyVue 团队</div>
+            <div style="text-align:right;">{lastBulletin.time}</div>
+          </div>
+        ),
         status: null,
-        width:'760',
+        width: '760',
         confirmContent: '我知道了',
         cancelContent: '关闭'
       }).then((res) => {

examples/sites/src/tools/useBulletin.jsx

@@ -1,6 +1,6 @@
 import { reactive, computed, watch } from 'vue'
 import { router } from '@/router.js'
-import { getAllComponents } from '@/menus.jsx'
+import { getAllComponents } from '@/menus'
 import demoConfig from '@demos/config.js'
 import { staticDemoPath } from '../views/components-doc/cmp-config'
 

examples/sites/src/tools/useTemplateMode.js

@@ -59,7 +59,7 @@
 import { useRoute } from 'vue-router'
 import { defineComponent, reactive, computed, toRefs, watch, onMounted, onUnmounted } from 'vue'
 import { TreeMenu, Dropdown, DropdownMenu, Tooltip, Tag, Radio, RadioGroup, Button } from '@opentiny/vue'
-import { genMenus, getMenuIcons } from '@/menus.jsx'
+import { genMenus, getMenuIcons } from '@/menus'
 import { router } from '@/router.js'
 import { getWord, i18nByKey, appData, appFn, useApiMode, useTemplateMode } from '@/tools'
 import useTheme from '@/tools/useTheme'