shadcn-vue-mcp

Instructions

Implementation Reference

• src/core/tools.ts:110-150 (registration)

  Registration of the 'component-usage-doc' tool using server.addTool, including description, input schema with Zod validation, and execute handler.
  server.addTool({ name: "component-usage-doc", description: "read usage doc of a component， Use this tool when mentions /doc.", parameters: z.object({ // components | charts type: z.enum(["components", "charts"]).describe("type of the component"), name: z .string() .describe("name of the component in lowercase") .refine((name) => services.ComponentServices.isValidComponent(name), { message: "Component must be a valid shadcn/vue component", }), }), execute: async (params) => { try { const processedDoc = await services.ComponentServices.createComponentDoc( params.name, params.type ); // 在浏览器中打开markdown文档 const componentTitle = `${params.name} - shadcn/vue Component Documentation`; await services.WebViewService.openMarkdownInBrowser( processedDoc || "No documentation found for this component", componentTitle ); return { content: [ { type: "text", text: `${processedDoc}`, }, ], }; } catch (error) { console.error("Error executing tool:", error); throw error; } }, });
• src/core/services/componentServices.ts:361-373 (handler)

  Core handler logic in ComponentServices.createComponentDoc: fetches full doc, usage demos, replaces ComponentPreview tags with demo code.
  static async createComponentDoc(name: string, type: string) { const doc = await this.readFullComponentDoc({ type: type, name: name, }); const demos = await this.fetchUsageDemo(name); // 将文档中的 <ComponentPreview name="组件名" /> 替换为对应的 demo 代码 // 确保demos是数组类型 const demosArray = Array.isArray(demos) ? demos : []; const processedDoc = this.replaceComponentPreviewsWithCode(doc, demosArray); return processedDoc; }
• src/core/tools.ts:113-122 (schema)

  Input schema using Zod: type enum ['components','charts'], name string validated by ComponentServices.isValidComponent
  parameters: z.object({ // components | charts type: z.enum(["components", "charts"]).describe("type of the component"), name: z .string() .describe("name of the component in lowercase") .refine((name) => services.ComponentServices.isValidComponent(name), { message: "Component must be a valid shadcn/vue component", }), }),
• src/core/services/webViewService.ts:13-39 (helper)

  Helper function to convert markdown to styled HTML and open in browser.
  static async openMarkdownInBrowser( markdownContent: string, title: string = "Component Documentation" ): Promise<void> { try { // 将markdown转换为HTML const htmlContent = await marked(markdownContent); // 创建完整的HTML页面 const fullHtml = this.createHtmlPage(htmlContent, title); // 创建临时文件 const tempDir = os.tmpdir(); const tempFilePath = path.join(tempDir, `component-doc-${Date.now()}.html`); // 写入HTML文件 fs.writeFileSync(tempFilePath, fullHtml, "utf8"); // 在浏览器中打开 await open(tempFilePath); console.log(`Documentation opened in browser: ${tempFilePath}`); } catch (error) { console.error("Error opening markdown in browser:", error); throw error; } }
• src/core/services/componentServices.ts:407-409 (helper)

  Validation helper isValidComponent used in schema refine to check if component name exists in predefined lists.
  static isValidComponent(name: string): name is ShadcnVueComponent | ShadcnVueChartComponent { return name in SHADCN_VUE_COMPONENTS || name in SHADCN_VUE_CHART_COMPONENTS; }