docs(mcp): call tools directly instead of self-referential HTTP

Author: benjamincanac

docs/server/api/ai.post.ts

@@ -1,9 +1,41 @@
 import { streamText, convertToModelMessages, smoothStream, jsonSchema, stepCountIs } from 'ai'
 import type { AnthropicLanguageModelOptions } from '@ai-sdk/anthropic'
-import { createMCPClient } from '@ai-sdk/mcp'
 import { gateway } from '@ai-sdk/gateway'
+import { z } from 'zod'
+// @ts-expect-error virtual module generated by @nuxtjs/mcp-toolkit
+import { tools as mcpToolDefinitions } from '#nuxt-mcp-toolkit/tools.mjs'
 import { themeIcons, cssVariableDefaults } from '../../app/utils/theme'
 
+function mcpToolsToAiTools() {
+  const aiTools: Record<string, { description: string, inputSchema: ReturnType<typeof jsonSchema>, execute: (args: any) => Promise<any> }> = {}
+
+  for (const def of mcpToolDefinitions as any[]) {
+    const filename = def._meta?.filename as string | undefined
+    const name = def.name || (filename
+      ? filename.replace(/\.(ts|js|mts|mjs)$/, '').replace(/([a-z0-9])([A-Z])/g, '$1-$2').replace(/[_\s]+/g, '-').toLowerCase()
+      : null)
+    if (!name) continue
+
+    const schema = def.inputSchema
+      ? z.toJSONSchema(z.object(def.inputSchema)) as Record<string, unknown>
+      : { type: 'object' as const, properties: {} }
+
+    aiTools[name] = {
+      description: def.description || '',
+      inputSchema: jsonSchema(schema),
+      execute: async (args: any) => {
+        try {
+          return await def.handler(args, {})
+        } catch (error: any) {
+          return { error: error.statusCode ? `[${error.statusCode}] ${error.message}` : error.message || String(error) }
+        }
+      }
+    }
+  }
+
+  return aiTools
+}
+
 const applyTheme = {
   description: 'Apply theme settings live on the docs site. Call this when users ask to change colors, radius, font, or other theme properties. Only include properties that changed.',
   inputSchema: jsonSchema<Record<string, any>>({
@@ -298,30 +330,11 @@ export default defineEventHandler(async (event) => {
     }
   }
 
-  let httpClient
-  let mcpTools
-  try {
-    const mcpUrl = import.meta.dev
-      ? new URL('/mcp', getRequestURL(event).origin).href
-      : 'https://ui.nuxt.com/mcp'
-    httpClient = await createMCPClient({
-      transport: { type: 'http', url: mcpUrl }
-    })
-    mcpTools = await httpClient.tools()
-  } catch (error) {
-    console.error('MCP client error:', error)
-
-    throw createError({
-      statusCode: 503,
-      message: 'Unable to connect to the documentation service. Please try again later.'
-    })
-  }
+  const mcpTools = mcpToolsToAiTools()
 
   const abortController = new AbortController()
   event.node.req.on('close', () => abortController.abort())
 
-  const closeMcp = () => event.waitUntil(httpClient?.close())
-
   const system = `You are a helpful assistant for Nuxt UI, a UI library for Nuxt and Vue. Nuxt UI includes \`@nuxt/fonts\` and \`@nuxt/icon\` as built-in dependencies — never tell users to install them separately. Use your knowledge base tools to search for relevant information before answering questions.
 
 The user is using **${framework === 'vue' ? 'Vue' : 'Nuxt'}**. Tailor your answers accordingly — ${framework === 'vue' ? 'use the Vite plugin setup, Vue Router, and vite.config.ts instead of Nuxt-specific features like modules or app.config.ts. IMPORTANT: The Vite plugin auto-imports components and Nuxt UI composables, but Vue core APIs and VueUse must be explicitly imported — always include these in code examples (e.g. `import { ref, computed } from \'vue\'`, `import { useColorMode } from \'@vueuse/core\'`).' : 'use Nuxt modules, auto-imports, app.config.ts, and other Nuxt-specific features. Nuxt auto-imports Vue APIs (ref, computed, etc.), composables, and components — do not include these imports in code examples.'}
@@ -376,11 +389,8 @@ Guidelines:
       resetTheme,
       getComponentTheme
     },
-    onFinish: closeMcp,
-    onAbort: closeMcp,
     onError: (error) => {
       console.error('streamText error:', error)
-      closeMcp()
     }
   }).toUIMessageStreamResponse()
 })