Skip to content

feat: add mcp tool: switch-router #194

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kagol merged 1 commit into from
Feb 5, 2026
+28 −1
Merged

feat: add mcp tool: switch-router #194

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 28 additions & 1 deletion template/tinyvue/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<script lang="ts" setup>
import { TinyRemoter } from '@opentiny/next-remoter'
import { createMessageChannelPairTransport, WebMcpClient } from '@opentiny/next-sdk'
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 GlobalSetting from '@/components/global-setting/index.vue'
import { useTheme } from './hooks/useTheme'
import '@opentiny/next-remoter/dist/style.css'
Expand Down Expand Up @@ -31,6 +32,32 @@ provide('serverTransport', serverTransport)
const AGENT_URL = 'https://agent.opentiny.design/api/v1/webmcp-trial/'

onMounted(async () => {
const server = new WebMcpServer()
const $router = useRouter()
const $route = useRoute()
Comment on lines +36 to +37
Copy link

@coderabbitai coderabbitai bot Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Move useRouter() and useRoute() to the top level of <script setup>.

Vue composables like useRouter() and useRoute() must be called synchronously in the setup context, not inside lifecycle hooks like onMounted. Calling them inside async callbacks or lifecycle hooks can lead to warnings or unexpected behavior.

🔧 Proposed fix

Move the composable calls to the top level and reference them inside onMounted:

 import { useRoute, useRouter } from 'vue-router'
 import GlobalSetting from '@/components/global-setting/index.vue'
 import { useTheme } from './hooks/useTheme'
 import '@opentiny/next-remoter/dist/style.css'

 const theme = new TinyThemeTool()
 useTheme(theme)
+
+const $router = useRouter()
+const $route = useRoute()

 const design = {
   name: 'x-design',

Then remove the calls from inside onMounted:

 onMounted(async () => {
   const server = new WebMcpServer()
-  const $router = useRouter()
-  const $route = useRoute()

   // TODO: ...
🤖 Prompt for AI Agents 
In `@template/tinyvue/src/App.vue` around lines 36 - 37, Move the calls to the Vue
composables useRouter() and useRoute() out of any lifecycle hooks and invoke
them at the top level of the <script setup> so they are called synchronously;
create top-level constants (e.g. const $router = useRouter(), const $route =
useRoute()) and then reference those $router and $route variables inside
onMounted (or other hooks) instead of calling useRouter()/useRoute() there.


// 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)
Copy link

@coderabbitai coderabbitai bot Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Potential path concatenation issue with slashes.

If VITE_CONTEXT ends with / and routerPath starts with /, this will produce double slashes (e.g., /context//path). Conversely, if neither has a slash, the path will be malformed.

Consider normalizing the path construction:

🔧 Proposed fix 
-      $router.push(import.meta.env.VITE_CONTEXT + routerPath)
+      const context = (import.meta.env.VITE_CONTEXT || '').replace(/\/$/, '')
+      const normalizedPath = routerPath.startsWith('/') ? routerPath : `/${routerPath}`
+      $router.push(context + normalizedPath)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
$router.push(import.meta.env.VITE_CONTEXT + routerPath)
const context = (import.meta.env.VITE_CONTEXT || '').replace(/\/$/, '')
const normalizedPath = routerPath.startsWith('/') ? routerPath : `/${routerPath}`
$router.push(context + normalizedPath)
🤖 Prompt for AI Agents 
In `@template/tinyvue/src/App.vue` at line 55, The router push concatenation can
produce double or missing slashes when combining import.meta.env.VITE_CONTEXT
and routerPath; update the code that calls
$router.push(import.meta.env.VITE_CONTEXT + routerPath) to normalize the two
parts so there is exactly one slash between them (trim a trailing '/' from
VITE_CONTEXT and ensure routerPath begins with a single '/' or vice versa)
before calling $router.push; reference the variables
import.meta.env.VITE_CONTEXT and routerPath and the call site $router.push(...)
when making the change.

return { content: [{ type: 'text', text: routerPath }] }
},
)
await server.connect(serverTransport)

// 创建 WebMcpClient ，并与 WebAgent 连接
const client = new WebMcpClient()
await client.connect(clientTransport)
Expand Down
Loading