feat: vue-i18n mcp (experimental)

docs/.vitepress/client.ts

@@ -0,0 +1,63 @@
+import { Client } from '@modelcontextprotocol/sdk/client/index.js'
+import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js"
+import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js'
+
+
+async function main() {
+  let client: Client
+  const baseUrl = 'http://localhost:5173/__mcp'
+
+  try {
+    const transport = new StreamableHTTPClientTransport(new URL(baseUrl))
+    client = new Client(
+      {
+        name: 'vue-i18n-docs-client',
+        version: '0.0.1'
+      },
+      {
+        capabilities: {
+          sampling: {}
+        }
+      }
+    )
+    await client.connect(transport)
+    console.log('connected to server')
+  } catch (error) {
+    console.error('Failed to connect using Streamable HTTP transport:', error)
+
+    console.log('Streamable HTTP connection failed, falling back to SSE transport')
+    client = new Client({
+      name: 'vue-i18n-docs-sse-client',
+      version: '0.0.1'
+    });
+    const sseTransport = new SSEClientTransport(new URL(`${baseUrl}/sse`))
+    await client.connect(sseTransport)
+    console.log('Connected using SSE transport')
+  }
+
+  const version = await client.getServerVersion()
+  console.log('Server version:', version)
+
+  // List tools
+  const tools = await client.listTools()
+  console.log('list tools', tools)
+
+  // List resources
+  const resources = await client.listResources()
+  console.log('list resources', resources)
+  const resourceTemplates = await client.listResourceTemplates()
+  console.log('list resource templates', resourceTemplates)
+  const contents = await client.readResource({
+    uri: 'vue-i18n://docs'
+  })
+  // console.log('read resource', contents)
+  // const page = await client.readResource({
+  //   uri: 'vue-i18n://docs{page}',
+  //   params: {
+  //     page: '/guide/installation.md'
+  //   }
+  // })
+  // console.log('read page', page)
+}
+
+main()

docs/.vitepress/config.mts

@@ -1,10 +1,14 @@
-import type { HeadConfig } from 'vitepress'
+import { ViteMcp as mcp } from 'vite-plugin-mcp'
 import { defineConfig } from 'vitepress'
 import llmstxt from 'vitepress-plugin-llms'
+import pkg from '../../package.json' with { type: 'json' }
+import mcpServer from './mcp'
+
+import type { HeadConfig } from 'vitepress'
 
 const head: HeadConfig[] = [['link', { rel: 'icon', href: '/vue-i18n-logo.png' }]]
 
