feat: add mcp tool: switch-router #194
Conversation
WalkthroughAdds WebMcpServer functionality to App.vue with a new "switch-router" tool that enables route navigation through MCP protocol. The tool checks the current route path and either returns the existing path or navigates to a new one via the router context. Changes
Sequence Diagram(s)sequenceDiagram
participant Client as MCP Client
participant Server as WebMcpServer
participant Router as Vue Router
Client->>Server: Call tool "switch-router"<br/>(routerPath: "/target")
activate Server
Server->>Router: Check current route
Router-->>Server: Current path: "/current"
alt Route matches
Server-->>Client: Return current path
else Route differs
Server->>Router: Navigate to "/target"
Router->>Router: Update route
Server-->>Client: Return "/target"
end
deactivate Server
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@template/tinyvue/src/App.vue`:
- 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.
- Around line 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.
🧹 Nitpick comments (3)
template/tinyvue/src/App.vue (3)
44-45: Consider making the description more informative.The
titleanddescriptionare identical ('切换路由'). A more descriptive explanation would help users and AI agents understand when to use this tool.💡 Suggestion
{ title: '切换路由', - description: '切换路由', + description: '根据路由路径切换到指定页面。如果当前已在目标页面，则不执行跳转。', inputSchema: {
51-57: Tool response does not distinguish between "already at path" and "navigated".Both branches return the same
{ content: [{ type: 'text', text: routerPath }] }response. This makes it impossible for the caller to know if navigation actually occurred, which could be useful for debugging or conditional logic.💡 Suggestion
if ($route.path === routerPath) { - return { content: [{ type: 'text', text: routerPath }] } + return { content: [{ type: 'text', text: `Already at ${routerPath}` }] } } $router.push(import.meta.env.VITE_CONTEXT + routerPath) - return { content: [{ type: 'text', text: routerPath }] } + return { content: [{ type: 'text', text: `Navigated to ${routerPath}` }] }
39-40: TODO comments indicate incomplete implementation.The comments describe important usability improvements: users should be able to specify menu names rather than exact route paths, and the system should support compound actions (navigate + create). Consider tracking these in issues to ensure they're addressed.
Would you like me to open a GitHub issue to track these TODO items for future implementation?
| const $router = useRouter() | ||
| const $route = useRoute() |
There was a problem hiding this comment.
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.
| return { content: [{ type: 'text', text: routerPath }] } | ||
| } | ||
|
|
||
| $router.push(import.meta.env.VITE_CONTEXT + routerPath) |
There was a problem hiding this comment.
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.
| $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.
1 participant
PR
效果如下：
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Chores