-export default defineConfig({
+const config = defineConfig({
   title: 'Vue I18n',
   description: 'Internationalization plugin for Vue.js',
 
@@ -15,7 +19,15 @@ export default defineConfig({
   markdown: { attrs: { disable: true } },
 
   vite: {
-    plugins: [llmstxt()]
+    plugins: [llmstxt(), mcp(
+      {
+        mcpServerInfo: {
+          name: 'Vue I18n MCP Docs',
+          version: pkg.version
+        },
+        mcpServerSetup: mcpServer
+      }
+    )]
   },
 
   themeConfig: {
@@ -304,3 +316,5 @@ function sidebarEcosystem() {
     }
   ]
 }
+
+export default config

docs/.vitepress/mcp.ts

@@ -0,0 +1,124 @@
+import { ResourceTemplate } from '@modelcontextprotocol/sdk/server/mcp.js'
+import { existsSync } from 'node:fs'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+
+import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import type { ViteDevServer } from 'vite'
+import type { DefaultTheme, SiteConfig, SiteData } from 'vitepress'
+
+type Awaitable<T> = T | PromiseLike<T>;
+
+export default async function mcp(mcpServer: McpServer, viteServer: ViteDevServer): Awaitable<void | McpServer> {
+  const vitepress = (viteServer.config as any).vitepress as SiteConfig
+  const docRootDir = vitepress.srcDir
+  const docFiles = (vitepress.pages || []).map(page => path.resolve(docRootDir, page)).filter(file => existsSync(file))
+  console.log('VitePress pages:', docFiles)
+  const themeConfig = vitepress.site.themeConfig as DefaultTheme.Config
+  console.log('VitePress site config:', vitepress)
+  // console.log('Setting up MCP server for Vue I18n docs...', themeConfig.sidebar)
+  const sidebarDirs = await getSidebarDirNames(docRootDir)
+  console.log('Sidebar:', themeConfig.sidebar, sidebarDirs)
+  // for (const [key, value] of Object.entries(themeConfig.sidebar || {})) {
+  //   console.log(`Sidebar item: ${key}`)
+  //   const items = (themeConfig.sidebar || {})[key] as DefaultTheme.SidebarItem[]
+  //   for (const item of items) {
+  //     console.log(item.text, item)
+  //   }
+  // }
+
+  // @ts-expect-error -- FIXME:
+  mcpServer.resource('contents', 'vue-i18n://docs', {
+    uri: 'vue-i18n://docs',
+    name: 'Vue I18n Documentation top',
+    description: 'Vue I18n documentation root, provides categories and links to documentation pages.',
+  }, async (uri) => {
+    const content = renderMarkdownTop(vitepress.site, getSideBar(sidebarDirs, themeConfig.sidebar || {}))
+    return {
+      contents: [
+        {
+          uri,
+          text: content,
+        }
+      ]
+    }
+  })
+
+  const pageUri = 'vue-i18n://docs{page}'
+  const pageTempalte = new ResourceTemplate(pageUri, { list: undefined })
+  mcpServer.resource('pages', pageTempalte, {
+    uri: pageUri,
+    name: 'Vue I18n Documentation page',
+    description: 'Vue I18n documentation page content',
+  }, async (uri, params) => {
+    console.log('Fetching page:', uri, params)
+    const p = Array.isArray(params.page) ? params.page[0] : params.page
+    const pagePath = path.resolve(docRootDir, p)
+    const file = await fs.readFile(pagePath, 'utf-8')
+    return {
+      contents: [{
+        uri: uri.href,
+        text: file,
+      }]
+    }
+  })
+
+  return mcpServer
+}
+
+function renderMarkdownTop(site: SiteData, sidebar: ReturnType<typeof getSideBar>) {
+  return `# ${site.title}
+
+${site.description}
+
+## Table of Contents
+
+${Object.entries(sidebar).map(([_caegory, items]) => {
+    const buf = [] as string[]
+    items.reduce((acc, item) => {
+      acc.push(`### ${item.text}`, '')
+      const items = (item.items || []) as DefaultTheme.SidebarItem[]
+      const itemBuf = [] as string[]
+      for (const subItem of items) {
+        if (subItem.link) {
+          itemBuf.push(`- [${subItem.text}](${subItem.link.endsWith('.md') ? subItem.link : `${subItem.link}.md`})`)
+        }
+      }
+      itemBuf.push('')
+
+      if (itemBuf.length) {
+        acc.push(itemBuf.join('\n'))
+      }
+      return acc
+    }, buf)
+    return buf.join('\n')
+  }).join('\n\n')
+    }
+`
+}
+
+function getSideBar(sidebarDirs: string[], sideBar: DefaultTheme.Sidebar) {
+  return Object.keys(sideBar).reduce((acc, key) => {
+    const category = key.split('/').filter(Boolean)[0]
+    if (sidebarDirs.includes(category)) {
+      acc[category] = sideBar[key] || []
+    }
+    return acc
+  }, {} as { [key: string]: DefaultTheme.SidebarItem[] })
+}
+
+const EXCLUDE_DIR_NAMES = [
+  '.vitepress',
+  'index.md',
+  'public',
+]
+
+async function getSidebarDirNames(root: string): Promise<string[]> {
+  const dirs = await fs.readdir(root, { withFileTypes: true });
+  return dirs.reduce((acc, dir) => {
+    if (dir.isDirectory() && !EXCLUDE_DIR_NAMES.includes(dir.name)) {
+      acc.push(dir.name)
+    }
+    return acc
+  }, [] as string[])
+}

eslint.config.mjs

@@ -85,6 +85,7 @@ export default [
   // ignore globally
   {
     ignores: [
+      'tools/mcp/**',
       '**/dist/**',
       '**/fixtures/**',
       '**/coverage/**',

package.json

@@ -55,6 +55,7 @@
     "docs:dev": "vitepress dev docs",
     "docs:serve": "vitepress serve docs",
     "docs:setup": "pnpm build:typed && pnpm docs:apigen",
+    "docs:dev:mcp": "tsx docs/.vitepress/client.ts",
     "eslint:inspector": "npx @eslint/config-inspector",
     "example:ssr": "cd examples/ssr/vite && pnpm dev",
     "fix": "run-p lint:fix format:fix",
@@ -160,6 +161,9 @@
     "typescript-eslint": "^8.4.0",
     "vitepress": "1.6.3",
     "vitepress-plugin-llms": "^1.1.0",
+    "vite-plugin-mcp": "^0.2.2",
+    "@modelcontextprotocol/sdk": "^1.12.0",
+    "vite": "^6.0.0",
     "vitest": "^2.1.5",
     "vue": "3.5.13",
     "vue-i18n": "workspace:*"